diff --git a/apps/web/app/(app)/[emailAccountId]/stats/RuleStatsChart.tsx b/apps/web/app/(app)/[emailAccountId]/stats/RuleStatsChart.tsx
index 9d7d7d4cff..aac1d8fbb1 100644
--- a/apps/web/app/(app)/[emailAccountId]/stats/RuleStatsChart.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/stats/RuleStatsChart.tsx
@@ -3,8 +3,23 @@
 import { BarChart, Card, Title } from "@tremor/react";
 import { useMemo } from "react";
 import type { DateRange } from "react-day-picker";
+import { LabelList, Pie, PieChart } from "recharts";
+import { fromPairs } from "lodash";
 import { LoadingContent } from "@/components/LoadingContent";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Card as ShadcnCard,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getDateRangeParams } from "./params";
 import { useOrgSWR } from "@/hooks/useOrgSWR";
 import type { RuleStatsResponse } from "@/app/api/user/stats/rule-stats/route";
@@ -14,6 +29,14 @@ interface RuleStatsChartProps {
   title: string;
 }
 
+const CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
+
 export function RuleStatsChart({ dateRange, title }: RuleStatsChartProps) {
   const params = getDateRangeParams(dateRange);
 
@@ -21,12 +44,39 @@ export function RuleStatsChart({ dateRange, title }: RuleStatsChartProps) {
     `/api/user/stats/rule-stats?${new URLSearchParams(params as Record<string, string>)}`,
   );
 
-  const chartData = useMemo(() => {
-    if (!data?.groupStats) return [];
-    return data.groupStats.map((group) => ({
-      group: group.groupName,
-      "Executed Rules": group.executedCount,
+  const barChartData = useMemo(() => {
+    if (!data?.ruleStats) return [];
+    return data.ruleStats.map((rule) => ({
+      group: rule.ruleName,
+      "Executed Rules": rule.executedCount,
+    }));
+  }, [data]);
+
+  const { pieChartData, chartConfig } = useMemo(() => {
+    if (!data?.ruleStats) return { pieChartData: [], chartConfig: {} };
+
+    const pieData = data.ruleStats.map((rule, index) => ({
+      name: rule.ruleName,
+      value: rule.executedCount,
+      fill: CHART_COLORS[index % CHART_COLORS.length],
     }));
+
+    const config: ChartConfig = {
+      value: {
+        label: "Executed Rules",
+      },
+      ...fromPairs(
+        data.ruleStats.map((rule, index) => [
+          rule.ruleName,
+          {
+            label: rule.ruleName,
+            color: CHART_COLORS[index % CHART_COLORS.length],
+          },
+        ]),
+      ),
+    };
+
+    return { pieChartData: pieData, chartConfig: config };
   }, [data]);
 
   return (
@@ -35,21 +85,64 @@ export function RuleStatsChart({ dateRange, title }: RuleStatsChartProps) {
       error={error}
       loadingComponent={<Skeleton className="h-64 w-full rounded" />}
     >
-      {data && chartData.length > 0 && (
-        <Card>
-          <Title>{title}</Title>
-          <BarChart
-            className="mt-4 h-72"
-            data={chartData}
-            index="group"
-            categories={["Executed Rules"]}
-            colors={["blue"]}
-            showLegend={false}
-            showGridLines={true}
-          />
-        </Card>
+      {data && barChartData.length > 0 && (
+        <Tabs defaultValue="bar">
+          <Card>
+            <div className="flex items-center justify-between">
+              <Title>{title}</Title>
+              <TabsList>
+                <TabsTrigger value="bar">Bar Chart</TabsTrigger>
+                <TabsTrigger value="pie">Pie Chart</TabsTrigger>
+              </TabsList>
+            </div>
+
+            <TabsContent value="bar">
+              <BarChart
+                className="mt-4 h-72"
+                data={barChartData}
+                index="group"
+                categories={["Executed Rules"]}
+                colors={["blue"]}
+                showLegend={false}
+                showGridLines={true}
+              />
+            </TabsContent>
+
+            <TabsContent value="pie">
+              <ShadcnCard className="border-0 shadow-none">
+                <CardHeader className="items-center pb-0">
+                  <CardTitle className="text-base font-normal text-muted-foreground">
+                    Rule Execution Distribution
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="flex-1 pb-0">
+                  <ChartContainer
+                    config={chartConfig}
+                    className="mx-auto aspect-square max-h-[300px] [&_.recharts-text]:fill-background"
+                  >
+                    <PieChart>
+                      <ChartTooltip
+                        content={
+                          <ChartTooltipContent nameKey="value" hideLabel />
+                        }
+                      />
+                      <Pie data={pieChartData} dataKey="value">
+                        <LabelList
+                          dataKey="name"
+                          className="fill-background"
+                          stroke="none"
+                          fontSize={12}
+                        />
+                      </Pie>
+                    </PieChart>
+                  </ChartContainer>
+                </CardContent>
+              </ShadcnCard>
+            </TabsContent>
+          </Card>
+        </Tabs>
       )}
-      {data && chartData.length === 0 && (
+      {data && barChartData.length === 0 && (
         <Card>
           <Title>{title}</Title>
           <div className="mt-4 h-72 flex items-center justify-center text-muted-foreground">
diff --git a/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx b/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
index 8307564b2e..490260916a 100644
--- a/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
@@ -105,6 +105,11 @@ export function Stats() {
           />
         )}
 
+        <RuleStatsChart
+          dateRange={dateRange}
+          title="Assistant processed emails"
+        />
+
         <DetailedStats
           dateRange={dateRange}
           period={period}
@@ -121,11 +126,6 @@ export function Stats() {
         </CardBasic>
 
         {isAccountOwner && <EmailActionsAnalytics />}
-
-        <RuleStatsChart
-          dateRange={dateRange}
-          title="Assistant processed emails"
-        />
       </div>
 
       <StatsOnboarding />
diff --git a/apps/web/app/api/user/stats/rule-stats/route.ts b/apps/web/app/api/user/stats/rule-stats/route.ts
index a3566104b2..f8ceb2eb70 100644
--- a/apps/web/app/api/user/stats/rule-stats/route.ts
+++ b/apps/web/app/api/user/stats/rule-stats/route.ts
@@ -1,7 +1,9 @@
 import { NextResponse } from "next/server";
+import { z } from "zod";
+import sumBy from "lodash/sumBy";
 import prisma from "@/utils/prisma";
 import { withEmailAccount } from "@/utils/middleware";
-import { z } from "zod";
+import { Prisma } from "@prisma/client";
 
 const ruleStatsQuery = z.object({
   fromDate: z.coerce.number().nullish(),
@@ -19,60 +21,42 @@ async function getRuleStats({
   fromDate?: number;
   toDate?: number;
 }) {
-  const dateFilter: { gte?: Date; lte?: Date } = {};
+  // Build WHERE conditions as SQL fragments
+  const conditions: Prisma.Sql[] = [
+    Prisma.sql`er."emailAccountId" = ${emailAccountId}`,
+  ];
+
   if (typeof fromDate === "number" && Number.isFinite(fromDate)) {
-    dateFilter.gte = new Date(fromDate);
+    conditions.push(Prisma.sql`er."createdAt" >= ${new Date(fromDate)}`);
   }
   if (typeof toDate === "number" && Number.isFinite(toDate)) {
-    dateFilter.lte = new Date(toDate);
+    conditions.push(Prisma.sql`er."createdAt" <= ${new Date(toDate)}`);
   }
 
-  const executedRules = await prisma.executedRule.findMany({
-    where: {
-      emailAccountId,
-      ...(Object.keys(dateFilter).length > 0 && { createdAt: dateFilter }),
-    },
-    include: {
-      rule: {
-        include: {
-          group: {
-            select: {
-              name: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  const groupStats = executedRules.reduce(
-    (acc, executedRule) => {
-      const groupName = executedRule.rule?.group?.name || "No Group";
-
-      if (!acc[groupName]) {
-        acc[groupName] = {
-          groupName,
-          executedCount: 0,
-        };
-      }
+  const whereClause = Prisma.join(conditions, " AND ");
 
-      acc[groupName].executedCount += 1;
-      return acc;
-    },
-    {} as Record<string, { groupName: string; executedCount: number }>,
-  );
+  const results = await prisma.$queryRaw<
+    Array<{ rule_name: string; executed_count: bigint }>
+  >(Prisma.sql`
+    SELECT 
+      COALESCE(r.name, 'No Rule') AS rule_name,
+      COUNT(er.id) AS executed_count
+    FROM "ExecutedRule" er
+    LEFT JOIN "Rule" r ON er."ruleId" = r.id
+    WHERE ${whereClause}
+    GROUP BY r.name
+    ORDER BY executed_count DESC
+  `);
 
-  const groupStatsArray = Object.values(groupStats).sort(
-    (a, b) => b.executedCount - a.executedCount,
-  );
+  const ruleStats = results.map((row) => ({
+    ruleName: row.rule_name,
+    executedCount: Number(row.executed_count),
+  }));
 
-  const totalExecutedRules = groupStatsArray.reduce(
-    (sum, group) => sum + group.executedCount,
-    0,
-  );
+  const totalExecutedRules = sumBy(ruleStats, (rs) => rs.executedCount);
 
   return {
-    groupStats: groupStatsArray,
+    ruleStats,
     totalExecutedRules,
   };
 }
diff --git a/apps/web/components/ui/chart.tsx b/apps/web/components/ui/chart.tsx
new file mode 100644
index 0000000000..cda082af74
--- /dev/null
+++ b/apps/web/components/ui/chart.tsx
@@ -0,0 +1,370 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/utils/index";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+              const key = `${nameKey || item.name || item.dataKey || "value"}`;
+              const itemConfig = getPayloadConfigFromPayload(config, item, key);
+              const indicatorColor = color || item.payload.fill || item.color;
+
+              return (
+                <div
+                  key={item.dataKey}
+                  className={cn(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    indicator === "dot" && "items-center",
+                  )}
+                >
+                  {formatter && item?.value !== undefined && item.name ? (
+                    formatter(item.value, item.name, item, index, item.payload)
+                  ) : (
+                    <>
+                      {itemConfig?.icon ? (
+                        <itemConfig.icon />
+                      ) : (
+                        !hideIndicator && (
+                          <div
+                            className={cn(
+                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              {
+                                "h-2.5 w-2.5": indicator === "dot",
+                                "w-1": indicator === "line",
+                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                                  indicator === "dashed",
+                                "my-0.5": nestLabel && indicator === "dashed",
+                              },
+                            )}
+                            style={
+                              {
+                                "--color-bg": indicatorColor,
+                                "--color-border": indicatorColor,
+                              } as React.CSSProperties
+                            }
+                          />
+                        )
+                      )}
+                      <div
+                        className={cn(
+                          "flex flex-1 justify-between leading-none",
+                          nestLabel ? "items-end" : "items-center",
+                        )}
+                      >
+                        <div className="grid gap-1.5">
+                          {nestLabel ? tooltipLabel : null}
+                          <span className="text-muted-foreground">
+                            {itemConfig?.label || item.name}
+                          </span>
+                        </div>
+                        {item.value && (
+                          <span className="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item) => {
+            const key = `${nameKey || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+            return (
+              <div
+                key={item.value}
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+            );
+          })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/apps/web/package.json b/apps/web/package.json
index 5736473014..44e9751ca8 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -145,6 +145,7 @@
     "react-syntax-highlighter": "15.6.6",
     "react-textarea-autosize": "8.5.9",
     "react-youtube": "10.1.0",
+    "recharts": "2.15.4",
     "remark-gfm": "4.0.1",
     "sanity-plugin-markdown": "6.0.0",
     "schema-dts": "1.1.5",
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 6ecb3da842..e2b1129789 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -43,6 +43,12 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --chart-1: oklch(0.75 0.15 250);
+    --chart-2: oklch(0.65 0.18 250);
+    --chart-3: oklch(0.55 0.2 250);
+    --chart-4: oklch(0.45 0.22 250);
+    --chart-5: oklch(0.35 0.18 250);
   }
 
   .dark {
@@ -65,11 +71,11 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --chart-1: oklch(0.7 0.2 250);
+    --chart-2: oklch(0.6 0.22 250);
+    --chart-3: oklch(0.5 0.24 250);
+    --chart-4: oklch(0.4 0.22 250);
+    --chart-5: oklch(0.3 0.18 250);
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d4a0f51aa..a34a333ad7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -486,6 +486,9 @@ importers:
       react-youtube:
         specifier: 10.1.0
         version: 10.1.0(react@19.1.1)
+      recharts:
+        specifier: 2.15.4
+        version: 2.15.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       remark-gfm:
         specifier: 4.0.1
         version: 4.0.1
diff --git a/version.txt b/version.txt
index 839d54f2fe..47aff0ca58 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-v2.16.3
+v2.16.4