diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx
index a95f89bd39d..151af474dd2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx
@@ -73,7 +73,8 @@ export default async function TeamOverviewPage(props: {
           title="Analytics"
         />
       </div>
-      <div className="flex grow flex-col justify-between gap-10 md:container md:max-w-7xl md:pt-8 md:pb-16">
+
+      <div className="flex grow flex-col justify-between gap-10 container max-w-7xl pt-8 pb-16">
         <div className="flex grow flex-col gap-6">
           <Suspense
             fallback={<LoadingChartState className="h-[458px] border" />}
@@ -86,7 +87,7 @@ export default async function TeamOverviewPage(props: {
             />
           </Suspense>
 
-          <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+          <div className="grid gap-6 md:grid-cols-2">
             <Suspense
               fallback={<LoadingChartState className="h-[431px] border" />}
             >
@@ -242,7 +243,6 @@ async function AsyncTransactionsChartCard(props: {
     clientTransactions.value.length > 0 ? (
     <TransactionsChartCardUI
       aggregatedData={clientTransactions.value}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={clientTransactionsTimeSeries.value}
       searchParams={props.searchParams}
     />
@@ -280,7 +280,6 @@ async function AsyncTotalSponsoredCard(props: {
     userOpUsage.value.length > 0 ? (
     <TotalSponsoredChartCardUI
       aggregatedData={userOpUsage.value}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={userOpUsageTimeSeries.value}
       searchParams={props.searchParams}
     />
@@ -391,7 +390,6 @@ function AppHighlightsCard({
         return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
       }}
       chartConfig={chartConfig}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       existingQueryParams={searchParams}
       queryKey="appHighlights"
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/TransactionCharts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/TransactionCharts.tsx
index ae20c06aea5..52fbf03aaa7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/TransactionCharts.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/TransactionCharts.tsx
@@ -20,11 +20,10 @@ export function TransactionsChartsUI({
     <>
       <TransactionsChartCardUI
         aggregatedData={aggregatedData}
-        className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
         data={data}
         searchParams={searchParams}
       />
-      <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+      <div className="grid gap-6 md:grid-cols-2">
         <ChainDistributionCard data={aggregatedData} />
         <ContractDistributionCard client={client} data={aggregatedData} />
       </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
index 08ceb7a7094..d7645216197 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
@@ -455,7 +455,6 @@ function AppHighlightsCard({
         return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
       }}
       chartConfig={chartConfig}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       existingQueryParams={searchParams}
       queryKey="appHighlights"
@@ -590,7 +589,6 @@ async function TotalSponsoredCard({
       }
       aggregateFn={(_data, key) => processedAggregatedData[key]}
       chartConfig={chartConfig}
-      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       existingQueryParams={searchParams}
       isCurrency
diff --git a/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedBarChartCard.tsx b/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedBarChartCard.tsx
index e3dab317f27..35e8e97a223 100644
--- a/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedBarChartCard.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedBarChartCard.tsx
@@ -62,7 +62,7 @@ export function CombinedBarChartCard<
               const key = chart as K;
               return (
                 <Link
-                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-card"
+                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-accent/50"
                   data-active={activeChart === chart}
                   href={{
                     query: {
diff --git a/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.stories.tsx b/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.stories.tsx
deleted file mode 100644
index 6204f6726e5..00000000000
--- a/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.stories.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { CombinedStatBreakdownCard } from "./CombinedStatBreakdownCard";
-
-const meta = {
-  component: CombinedStatBreakdownCard,
-  decorators: [
-    (Story) => (
-      <div className="container max-w-6xl py-10">
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Analytics/CombinedStatBreakdownCard",
-} satisfies Meta<typeof CombinedStatBreakdownCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const breakdownConfig = {
-  browsers: {
-    data: [
-      {
-        fill: "hsl(var(--chart-1))",
-        icon: (
-          // biome-ignore lint/a11y/noSvgWithoutTitle: This is a test icon
-          <svg
-            className="size-4"
-            fill="none"
-            height="16"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            viewBox="0 0 24 24"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <circle cx="12" cy="12" r="4" />
-            <line x1="21.17" x2="12" y1="8" y2="8" />
-            <line x1="3.95" x2="8.54" y1="6.06" y2="14" />
-            <line x1="10.88" x2="15.46" y1="21.94" y2="14" />
-          </svg>
-        ),
-        label: "Chrome",
-        value: 3753420.21,
-      },
-      {
-        fill: "hsl(var(--chart-2))",
-        icon: (
-          // biome-ignore lint/a11y/noSvgWithoutTitle: This is a test icon
-          <svg
-            className="size-4"
-            fill="none"
-            height="16"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            viewBox="0 0 24 24"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <circle cx="12" cy="12" r="4" />
-          </svg>
-        ),
-        label: "Firefox",
-        value: 2134521,
-      },
-    ],
-    label: "Browser Distribution",
-  },
-  chains: {
-    data: [
-      { fill: "hsl(var(--chart-1))", label: "Base", value: 3753420.21 },
-      { fill: "hsl(var(--chart-2))", label: "Xai", value: 2134521 },
-      { fill: "hsl(var(--chart-3))", label: "Ethereum", value: 423455.32 },
-      { fill: "hsl(var(--chart-4))", label: "Polygon", value: 134234.1 },
-    ],
-    label: "Chain Distribution",
-  },
-};
-
-export const ChainsView: Story = {
-  args: {
-    activeKey: "chains",
-    config: breakdownConfig,
-    queryKey: "chart",
-    title: "Network Activity",
-  },
-};
-
-export const BrowsersView: Story = {
-  args: {
-    activeKey: "browsers",
-    config: breakdownConfig,
-    queryKey: "chart",
-    title: "Network Activity",
-  },
-};
-
-export const ChainsViewIsCurrency: Story = {
-  args: {
-    activeKey: "chains",
-    config: breakdownConfig,
-    isCurrency: true,
-    queryKey: "chart",
-    title: "Network Activity",
-  },
-};
diff --git a/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.tsx b/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.tsx
deleted file mode 100644
index 849cb907f94..00000000000
--- a/apps/dashboard/src/app/(app)/team/components/Analytics/CombinedStatBreakdownCard.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import Link from "next/link";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { toUSD } from "@/utils/number";
-import { Stat } from "./Stat";
-import { StatBreakdown } from "./StatBreakdown";
-
-type StatBreakdownConfig<K extends string> = {
-  [key in K]: {
-    label: string;
-    data: {
-      label: string;
-      value: number;
-      fill?: string;
-      icon?: React.ReactNode;
-    }[];
-  };
-};
-
-export function CombinedStatBreakdownCard<T extends string>({
-  title,
-  config,
-  activeKey,
-  queryKey,
-  aggregateFn = (data) => data.reduce((acc, curr) => acc + curr.value, 0),
-  isCurrency = false,
-  existingQueryParams,
-}: {
-  title?: string;
-  config: StatBreakdownConfig<T>;
-  activeKey: T;
-  queryKey: string;
-  aggregateFn?: (data: (typeof config)[T]["data"]) => number;
-  isCurrency?: boolean;
-  existingQueryParams?: { [key: string]: string | string[] | undefined };
-}) {
-  return (
-    <Card className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0">
-      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0">
-        {title && (
-          <div className="flex flex-1 flex-col justify-center gap-1 p-6">
-            <CardTitle className="font-semibold text-lg">{title}</CardTitle>
-          </div>
-        )}
-        <div className="max-md:no-scrollbar overflow-x-auto border-t">
-          <div className="flex flex-nowrap">
-            {Object.keys(config).map((breakdown) => {
-              const key = breakdown as T;
-              const { data, label } = config[key];
-              return (
-                <Link
-                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-card"
-                  data-active={activeKey === breakdown}
-                  href={{
-                    query: {
-                      ...existingQueryParams,
-                      [queryKey]: key,
-                    },
-                  }}
-                  key={breakdown}
-                  prefetch
-                  scroll={false}
-                >
-                  <Stat
-                    label={label}
-                    value={
-                      isCurrency ? toUSD(aggregateFn(data)) : aggregateFn(data)
-                    }
-                  />
-                  <div
-                    className="absolute right-0 bottom-0 left-0 h-0 bg-foreground transition-all duration-300 ease-out data-[active=true]:h-[3px]"
-                    data-active={activeKey === breakdown}
-                  />
-                </Link>
-              );
-            })}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="p-6">
-        <StatBreakdown data={config[activeKey].data} isCurrency={isCurrency} />
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/components/Analytics/EmptyStateCard.tsx b/apps/dashboard/src/app/(app)/team/components/Analytics/EmptyStateCard.tsx
index 168dbd7206b..65fb841a577 100644
--- a/apps/dashboard/src/app/(app)/team/components/Analytics/EmptyStateCard.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/Analytics/EmptyStateCard.tsx
@@ -13,7 +13,7 @@ export function EmptyStateCard({
   description?: string;
 }) {
   return (
-    <Card className="container h-[300px] p-2 md:h-[400px]">
+    <Card className="container min-h-[300px] p-2 md:min-h-[400px]">
       <div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border border-dashed text-center">
         <EmptyStateContent
           description={description}
@@ -42,7 +42,7 @@ export function EmptyStateContent(props: {
         <PlugIcon className="size-5 text-muted-foreground" />
       </div>
 
-      <div className="space-y-0.5">
+      <div className="space-y-0.5 text-center">
         <div className="font-semibold text-lg">No data available</div>
         {description && (
           <div className="text-muted-foreground text-sm">{description}</div>
@@ -52,7 +52,7 @@ export function EmptyStateContent(props: {
       {props.link && (
         <Button
           asChild
-          className="mt-2 rounded-full"
+          className="mt-2 rounded-full text-center"
           size="sm"
           variant="default"
         >