diff --git a/apps/web/app/admin.dub.co/components/send-thanks.tsx b/apps/web/app/admin.dub.co/components/send-thanks.tsx
new file mode 100644
index 0000000000..99800e28d3
--- /dev/null
+++ b/apps/web/app/admin.dub.co/components/send-thanks.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { LoadingSpinner } from "@dub/ui";
+import { cn } from "@dub/utils";
+import { useFormStatus } from "react-dom";
+import { toast } from "sonner";
+
+export default function SendThanks() {
+  return (
+    <div className="flex flex-col space-y-5">
+      <form
+        action={async (formData) => {
+          if (
+            !confirm(
+              `This will send an email to ${formData.get("email")} with a thank you message. Are you sure?`,
+            )
+          ) {
+            return;
+          }
+          await fetch("/api/admin/send-thanks", {
+            method: "POST",
+            body: JSON.stringify({
+              email: formData.get("email"),
+            }),
+          }).then(async (res) => {
+            if (res.ok) {
+              toast.success("Successfully sent email");
+            } else {
+              const error = await res.text();
+              toast.error(error);
+            }
+          });
+        }}
+      >
+        <Form />
+      </form>
+    </div>
+  );
+}
+
+const Form = () => {
+  const { pending } = useFormStatus();
+
+  return (
+    <div className="relative flex w-full rounded-md shadow-sm">
+      <input
+        name="email"
+        id="email"
+        type="email"
+        required
+        disabled={pending}
+        autoComplete="off"
+        className={cn(
+          "block w-full rounded-md border-gray-300 text-sm text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:outline-none focus:ring-gray-500",
+          pending && "bg-gray-100",
+        )}
+        placeholder="stey@vercel.com"
+        aria-invalid="true"
+      />
+      {pending && (
+        <LoadingSpinner className="absolute inset-y-0 right-2 my-auto h-full w-5 text-gray-400" />
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/app/admin.dub.co/page.tsx b/apps/web/app/admin.dub.co/page.tsx
index d36c7ba41f..f339c13a92 100644
--- a/apps/web/app/admin.dub.co/page.tsx
+++ b/apps/web/app/admin.dub.co/page.tsx
@@ -2,6 +2,7 @@ import { constructMetadata } from "@dub/utils";
 import ImpersonateUser from "./components/impersonate-user";
 import ImpersonateWorkspace from "./components/impersonate-workspace";
 import RefreshDomain from "./components/refresh-domain";
+import SendThanks from "./components/send-thanks";
 
 export const metadata = constructMetadata({
   title: "Dub Admin",
@@ -13,13 +14,13 @@ export default function AdminPage() {
     <div className="mx-auto flex w-full max-w-screen-sm flex-col divide-y divide-gray-200 overflow-auto bg-white">
       <div className="flex flex-col space-y-4 px-5 py-10">
         <h2 className="text-xl font-semibold">Impersonate User</h2>
-        <p className="text-sm text-gray-500">Get a login link for a user.</p>
+        <p className="text-sm text-gray-500">Get a login link for a user</p>
         <ImpersonateUser />
       </div>
       <div className="flex flex-col space-y-4 px-5 py-10">
         <h2 className="text-xl font-semibold">Impersonate Workspace</h2>
         <p className="text-sm text-gray-500">
-          Get a login link for the owner of a workspace.
+          Get a login link for the owner of a workspace
         </p>
         <ImpersonateWorkspace />
       </div>
@@ -30,6 +31,11 @@ export default function AdminPage() {
         </p>
         <RefreshDomain />
       </div>
+      <div className="flex flex-col space-y-4 px-5 py-10">
+        <h2 className="text-xl font-semibold">Send Thanks</h2>
+        <p className="text-sm text-gray-500">Send thank you email to a user</p>
+        <SendThanks />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/app/api/admin/send-thanks/route.ts b/apps/web/app/api/admin/send-thanks/route.ts
new file mode 100644
index 0000000000..5b0b0b9b94
--- /dev/null
+++ b/apps/web/app/api/admin/send-thanks/route.ts
@@ -0,0 +1,23 @@
+import { withAdmin } from "@/lib/auth";
+import { sendEmail } from "emails";
+import UpgradeEmail from "emails/upgrade-email";
+import { NextResponse } from "next/server";
+
+// POST /api/admin/send-thanks
+export const POST = withAdmin(async ({ req }) => {
+  const { email } = await req.json();
+
+  await sendEmail({
+    email,
+    subject: "Thank you for upgrading to Dub.co Pro!",
+    react: UpgradeEmail({
+      name: null,
+      email,
+      plan: "pro",
+    }),
+    marketing: true,
+    bcc: process.env.TRUSTPILOT_BCC_EMAIL,
+  });
+
+  return NextResponse.json({ success: true });
+});
diff --git a/apps/web/emails/index.ts b/apps/web/emails/index.ts
index f9b3cc59fa..19f0def350 100644
--- a/apps/web/emails/index.ts
+++ b/apps/web/emails/index.ts
@@ -10,6 +10,7 @@ export const sendEmail = async ({
   email,
   subject,
   from,
+  bcc,
   text,
   react,
   marketing,
@@ -17,6 +18,7 @@ export const sendEmail = async ({
   email: string;
   subject: string;
   from?: string;
+  bcc?: string;
   text?: string;
   react?: ReactElement<any, string | JSXElementConstructor<any>>;
   marketing?: boolean;
@@ -44,6 +46,7 @@ export const sendEmail = async ({
           ? "system@dub.co"
           : `${process.env.NEXT_PUBLIC_APP_NAME} <system@${process.env.NEXT_PUBLIC_APP_DOMAIN}>`,
     To: email,
+    Bcc: bcc,
     ReplyTo: process.env.NEXT_PUBLIC_IS_DUB
       ? "support@dub.co"
       : `support@${process.env.NEXT_PUBLIC_APP_DOMAIN}`,
diff --git a/apps/web/lib/zod/schemas/analytics.ts b/apps/web/lib/zod/schemas/analytics.ts
index a767e4a937..5416a08621 100644
--- a/apps/web/lib/zod/schemas/analytics.ts
+++ b/apps/web/lib/zod/schemas/analytics.ts
@@ -92,26 +92,92 @@ export const analyticsQuerySchema = z.object({
     .optional()
     .describe("The country to retrieve analytics for.")
     .openapi({ ref: "countryCode" }),
-  city: z.string().optional().describe("The city to retrieve analytics for."),
+  city: z
+    .string()
+    .optional()
+    .describe("The city to retrieve analytics for.")
+    .openapi({
+      examples: [
+        "New York",
+        "Los Angeles",
+        "Chicago",
+        "Houston",
+        "Phoenix",
+        "Philadelphia",
+        "San Antonio",
+        "San Diego",
+        "Dallas",
+        "Tokyo",
+        "Delhi",
+        "Shanghai",
+        "São Paulo",
+        "Mumbai",
+        "Beijing",
+      ],
+    }),
   device: z
     .string()
     .optional()
     .transform((v) => capitalize(v) as string | undefined)
-    .describe("The device to retrieve analytics for."),
+    .describe("The device to retrieve analytics for.")
+    .openapi({
+      examples: ["Desktop", "Mobile", "Tablet", "Wearable", "Smarttv"],
+    }),
   browser: z
     .string()
     .optional()
     .transform((v) => capitalize(v) as string | undefined)
-    .describe("The browser to retrieve analytics for."),
+    .describe("The browser to retrieve analytics for.")
+    .openapi({
+      examples: [
+        "Chrome",
+        "Mobile Safari",
+        "Edge",
+        "Instagram",
+        "Firefox",
+        "Facebook",
+        "WebKit",
+        "Samsung Browser",
+        "Chrome WebView",
+        "Safari",
+        "Opera",
+        "IE",
+        "Yandex",
+      ],
+    }),
   os: z
     .string()
     .optional()
     .transform((v) => capitalize(v) as string | undefined)
-    .describe("The OS to retrieve analytics for."),
+    .describe("The OS to retrieve analytics for.")
+    .openapi({
+      examples: [
+        "Windows",
+        "iOS",
+        "Android",
+        "Mac OS",
+        "Linux",
+        "Ubuntu",
+        "Chromium OS",
+        "Fedora",
+      ],
+    }),
   referer: z
     .string()
     .optional()
-    .describe("The referer to retrieve analytics for."),
+    .describe("The referer to retrieve analytics for.")
+    .openapi({
+      examples: [
+        "(direct)",
+        "t.co",
+        "youtube.com",
+        "perplexity.ai",
+        "l.instagram.com",
+        "m.facebook.com",
+        "linkedin.com",
+        "google.com",
+      ],
+    }),
   url: z.string().optional().describe("The URL to retrieve analytics for."),
   tagId: z
     .string()
diff --git a/apps/web/ui/analytics/referer-icon.tsx b/apps/web/ui/analytics/referer-icon.tsx
new file mode 100644
index 0000000000..7458a4042f
--- /dev/null
+++ b/apps/web/ui/analytics/referer-icon.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@dub/utils";
+import { Link2 } from "lucide-react";
+import LinkLogo from "../links/link-logo";
+
+export default function RefererIcon({
+  display,
+  className,
+}: {
+  display: string;
+  className?: string;
+}) {
+  return display === "(direct)" ? (
+    <Link2 className={cn("h-4 w-4", className)} />
+  ) : (
+    <LinkLogo
+      apexDomain={display}
+      className={cn("h-4 w-4 sm:h-4 sm:w-4", className)}
+    />
+  );
+}
diff --git a/apps/web/ui/analytics/referer.tsx b/apps/web/ui/analytics/referer.tsx
index cbbef5ebed..5839592cb6 100644
--- a/apps/web/ui/analytics/referer.tsx
+++ b/apps/web/ui/analytics/referer.tsx
@@ -1,96 +1,11 @@
-import { BlurImage, Modal, useRouterStuff } from "@dub/ui";
+import { BlurImage, useRouterStuff } from "@dub/ui";
 import { GOOGLE_FAVICON_URL } from "@dub/utils";
-import { Link2, Maximize } from "lucide-react";
-import { useState } from "react";
+import { Link2 } from "lucide-react";
 import { AnalyticsCard } from "./analytics-card";
 import { AnalyticsLoadingSpinner } from "./analytics-loading-spinner";
 import BarList from "./bar-list";
 import { useAnalyticsFilterOption } from "./utils";
 
-function RefererOld() {
-  const data = useAnalyticsFilterOption("referers");
-
-  const { queryParams } = useRouterStuff();
-  const [showModal, setShowModal] = useState(false);
-
-  const barList = (limit?: number) => (
-    <BarList
-      tab="Referrer"
-      data={
-        data?.map((d) => ({
-          icon:
-            d.referer === "(direct)" ? (
-              <Link2 className="h-4 w-4" />
-            ) : (
-              <BlurImage
-                src={`${GOOGLE_FAVICON_URL}${d.referer}`}
-                alt={d.referer}
-                width={20}
-                height={20}
-                className="h-4 w-4 rounded-full"
-              />
-            ),
-          title: d.referer,
-          href: queryParams({
-            set: {
-              referer: d.referer,
-            },
-            getNewPath: true,
-          }) as string,
-          value: d.count || 0,
-        })) || []
-      }
-      maxValue={(data && data[0]?.count) || 0}
-      barBackground="bg-red-100"
-      hoverBackground="bg-red-100/50"
-      setShowModal={setShowModal}
-      {...(limit && { limit })}
-    />
-  );
-
-  return (
-    <>
-      <Modal
-        showModal={showModal}
-        setShowModal={setShowModal}
-        className="max-w-lg"
-      >
-        <div className="border-b border-gray-200 px-6 py-4">
-          <h1 className="text-lg font-semibold">Referers</h1>
-        </div>
-        {barList()}
-      </Modal>
-      <div className="scrollbar-hide relative z-0 h-[400px] border border-gray-200 bg-white px-7 py-5 sm:rounded-xl">
-        <div className="mb-3 flex justify-between">
-          <h1 className="text-lg font-semibold">Referers</h1>
-        </div>
-        {data ? (
-          data.length > 0 ? (
-            barList(9)
-          ) : (
-            <div className="flex h-[300px] items-center justify-center">
-              <p className="text-sm text-gray-600">No data available</p>
-            </div>
-          )
-        ) : (
-          <div className="flex h-[300px] items-center justify-center">
-            <AnalyticsLoadingSpinner />
-          </div>
-        )}
-        {data && data.length > 9 && (
-          <button
-            onClick={() => setShowModal(true)}
-            className="absolute inset-x-0 bottom-4 z-10 mx-auto flex w-full items-center justify-center space-x-2 rounded-md bg-gradient-to-b from-transparent to-white py-2 text-gray-500 transition-all hover:text-gray-800 active:scale-95"
-          >
-            <Maximize className="h-4 w-4" />
-            <p className="text-xs font-semibold uppercase">View all</p>
-          </button>
-        )}
-      </div>
-    </>
-  );
-}
-
 export default function Referer() {
   const { queryParams } = useRouterStuff();
 
diff --git a/apps/web/ui/analytics/toggle.tsx b/apps/web/ui/analytics/toggle.tsx
index 94ed347f7d..4c9c521195 100644
--- a/apps/web/ui/analytics/toggle.tsx
+++ b/apps/web/ui/analytics/toggle.tsx
@@ -30,6 +30,7 @@ import {
   MobilePhone,
   OfficeBuilding,
   QRCode,
+  ReferredVia,
   Tag,
   Window,
 } from "@dub/ui/src/icons";
@@ -38,6 +39,7 @@ import {
   COUNTRIES,
   DUB_LOGO,
   GOOGLE_FAVICON_URL,
+  capitalize,
   cn,
   getApexDomain,
   getNextPlan,
@@ -58,6 +60,7 @@ import LinkLogo from "../links/link-logo";
 import { COLORS_LIST } from "../links/tag-badge";
 import DeviceIcon from "./device-icon";
 import ExportButton from "./export-button";
+import RefererIcon from "./referer-icon";
 import SharePopover from "./share-popover";
 import { useAnalyticsFilterOption } from "./utils";
 
@@ -72,14 +75,24 @@ export default function Toggle() {
   const scrolled = useScroll(80);
 
   const { tags } = useTags();
-  const { allDomains: domains } = useDomains();
+  const { allDomains: domains, primaryDomain } = useDomains();
   const { links: allLinks } = useLinks();
 
   const [requestedFilters, setRequestedFilters] = useState<string[]>([]);
 
   const activeFilters = useMemo(() => {
-    const { domain, tagId, qr, country, city, device, browser, os, key } =
-      searchParamsObj;
+    const {
+      domain,
+      key,
+      tagId,
+      qr,
+      country,
+      city,
+      device,
+      browser,
+      os,
+      referer,
+    } = searchParamsObj;
     return [
       ...(domain && !key ? [{ key: "domain", value: domain }] : []),
       ...(domain && key
@@ -92,10 +105,11 @@ export default function Toggle() {
       ...(device ? [{ key: "device", value: device }] : []),
       ...(browser ? [{ key: "browser", value: browser }] : []),
       ...(os ? [{ key: "os", value: os }] : []),
+      ...(referer ? [{ key: "referer", value: referer }] : []),
     ];
   }, [searchParamsObj]);
 
-  const isEnabled = useCallback(
+  const isRequested = useCallback(
     (key: string) =>
       requestedFilters.includes(key) ||
       activeFilters.some((af) => af.key === key),
@@ -103,49 +117,77 @@ export default function Toggle() {
   );
 
   const links = useAnalyticsFilterOption("top_links", {
-    enabled: isEnabled("link"),
+    cacheOnly: !isRequested("link"),
   });
   const countries = useAnalyticsFilterOption("countries", {
-    enabled: isEnabled("country"),
+    cacheOnly: !isRequested("country"),
   });
   const cities = useAnalyticsFilterOption("cities", {
-    enabled: isEnabled("city"),
+    cacheOnly: !isRequested("city"),
   });
   const devices = useAnalyticsFilterOption("devices", {
-    enabled: isEnabled("device"),
+    cacheOnly: !isRequested("device"),
   });
   const browsers = useAnalyticsFilterOption("browsers", {
-    enabled: isEnabled("browser"),
+    cacheOnly: !isRequested("browser"),
   });
   const os = useAnalyticsFilterOption("os", {
-    enabled: isEnabled("os"),
+    cacheOnly: !isRequested("os"),
+  });
+  const referers = useAnalyticsFilterOption("referers", {
+    cacheOnly: !isRequested("referers"),
   });
 
+  // Some suggestions will only appear if previously requested (see isRequested above)
+  const aiFilterSuggestions = useMemo(
+    () => [
+      ...(isPublicStatsPage
+        ? []
+        : [
+            {
+              value: `Clicks on ${primaryDomain} domain this year`,
+              icon: Globe,
+            },
+          ]),
+      {
+        value: "Mobile users, US only",
+        icon: MobilePhone,
+      },
+      {
+        value: "Tokyo, Chrome users",
+        icon: OfficeBuilding,
+      },
+      {
+        value: "Safari, Singapore, last month",
+        icon: FlagWavy,
+      },
+      {
+        value: "QR scans last quarter",
+        icon: QRCode,
+      },
+    ],
+    [primaryDomain, isPublicStatsPage],
+  );
+
   const [streaming, setStreaming] = useState<boolean>(false);
 
   const filters: ComponentProps<typeof Filter.Select>["filters"] = useMemo(
     () => [
+      {
+        key: "ai",
+        icon: Magic,
+        label: "Ask AI",
+        separatorAfter: true,
+        options:
+          aiFilterSuggestions?.map(({ icon, value }) => ({
+            value,
+            label: value,
+            icon,
+          })) ?? null,
+      },
       ...(isPublicStatsPage
         ? []
         : [
-            {
-              key: "ai",
-              icon: Magic,
-              label: "Ask AI",
-              separatorAfter: true,
-              options: [
-                {
-                  value: "QR code scans in the last 30 days, US only",
-                  label: "QR code scans in the last 30 days, US only",
-                  icon: <QRCode className="h-4 w-4" />,
-                },
-                {
-                  value: "Canadian Desktop users in the last 90 days",
-                  label: "Canadian Desktop users in the last 90 days",
-                  icon: <Window className="h-4 w-4" />,
-                },
-              ],
-            },
             {
               key: "domain",
               icon: Globe,
@@ -253,6 +295,7 @@ export default function Toggle() {
             icon: QRCode,
           },
         ],
+        separatorAfter: !isPublicStatsPage,
       },
       {
         key: "country",
@@ -296,7 +339,11 @@ export default function Toggle() {
         icon: MobilePhone,
         label: "Device",
         getOptionIcon: (value) => (
-          <DeviceIcon display={value} tab="devices" className="h-4 w-4" />
+          <DeviceIcon
+            display={capitalize(value) ?? value}
+            tab="devices"
+            className="h-4 w-4"
+          />
         ),
         options:
           devices?.map(({ device, count }) => ({
@@ -333,10 +380,25 @@ export default function Toggle() {
             right: nFormatter(count, { full: true }),
           })) ?? null,
       },
+      {
+        key: "referer",
+        icon: ReferredVia,
+        label: "Referer",
+        getOptionIcon: (value, props) => (
+          <RefererIcon display={value} className="h-4 w-4" />
+        ),
+        options:
+          referers?.map(({ referer, count }) => ({
+            value: referer,
+            label: referer,
+            right: nFormatter(count, { full: true }),
+          })) ?? null,
+      },
     ],
     [
       isPublicStatsPage,
       domains,
+      allLinks,
       links,
       tags,
       countries,
@@ -344,6 +406,7 @@ export default function Toggle() {
       devices,
       browsers,
       os,
+      referers,
     ],
   );
 
diff --git a/apps/web/ui/analytics/utils.ts b/apps/web/ui/analytics/utils.ts
index fa63e88389..d1f6ab6f93 100644
--- a/apps/web/ui/analytics/utils.ts
+++ b/apps/web/ui/analytics/utils.ts
@@ -2,9 +2,13 @@ import { AnalyticsGroupByOptions } from "@/lib/analytics/types";
 import { editQueryString } from "@/lib/analytics/utils";
 import { fetcher } from "@dub/utils";
 import { useContext } from "react";
-import useSWR from "swr";
+import useSWR, { useSWRConfig } from "swr";
 import { AnalyticsContext } from ".";
 
+type AnalyticsFilterResult =
+  | ({ count?: number } & Record<string, any>)[]
+  | null;
+
 /**
  * Fetches event counts grouped by the specified filter
  *
@@ -15,13 +19,25 @@ export function useAnalyticsFilterOption(
   groupByOrParams:
     | AnalyticsGroupByOptions
     | ({ groupBy: AnalyticsGroupByOptions } & Record<string, any>),
-  options?: { enabled?: boolean },
-): ({ count?: number } & Record<string, any>)[] | null {
+  options?: { cacheOnly?: boolean },
+): AnalyticsFilterResult {
+  const { cache } = useSWRConfig();
+
   const { baseApiPath, queryString, selectedTab, requiresUpgrade } =
     useContext(AnalyticsContext);
 
+  const enabled =
+    !options?.cacheOnly ||
+    [...cache.keys()].includes(
+      `${baseApiPath}?${editQueryString(queryString, {
+        ...(typeof groupByOrParams === "string"
+          ? { groupBy: groupByOrParams }
+          : groupByOrParams),
+      })}`,
+    );
+
   const { data } = useSWR<Record<string, any>[]>(
-    options?.enabled !== false
+    enabled
       ? `${baseApiPath}?${editQueryString(queryString, {
           ...(typeof groupByOrParams === "string"
             ? { groupBy: groupByOrParams }
diff --git a/packages/ui/src/icons/nucleo/index.ts b/packages/ui/src/icons/nucleo/index.ts
index e15e9561ad..d252a53f2f 100644
--- a/packages/ui/src/icons/nucleo/index.ts
+++ b/packages/ui/src/icons/nucleo/index.ts
@@ -8,5 +8,6 @@ export * from "./invoice-dollar";
 export * from "./mobile-phone";
 export * from "./office-building";
 export * from "./qrcode";
+export * from "./referred-via";
 export * from "./tag";
 export * from "./window";
diff --git a/packages/ui/src/icons/nucleo/referred-via.tsx b/packages/ui/src/icons/nucleo/referred-via.tsx
new file mode 100644
index 0000000000..38e2f29b9e
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/referred-via.tsx
@@ -0,0 +1,40 @@
+import { SVGProps } from "react";
+
+export function ReferredVia(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path
+          d="M2.75,10.75v2.5c0,1.105,.895,2,2,2H15.25"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M15,6h-4c-2.347,0-4.25,1.903-4.25,4.25h0"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <polyline
+          fill="none"
+          points="12 2.75 15.25 6 12 9.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+      </g>
+    </svg>
+  );
+}