diff --git a/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx b/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx
index 678b46f2c26..42de009738b 100644
--- a/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx
+++ b/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx
@@ -108,6 +108,8 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                           : [0, 0, 0, 0]
                       : [4, 4, 4, 4]
                   }
+                  strokeWidth={1}
+                  className="stroke-background"
                 />
               ))}
             </BarChart>
diff --git a/apps/dashboard/src/@/components/pagination-buttons.stories.tsx b/apps/dashboard/src/@/components/pagination-buttons.stories.tsx
new file mode 100644
index 00000000000..9c6d522472b
--- /dev/null
+++ b/apps/dashboard/src/@/components/pagination-buttons.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../stories/utils";
+import { PaginationButtons } from "./pagination-buttons";
+
+const meta = {
+  title: "blocks/PaginationButtons",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
+      <Variant label="10 Pages" totalPages={10} />
+      <Variant label="100 Pages" totalPages={100} />
+      <Variant label="3 Pages" totalPages={2} />
+      <Variant label="6 Pages" totalPages={6} />
+      <Variant label="1 Page - nothing rendered" totalPages={1} />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  totalPages: number;
+}) {
+  const [activePage, setActivePage] = useState(1);
+  return (
+    <BadgeContainer label={props.label}>
+      <div className="border bg-card py-5">
+        <PaginationButtons
+          activePage={activePage}
+          onPageClick={setActivePage}
+          totalPages={props.totalPages}
+        />
+      </div>
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/@/components/pagination-buttons.tsx b/apps/dashboard/src/@/components/pagination-buttons.tsx
index f0e74925785..0074d246fe2 100644
--- a/apps/dashboard/src/@/components/pagination-buttons.tsx
+++ b/apps/dashboard/src/@/components/pagination-buttons.tsx
@@ -9,6 +9,11 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
+import { ArrowUpRightIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 
 export const PaginationButtons = (props: {
   activePage: number;
@@ -16,6 +21,47 @@ export const PaginationButtons = (props: {
   onPageClick: (page: number) => void;
 }) => {
   const { activePage, totalPages, onPageClick: setPage } = props;
+  const [inputHasError, setInputHasError] = useState(false);
+  const [pageNumberInput, setPageNumberInput] = useState("");
+
+  if (totalPages === 1) {
+    return null;
+  }
+
+  function handlePageInputSubmit() {
+    const page = Number(pageNumberInput);
+
+    setInputHasError(false);
+    if (Number.isInteger(page) && page > 0 && page <= totalPages) {
+      setPage(page);
+      setPageNumberInput("");
+    } else {
+      setInputHasError(true);
+    }
+  }
+
+  // just render all the page buttons directly
+  if (totalPages <= 6) {
+    const pages = [...Array(totalPages)].map((_, i) => i + 1);
+    return (
+      <Pagination>
+        <PaginationContent>
+          {pages.map((page) => (
+            <PaginationItem key={page}>
+              <PaginationLink
+                isActive={activePage === page}
+                onClick={() => {
+                  setPage(page);
+                }}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+        </PaginationContent>
+      </Pagination>
+    );
+  }
 
   return (
     <Pagination>
@@ -28,24 +74,28 @@ export const PaginationButtons = (props: {
             }}
           />
         </PaginationItem>
+
+        {/* First page + ... */}
         {activePage - 3 > 0 && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationEllipsis />
-          </PaginationItem>
-        )}
-        {activePage - 2 > 0 && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationLink
-              onClick={() => {
-                setPage(activePage - 2);
-              }}
-            >
-              {activePage - 2}
-            </PaginationLink>
-          </PaginationItem>
+          <>
+            <PaginationItem>
+              <PaginationLink
+                onClick={() => {
+                  setPage(1);
+                }}
+              >
+                1
+              </PaginationLink>
+            </PaginationItem>
+
+            <PaginationItem>
+              <PaginationEllipsis className="max-sm:w-3" />
+            </PaginationItem>
+          </>
         )}
+
         {activePage - 1 > 0 && (
-          <PaginationItem>
+          <PaginationItem className="max-sm:hidden">
             <PaginationLink
               onClick={() => {
                 setPage(activePage - 1);
@@ -55,11 +105,13 @@ export const PaginationButtons = (props: {
             </PaginationLink>
           </PaginationItem>
         )}
+
         <PaginationItem>
           <PaginationLink isActive>{activePage}</PaginationLink>
         </PaginationItem>
+
         {activePage + 1 <= totalPages && (
-          <PaginationItem>
+          <PaginationItem className="max-sm:hidden">
             <PaginationLink
               onClick={() => {
                 setPage(activePage + 1);
@@ -69,22 +121,26 @@ export const PaginationButtons = (props: {
             </PaginationLink>
           </PaginationItem>
         )}
-        {activePage + 2 <= totalPages && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationLink
-              onClick={() => {
-                setPage(activePage + 2);
-              }}
-            >
-              {activePage + 2}
-            </PaginationLink>
-          </PaginationItem>
-        )}
+
+        {/* ... + Last page */}
         {activePage + 3 <= totalPages && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationEllipsis />
-          </PaginationItem>
+          <>
+            <PaginationItem>
+              <PaginationEllipsis className="max-sm:w-3" />
+            </PaginationItem>
+
+            <PaginationItem>
+              <PaginationLink
+                onClick={() => {
+                  setPage(totalPages);
+                }}
+              >
+                {totalPages}
+              </PaginationLink>
+            </PaginationItem>
+          </>
         )}
+
         <PaginationItem>
           <PaginationNext
             disabled={activePage === totalPages}
@@ -93,6 +149,34 @@ export const PaginationButtons = (props: {
             }}
           />
         </PaginationItem>
+
+        <div className="relative flex items-center">
+          <Input
+            value={pageNumberInput}
+            onChange={(e) => {
+              setInputHasError(false);
+              setPageNumberInput(e.target.value);
+            }}
+            type="number"
+            placeholder="Page"
+            className={cn(
+              "w-[60px] bg-transparent [appearance:textfield] max-sm:placeholder:text-sm lg:w-[100px] lg:pr-8 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+              inputHasError && "text-red-500",
+            )}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handlePageInputSubmit();
+              }
+            }}
+          />
+          <Button
+            variant="ghost"
+            className="absolute right-1 h-auto w-auto p-2 max-sm:hidden"
+            onClick={handlePageInputSubmit}
+          >
+            <ArrowUpRightIcon className="size-4" />
+          </Button>
+        </div>
       </PaginationContent>
     </Pagination>
   );
diff --git a/apps/dashboard/src/@/components/ui/chart.tsx b/apps/dashboard/src/@/components/ui/chart.tsx
index 16aacc0eb2d..a452dbddc36 100644
--- a/apps/dashboard/src/@/components/ui/chart.tsx
+++ b/apps/dashboard/src/@/components/ui/chart.tsx
@@ -186,7 +186,7 @@ const ChartTooltipContent = React.forwardRef<
       <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",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-popover px-2.5 py-1.5 text-xs shadow-xl",
           className,
         )}
       >
diff --git a/apps/dashboard/src/@/components/ui/pagination.tsx b/apps/dashboard/src/@/components/ui/pagination.tsx
index c8a53d9dee9..3c4f0cd7ca3 100644
--- a/apps/dashboard/src/@/components/ui/pagination.tsx
+++ b/apps/dashboard/src/@/components/ui/pagination.tsx
@@ -63,11 +63,11 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("h-10 gap-1 pl-2.5", className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
+    <span className="max-sm:hidden">Previous</span>
   </PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
@@ -79,10 +79,10 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("h-10 gap-1 pr-2.5", className)}
     {...props}
   >
-    <span>Next</span>
+    <span className="max-sm:hidden">Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 );
diff --git a/apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts b/apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts
index 4d99b6174ac..410bf2026da 100644
--- a/apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts
+++ b/apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts
@@ -76,8 +76,8 @@ export const engineKeys = {
     [...engineKeys.all, address, "instances"] as const,
   backendWallets: (instance: string) =>
     [...engineKeys.all, instance, "backendWallets"] as const,
-  transactions: (instance: string) =>
-    [...engineKeys.all, instance, "transactions"] as const,
+  transactions: (instance: string, params: object) =>
+    [...engineKeys.all, instance, "transactions", params] as const,
   permissions: (instance: string) =>
     [...engineKeys.all, instance, "permissions"] as const,
   accessTokens: (instance: string) =>
diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
index f081fccb168..43292d66a48 100644
--- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
+++ b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
@@ -1,12 +1,18 @@
 "use client";
 
 import { apiServerProxy } from "@/actions/proxies";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import type { ResultItem } from "app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import invariant from "tiny-invariant";
+import type { EngineStatus } from "../../../app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
 
 export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
@@ -383,13 +389,29 @@ export function useEngineTransactions(params: {
   instanceUrl: string;
   autoUpdate: boolean;
   authToken: string;
+  queryParams?: {
+    limit?: number;
+    page?: number;
+    status?: EngineStatus;
+  };
 }) {
   const { instanceUrl, autoUpdate, authToken } = params;
 
   return useQuery({
-    queryKey: engineKeys.transactions(instanceUrl),
+    queryKey: engineKeys.transactions(instanceUrl, params),
     queryFn: async () => {
-      const res = await fetch(`${instanceUrl}transaction/get-all`, {
+      const url = new URL(`${instanceUrl}transaction/get-all`);
+      if (params.queryParams) {
+        for (const key in params.queryParams) {
+          const value =
+            params.queryParams[key as keyof typeof params.queryParams];
+          if (value !== undefined) {
+            url.searchParams.append(key, value.toString());
+          }
+        }
+      }
+
+      const res = await fetch(url, {
         method: "GET",
         headers: getEngineRequestHeaders(authToken),
       });
@@ -398,8 +420,8 @@ export function useEngineTransactions(params: {
 
       return (json.result as TransactionResponse) || {};
     },
-    enabled: !!instanceUrl,
     refetchInterval: autoUpdate ? 4_000 : false,
+    placeholderData: keepPreviousData,
   });
 }
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
index 92bb499ad4f..b2659843626 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
@@ -228,8 +228,8 @@ export function EcosystemWalletUsersChartCard(props: {
                   fill={chartConfig[authMethod]?.color}
                   radius={4}
                   stackId="a"
-                  strokeWidth={1.5}
-                  className="stroke-muted"
+                  strokeWidth={1}
+                  className="stroke-background"
                 />
               );
             })}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
index c2f96627af7..4c20a4bec26 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
@@ -182,6 +182,7 @@ export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
         isPending={isPending}
         isFetched={isFetched}
         tableScrollableClassName="max-h-[1000px]"
+        tableContainerClassName="border-x-0 rounded-t-none border-b-0"
         onMenuClick={[
           {
             icon: <PencilIcon className="size-4" />,
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
index 892088b0c16..6dba57a63ca 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
@@ -31,7 +31,7 @@ import {
   EngineBackendWalletOptions,
   type EngineBackendWalletType,
 } from "lib/engine";
-import { CircleAlertIcon } from "lucide-react";
+import { CircleAlertIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -120,7 +120,10 @@ export const CreateBackendWalletButton: React.FC<
 
   return (
     <>
-      <Button onClick={() => setIsOpen(true)}>Create</Button>
+      <Button onClick={() => setIsOpen(true)} className="gap-2" size="sm">
+        <PlusIcon className="size-4" />
+        Create
+      </Button>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent
           className="z-[10001] p-0"
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
index 73616accc7d..6247c787c35 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
@@ -1,19 +1,15 @@
 "use client";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import {
   type EngineInstance,
   useEngineBackendWallets,
-  useEngineTransactions,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { NetworkSelectorButton } from "components/selects/NetworkSelectorButton";
 import Link from "next/link";
-import { useState } from "react";
 import { BackendWalletsTable } from "./backend-wallets-table";
 import { CreateBackendWalletButton } from "./create-backend-wallet-button";
 import { ImportBackendWalletButton } from "./import-backend-wallet-button";
-import { TransactionsTable } from "./transactions-table";
+import { TransactionCharts, TransactionsTable } from "./transactions-table";
 
 interface EngineOverviewProps {
   instance: EngineInstance;
@@ -33,8 +29,10 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
         teamSlug={teamSlug}
         authToken={authToken}
       />
-      <div className="h-14" />
-      <TransactionsSection instanceUrl={instance.url} authToken={authToken} />
+      <div className="h-10" />
+      <TransactionCharts instanceUrl={instance.url} authToken={authToken} />
+      <div className="h-10" />
+      <TransactionsTable instanceUrl={instance.url} authToken={authToken} />
     </div>
   );
 };
@@ -55,23 +53,23 @@ function BackendWalletsSection(props: {
   });
 
   return (
-    <section>
-      <div className="flex flex-col items-start justify-between gap-5 lg:flex-row">
+    <section className="rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-5 p-6 lg:flex-row lg:items-center lg:justify-between">
         <div>
-          <div className="mb-0.5 flex items-center gap-3">
-            <h2 className="font-semibold text-2xl tracking-tight">
+          <div className="flex items-center gap-3">
+            <h2 className="mb-1 font-semibold text-xl tracking-tight">
               Backend Wallets
             </h2>
           </div>
-          <p className="text-muted-foreground">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             Engine sends blockchain transactions from backend wallets you own
             and manage.
           </p>
-          <p className="text-muted-foreground">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             Set up other wallet types from the{" "}
             <Link
               href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
-              className="text-link-foreground hover:text-foreground"
+              className="underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 hover:text-foreground hover:decoration-foreground hover:decoration-solid"
             >
               Configuration
             </Link>{" "}
@@ -79,45 +77,43 @@ function BackendWalletsSection(props: {
             <Link
               href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
               target="_blank"
-              className="text-link-foreground hover:text-foreground"
+              className="underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 hover:text-foreground hover:decoration-foreground hover:decoration-solid"
             >
               learn more about backend wallets.
             </Link>
           </p>
         </div>
 
-        {walletConfig && (
-          <div className="flex flex-row gap-2 max-sm:w-full [&>*]:grow">
-            <ImportBackendWalletButton
-              instance={instance}
-              walletConfig={walletConfig}
-              teamSlug={teamSlug}
-              authToken={authToken}
-            />
-            <CreateBackendWalletButton
-              instance={instance}
-              walletConfig={walletConfig}
-              teamSlug={teamSlug}
-              authToken={authToken}
-            />
-          </div>
-        )}
-      </div>
+        <div className="flex flex-col items-end gap-4 border-border max-md:w-full max-md:border-t max-md:pt-6">
+          {walletConfig && (
+            <div className="flex flex-row justify-end gap-3 max-md:w-full">
+              <ImportBackendWalletButton
+                instance={instance}
+                walletConfig={walletConfig}
+                teamSlug={teamSlug}
+                authToken={authToken}
+              />
+              <CreateBackendWalletButton
+                instance={instance}
+                walletConfig={walletConfig}
+                teamSlug={teamSlug}
+                authToken={authToken}
+              />
+            </div>
+          )}
 
-      <div className="h-4" />
-
-      <div className="flex justify-end">
-        <div className="flex items-center gap-2">
-          <span className="text-sm">Show balance for</span>
-          {/* TODO - Replace with simple network selector - there's no need for user to switch chain  */}
-          <div className="flex flex-row">
-            <NetworkSelectorButton />
+          <div className="flex justify-end">
+            <div className="flex items-center gap-2">
+              <span className="text-sm">Show balance for</span>
+              {/* TODO - Replace with simple network selector - there's no need for user to switch chain  */}
+              <div className="flex flex-row">
+                <NetworkSelectorButton />
+              </div>
+            </div>
           </div>
         </div>
       </div>
 
-      <div className="h-4" />
-
       <BackendWalletsTable
         instanceUrl={instance.url}
         wallets={backendWallets.data ?? []}
@@ -128,52 +124,3 @@ function BackendWalletsSection(props: {
     </section>
   );
 }
-
-function TransactionsSection(props: {
-  instanceUrl: string;
-  authToken: string;
-}) {
-  const { instanceUrl, authToken } = props;
-  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
-  const transactionsQuery = useEngineTransactions({
-    instanceUrl,
-    autoUpdate,
-    authToken,
-  });
-
-  return (
-    <section>
-      <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
-        <div>
-          <h2 className="mb-0.5 font-semibold text-2xl tracking-tight">
-            Transactions
-          </h2>
-          <p className="text-muted-foreground">
-            View transactions sent from your backend wallets
-          </p>
-        </div>
-
-        <div className="flex justify-end">
-          <div className="flex items-center gap-2">
-            <Label htmlFor="auto-update">Auto-Update</Label>
-            <Switch
-              checked={autoUpdate}
-              onCheckedChange={(v) => setAutoUpdate(!!v)}
-              id="auto-update"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="h-4" />
-
-      <TransactionsTable
-        transactions={transactionsQuery.data?.transactions ?? []}
-        isPending={transactionsQuery.isPending}
-        isFetched={transactionsQuery.isFetched}
-        instanceUrl={instanceUrl}
-        authToken={authToken}
-      />
-    </section>
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
index 975e0980e48..f4e69cbec8b 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
@@ -33,7 +33,7 @@ import {
   EngineBackendWalletOptions,
   type EngineBackendWalletType,
 } from "lib/engine";
-import { CircleAlertIcon } from "lucide-react";
+import { CircleAlertIcon, CloudDownloadIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -136,7 +136,13 @@ export const ImportBackendWalletButton: React.FC<
 
   return (
     <>
-      <Button onClick={() => setIsModalOpen(true)} variant="outline">
+      <Button
+        onClick={() => setIsModalOpen(true)}
+        variant="outline"
+        className="gap-2"
+        size="sm"
+      >
+        <CloudDownloadIcon className="size-4" />
         Import
       </Button>
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
index 2d232c3cd8f..f0f9c21c1de 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
@@ -1,45 +1,60 @@
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { PaginationButtons } from "@/components/pagination-buttons";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import type { ChartConfig } from "@/components/ui/chart";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
-import type { Transaction } from "@3rdweb-sdk/react/hooks/useEngine";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
-  Collapse,
-  Divider,
-  Flex,
-  FormControl,
-  Tooltip,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { createColumnHelper } from "@tanstack/react-table";
+  type Transaction,
+  useEngineTransactions,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { Collapse, Divider, useDisclosure } from "@chakra-ui/react";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { formatDistanceToNowStrict } from "date-fns";
 import { format, formatDate } from "date-fns/format";
 import { useAllChainsData } from "hooks/chains/allChains";
-import { InfoIcon, MoveLeftIcon, MoveRightIcon } from "lucide-react";
+import {
+  ExternalLinkIcon,
+  InfoIcon,
+  MoveLeftIcon,
+  MoveRightIcon,
+} from "lucide-react";
+import Link from "next/link";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { toTokens } from "thirdweb";
-import { Button, Card, FormLabel, LinkButton, Text } from "tw-components";
-import { TWTable } from "../../../../../../../../../../components/shared/TWTable";
+import { FormLabel, LinkButton, Text } from "tw-components";
 import { TransactionTimeline } from "./transaction-timeline";
 
-interface TransactionsTableProps {
-  transactions: Transaction[];
-  isPending: boolean;
-  isFetched: boolean;
-  instanceUrl: string;
-  authToken: string;
-}
-
-type EngineStatus =
+export type EngineStatus =
   | "errored"
   | "mined"
   | "cancelled"
@@ -48,22 +63,34 @@ type EngineStatus =
   | "processed"
   | "queued"
   | "user-op-sent";
+
 const statusDetails: Record<
   EngineStatus,
   {
     name: string;
     type: "success" | "destructive" | "warning";
-    showTooltipIcon?: boolean;
   }
 > = {
-  processed: {
-    name: "Processed",
-    type: "warning",
+  mined: {
+    name: "Mined",
+    type: "success",
+  },
+  errored: {
+    name: "Failed",
+    type: "destructive",
+  },
+  cancelled: {
+    name: "Cancelled",
+    type: "destructive",
   },
   queued: {
     name: "Queued",
     type: "warning",
   },
+  processed: {
+    name: "Processed",
+    type: "warning",
+  },
   sent: {
     name: "Sent",
     type: "warning",
@@ -72,193 +99,396 @@ const statusDetails: Record<
     name: "User Op Sent",
     type: "warning",
   },
-  mined: {
-    name: "Mined",
-    type: "success",
-  },
   retried: {
     name: "Retried",
     type: "success",
   },
-  errored: {
-    name: "Failed",
-    type: "destructive",
-  },
-  cancelled: {
-    name: "Cancelled",
-    type: "destructive",
-  },
 };
 
-const columnHelper = createColumnHelper<Transaction>();
-
-export const TransactionsTable: React.FC<TransactionsTableProps> = ({
-  transactions,
-  isPending,
-  isFetched,
-  instanceUrl,
-  authToken,
-}) => {
-  const { idToChain } = useAllChainsData();
+// TODO - add Status selector dropdown here
+export function TransactionsTable(props: {
+  instanceUrl: string;
+  authToken: string;
+}) {
   const transactionDisclosure = useDisclosure();
   const [selectedTransaction, setSelectedTransaction] =
     useState<Transaction | null>(null);
+  const [autoUpdate, setAutoUpdate] = useState(true);
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState<EngineStatus | undefined>(undefined);
+
+  const pageSize = 10;
+  const transactionsQuery = useEngineTransactions({
+    instanceUrl: props.instanceUrl,
+    autoUpdate,
+    authToken: props.authToken,
+    queryParams: {
+      limit: pageSize,
+      page: page,
+      status,
+    },
+  });
+
+  const transactions = transactionsQuery.data?.transactions ?? [];
 
-  const columns = [
-    columnHelper.accessor("queueId", {
-      header: "Queue ID",
-      cell: (cell) => {
-        return (
-          <CopyAddressButton
-            address={cell.getValue() ?? ""}
-            copyIconPosition="left"
-            variant="ghost"
-            className="text-muted-foreground"
+  const idx = selectedTransaction
+    ? transactions.indexOf(selectedTransaction)
+    : 0;
+
+  const totalCount = transactionsQuery.data?.totalCount ?? 0;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const showPagination = totalCount > pageSize;
+
+  const showSkeleton =
+    (transactionsQuery.isPlaceholderData && transactionsQuery.isFetching) ||
+    (transactionsQuery.isLoading && !transactionsQuery.isPlaceholderData);
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-4 rounded-lg rounded-b-none px-6 py-6 lg:flex-row lg:justify-between">
+        <div>
+          <h2 className="font-semibold text-xl tracking-tight">
+            Transaction History
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Transactions sent from your backend wallets
+          </p>
+        </div>
+
+        <div className="flex items-center justify-end gap-5 border-border border-t pt-4 lg:border-none lg:pt-0">
+          <div className="flex shrink-0 items-center gap-2">
+            <Label htmlFor="auto-update">Auto Update</Label>
+            <Switch
+              checked={autoUpdate}
+              onCheckedChange={(v) => setAutoUpdate(!!v)}
+              id="auto-update"
+            />
+          </div>
+          <StatusSelector
+            status={status}
+            setStatus={(v) => {
+              setStatus(v);
+              // reset page
+              setPage(1);
+            }}
           />
-        );
-      },
-    }),
-    columnHelper.accessor("chainId", {
-      header: "Chain",
-      cell: (cell) => {
-        const chainId = cell.getValue();
-        if (!chainId) {
-          return;
-        }
+        </div>
+      </div>
+
+      <TableContainer className="rounded-none border-x-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Queue ID</TableHead>
+              <TableHead>Chain</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>From</TableHead>
+              <TableHead>Tx Hash</TableHead>
+              <TableHead>Queued</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {showSkeleton ? (
+              <>
+                {new Array(pageSize).fill(0).map((_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <SkeletonRow key={i} />
+                ))}
+              </>
+            ) : (
+              <>
+                {transactions.map((tx) => (
+                  <TableRow
+                    onClick={() => {
+                      setSelectedTransaction(tx);
+                      transactionDisclosure.onOpen();
+                    }}
+                    key={`${tx.queueId}${tx.chainId}${tx.blockNumber}`}
+                    className="cursor-pointer hover:bg-accent/50"
+                  >
+                    {/* Queue ID */}
+                    <TableCell className="font-medium">
+                      <CopyAddressButton
+                        address={tx.queueId ? tx.queueId : ""}
+                        copyIconPosition="left"
+                        variant="ghost"
+                        className="text-muted-foreground"
+                      />
+                    </TableCell>
+
+                    {/* Chain Id */}
+                    <TableCell>
+                      <TxChainCell chainId={tx.chainId || undefined} />
+                    </TableCell>
+
+                    {/* Status */}
+                    <TableCell>
+                      <TxStatusCell transaction={tx} />
+                    </TableCell>
+
+                    {/* From Address */}
+                    <TableCell>
+                      {tx.fromAddress ? (
+                        <WalletAddress address={tx.fromAddress} />
+                      ) : (
+                        "N/A"
+                      )}
+                    </TableCell>
+
+                    {/* Tx Hash */}
+                    <TableCell>
+                      <TxHashCell transaction={tx} />
+                    </TableCell>
+
+                    {/* Queued At */}
+                    <TableCell>
+                      <TxQueuedAtCell transaction={tx} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </>
+            )}
+          </TableBody>
+        </Table>
+
+        {!showSkeleton && transactions.length === 0 && (
+          <div className="flex min-h-[200px] items-center justify-center">
+            No transactions found
+          </div>
+        )}
+      </TableContainer>
+
+      {showPagination && (
+        <div className="py-6">
+          <PaginationButtons
+            activePage={page}
+            onPageClick={setPage}
+            totalPages={totalPages}
+          />
+        </div>
+      )}
 
-        const chain = idToChain.get(Number.parseInt(chainId));
-        if (chain) {
-          return (
-            <Flex align="center" gap={2} className="py-2">
-              <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
-              <Text maxW={150} isTruncated>
-                {chain?.name ?? "N/A"}
-              </Text>
-            </Flex>
-          );
-        }
-      },
-    }),
-    columnHelper.accessor("status", {
-      header: "Status",
-      cell: (cell) => {
-        const transaction = cell.row.original;
-        const { errorMessage, minedAt } = transaction;
-        const status = (transaction.status as EngineStatus) ?? null;
-        if (!status) {
-          return null;
-        }
+      {transactionDisclosure.isOpen && selectedTransaction && (
+        <TransactionDetailsDrawer
+          transaction={selectedTransaction}
+          instanceUrl={props.instanceUrl}
+          authToken={props.authToken}
+          onClickPrevious={
+            idx > 0
+              ? () => setSelectedTransaction(transactions[idx - 1] || null)
+              : undefined
+          }
+          onClickNext={
+            idx < transactions.length - 1
+              ? () => setSelectedTransaction(transactions[idx + 1] || null)
+              : undefined
+          }
+          setSelectedTransaction={setSelectedTransaction}
+        />
+      )}
+    </div>
+  );
+}
 
-        const tooltip =
-          status === "errored"
-            ? errorMessage
-            : (status === "mined" || status === "retried") && minedAt
-              ? `Completed ${format(new Date(minedAt), "PP pp")}`
-              : undefined;
-
-        return (
-          <Flex align="center" gap={1}>
-            <Tooltip
-              borderRadius="md"
-              bg="transparent"
-              boxShadow="none"
-              maxW={{ md: "450px" }}
-              label={
-                tooltip ? (
-                  <Card bgColor="backgroundHighlight">
-                    <Text>{tooltip}</Text>
-                  </Card>
-                ) : undefined
-              }
-            >
-              <div>
-                <Badge variant={statusDetails[status].type}>
-                  <Flex gap={1} align="center">
-                    {statusDetails[status].name}
-                    {statusDetails[status].showTooltipIcon && (
-                      <InfoIcon className="size-4" />
-                    )}
-                  </Flex>
-                </Badge>
-              </div>
-            </Tooltip>
-          </Flex>
-        );
-      },
-    }),
-    columnHelper.accessor("fromAddress", {
-      header: "From",
-      cell: (cell) => {
-        return <WalletAddress address={cell.getValue() ?? ""} />;
-      },
-    }),
-    columnHelper.accessor("transactionHash", {
-      header: "Tx Hash",
-      cell: (cell) => {
-        const { chainId, transactionHash } = cell.row.original;
-        if (!chainId || !transactionHash) {
-          return;
-        }
+function StatusSelector(props: {
+  status: EngineStatus | undefined;
+  setStatus: (value: EngineStatus | undefined) => void;
+}) {
+  const statuses = Object.keys(statusDetails) as EngineStatus[];
 
-        const chain = idToChain.get(Number.parseInt(chainId));
-        if (chain) {
-          const explorer = chain.explorers?.[0];
-          if (!explorer) {
+  return (
+    <Select
+      value={props.status || "all"}
+      onValueChange={(v) => {
+        if (v === "all") {
+          props.setStatus(undefined);
+        } else {
+          props.setStatus(v as EngineStatus);
+        }
+      }}
+    >
+      <SelectTrigger className="min-w-[160px]">
+        <SelectValue placeholder="All" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectItem value="all">All Transactions</SelectItem>
+          {statuses.map((item) => {
             return (
-              <CopyAddressButton
-                address={transactionHash}
-                copyIconPosition="left"
-                variant="ghost"
-              />
+              <SelectItem key={item} value={item}>
+                {statusDetails[item].name}
+              </SelectItem>
             );
-          }
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
 
-          return (
-            <CopyTextButton
-              textToCopy={transactionHash}
-              copyIconPosition="left"
-              textToShow={`${transactionHash.slice(0, 6)}...${transactionHash.slice(-4)}`}
-              variant="ghost"
-              tooltip="Copy transaction hash"
-              className="font-mono text-muted-foreground text-sm"
-            />
-          );
-        }
-      },
-    }),
-    columnHelper.accessor("queuedAt", {
-      header: "Queued",
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (!value) {
-          return;
-        }
+function SkeletonRow() {
+  return (
+    <TableRow className="h-[73px]">
+      <TableCell>
+        <Skeleton className="h-6 w-[152px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[155px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[58px] rounded-full" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[145px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[160px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[108px]" />
+      </TableCell>
+    </TableRow>
+  );
+}
 
-        const date = new Date(value);
-        return (
-          <Tooltip
-            borderRadius="md"
-            bg="transparent"
-            boxShadow="none"
-            label={
-              <Card bgColor="backgroundHighlight">
-                <Text>{format(date, "PP pp z")}</Text>
-              </Card>
-            }
-            shouldWrapChildren
-          >
-            <Text>{formatDistanceToNowStrict(date, { addSuffix: true })}</Text>
-          </Tooltip>
-        );
-      },
-    }),
-  ];
+function TxChainCell(props: { chainId: string | undefined }) {
+  const { chainId } = props;
+  const { idToChain } = useAllChainsData();
 
-  const idx = selectedTransaction
-    ? transactions.indexOf(selectedTransaction)
-    : 0;
+  if (!chainId) {
+    return "N/A";
+  }
+
+  const chain = idToChain.get(Number.parseInt(chainId));
+
+  if (!chain) {
+    return `Chain ID: ${chainId}`;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <ChainIcon className="size-5" ipfsSrc={chain.icon?.url} />
+      <div className="max-w-[150px] truncate">
+        {chain.name ?? `Chain ID: ${chainId}`}
+      </div>
+    </div>
+  );
+}
+
+function TxStatusCell(props: {
+  transaction: Transaction;
+}) {
+  const { transaction } = props;
+  const { errorMessage, minedAt } = transaction;
+  const status = (transaction.status as EngineStatus) ?? null;
+  if (!status) {
+    return null;
+  }
+
+  const tooltip =
+    status === "errored"
+      ? errorMessage
+      : (status === "mined" || status === "retried") && minedAt
+        ? `Completed ${format(new Date(minedAt), "PP pp")}`
+        : undefined;
+
+  return (
+    <ToolTipLabel hoverable label={tooltip}>
+      <Badge variant={statusDetails[status].type} className="gap-2">
+        {statusDetails[status].name}
+        {errorMessage && <InfoIcon className="size-3" />}
+      </Badge>
+    </ToolTipLabel>
+  );
+}
+
+function TxHashCell(props: { transaction: Transaction }) {
+  const { idToChain } = useAllChainsData();
+  const { chainId, transactionHash } = props.transaction;
+  if (!transactionHash) {
+    return "N/A";
+  }
+
+  const chain = chainId ? idToChain.get(Number.parseInt(chainId)) : undefined;
+  const explorer = chain?.explorers?.[0];
+
+  const shortHash = `${transactionHash.slice(0, 6)}...${transactionHash.slice(-4)}`;
+  if (!explorer) {
+    return (
+      <CopyTextButton
+        textToCopy={transactionHash}
+        copyIconPosition="left"
+        textToShow={shortHash}
+        variant="ghost"
+        tooltip="Copy transaction hash"
+        className="font-mono text-muted-foreground text-sm"
+      />
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      asChild
+      className="-translate-x-2 gap-2 font-mono"
+      size="sm"
+    >
+      <Link
+        href={`${explorer.url}/tx/${transactionHash}`}
+        target="_blank"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {shortHash}{" "}
+        <ExternalLinkIcon className="size-4 text-muted-foreground" />
+      </Link>
+    </Button>
+  );
+}
+
+function TxQueuedAtCell(props: { transaction: Transaction }) {
+  const value = props.transaction.queuedAt;
+  if (!value) {
+    return;
+  }
+
+  const date = new Date(value);
+  return (
+    <ToolTipLabel label={format(date, "PP pp z")}>
+      <p>{formatDistanceToNowStrict(date, { addSuffix: true })}</p>
+    </ToolTipLabel>
+  );
+}
+
+export function TransactionCharts(props: {
+  authToken: string;
+  instanceUrl: string;
+}) {
+  const transactionsQuery = useEngineTransactions({
+    instanceUrl: props.instanceUrl,
+    autoUpdate: false,
+    authToken: props.authToken,
+    queryParams: {
+      limit: 10000,
+      page: 1,
+    },
+  });
+
+  const transactions = transactionsQuery.data?.transactions ?? [];
 
   const { analyticsData, chartConfig } = useMemo(() => {
+    if (!transactions.length) {
+      return {
+        analyticsData: [],
+        chartConfig: {},
+      };
+    }
     const dayToTxCountMap: Map<number, Record<string, number>> = new Map();
     const uniqueStatuses = new Set<string>();
 
@@ -302,62 +532,27 @@ export const TransactionsTable: React.FC<TransactionsTableProps> = ({
   }, [transactions]);
 
   return (
-    <>
-      <ThirdwebBarChart
-        title="Daily Transactions"
-        description="Transactions sent from your backend wallets per day"
-        config={chartConfig}
-        data={analyticsData}
-        isPending={isPending}
-        chartClassName="aspect-[1.5] lg:aspect-[4.5]"
-        titleClassName="text-xl mb-0"
-        hideLabel={false}
-        toolTipLabelFormatter={(_v, item) => {
-          if (Array.isArray(item)) {
-            const time = item[0].payload.time as number;
-            return formatDate(new Date(time), "MMM d, yyyy");
-          }
-          return undefined;
-        }}
-      />
-
-      <div className="h-8" />
-
-      <TWTable
-        title="transactions"
-        data={transactions}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        bodyRowClassName="hover:bg-accent/50"
-        tableScrollableClassName="max-h-[1000px]"
-        onRowClick={(row) => {
-          setSelectedTransaction(row);
-          transactionDisclosure.onOpen();
-        }}
-      />
-
-      {transactionDisclosure.isOpen && selectedTransaction && (
-        <TransactionDetailsDrawer
-          transaction={selectedTransaction}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-          onClickPrevious={
-            idx > 0
-              ? () => setSelectedTransaction(transactions[idx - 1] || null)
-              : undefined
-          }
-          onClickNext={
-            idx < transactions.length - 1
-              ? () => setSelectedTransaction(transactions[idx + 1] || null)
-              : undefined
-          }
-          setSelectedTransaction={setSelectedTransaction}
-        />
-      )}
-    </>
+    <ThirdwebBarChart
+      title="Transactions Breakdown"
+      description="Transactions sent from your backend wallets per day"
+      config={chartConfig}
+      data={analyticsData}
+      isPending={transactionsQuery.isPending}
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
+      titleClassName="text-xl mb-0"
+      hideLabel={false}
+      variant="stacked"
+      showLegend
+      toolTipLabelFormatter={(_v, item) => {
+        if (Array.isArray(item)) {
+          const time = item[0].payload.time as number;
+          return formatDate(new Date(time), "MMM d, yyyy");
+        }
+        return undefined;
+      }}
+    />
   );
-};
+}
 
 const TransactionDetailsDrawer = ({
   transaction,
@@ -418,27 +613,27 @@ const TransactionDetailsDrawer = ({
           </SheetTitle>
         </SheetHeader>
         <div className="flex flex-col gap-4">
-          <FormControl>
+          <div>
             <FormLabel>Queue ID</FormLabel>
             <Text>{transaction.queueId}</Text>
-          </FormControl>
+          </div>
 
-          <FormControl>
+          <div>
             <FormLabel>Chain</FormLabel>
-            <Flex align="center" gap={2}>
-              <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
-              <Text>{chain?.name}</Text>
-            </Flex>
-          </FormControl>
+            <div className="flex items-center gap-2">
+              <ChainIcon className="size-5" ipfsSrc={chain?.icon?.url} />
+              <span>{chain?.name}</span>
+            </div>
+          </div>
 
           {functionCalled && (
-            <FormControl>
+            <div>
               <FormLabel>Function</FormLabel>
               <Text>{functionCalled}</Text>
-            </FormControl>
+            </div>
           )}
 
-          <FormControl>
+          <div>
             <FormLabel>
               {transaction.accountAddress ? "Signer Address" : "From Address"}
             </FormLabel>
@@ -454,10 +649,10 @@ const TransactionDetailsDrawer = ({
             >
               <Text fontFamily="mono">{transaction.fromAddress}</Text>
             </LinkButton>
-          </FormControl>
+          </div>
 
           {transaction.accountAddress && (
-            <FormControl>
+            <div>
               <FormLabel>Account Address</FormLabel>
               <LinkButton
                 variant="ghost"
@@ -471,10 +666,10 @@ const TransactionDetailsDrawer = ({
               >
                 <Text fontFamily="mono">{transaction.accountAddress}</Text>
               </LinkButton>
-            </FormControl>
+            </div>
           )}
 
-          <FormControl>
+          <div>
             {/* The "to" address is usually a contract except for native token transfers. */}
             <FormLabel>
               {functionCalled === "transfer"
@@ -493,23 +688,18 @@ const TransactionDetailsDrawer = ({
             >
               <Text fontFamily="mono">{transaction.toAddress}</Text>
             </LinkButton>
-          </FormControl>
+          </div>
 
           {transaction.errorMessage && (
-            <FormControl>
+            <div>
               <FormLabel>Error</FormLabel>
               <Text noOfLines={errorMessageDisclosure.isOpen ? undefined : 3}>
                 {transaction.errorMessage}
               </Text>
-              <Button
-                onClick={errorMessageDisclosure.onToggle}
-                variant="link"
-                size="xs"
-                colorScheme="gray"
-              >
+              <Button onClick={errorMessageDisclosure.onToggle} variant="link">
                 {errorMessageDisclosure.isOpen ? "Show less" : "Show more"}
               </Button>
-            </FormControl>
+            </div>
           )}
 
           <Divider />
@@ -524,15 +714,14 @@ const TransactionDetailsDrawer = ({
 
           {/* On-chain details */}
 
-          <FormControl>
+          <div>
             <div className="flex flex-row">
               <FormLabel>Value</FormLabel>
-              <Tooltip
+              <ToolTipLabel
                 label={`The amount of ${symbol} sent to the "To" .`}
-                shouldWrapChildren
               >
                 <InfoIcon className="size-4" />
-              </Tooltip>
+              </ToolTipLabel>
             </div>
             <Text>
               {transaction.value
@@ -540,11 +729,11 @@ const TransactionDetailsDrawer = ({
                 : 0}{" "}
               {symbol}
             </Text>
-          </FormControl>
+          </div>
 
           {transaction.transactionHash && (
             <>
-              <FormControl>
+              <div>
                 <FormLabel>Transaction Hash</FormLabel>
                 <LinkButton
                   variant="ghost"
@@ -561,66 +750,57 @@ const TransactionDetailsDrawer = ({
                     {transaction.transactionHash}
                   </Text>
                 </LinkButton>
-              </FormControl>
+              </div>
 
-              <FormControl>
+              <div>
                 <FormLabel>Transaction Fee</FormLabel>
                 <Text>{txFeeDisplay}</Text>
-              </FormControl>
+              </div>
 
               <Collapse in={advancedTxDetailsDisclosure.isOpen}>
                 <div className="flex flex-col gap-4">
                   {transaction.nonce && (
-                    <FormControl>
+                    <div>
                       <div className="flex flex-row">
                         <FormLabel>Nonce</FormLabel>
-                        <Tooltip
-                          label="The nonce value this transaction was submitted to mempool."
-                          shouldWrapChildren
-                        >
+                        <ToolTipLabel label="The nonce value this transaction was submitted to mempool.">
                           <InfoIcon className="size-4" />
-                        </Tooltip>
+                        </ToolTipLabel>
                       </div>
                       <Text>{transaction.nonce ?? "N/A"}</Text>
-                    </FormControl>
+                    </div>
                   )}
 
                   {transaction.gasLimit && (
-                    <FormControl>
+                    <div>
                       <div className="flex flex-row">
                         <FormLabel>Gas Units</FormLabel>
-                        <Tooltip
-                          label="The gas units spent for this transaction."
-                          shouldWrapChildren
-                        >
+                        <ToolTipLabel label="The gas units spent for this transaction.">
                           <InfoIcon className="size-4" />
-                        </Tooltip>
+                        </ToolTipLabel>
                       </div>
                       <Text>
                         {Number(transaction.gasLimit).toLocaleString()}
                       </Text>
-                    </FormControl>
+                    </div>
                   )}
 
                   {transaction.gasPrice && (
-                    <FormControl>
+                    <div>
                       <div className="flex flex-row">
                         <FormLabel>Gas Price</FormLabel>
-                        <Tooltip
-                          label="The price in wei spent for each gas unit."
-                          shouldWrapChildren
-                        >
+                        <ToolTipLabel label="The price in wei spent for each gas unit.">
                           <InfoIcon className="size-4" />
-                        </Tooltip>
+                        </ToolTipLabel>
                       </div>
                       <Text>
                         {Number(transaction.gasPrice).toLocaleString()}
                       </Text>
-                    </FormControl>
+                    </div>
                   )}
 
                   {transaction.blockNumber && (
-                    <FormControl>
+                    <div>
                       <FormLabel>Block</FormLabel>
                       <LinkButton
                         variant="ghost"
@@ -635,7 +815,7 @@ const TransactionDetailsDrawer = ({
                       >
                         <Text>{transaction.blockNumber}</Text>
                       </LinkButton>
-                    </FormControl>
+                    </div>
                   )}
                 </div>
               </Collapse>
@@ -643,9 +823,8 @@ const TransactionDetailsDrawer = ({
               <Button
                 onClick={advancedTxDetailsDisclosure.onToggle}
                 variant="link"
-                size="xs"
-                colorScheme="gray"
-                w="fit-content"
+                size="sm"
+                className="w-fit"
               >
                 {advancedTxDetailsDisclosure.isOpen
                   ? "Hide transaction details"
@@ -656,20 +835,22 @@ const TransactionDetailsDrawer = ({
         </div>
         <div className="mt-4 flex flex-row justify-end gap-3 border-border border-t pt-4">
           <Button
-            isDisabled={!onClickPrevious}
+            disabled={!onClickPrevious}
             onClick={onClickPrevious}
             variant="outline"
-            leftIcon={<MoveLeftIcon className="size-4" />}
+            className="gap-2"
           >
+            <MoveLeftIcon className="size-4" />
             Previous
           </Button>
           <Button
-            isDisabled={!onClickNext}
+            disabled={!onClickNext}
             onClick={onClickNext}
             variant="outline"
-            rightIcon={<MoveRightIcon className="size-4" />}
+            className="gap-2"
           >
             Next
+            <MoveRightIcon className="size-4" />
           </Button>
         </div>
       </SheetContent>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCardUI.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCardUI.tsx
index 03216b210e0..d72c5491788 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCardUI.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCardUI.tsx
@@ -177,6 +177,8 @@ export function RpcMethodBarChartCardUI({
                   idx === 0 ? 4 : 0,
                 ]}
                 fill={`hsl(var(--chart-${idx + 1}))`}
+                strokeWidth={1}
+                className="stroke-background"
               />
             ))}
           </RechartsBarChart>
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 947548f3c1f..ea9f3b1f749 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
@@ -222,6 +222,8 @@ export function DailyConnectionsChartCard(props: {
               dataKey={chartToShow}
               fill={`var(--color-${chartToShow})`}
               radius={8}
+              strokeWidth={1}
+              className="stroke-background"
             >
               {barChartData.length < 50 && (
                 <LabelList
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 3697409006a..087c842ac1e 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
@@ -247,8 +247,8 @@ export function WalletConnectorsChartCard(props: {
                   fill={chartConfig[walletType]?.color}
                   radius={4}
                   stackId="a"
-                  strokeWidth={1.5}
-                  className="stroke-muted"
+                  strokeWidth={1}
+                  className="stroke-background"
                 />
               );
             })}
diff --git a/apps/dashboard/src/app/team/components/Analytics/BarChart.tsx b/apps/dashboard/src/app/team/components/Analytics/BarChart.tsx
index 255049f5811..14b3ebf17fe 100644
--- a/apps/dashboard/src/app/team/components/Analytics/BarChart.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/BarChart.tsx
@@ -98,6 +98,8 @@ export function BarChart({
             dataKey={activeKey}
             radius={4}
             fill={chartConfig[activeKey]?.color ?? "hsl(var(--chart-1))"}
+            strokeWidth={1}
+            className="stroke-background"
           />
         </RechartsBarChart>
       )}
diff --git a/apps/dashboard/src/app/team/components/Analytics/PieChart.tsx b/apps/dashboard/src/app/team/components/Analytics/PieChart.tsx
index 395b182a0dd..8d24142fe6d 100644
--- a/apps/dashboard/src/app/team/components/Analytics/PieChart.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/PieChart.tsx
@@ -47,7 +47,14 @@ export function PieChart({
             />
           }
         />
-        <Pie data={data} dataKey="value" nameKey="label" innerRadius={60} />
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="label"
+          innerRadius={60}
+          strokeWidth={1}
+          stroke="hsl(var(--background))"
+        />
       </RechartsPieChart>
     </ChartContainer>
   );
diff --git a/apps/dashboard/src/components/analytics/empty-chart-state.tsx b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
index 1d4bd6c6785..9dfd382f935 100644
--- a/apps/dashboard/src/components/analytics/empty-chart-state.tsx
+++ b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
@@ -37,7 +37,7 @@ export function EmptyChartState({ children }: { children?: React.ReactNode }) {
 
 export function LoadingChartState() {
   return (
-    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-card">
+    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/50">
       <Spinner className="size-10" />
     </div>
   );
diff --git a/apps/dashboard/src/components/analytics/interval-selector.tsx b/apps/dashboard/src/components/analytics/interval-selector.tsx
index ef8f3d6ff75..003b0658320 100644
--- a/apps/dashboard/src/components/analytics/interval-selector.tsx
+++ b/apps/dashboard/src/components/analytics/interval-selector.tsx
@@ -5,7 +5,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { cn } from "../../@/lib/utils";
+import { cn } from "@/lib/utils";
 
 export function IntervalSelector(props: {
   intervalType: "day" | "week";
@@ -19,7 +19,9 @@ export function IntervalSelector(props: {
         props.setIntervalType(value);
       }}
     >
-      <SelectTrigger className={cn("w-auto md:w-[120px]", props.className)}>
+      <SelectTrigger
+        className={cn("w-auto bg-card md:w-[120px]", props.className)}
+      >
         <SelectValue placeholder="Select" />
       </SelectTrigger>
       <SelectContent position="popper">
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
index 8cfe049dc98..8728f1f502a 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
@@ -228,8 +228,8 @@ export function InAppWalletUsersChartCardUI(props: {
                   fill={chartConfig[authMethod]?.color}
                   radius={4}
                   stackId="a"
-                  strokeWidth={1.5}
-                  className="stroke-muted"
+                  strokeWidth={1}
+                  className="stroke-background"
                 />
               );
             })}
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
index e7f3355c249..14a2df4acd4 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
@@ -160,15 +160,15 @@ function RenderData(props: {
           <div className="flex min-h-[150px] w-full items-center justify-center text-muted-foreground text-sm">
             No data available
           </div>
-        ) : (
-          <div className="mt-8">
+        ) : props.query.data ? (
+          <div className="my-8">
             <PaginationButtons
               activePage={props.activePage}
               totalPages={props.query.data?.pages || 5}
               onPageClick={props.setPage}
             />
           </div>
-        )}
+        ) : null}
       </ScrollShadow>
     </div>
   );
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
index dcaf20b6279..8e558579ae0 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
@@ -186,6 +186,8 @@ function RenderData(props: {
                 fill={barColor}
                 radius={8}
                 barSize={20}
+                strokeWidth={1}
+                className="stroke-background"
               />
 
               {props.query.data && (
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
index 4bc1b097167..a1de25c8536 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
@@ -23,7 +23,7 @@ export function FailedToLoad() {
 
 export function NoDataOverlay() {
   return (
-    <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/30 text-muted-foreground text-sm backdrop-blur-sm">
+    <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-card/50 text-muted-foreground text-sm backdrop-blur-sm">
       No data available
     </div>
   );
@@ -87,7 +87,7 @@ export function IntervalSelector(props: {
         props.setIntervalType(value);
       }}
     >
-      <SelectTrigger className="w-auto bg-transparent">
+      <SelectTrigger className="w-auto bg-card">
         <SelectValue placeholder="Select" />
       </SelectTrigger>
       <SelectContent position="popper">
diff --git a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx
index 1788ae451f1..f1192192fed 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx
@@ -193,8 +193,8 @@ export function SponsoredTransactionsChartCard(props: {
                   fill={chartConfig[chainId]?.color}
                   radius={4}
                   stackId="a"
-                  strokeWidth={1.5}
-                  className="stroke-muted"
+                  strokeWidth={1}
+                  className="stroke-background"
                 />
               );
             })}
diff --git a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx
index 96fe3fe82cb..b3d67af4c4e 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx
@@ -228,8 +228,8 @@ export function TotalSponsoredChartCard(props: {
                   fill={chartConfig[chainId]?.color}
                   radius={4}
                   stackId="a"
-                  strokeWidth={1.5}
-                  className="stroke-muted"
+                  strokeWidth={1}
+                  className="stroke-background"
                 />
               );
             })}