diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index 257694135fc..25c6ef890fa 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -165,6 +165,8 @@ function useUnderline<El extends HTMLElement>() {
           block: "nearest",
           inline: "center",
         });
+      } else if (lineRef.current) {
+        lineRef.current.style.width = "0px";
       }
     }
 
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
index cc3730be2f5..3b08e193fc2 100644
--- a/apps/dashboard/src/app/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -1,6 +1,6 @@
 import { AppFooter } from "@/components/blocks/app-footer";
-import { DashboardHeader } from "app/components/Header/DashboardHeader";
 import { ErrorProvider } from "../../contexts/error-handler";
+import { DashboardHeader } from "../components/Header/DashboardHeader";
 
 export default function DashboardLayout(props: { children: React.ReactNode }) {
   return (
diff --git a/apps/dashboard/src/app/components/Header/DashboardHeader.tsx b/apps/dashboard/src/app/components/Header/DashboardHeader.tsx
index 4e8df82302f..fe2ab2be4ca 100644
--- a/apps/dashboard/src/app/components/Header/DashboardHeader.tsx
+++ b/apps/dashboard/src/app/components/Header/DashboardHeader.tsx
@@ -1,68 +1,101 @@
-import { ColorModeToggle } from "@/components/color-mode-toggle";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { NavLink } from "@/components/ui/NavLink";
+import { Button } from "@/components/ui/button";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
+import { CmdKSearch } from "components/cmd-k-search";
+import { ColorModeToggle } from "components/color-mode/color-mode-toggle";
+import { Logo } from "components/logo";
+import { CreditsButton } from "components/settings/Account/Billing/CreditsButton";
+import { UpgradeButton } from "components/settings/Account/Billing/UpgradeButton";
+import { CircleHelpIcon } from "lucide-react";
 import Link from "next/link";
-import { ThirdwebMiniLogo } from "../ThirdwebMiniLogo";
-import { NavLink } from "../nav-link.client";
-import { MobileBurgerMenu } from "./MobileBurgerMenu";
-import { headerLinks } from "./headerLinks";
+import { Suspense } from "react";
+import { DashboardHeaderTabs } from "./DashboardHeaderTabs";
 
-export function DashboardHeader() {
+export const DashboardHeader: React.FC = () => {
   return (
-    // the "h-24" avoids layout shift when connecting wallet (connected wallet button is taller than disconnected...)
-    <header className="flex h-20 flex-shrink-0 flex-row items-center justify-between border-border border-b bg-muted/50 px-4 py-4 md:h-20 lg:px-6">
-      {/* Left */}
-      <div className="flex items-center gap-6">
-        <div className="flex items-center gap-2">
-          <MobileBurgerMenu />
+    <div className="bg-muted/50">
+      <header className="flex items-center justify-between px-4 py-3 lg:px-6">
+        {/* left */}
+        <div className="flex items-center gap-4">
           <Link href="/dashboard">
-            <ThirdwebMiniLogo className="h-6" />
+            <Logo hideWordmark />
           </Link>
+          <CmdKSearch />
         </div>
 
-        <div className="hidden items-center gap-2 md:flex">
-          {headerLinks.left.map((link) => (
-            <NavLink
-              key={link.href}
-              href={link.href}
-              target={link.href.startsWith("https") ? "_blank" : undefined}
-              className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
-              activeClassName="font-medium text-foreground"
-            >
-              {link.name}
-            </NavLink>
-          ))}
-        </div>
-      </div>
-      {/* Right */}
-      <div className="flex items-center gap-4">
-        <div className="items-center gap-2 lg:flex">
-          <div className="hidden items-center gap-2 lg:flex">
-            {headerLinks.right.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                target={link.href.startsWith("https") ? "_blank" : undefined}
-                className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
+        {/* Right */}
+        <div className="flex items-center gap-2">
+          <div className="hidden gap-2 md:flex">
+            <Suspense fallback={null}>
+              <CreditsButton />
+            </Suspense>
+            <UpgradeButton />
+          </div>
+
+          <HeaderNavLink
+            trackingLabel="chainlist"
+            href="/chainlist"
+            label="Chainlist"
+          />
+
+          <HeaderNavLink
+            trackingLabel="docs"
+            href="https://portal.thirdweb.com"
+            label="Docs"
+          />
+
+          <HeaderNavLink
+            trackingLabel="support"
+            href="/support"
+            label="Support"
+          />
+
+          <div className="md:hidden">
+            <Button asChild variant="ghost">
+              <NavLink
+                className="fade-in-0 !h-auto !w-auto p-2"
+                href="/support"
+                tracking={{
+                  category: "header",
+                  action: "click",
+                  label: "support",
+                }}
               >
-                {link.name}
-              </Link>
-            ))}
+                <CircleHelpIcon className="size-5" />
+              </NavLink>
+            </Button>
           </div>
+
           <ColorModeToggle />
+
+          <div className="md:ml-2">
+            <CustomConnectWallet />
+          </div>
         </div>
+      </header>
 
-        <ClientOnly
-          ssr={
-            <div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border bg-muted/50">
-              <Spinner className="size-4" />
-            </div>
-          }
-        >
-          <CustomConnectWallet />
-        </ClientOnly>
-      </div>
-    </header>
+      <DashboardHeaderTabs />
+    </div>
+  );
+};
+
+function HeaderNavLink(props: {
+  label: string;
+  trackingLabel: string;
+  href: string;
+}) {
+  return (
+    <NavLink
+      href={props.href}
+      tracking={{
+        category: "header",
+        action: "click",
+        label: props.trackingLabel,
+      }}
+      className="hidden px-2.5 text-muted-foreground text-sm hover:text-foreground md:block"
+      activeClassName="text-foreground"
+    >
+      {props.label}
+    </NavLink>
   );
 }
diff --git a/apps/dashboard/src/app/components/Header/DashboardHeaderTabs.tsx b/apps/dashboard/src/app/components/Header/DashboardHeaderTabs.tsx
new file mode 100644
index 00000000000..02b71728be9
--- /dev/null
+++ b/apps/dashboard/src/app/components/Header/DashboardHeaderTabs.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { TabLinks } from "@/components/ui/tabs";
+import { usePathname } from "next/navigation";
+
+export function DashboardHeaderTabs() {
+  const pathname = usePathname() || "";
+  return (
+    <TabLinks
+      className="w-full"
+      tabContainerClassName="px-4"
+      shadowColor="transparent"
+      links={[
+        {
+          href: "/dashboard",
+          name: "Home",
+          isActive: pathname === "/dashboard",
+        },
+        {
+          href: "/dashboard/connect/analytics",
+          name: "Connect",
+          isActive: pathname.startsWith("/dashboard/connect"),
+        },
+        {
+          href: "/dashboard/contracts/deploy",
+          name: "Contracts",
+          isActive: pathname.startsWith("/dashboard/contracts"),
+        },
+        {
+          href: "/dashboard/engine",
+          name: "Engine",
+          isActive: pathname.startsWith("/dashboard/engine"),
+        },
+        {
+          href: "/dashboard/settings/api-keys",
+          name: "Settings",
+          isActive: pathname.startsWith("/dashboard/settings"),
+        },
+      ]}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/components/Header/MobileBurgerMenu.tsx b/apps/dashboard/src/app/components/Header/MobileBurgerMenu.tsx
deleted file mode 100644
index 089e9bea691..00000000000
--- a/apps/dashboard/src/app/components/Header/MobileBurgerMenu.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import { Menu, XIcon } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { headerLinks } from "./headerLinks";
-
-export function MobileBurgerMenu() {
-  const [showBurgerMenu, setShowBurgerMenu] = useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (showBurgerMenu) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-  }, [showBurgerMenu]);
-
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  });
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        size="icon"
-        className="md:hidden"
-        onClick={() => setShowBurgerMenu(!showBurgerMenu)}
-      >
-        <Menu strokeWidth={1} />
-      </Button>
-
-      {showBurgerMenu && (
-        <nav className="fade-in-20 slide-in-from-top-3 fixed inset-0 top-[80px] z-50 animate-in border-t bg-background p-6">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="absolute top-6 right-6"
-            onClick={() => setShowBurgerMenu(false)}
-          >
-            <XIcon strokeWidth={1} />
-          </Button>
-
-          <div className="flex flex-col gap-7">
-            {[...headerLinks.left, ...headerLinks.right].map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="text-lg "
-                target={link.href.startsWith("https") ? "_blank" : undefined}
-              >
-                {link.name}
-              </Link>
-            ))}
-          </div>
-        </nav>
-      )}
-    </>
-  );
-}
diff --git a/apps/dashboard/src/app/components/Header/headerLinks.ts b/apps/dashboard/src/app/components/Header/headerLinks.ts
deleted file mode 100644
index 1879f8d9b67..00000000000
--- a/apps/dashboard/src/app/components/Header/headerLinks.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const headerLinks = {
-  left: [
-    {
-      name: "Connect",
-      href: "/dashboard/connect/analytics",
-    },
-    {
-      name: "Contracts",
-      href: "/dashboard/contracts",
-    },
-    {
-      name: "Engine",
-      href: "/dashboard/engine",
-    },
-    {
-      name: "Settings",
-      href: "/dashboard/settings/api-keys",
-    },
-  ],
-  right: [
-    {
-      name: "Chainlist",
-      href: "/chainlist",
-    },
-    {
-      name: "Docs",
-      href: "https://portal.thirdweb.com",
-    },
-    {
-      name: "Support",
-      href: "https://thirdweb.com/support",
-    },
-  ],
-};
diff --git a/apps/dashboard/src/app/components/nav-link.client.tsx b/apps/dashboard/src/app/components/nav-link.client.tsx
deleted file mode 100644
index 387c8bfaa1c..00000000000
--- a/apps/dashboard/src/app/components/nav-link.client.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import Link, { type LinkProps } from "next/link";
-import { usePathname } from "next/navigation";
-
-type NavLinkProps = Omit<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  keyof LinkProps
-> &
-  Omit<LinkProps, "href"> & {
-    href: string;
-    activeClassName: string;
-  };
-
-export const NavLink: React.FC<React.PropsWithChildren<NavLinkProps>> = ({
-  children,
-  className,
-  activeClassName,
-  ...props
-}) => {
-  const pathname = usePathname();
-  const isActive = !!pathname?.startsWith(props.href);
-  return (
-    <Link {...props} className={cn(className, isActive && activeClassName)}>
-      {children}
-    </Link>
-  );
-};
diff --git a/apps/dashboard/src/components/cmd-k-search/index.tsx b/apps/dashboard/src/components/cmd-k-search/index.tsx
index 39d853b8370..30a18d5bc7a 100644
--- a/apps/dashboard/src/components/cmd-k-search/index.tsx
+++ b/apps/dashboard/src/components/cmd-k-search/index.tsx
@@ -290,12 +290,12 @@ export const CmdKSearch: React.FC = () => {
       </div>
 
       <Button
-        className="p-2 lg:hidden"
+        className="!h-auto !w-auto p-2 lg:hidden"
         aria-label="Search any contract"
         variant="ghost"
         onClick={() => setOpen(true)}
       >
-        <SearchIcon className="size-4" />
+        <SearchIcon className="size-5" />
       </Button>
 
       <CmdKSearchModal open={open} setOpen={setOpen} />
diff --git a/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx b/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx
index 2f0de0b74a7..194285f02d7 100644
--- a/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx
+++ b/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useTheme } from "next-themes";
@@ -21,15 +23,15 @@ export const ColorModeToggle: React.FC = () => {
       render={(v) => {
         return (
           <Button
-            className="fade-in-0 p-2 md:p-3"
+            className="fade-in-0 !h-auto !w-auto p-2 text-muted-foreground hover:text-foreground"
             variant="ghost"
             aria-label="toggle color"
             onClick={() => setTheme(theme === "light" ? "dark" : "light")}
           >
             {v === "dark" ? (
-              <FiMoon className="size-4 md:size-5" />
+              <FiMoon className="size-5" />
             ) : (
-              <FiSun className="size-4 md:size-5" />
+              <FiSun className="size-5" />
             )}
           </Button>
         );
diff --git a/apps/dashboard/src/components/layout/app-shell/index.tsx b/apps/dashboard/src/components/layout/app-shell/index.tsx
index 0e069d2ab69..0330a196aac 100644
--- a/apps/dashboard/src/components/layout/app-shell/index.tsx
+++ b/apps/dashboard/src/components/layout/app-shell/index.tsx
@@ -1,24 +1,9 @@
 import { AppFooter } from "@/components/blocks/app-footer";
-import { TabLinks } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { Container, Flex, GridItem, Icon } from "@chakra-ui/react";
-import { CmdKSearch } from "components/cmd-k-search";
-import { ColorModeToggle } from "components/color-mode/color-mode-toggle";
-import { Logo } from "components/logo";
-import { CreditsButton } from "components/settings/Account/Billing/CreditsButton";
-import { UpgradeButton } from "components/settings/Account/Billing/UpgradeButton";
+import { Container } from "@chakra-ui/react";
 import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
-import { useRouter } from "next/router";
-import { FiHelpCircle } from "react-icons/fi";
-import {
-  Button,
-  Link,
-  LinkButton,
-  TrackedIconButton,
-  TrackedLink,
-} from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
+import { DashboardHeader } from "../../../app/components/Header/DashboardHeader";
 
 export interface AppShellProps {
   layout?: "custom-contract";
@@ -36,7 +21,7 @@ export const AppShell: ComponentWithChildren<AppShellProps> = ({
 }) => {
   return (
     <div className="bg-background">
-      <AppHeader />
+      <DashboardHeader />
       <main
         className={cn("min-h-screen py-6 md:pt-10 md:pb-20", mainClassName)}
       >
@@ -56,131 +41,3 @@ export const AppShell: ComponentWithChildren<AppShellProps> = ({
     </div>
   );
 };
-
-const AppHeader: React.FC = () => {
-  const { pathname } = useRouter();
-
-  return (
-    <GridItem
-      colSpan={{ base: 2, md: 2 }}
-      rowSpan={1}
-      zIndex="sticky"
-      className="bg-muted/50"
-    >
-      <Container
-        maxW="100%"
-        display="flex"
-        py={3}
-        as="header"
-        alignItems="center"
-        className="!px-4 lg:!px-6"
-      >
-        <Flex align="center" gap={4}>
-          <Link href="/dashboard">
-            <Logo hideWordmark />
-          </Link>
-          <CmdKSearch />
-        </Flex>
-
-        <Flex align="center" gap={[2, 4]} marginLeft="auto">
-          <Flex display={{ base: "none", md: "flex" }} gap={2}>
-            <CreditsButton />
-            <UpgradeButton />
-          </Flex>
-          <Button
-            as={TrackedLink}
-            variant="link"
-            href="/chainlist"
-            category="header"
-            label="chainlist"
-            color="bgBlack"
-            display={{ base: "none", md: "block" }}
-            size="sm"
-            mx={1.5}
-          >
-            Chainlist
-          </Button>
-          <Button
-            as={TrackedLink}
-            variant="link"
-            href="https://portal.thirdweb.com"
-            isExternal
-            category="header"
-            label="docs"
-            color="bgBlack"
-            display={{ base: "none", md: "block" }}
-            size="sm"
-            mx={1.5}
-          >
-            Docs
-          </Button>
-          <Button
-            as={TrackedLink}
-            variant="link"
-            href="/support"
-            category="header"
-            label="docs"
-            color="bgBlack"
-            display={{ base: "none", md: "block" }}
-            size="sm"
-            mx={1.5}
-          >
-            Support
-          </Button>
-          <Flex display={{ base: "flex", md: "none" }}>
-            <TrackedIconButton
-              bg="transparent"
-              size="sm"
-              aria-label="get-help"
-              icon={<Icon as={FiHelpCircle} />}
-              category="header"
-              label="support"
-              as={LinkButton}
-              href="/support"
-            />
-          </Flex>
-          <ColorModeToggle />
-          <div className="md:ml-2">
-            <CustomConnectWallet />
-          </div>
-        </Flex>
-      </Container>
-
-      {/* Tabs */}
-      <TabLinks
-        className="w-full"
-        tabContainerClassName="px-4 lg:px-6"
-        shadowColor="transparent"
-        links={[
-          {
-            href: "/dashboard",
-            name: "Home",
-            isActive: pathname === "/dashboard",
-          },
-          {
-            href: "/dashboard/connect/analytics",
-            name: "Connect",
-            isActive: pathname.startsWith("/dashboard/connect"),
-          },
-          {
-            href: "/dashboard/contracts/deploy",
-            name: "Contracts",
-            isActive:
-              pathname.startsWith("/dashboard/contracts") ||
-              pathname === "/explore",
-          },
-          {
-            href: "/dashboard/engine",
-            name: "Engine",
-            isActive: pathname.startsWith("/dashboard/engine"),
-          },
-          {
-            href: "/dashboard/settings/api-keys",
-            name: "Settings",
-            isActive: pathname.startsWith("/dashboard/settings"),
-          },
-        ]}
-      />
-    </GridItem>
-  );
-};
diff --git a/apps/dashboard/src/components/logo/index.tsx b/apps/dashboard/src/components/logo/index.tsx
index 93a9db47022..9827a5ffa14 100644
--- a/apps/dashboard/src/components/logo/index.tsx
+++ b/apps/dashboard/src/components/logo/index.tsx
@@ -1,5 +1,4 @@
 import { cn } from "@/lib/utils";
-import { VisuallyHidden } from "@chakra-ui/react";
 
 export const IconLogo: React.FC<{ extraClass?: string; color?: string }> = ({
   color,
@@ -95,7 +94,7 @@ export const Logo: React.FC<ILogoProps> = ({
   color = "var(--chakra-colors-wordmark)",
 }) => {
   return (
-    <h2 className="flex flex-row items-center gap-2">
+    <h2 className="flex flex-row items-center gap-2" aria-label="thirdweb">
       {hideIcon ?? <IconLogo extraClass="w-9 md:w-10 flex-shrink-0" />}
       {(hideWordmark && !forceShowWordMark) ?? (
         <div
@@ -116,7 +115,6 @@ export const Logo: React.FC<ILogoProps> = ({
           </svg>
         </div>
       )}
-      <VisuallyHidden>thirdweb</VisuallyHidden>
     </h2>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsButton.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsButton.tsx
index 5649be3f77f..46312454cd5 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CreditsButton.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CreditsButton.tsx
@@ -1,21 +1,18 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 import { useAccount, useAccountCredits } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import {
-  Box,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useRouter } from "next/router";
-import { useMemo, useState } from "react";
-import { Button, Card, Text } from "tw-components";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
 import { CreditsItem } from "./CreditsItem";
 
 export const formatToDollars = (cents: number) => {
@@ -27,16 +24,11 @@ export const formatToDollars = (cents: number) => {
 };
 
 export const CreditsButton = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isOpen, setIsOpen] = useState(false);
   const trackEvent = useTrack();
-
-  const router = useRouter();
-  const { fromOpCredits: fromOpCreditsQuery } = router.query;
-
-  const shouldShowTooltip = useMemo(
-    () => fromOpCreditsQuery !== undefined,
-    [fromOpCreditsQuery],
-  );
+  const searchParams = useSearchParams();
+  const fromOpCreditsQuery = searchParams?.get("fromOpCredits");
+  const shouldShowTooltip = fromOpCreditsQuery !== null;
 
   const [shouldClose, setShouldClose] = useState(false);
 
@@ -56,74 +48,65 @@ export const CreditsButton = () => {
   const restCredits = credits?.filter((crd) => !crd.name.startsWith("OP -"));
 
   return (
-    <>
-      <Box position="relative">
+    <div className="relative">
+      <Button
+        onClick={() => {
+          setIsOpen(true);
+          trackEvent({
+            category: "credits",
+            action: "button",
+            label: "view-credits",
+          });
+        }}
+        variant="outline"
+        className="h-full rounded-2xl bg-background py-1 text-muted-foreground text-xs hover:text-foreground"
+        size="sm"
+      >
+        Credits: {formatToDollars(totalCreditBalance || 0)}
+      </Button>
+
+      <div
+        className={cn(
+          "absolute z-10 mt-2 w-[300px] rounded-lg border border-border bg-background p-4",
+          shouldShowTooltip && !shouldClose ? "block" : "hidden",
+        )}
+      >
+        <p className="mb-4 text-muted-foreground text-sm">
+          You can view how many credits you have here at any time.
+        </p>
+
         <Button
-          onClick={() => {
-            trackEvent({
-              category: "credits",
-              action: "button",
-              label: "view-credits",
-            });
-            onOpen();
-          }}
+          onClick={() => setShouldClose(true)}
           variant="outline"
-          colorScheme="blue"
           size="sm"
         >
-          <Text color="bgBlack" fontWeight="bold">
-            Credits: {formatToDollars(totalCreditBalance || 0)}
-          </Text>
+          Got it
         </Button>
+      </div>
 
-        <Card
-          position="absolute"
-          bg="backgroundBody"
-          display={shouldShowTooltip && !shouldClose ? "block" : "none"}
-          w="300px"
-          mt={2}
-          zIndex="popover"
-        >
-          <Text mb={4}>
-            You can view how many credits you have here at any time.
-          </Text>
+      {/* Credits Modal  */}
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent dialogOverlayClassName="z-[10000]" className="z-[10001]">
+          <DialogHeader>
+            <DialogTitle className="font-semibold text-2xl tracking-tight">
+              Credits
+            </DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col gap-4">
+            <CreditsItem
+              credit={opCredit}
+              isOpCreditDefault={true}
+              onClickApply={() => {
+                setIsOpen(false);
+              }}
+            />
 
-          <Button
-            onClick={() => setShouldClose(true)}
-            variant="outline"
-            size="sm"
-          >
-            Got it
-          </Button>
-        </Card>
-      </Box>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered size="xl">
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalCloseButton />
-          <ModalHeader>Credits Balance</ModalHeader>
-          <ModalBody>
-            <Flex flexDir="column" gap={4}>
-              <CreditsItem
-                credit={opCredit}
-                onCreditsButton={true}
-                isOpCreditDefault={true}
-                onClickApply={() => {
-                  onClose();
-                }}
-              />
-              {restCredits?.map((credit) => (
-                <CreditsItem
-                  key={credit.couponId}
-                  credit={credit}
-                  onCreditsButton={true}
-                />
-              ))}
-            </Flex>
-          </ModalBody>
-          <ModalFooter />
-        </ModalContent>
-      </Modal>
-    </>
+            {restCredits?.map((credit) => (
+              <CreditsItem key={credit.couponId} credit={credit} />
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
index b9d111feec3..49438431c98 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
@@ -1,23 +1,23 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { type BillingCredit, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { Alert, AlertDescription, AlertIcon, Flex } from "@chakra-ui/react";
-import { ChakraNextImage } from "components/Image";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { formatDistance } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { Card, LinkButton, Text } from "tw-components";
+import { CircleAlertIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 import { formatToDollars } from "./CreditsButton";
 
 interface CreditsItemProps {
   credit?: BillingCredit;
-  onCreditsButton?: true;
   isOpCreditDefault?: boolean;
   onClickApply?: () => void;
 }
 
 export const CreditsItem: React.FC<CreditsItemProps> = ({
   credit,
-  onCreditsButton,
   isOpCreditDefault,
   onClickApply,
 }) => {
@@ -43,9 +43,9 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
   }
 
   return (
-    <Card p={6} as={Flex} flexDir="column" gap={3}>
-      <Flex flexDir="column" gap={4}>
-        <div className="flex flex-row gap-2">
+    <div className="flex flex-col gap-2 rounded-lg border border-border bg-muted/50 p-4">
+      <div className="relative">
+        <div className="absolute top-0 right-0">
           {isOpCredit ? (
             <ChainIcon
               ipfsSrc=// Hard-coded here to remove @thirdweb dev/chains
@@ -53,26 +53,78 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
               size={24}
             />
           ) : isTwCredit ? (
-            <ChakraNextImage
+            <Image
               src={require("../../../../../public/brand/thirdweb-icon.svg")}
               alt="tw-credit"
-              boxSize={6}
+              className="size-6"
               objectFit="contain"
             />
           ) : isStartupCredit ? (
-            <ChakraNextImage
+            <Image
               src={require("../../../../../public/brand/thirdweb-icon.svg")}
               alt="tw-credit"
-              boxSize={6}
+              className="size-6"
               objectFit="contain"
             />
           ) : null}
-          <Text color="bgBlack">{creditTitle}</Text>
-          {!hasAppliedForOpGrant && isOpCredit && (
-            <LinkButton
+        </div>
+
+        <h3 className="text-foreground">{creditTitle}</h3>
+      </div>
+
+      <div className="flex gap-4">
+        <div>
+          <h4 className="font-medium text-muted-foreground text-sm">
+            Remaining Credits
+          </h4>
+          <p className="text-foreground text-sm">
+            {formatToDollars(credit?.remainingValueUsdCents || 0)}
+          </p>
+        </div>
+
+        {!isTwCredit && (
+          <div>
+            <h4 className="font-medium text-muted-foreground text-sm">
+              Claimed Credits (All-Time)
+            </h4>
+            <p className="text-foreground text-sm">
+              {formatToDollars(credit?.originalGrantUsdCents || 0)}
+            </p>
+          </div>
+        )}
+
+        {credit?.expiresAt && (
+          <div>
+            <h4 className="font-medium text-muted-foreground text-sm">
+              Expires
+            </h4>
+            <p className="text-foreground text-sm">
+              {credit?.expiresAt
+                ? formatDistance(new Date(credit.expiresAt), Date.now(), {
+                    addSuffix: true,
+                  })
+                : "N/A"}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {hasAppliedForOpGrant && !credit && isOpCredit && (
+        <Alert variant="info">
+          <CircleAlertIcon className="size-5" />
+          <AlertTitle>Grant application pending approval</AlertTitle>
+          <AlertDescription>
+            You will receive an email once your application&apos;s status
+            changes.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex justify-end">
+        {!hasAppliedForOpGrant && isOpCredit && (
+          <Button asChild size="sm" variant="outline" className="bg-background">
+            <Link
               href="/dashboard/settings/gas-credits"
-              size="xs"
-              variant="outline"
               onClick={() => {
                 trackEvent({
                   category: "op-sponsorship",
@@ -85,57 +137,10 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
               }}
             >
               Apply Now
-            </LinkButton>
-          )}
-        </div>
-        <Flex gap={6}>
-          <Flex flexDir="column" gap={1}>
-            <Text>Remaining Credits</Text>
-            <Text color="bgBlack">
-              {formatToDollars(credit?.remainingValueUsdCents || 0)}
-            </Text>
-          </Flex>
-          {!isTwCredit && (
-            <Flex flexDir="column" gap={1}>
-              <Text>Claimed Credits (All-Time)</Text>
-              <Text color="bgBlack">
-                {formatToDollars(credit?.originalGrantUsdCents || 0)}
-              </Text>
-            </Flex>
-          )}
-          {credit?.expiresAt && (
-            <Flex flexDir="column" gap={1}>
-              <Text>Expires</Text>
-              <Text color="bgBlack" textTransform="capitalize">
-                {credit?.expiresAt
-                  ? formatDistance(new Date(credit.expiresAt), Date.now(), {
-                      addSuffix: true,
-                    })
-                  : "N/A"}
-              </Text>
-            </Flex>
-          )}
-        </Flex>
-        {hasAppliedForOpGrant && !credit && isOpCredit && (
-          <Alert
-            status="info"
-            borderRadius="lg"
-            backgroundColor={
-              onCreditsButton ? "backgroundBody" : "backgroundCardHighlight"
-            }
-            borderLeftColor="blue.500"
-            borderLeftWidth={4}
-            as={Flex}
-            gap={1}
-          >
-            <AlertIcon />
-            <AlertDescription>
-              Grant application pending approval. You will receive an email once
-              your application&apos;s status changes.
-            </AlertDescription>
-          </Alert>
+            </Link>
+          </Button>
         )}
-      </Flex>
-    </Card>
+      </div>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/UpgradeButton.tsx b/apps/dashboard/src/components/settings/Account/Billing/UpgradeButton.tsx
index 9723e9a401f..5636b072071 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/UpgradeButton.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/UpgradeButton.tsx
@@ -1,34 +1,43 @@
+"use client";
+
+import { NavLink } from "@/components/ui/NavLink";
+import { Button } from "@/components/ui/button";
 import { AccountPlan, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { useRouter } from "next/router";
-import { TrackedLinkButton } from "tw-components";
+import { usePathname } from "next/navigation";
 
 export const UpgradeButton = () => {
   const { isLoggedIn } = useLoggedInUser();
   const meQuery = useAccount();
-  const router = useRouter();
+  const pathname = usePathname();
 
   if (
     !isLoggedIn ||
     meQuery.isPending ||
     !meQuery.data ||
-    router.pathname.startsWith("/dashboard/settings/billing")
+    pathname?.startsWith("/dashboard/settings/billing") ||
+    meQuery.data?.plan !== AccountPlan.Free
   ) {
     return null;
   }
 
-  const { plan } = meQuery.data;
-
-  return plan === AccountPlan.Free ? (
-    <TrackedLinkButton
-      category="header"
-      label="upgrade"
-      href="/dashboard/settings/billing"
-      variant="outline"
-      colorScheme="blue"
+  return (
+    <Button
+      asChild
       size="sm"
+      variant="outline"
+      className="h-full rounded-2xl bg-background py-1 text-muted-foreground text-xs hover:text-foreground"
     >
-      Upgrade
-    </TrackedLinkButton>
-  ) : null;
+      <NavLink
+        href="/dashboard/settings/billing"
+        tracking={{
+          label: "upgrade",
+          category: "header",
+          action: "click",
+        }}
+      >
+        Upgrade
+      </NavLink>
+    </Button>
+  );
 };