diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
index 2ffc1133cb9..8c270d01654 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
@@ -15,6 +15,12 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
+import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
+import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
+import { DocLink } from "components/shared/DocLink";
 import { format } from "date-fns";
 import { useMemo, useState } from "react";
 import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts";
@@ -129,7 +135,45 @@ export function DailyConnectionsChartCard(props: {
         {props.isPending ? (
           <LoadingChartState />
         ) : barChartData.length === 0 ? (
-          <EmptyChartState />
+          <EmptyChartState>
+            <div className="flex flex-col items-center justify-center">
+              <span className="mb-6 text-lg">
+                Send your first connect event
+              </span>
+              <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/getting-started"
+                  label="TypeScript"
+                  icon={TypeScriptIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/react/v5"
+                  label="React"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/react-native/v5"
+                  label="React Native"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/dotnet/getting-started"
+                  label="Unity"
+                  icon={UnityIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/unreal-engine/getting-started"
+                  label="Unreal Engine"
+                  icon={UnrealIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/dotnet/getting-started"
+                  label=".NET"
+                  icon={DotNetIcon}
+                />
+              </div>
+            </div>
+          </EmptyChartState>
         ) : (
           <BarChart
             accessibilityLayer
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
index 92462584947..dbdbb51f903 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
@@ -22,14 +22,14 @@ const skeletonChartConfig = {
   },
 } satisfies ChartConfig;
 
-export function EmptyChartState() {
+export function EmptyChartState({ children }: { children?: React.ReactNode }) {
   const barChartData = useMemo(() => generateRandomData(), []);
 
   return (
     <div className="relative z-0 h-full w-full">
-      <span className="absolute inset-0 z-[1] flex items-center justify-center font-semibold text-base text-muted-foreground">
-        No data available
-      </span>
+      <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center font-semibold text-base text-muted-foreground">
+        {children ?? "No data available"}
+      </div>
       <SkeletonBarChart data={barChartData} />
     </div>
   );
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/SponsoredTransactionsChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/SponsoredTransactionsChartCard.tsx
index b852ec4ae9e..c42bfc91d42 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/SponsoredTransactionsChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/SponsoredTransactionsChartCard.tsx
@@ -9,6 +9,12 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import type { UserOpStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
+import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
+import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
+import { DocLink } from "components/shared/DocLink";
 import { format } from "date-fns";
 import { useMemo } from "react";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
@@ -41,13 +47,13 @@ export function SponsoredTransactionsChartCard(props: {
 
     for (const data of userOpStats) {
       const chartData = chartDataMap.get(data.date);
-      if (!chartData) {
+      if (!chartData && data.sponsoredUsd > 0) {
         chartDataMap.set(data.date, {
           time: format(new Date(data.date), "MMM dd"),
           successful: data.successful,
           failed: data.failed,
         });
-      } else {
+      } else if (chartData && data.sponsoredUsd > 0) {
         chartData.successful += data.successful;
         chartData.failed += data.failed;
       }
@@ -60,11 +66,11 @@ export function SponsoredTransactionsChartCard(props: {
 
   return (
     <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
-      <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
+      <h3 className="mb-4 font-semibold text-xl tracking-tight md:text-2xl">
         Sponsored Transactions
       </h3>
 
-      <div className="top-6 right-6 mb-4 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
+      <div className="top-6 right-6 mb-8 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
         <ExportToCSVButton
           className="bg-background"
           fileName="Sponsored Transactions"
@@ -85,7 +91,45 @@ export function SponsoredTransactionsChartCard(props: {
         {props.isPending ? (
           <LoadingChartState />
         ) : barChartData.length === 0 ? (
-          <EmptyChartState />
+          <EmptyChartState>
+            <div className="flex flex-col items-center justify-center">
+              <span className="mb-6 text-lg">
+                Send your first sponsored transaction
+              </span>
+              <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/account-abstraction/batching-transactions"
+                  label="TypeScript"
+                  icon={TypeScriptIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/react/v5/account-abstraction/batching-transactions"
+                  label="React"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
+                  label="React Native"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/unity/v5/wallets/account-abstraction"
+                  label="Unity"
+                  icon={UnityIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet"
+                  label="Unreal Engine"
+                  icon={UnrealIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction"
+                  label=".NET"
+                  icon={DotNetIcon}
+                />
+              </div>
+            </div>
+          </EmptyChartState>
         ) : (
           <BarChart
             accessibilityLayer
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/TotalSponsoredChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/TotalSponsoredChartCard.tsx
index 5f642a4168a..c31a36831f1 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/TotalSponsoredChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/TotalSponsoredChartCard.tsx
@@ -8,6 +8,12 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import type { UserOpStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
+import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
+import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
+import { DocLink } from "components/shared/DocLink";
 import { format } from "date-fns";
 import { useMemo } from "react";
 import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts";
@@ -35,12 +41,12 @@ export function TotalSponsoredChartCard(props: {
 
     for (const data of userOpStats) {
       const chartData = chartDataMap.get(data.date);
-      if (!chartData) {
+      if (!chartData && data.sponsoredUsd > 0) {
         chartDataMap.set(data.date, {
           time: format(new Date(data.date), "MMM dd"),
           sponsoredUsd: data.sponsoredUsd,
         });
-      } else {
+      } else if (chartData && data.sponsoredUsd > 0) {
         chartData.sponsoredUsd += data.sponsoredUsd;
       }
     }
@@ -83,7 +89,43 @@ export function TotalSponsoredChartCard(props: {
         {props.isPending ? (
           <LoadingChartState />
         ) : barChartData.length === 0 ? (
-          <EmptyChartState />
+          <EmptyChartState>
+            <div className="flex flex-col items-center justify-center">
+              <span className="mb-6 text-lg">Sponsor gas for your users</span>
+              <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
+                  label="TypeScript"
+                  icon={TypeScriptIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
+                  label="React"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
+                  label="React Native"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/unity/v5/wallets/account-abstraction"
+                  label="Unity"
+                  icon={UnityIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet"
+                  label="Unreal Engine"
+                  icon={UnrealIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction"
+                  label=".NET"
+                  icon={DotNetIcon}
+                />
+              </div>
+            </div>
+          </EmptyChartState>
         ) : (
           <BarChart
             accessibilityLayer
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
index 57da11965b5..e4202b5a1d0 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
@@ -17,6 +17,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import { DocLink } from "components/shared/DocLink";
 import { format } from "date-fns";
 import { useMemo, useState } from "react";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
@@ -166,7 +169,30 @@ export function WalletConnectorsChartCard(props: {
         {props.isPending ? (
           <LoadingChartState />
         ) : chartData.length === 0 ? (
-          <EmptyChartState />
+          <EmptyChartState>
+            <div className="flex flex-col items-center justify-center">
+              <span className="mb-6 text-lg">
+                Connect any wallet to your app
+              </span>
+              <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
+                  label="TypeScript"
+                  icon={TypeScriptIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
+                  label="React"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
+                  label="React Native"
+                  icon={ReactIcon}
+                />
+              </div>
+            </div>
+          </EmptyChartState>
         ) : (
           <BarChart
             accessibilityLayer
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
index d3c8eaf64df..5d989be7947 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
@@ -17,6 +17,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import { DocLink } from "components/shared/DocLink";
 import { useMemo, useState } from "react";
 import { Pie, PieChart } from "recharts";
 import { EmptyChartState, LoadingChartState } from "./EmptyChartState";
@@ -192,7 +195,30 @@ export function WalletDistributionChartCard(props: {
         {props.isPending ? (
           <LoadingChartState />
         ) : chartData.length === 0 ? (
-          <EmptyChartState />
+          <EmptyChartState>
+            <div className="flex flex-col items-center justify-center">
+              <span className="mb-6 text-lg">
+                Connect any wallet to your app
+              </span>
+              <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
+                  label="TypeScript"
+                  icon={TypeScriptIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
+                  label="React"
+                  icon={ReactIcon}
+                />
+                <DocLink
+                  link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
+                  label="React Native"
+                  icon={ReactIcon}
+                />
+              </div>
+            </div>
+          </EmptyChartState>
         ) : (
           <PieChart>
             <ChartTooltip
diff --git a/apps/dashboard/src/components/shared/ConnectSDKCard.tsx b/apps/dashboard/src/components/shared/ConnectSDKCard.tsx
index 7fa3d492e3c..49b2582ba3d 100644
--- a/apps/dashboard/src/components/shared/ConnectSDKCard.tsx
+++ b/apps/dashboard/src/components/shared/ConnectSDKCard.tsx
@@ -3,7 +3,7 @@ import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
 import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
 import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
-import Link from "next/link";
+import { DocLink } from "./DocLink";
 
 export function ConnectSDKCard({
   title,
@@ -69,20 +69,3 @@ function BackgroundPattern() {
     />
   );
 }
-
-function DocLink(props: {
-  link: string;
-  label: string;
-  icon: React.FC<{ className?: string }>;
-}) {
-  return (
-    <Link
-      href={props.link}
-      target="_blank"
-      className="flex items-center gap-2 text-muted-foreground text-sm hover:text-foreground"
-    >
-      <props.icon className="size-4" />
-      {props.label}
-    </Link>
-  );
-}
diff --git a/apps/dashboard/src/components/shared/DocLink.tsx b/apps/dashboard/src/components/shared/DocLink.tsx
new file mode 100644
index 00000000000..ff1bc49e4b4
--- /dev/null
+++ b/apps/dashboard/src/components/shared/DocLink.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export function DocLink(props: {
+  link: string;
+  label: string;
+  icon: React.FC<{ className?: string }>;
+}) {
+  return (
+    <Link
+      href={props.link}
+      target="_blank"
+      className="flex items-center gap-2 whitespace-nowrap text-muted-foreground text-sm hover:text-foreground"
+    >
+      <props.icon className="size-4" />
+      {props.label}
+    </Link>
+  );
+}