diff --git a/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx b/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx
index 05817eeca7c..789a86a06aa 100644
--- a/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx
+++ b/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx
@@ -93,10 +93,7 @@ export const CreateEnginePage = () => {
         />
       )}
 
-      <OnboardingModal
-        isOpen={isBillingModalOpen}
-        onClose={() => setIsBillingModalOpen(false)}
-      >
+      <OnboardingModal isOpen={isBillingModalOpen}>
         <LazyOnboardingBilling
           onSave={async () => {
             if (!selectedTier) {
diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
index 8822a191020..6918e1269bb 100644
--- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
+++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
@@ -216,10 +216,7 @@ export const ApplyForOpCreditsModal: React.FC = () => {
         />
       )}
       {/* // Add Payment Method Modal */}
-      <OnboardingModal
-        isOpen={paymentMethodModalState.isOpen}
-        onClose={paymentMethodModalState.onClose}
-      >
+      <OnboardingModal isOpen={paymentMethodModalState.isOpen}>
         <LazyOnboardingBilling
           onSave={() => {
             setHasAddedPaymentMethod(true);
diff --git a/apps/dashboard/src/components/onboarding/Billing.tsx b/apps/dashboard/src/components/onboarding/Billing.tsx
index 9acfdf64372..5477e91b942 100644
--- a/apps/dashboard/src/components/onboarding/Billing.tsx
+++ b/apps/dashboard/src/components/onboarding/Billing.tsx
@@ -1,14 +1,13 @@
 import { accountKeys } from "@3rdweb-sdk/react/cache-keys";
 import { useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex, FocusLock } from "@chakra-ui/react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTheme } from "next-themes";
 import { OnboardingPaymentForm } from "./PaymentForm";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 // only load stripe if the key is available
 const stripePromise = process.env.NEXT_PUBLIC_STRIPE_KEY
@@ -65,40 +64,37 @@ const OnboardingBilling: React.FC<OnboardingBillingProps> = ({
   };
 
   return (
-    <FocusLock>
-      <Flex flexDir="column" gap={8}>
-        <OnboardingTitle
-          heading="Add a payment method"
-          description="thirdweb is free to get started. Add a payment method to prevent service interruptions when you exceed limits."
+    <div>
+      <TitleAndDescription
+        heading="Add a payment method"
+        description="thirdweb is free to get started. Add a payment method to prevent service interruptions when you exceed limits."
+      />
+      <div className="h-4" />
+      <Elements
+        stripe={stripePromise}
+        options={{
+          mode: "setup",
+          paymentMethodCreation: "manual",
+          currency: "usd",
+          paymentMethodConfiguration:
+            process.env.NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID,
+          appearance: {
+            theme: theme === "dark" ? "night" : "stripe",
+            ...appearance,
+          },
+        }}
+      >
+        <OnboardingPaymentForm
+          onSave={() => {
+            queryClient.invalidateQueries({
+              queryKey: accountKeys.me(user?.address as string),
+            });
+            onSave();
+          }}
+          onCancel={handleCancel}
         />
-        <Flex flexDir="column" gap={8}>
-          <Elements
-            stripe={stripePromise}
-            options={{
-              mode: "setup",
-              paymentMethodCreation: "manual",
-              currency: "usd",
-              paymentMethodConfiguration:
-                process.env.NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID,
-              appearance: {
-                theme: theme === "dark" ? "night" : "stripe",
-                ...appearance,
-              },
-            }}
-          >
-            <OnboardingPaymentForm
-              onSave={() => {
-                queryClient.invalidateQueries({
-                  queryKey: accountKeys.me(user?.address as string),
-                });
-                onSave();
-              }}
-              onCancel={handleCancel}
-            />
-          </Elements>
-        </Flex>
-      </Flex>
-    </FocusLock>
+      </Elements>
+    </div>
   );
 };
 
diff --git a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx
index 0bbc21ece85..65a01a3288b 100644
--- a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx
+++ b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx
@@ -2,10 +2,9 @@ import {
   AccountPlan,
   useUpdateAccountPlan,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { SimpleGrid } from "@chakra-ui/react";
 import { PricingCard } from "components/homepage/sections/PricingCard";
 import { useTrack } from "hooks/analytics/useTrack";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 interface OnboardingChoosePlanProps {
   onSave: () => void;
@@ -70,11 +69,11 @@ const OnboardingChoosePlan: React.FC<OnboardingChoosePlanProps> = ({
 
   return (
     <>
-      <OnboardingTitle
+      <TitleAndDescription
         heading="Choose your plan"
         description="Get started for free with our Starter plan or subscribe to Growth plan to unlock higher rate limits and advanced features."
       />
-      <SimpleGrid columns={{ base: 1, md: 2 }} gap={8}>
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         <PricingCard
           size="sm"
           name={AccountPlan.Free}
@@ -110,7 +109,7 @@ const OnboardingChoosePlan: React.FC<OnboardingChoosePlanProps> = ({
           }}
           onDashboard
         />
-      </SimpleGrid>
+      </div>
     </>
   );
 };
diff --git a/apps/dashboard/src/components/onboarding/ConfirmEmail.tsx b/apps/dashboard/src/components/onboarding/ConfirmEmail.tsx
index e64cab118db..8e8ee329a8a 100644
--- a/apps/dashboard/src/components/onboarding/ConfirmEmail.tsx
+++ b/apps/dashboard/src/components/onboarding/ConfirmEmail.tsx
@@ -17,7 +17,7 @@ import { useForm } from "react-hook-form";
 import OtpInput from "react-otp-input";
 import { Button, Text } from "tw-components";
 import { shortenString } from "utils/usedapp-external";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 interface OnboardingConfirmEmailProps {
   email: string;
@@ -158,7 +158,7 @@ const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
 
   return (
     <>
-      <OnboardingTitle
+      <TitleAndDescription
         heading={
           !linking
             ? "You're almost done! Verify your email."
diff --git a/apps/dashboard/src/components/onboarding/General.tsx b/apps/dashboard/src/components/onboarding/General.tsx
index 265ef3a29fa..cc038bf35b5 100644
--- a/apps/dashboard/src/components/onboarding/General.tsx
+++ b/apps/dashboard/src/components/onboarding/General.tsx
@@ -4,7 +4,7 @@ import { AccountForm } from "components/settings/Account/AccountForm";
 import { useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { Button } from "tw-components";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 type OnboardingGeneralProps = {
   account: Account;
@@ -34,7 +34,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
 
   return (
     <FocusLock>
-      <OnboardingTitle
+      <TitleAndDescription
         heading={
           !existing
             ? "Create your thirdweb account"
diff --git a/apps/dashboard/src/components/onboarding/LinkWallet.tsx b/apps/dashboard/src/components/onboarding/LinkWallet.tsx
index 80faba80aba..6585a7d3594 100644
--- a/apps/dashboard/src/components/onboarding/LinkWallet.tsx
+++ b/apps/dashboard/src/components/onboarding/LinkWallet.tsx
@@ -3,7 +3,7 @@ import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { useTrack } from "hooks/analytics/useTrack";
 import { Button, TrackedLink } from "tw-components";
 import { shortenString } from "utils/usedapp-external";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 interface OnboardingLinkWalletProps {
   email: string;
@@ -64,7 +64,7 @@ const OnboardingLinkWallet: React.FC<OnboardingLinkWalletProps> = ({
 
   return (
     <>
-      <OnboardingTitle
+      <TitleAndDescription
         heading="Linking Wallets"
         description={
           <>
diff --git a/apps/dashboard/src/components/onboarding/Modal.tsx b/apps/dashboard/src/components/onboarding/Modal.tsx
index 283a871196b..ce3a61e5f81 100644
--- a/apps/dashboard/src/components/onboarding/Modal.tsx
+++ b/apps/dashboard/src/components/onboarding/Modal.tsx
@@ -1,52 +1,34 @@
-import {
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalOverlay,
-  useBreakpointValue,
-} from "@chakra-ui/react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 import { IconLogo } from "components/logo";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface OnboardingModalProps {
   isOpen: boolean;
-  onClose: () => void;
   wide?: boolean;
 }
 
 export const OnboardingModal: ComponentWithChildren<OnboardingModalProps> = ({
   children,
   isOpen,
-  onClose,
-  wide = false,
+  wide,
 }) => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-
   return (
-    <Modal
-      size={isMobile ? "full" : wide ? "3xl" : "lg"}
-      closeOnEsc={false}
-      allowPinchZoom
-      closeOnOverlayClick={false}
-      isCentered={!isMobile}
-      isOpen={isOpen}
-      onClose={onClose}
-      trapFocus={false}
-      blockScrollOnMount={false}
-    >
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalBody p={8} as={Flex} gap={4} flexDir="column">
-          <div className="aspect-square w-[40px]">
+    <Dialog open={isOpen}>
+      <DialogContent
+        dialogOverlayClassName="z-[10000]"
+        className={cn("z-[10001] max-h-[90vh] overflow-auto", {
+          "!max-w-[768px]": wide,
+        })}
+        dialogCloseClassName="hidden"
+      >
+        <div className="flex flex-col gap-4">
+          <div className="w-[40px]">
             <IconLogo />
           </div>
-
-          <Flex flexDir="column" gap={8}>
-            {children}
-          </Flex>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+          <div className="flex flex-col gap-8">{children}</div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/apps/dashboard/src/components/onboarding/PaymentForm.tsx b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
index 6c054abb73d..6fe0b8e5a9a 100644
--- a/apps/dashboard/src/components/onboarding/PaymentForm.tsx
+++ b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
@@ -1,11 +1,7 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { useCreatePaymentMethod } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  Flex,
-  Spinner,
-} from "@chakra-ui/react";
 import {
   PaymentElement,
   useElements,
@@ -15,7 +11,6 @@ import { PaymentVerificationFailureAlert } from "components/settings/Account/Bil
 import { useErrorHandler } from "contexts/error-handler";
 import { useTrack } from "hooks/analytics/useTrack";
 import { type FormEvent, useState } from "react";
-import { Button, Text } from "tw-components";
 
 interface OnboardingPaymentForm {
   onSave: () => void;
@@ -101,69 +96,44 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
 
   return (
     <form id="payment-form" onSubmit={handleSubmit}>
-      <Flex flexDir="column" gap={8}>
+      <div className="flex flex-col gap-6">
         <PaymentElement
           onLoaderStart={() => setLoading(false)}
           options={{ terms: { card: "never" } }}
         />
 
         {loading ? (
-          <div className="flex items-center justify-center pb-16">
-            <Spinner size="sm" />
+          <div className="flex min-h-[100px] items-center justify-center">
+            <Spinner className="size-5" />
           </div>
         ) : (
-          <Flex flexDir="column" gap={4}>
+          <div className="flex flex-col gap-6">
             {paymentFailureCode ? (
               <PaymentVerificationFailureAlert
                 paymentFailureCode={paymentFailureCode}
               />
             ) : (
-              <Alert
-                status="info"
-                borderRadius="md"
-                as={Flex}
-                alignItems="start"
-                justifyContent="space-between"
-                variant="left-accent"
-                bg="inputBg"
-              >
-                <div className="flex flex-row">
-                  <AlertIcon boxSize={4} mt={1} ml={1} />
-                  <Flex flexDir="column" gap={1} pl={1}>
-                    <AlertDescription as={Text} fontSize="body.md">
-                      A temporary hold will be placed and immediately released
-                      on your payment method.
-                    </AlertDescription>
-                  </Flex>
-                </div>
+              <Alert variant="info">
+                <AlertTitle className="text-sm">
+                  A temporary hold will be placed and immediately released on
+                  your payment method.
+                </AlertTitle>
               </Alert>
             )}
 
-            <Button
-              w="full"
-              size="lg"
-              fontSize="md"
-              colorScheme="blue"
-              type="submit"
-              isDisabled={!stripe}
-              isLoading={saving}
-            >
-              Add payment
-            </Button>
-            <Button
-              size="lg"
-              fontSize="sm"
-              variant="link"
-              mt="4"
-              onClick={onCancel}
-              isDisabled={saving}
-              colorScheme="blue"
-            >
-              <Text color="blue.500">I&apos;ll do this later</Text>
-            </Button>
-          </Flex>
+            <div className="flex justify-end gap-4">
+              <Button variant="outline" onClick={onCancel} disabled={saving}>
+                I'll do this later
+              </Button>
+
+              <Button className="gap-2" type="submit" disabled={!stripe}>
+                {loading && <Spinner className="size-4" />}
+                Add payment
+              </Button>
+            </div>
+          </div>
         )}
-      </Flex>
+      </div>
     </form>
   );
 };
diff --git a/apps/dashboard/src/components/onboarding/Title.tsx b/apps/dashboard/src/components/onboarding/Title.tsx
index 93eaa4be543..d7c0537bda6 100644
--- a/apps/dashboard/src/components/onboarding/Title.tsx
+++ b/apps/dashboard/src/components/onboarding/Title.tsx
@@ -1,22 +1,20 @@
-import { Heading, Text } from "tw-components";
-
-interface OnboardingTitleProps {
+type TitleAndDescriptionProps = {
   heading: string | JSX.Element;
-  description?: string | JSX.Element;
-}
+  description: string | JSX.Element;
+};
 
-export const OnboardingTitle: React.FC<OnboardingTitleProps> = ({
+export const TitleAndDescription: React.FC<TitleAndDescriptionProps> = ({
   heading,
   description,
 }) => {
   return (
-    <div className="flex flex-col items-start gap-3">
-      <Heading size="title.sm">{heading}</Heading>
+    <div className="flex flex-col items-start gap-1">
+      <h3 className="font-semibold text-foreground text-xl tracking-tight">
+        {heading}
+      </h3>
 
       {description && (
-        <Text size="body.md" fontWeight="medium">
-          {description}
-        </Text>
+        <div className="text-muted-foreground">{description}</div>
       )}
     </div>
   );
diff --git a/apps/dashboard/src/components/onboarding/index.tsx b/apps/dashboard/src/components/onboarding/index.tsx
index 4b97733aa96..923d76c953c 100644
--- a/apps/dashboard/src/components/onboarding/index.tsx
+++ b/apps/dashboard/src/components/onboarding/index.tsx
@@ -202,11 +202,7 @@ export const Onboarding: React.FC = () => {
   }
 
   return (
-    <OnboardingModal
-      isOpen={!!state}
-      onClose={() => setState("skipped")}
-      wide={state === "plan"}
-    >
+    <OnboardingModal isOpen={!!state} wide={state === "plan"}>
       {state === "onboarding" && (
         <Suspense fallback={<Loading />}>
           <OnboardingGeneral
diff --git a/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx b/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx
index afe030048f3..ac830507836 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx
@@ -1,29 +1,29 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import {
   type Account,
   AccountStatus,
   useCreateBillingSession,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { type MouseEvent, useMemo } from "react";
-import { TrackedLinkButton } from "tw-components";
+import { useMemo } from "react";
+import { useTrack } from "../../../../hooks/analytics/useTrack";
 
 interface ManageBillingButtonProps {
   account: Account;
   loading?: boolean;
   loadingText?: string;
   onClick?: () => void;
-  buttonProps?: {
-    variant?: "outline" | "solid";
-    colorScheme?: "primary";
-  };
 }
 
 export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
   account,
   loading,
   loadingText,
-  buttonProps = { variant: "outline", color: loading ? "gray" : "blue.500" },
   onClick,
 }) => {
+  const trackEvent = useTrack();
+
   const [buttonLabel, buttonText] = useMemo(() => {
     switch (account.status) {
       case AccountStatus.InvalidPayment:
@@ -52,31 +52,40 @@ export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
     }
   }, [query.data, buttonLabel, account.stripePaymentActionUrl]);
 
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    if (loading) {
-      e.preventDefault();
-      return;
-    }
-
-    if (!["verifyPaymentMethod", "manage"].includes(buttonLabel)) {
-      e.preventDefault();
-      onClick?.();
-    }
-  };
+  if (url) {
+    return (
+      <Button asChild>
+        <TrackedLinkTW href={url} category="billingAccount" label={buttonLabel}>
+          {buttonText}
+        </TrackedLinkTW>
+      </Button>
+    );
+  }
 
   return (
-    <TrackedLinkButton
-      {...buttonProps}
-      isDisabled={loading || (!onClick && !url)}
-      href={url ?? ""}
-      isLoading={loading}
-      category="billingAccount"
-      label={buttonLabel}
-      loadingText={loadingText}
-      onClick={handleClick}
-      fontSize="small"
+    <Button
+      disabled={loading || !onClick}
+      onClick={(e) => {
+        trackEvent({
+          category: "billingAccount",
+          label: buttonLabel,
+          action: "click",
+        });
+
+        if (loading) {
+          e.preventDefault();
+          return;
+        }
+
+        if (!["verifyPaymentMethod", "manage"].includes(buttonLabel)) {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+      className="gap-2"
     >
-      {buttonText}
-    </TrackedLinkButton>
+      {loading && <Spinner className="size-4" />}
+      {loading ? loadingText : buttonText}
+    </Button>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
index 499b17f17c7..6ec37f4c90f 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
@@ -1,26 +1,24 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import {
+  type Account,
   AccountStatus,
+  type UsageBillableByService,
   useAccount,
   useAccountUsage,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Flex,
-  IconButton,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { format } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { useRouter } from "next/router";
+import { ExternalLinkIcon, XIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
-import { FiX } from "react-icons/fi";
-import { Heading, Text, TrackedLinkButton } from "tw-components";
 import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
 import { ManageBillingButton } from "../ManageButton";
 import { RecurringPaymentFailureAlert } from "./RecurringPaymentFailureAlert";
@@ -39,6 +37,7 @@ type AlertConditionType = {
 };
 
 export const BillingAlerts = () => {
+  const pathname = usePathname();
   const { isLoggedIn } = useLoggedInUser();
   const usageQuery = useAccountUsage();
   const meQuery = useAccount({
@@ -51,13 +50,34 @@ export const BillingAlerts = () => {
         ? 1000
         : false,
   });
-  const { data: account } = meQuery;
-  const router = useRouter();
+
+  if (
+    !isLoggedIn ||
+    !meQuery.data ||
+    !usageQuery.data ||
+    pathname?.includes("/support")
+  ) {
+    return null;
+  }
+
+  return (
+    <BillingAlertsUI
+      usageData={usageQuery.data}
+      dashboardAccount={meQuery.data}
+    />
+  );
+};
+
+export function BillingAlertsUI(props: {
+  usageData: UsageBillableByService;
+  dashboardAccount: Account;
+}) {
+  const { usageData, dashboardAccount } = props;
   const trackEvent = useTrack();
 
   const [dismissedAlerts, setDismissedAlerts] = useLocalStorage<
     Record<string, number> | undefined
-  >(`dismissed-billing-alert-${account?.id}`, undefined, {});
+  >(`dismissed-billing-alert-${dashboardAccount.id}`, undefined, {});
 
   const handleDismiss = useCallback(
     (key: string) => {
@@ -81,13 +101,13 @@ export const BillingAlerts = () => {
 
   // Alert shouldShowAlerts based on the possible states of the account
   const alertConditions = useMemo<AlertConditionType[]>(() => {
-    const hasUsageData = !!usageQuery.data;
-    const { usage, limits, rateLimitedAt } = usageQuery.data || {};
+    const { usage, limits, rateLimitedAt } = usageData;
 
     // Define alert shouldShowAlerts including the directly computed ones
     const paymentFailureAlerts: AlertConditionType[] = [
       {
-        shouldShowAlert: account?.status === AccountStatus.PaymentVerification,
+        shouldShowAlert:
+          dashboardAccount.status === AccountStatus.PaymentVerification,
         key: "verifyPaymentAlert",
         title: "Your payment method requires verification",
         description:
@@ -96,7 +116,8 @@ export const BillingAlerts = () => {
         componentType: "paymentVerification",
       },
       {
-        shouldShowAlert: account?.status === AccountStatus.InvalidPaymentMethod,
+        shouldShowAlert:
+          dashboardAccount.status === AccountStatus.InvalidPaymentMethod,
         key: "invalidPaymentMethodAlert",
         title: "Your payment method is invalid",
         description:
@@ -104,7 +125,7 @@ export const BillingAlerts = () => {
         status: "error",
         componentType: "paymentVerification",
       },
-      ...(account?.recurringPaymentFailures?.map((failure) => {
+      ...(dashboardAccount.recurringPaymentFailures?.map((failure) => {
         const serviceCutoffDate = failure.serviceCutoffDate
           ? format(new Date(failure.serviceCutoffDate), "MMMM d, yyyy")
           : null;
@@ -127,23 +148,18 @@ export const BillingAlerts = () => {
 
     // Directly compute usage and rate limit shouldShowAlerts within useMemo
     const exceededUsage_50 =
-      hasUsageData &&
-      usage &&
-      limits &&
-      (usage.embeddedWallets.countWalletAddresses >=
+      usage.embeddedWallets.countWalletAddresses >=
         limits.embeddedWallets / 2 ||
-        usage.storage.sumFileSizeBytes >= limits.storage / 2);
+      usage.storage.sumFileSizeBytes >= limits.storage / 2;
 
     const exceededUsage_100 =
-      hasUsageData &&
-      usage &&
-      limits &&
-      (usage.embeddedWallets.countWalletAddresses >= limits.embeddedWallets ||
-        usage.storage.sumFileSizeBytes >= limits.storage);
-
-    const hasHardLimits = account?.status !== AccountStatus.ValidPayment;
-    const isFreePlan = account?.plan === "free";
-    const isGrowthPlan = account?.plan === "growth";
+      usage.embeddedWallets.countWalletAddresses >= limits.embeddedWallets ||
+      usage.storage.sumFileSizeBytes >= limits.storage;
+
+    const hasHardLimits =
+      dashboardAccount.status !== AccountStatus.ValidPayment;
+    const isFreePlan = dashboardAccount.plan === "free";
+    const isGrowthPlan = dashboardAccount.plan === "growth";
     const usageAlerts: AlertConditionType[] = [
       {
         // Show alert if user has exceeded 50% of their usage limit and has not yet exceeded 100% of their usage limit and has hard limits
@@ -178,7 +194,7 @@ export const BillingAlerts = () => {
       },
       {
         // only show RPC warning if the user has exceeded their RPC rate limit and has hard limits
-        shouldShowAlert: hasUsageData && !!rateLimitedAt?.rpc && hasHardLimits,
+        shouldShowAlert: !!rateLimitedAt?.rpc && hasHardLimits,
         key: "rate_rpc_alert",
         title: "You have exceeded your RPC rate limit",
         description:
@@ -188,8 +204,7 @@ export const BillingAlerts = () => {
       },
       {
         // only show Storage warning if the user has exceeded their Storage rate limit and has hard limits
-        shouldShowAlert:
-          hasUsageData && !!rateLimitedAt?.storage && hasHardLimits,
+        shouldShowAlert: !!rateLimitedAt?.storage && hasHardLimits,
         key: "rate_storage_alert",
         title: "You have exceeded your Storage Gateway rate limit",
         description:
@@ -200,17 +215,9 @@ export const BillingAlerts = () => {
     ];
 
     return [...paymentFailureAlerts, ...usageAlerts];
-  }, [account, usageQuery.data]);
+  }, [dashboardAccount, usageData]);
 
-  if (
-    !isLoggedIn ||
-    meQuery.isPending ||
-    !account ||
-    usageQuery.isPending ||
-    !usageQuery.data ||
-    router.pathname.includes("/support") ||
-    alertConditions.length === 0
-  ) {
+  if (alertConditions.length === 0) {
     return null;
   }
 
@@ -221,6 +228,7 @@ export const BillingAlerts = () => {
       const isDismissedMoreThanAWeekAgo =
         (dismissedAlerts?.[alert.key] ?? 0) <
         Date.now() - 1000 * 60 * 60 * 24 * 7;
+
       if (shouldShowAlert && (!isDismissed || isDismissedMoreThanAWeekAgo)) {
         switch (alert.componentType) {
           case "recurringPayment": {
@@ -230,6 +238,7 @@ export const BillingAlerts = () => {
                 key={index}
                 affectedServices={[alert.description].filter((v) => v)}
                 paymentFailureCode={alert.key}
+                dashboardAccount={dashboardAccount}
               />
             );
           }
@@ -241,12 +250,13 @@ export const BillingAlerts = () => {
                 key={index}
                 affectedServices={[alert.description].filter((v) => v)}
                 paymentFailureCode={alert.key}
+                dashboardAccount={dashboardAccount}
               />
             );
           }
           case "paymentVerification": {
             return (
-              <BillingAlertNotification
+              <AddPaymentNotification
                 // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                 key={index}
                 status={alert.status}
@@ -255,12 +265,13 @@ export const BillingAlerts = () => {
                 ctaText="Verify payment method"
                 ctaHref="/dashboard/settings/billing"
                 label="verifyPaymentAlert"
+                dashboardAccount={dashboardAccount}
               />
             );
           }
           case "usage": {
             return (
-              <BillingAlertNotification
+              <AddPaymentNotification
                 // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                 key={index}
                 status={alert.status}
@@ -270,6 +281,7 @@ export const BillingAlerts = () => {
                 ctaText="Upgrade your plan"
                 ctaHref="/dashboard/settings/billing"
                 label="upgradePlanAlert"
+                dashboardAccount={dashboardAccount}
               />
             );
           }
@@ -282,10 +294,11 @@ export const BillingAlerts = () => {
   if (alerts.length === 0) {
     return null;
   }
-  return <div className="flex flex-col gap-2 py-6">{alerts}</div>;
-};
 
-type BillingAlertNotificationProps = {
+  return <div className="flex flex-col gap-4 py-6">{alerts}</div>;
+}
+
+type AddPaymentNotificationProps = {
   status: "error" | "warning";
   onDismiss?: () => void;
   title: string;
@@ -294,9 +307,10 @@ type BillingAlertNotificationProps = {
   ctaText?: string;
   ctaHref?: string;
   label?: string;
+  dashboardAccount: Account;
 };
 
-const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
+const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
   status,
   onDismiss,
   title,
@@ -305,12 +319,11 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
   ctaHref = "/dashboard/settings/billing",
   label = "addPaymentAlert",
   showCTAs = true,
+  dashboardAccount,
 }) => {
   // TODO: We should find a way to move this deeper into the
   // TODO: ManageBillingButton component and set an optional field to override
   const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-  const meQuery = useAccount();
-  const { data: account } = meQuery;
 
   const {
     onOpen: onPaymentMethodOpen,
@@ -327,85 +340,67 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
 
   return (
     <Alert
-      status={status}
-      borderRadius="md"
-      as={Flex}
-      alignItems="start"
-      justifyContent="space-between"
-      variant="left-accent"
-      bg="backgroundCardHighlight"
+      variant={status === "error" ? "destructive" : "warning"}
+      className="relative py-6"
     >
-      <OnboardingModal
-        isOpen={isPaymentMethodOpen}
-        onClose={onPaymentMethodClose}
-      >
+      <OnboardingModal isOpen={isPaymentMethodOpen}>
         <LazyOnboardingBilling
           onSave={handlePaymentAdded}
           onCancel={onPaymentMethodClose}
         />
       </OnboardingModal>
 
-      <div className="flex flex-row">
-        <AlertIcon boxSize={4} mt={1} ml={1} />
-        <Flex flexDir="column" pl={1}>
-          <AlertTitle>
-            <Heading as="span" size="subtitle.sm">
-              {title}
-            </Heading>
-          </AlertTitle>
-          <AlertDescription mb={2} as={Flex} direction="column">
-            <Text mb={showCTAs ? "4" : "0"}>{description}</Text>
-            {showCTAs && (
-              <div className="flex flex-row">
-                {isBilling && account ? (
-                  <ManageBillingButton
-                    account={account}
-                    loading={paymentMethodSaving}
-                    loadingText="Verifying payment method"
-                    buttonProps={{ colorScheme: "primary" }}
-                    onClick={onPaymentMethodOpen}
-                  />
-                ) : (
-                  <TrackedLinkButton
-                    href={ctaHref}
-                    category="billing"
-                    label={label}
-                    fontWeight="medium"
-                    colorScheme="blue"
-                    size="sm"
-                  >
-                    {ctaText}
-                  </TrackedLinkButton>
-                )}
-                <TrackedLinkButton
-                  ml="4"
-                  variant="outline"
-                  href="/support"
-                  category="billing"
-                  label="support"
-                  color="blue.500"
-                  fontSize="small"
-                  isExternal
-                >
-                  Contact Support
-                </TrackedLinkButton>
-              </div>
-            )}
-          </AlertDescription>
-        </Flex>
-      </div>
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+
+      {showCTAs && (
+        <div className="mt-4 flex gap-2">
+          {isBilling ? (
+            <ManageBillingButton
+              account={dashboardAccount}
+              loading={paymentMethodSaving}
+              loadingText="Verifying payment method"
+              onClick={onPaymentMethodOpen}
+            />
+          ) : (
+            <Button variant="outline" asChild>
+              <TrackedLinkTW
+                href={ctaHref}
+                category="billing"
+                label={label}
+                target="_blank"
+                className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+              >
+                {ctaText}
+              </TrackedLinkTW>
+            </Button>
+          )}
+
+          <Button variant="outline" asChild>
+            <TrackedLinkTW
+              href="/support"
+              category="billing"
+              label="support"
+              target="_blank"
+              className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+            >
+              Contact Support
+              <ExternalLinkIcon className="size-4" />
+            </TrackedLinkTW>
+          </Button>
+        </div>
+      )}
 
       {onDismiss && (
-        <IconButton
-          size="xs"
-          aria-label="Close announcement"
-          icon={<FiX />}
-          color="bgBlack"
+        <Button
+          size="icon"
+          aria-label="Close"
           variant="ghost"
-          opacity={0.6}
-          _hover={{ opacity: 1 }}
           onClick={onDismiss}
-        />
+          className="absolute top-2 right-2 text-muted-foreground hover:text-foreground"
+        >
+          <XIcon className="size-5" />
+        </Button>
       )}
     </Alert>
   );
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
new file mode 100644
index 00000000000..bceb177f0e3
--- /dev/null
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
@@ -0,0 +1,134 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThirdwebProvider } from "thirdweb/react";
+import { AccountStatus } from "../../../../../@3rdweb-sdk/react/hooks/useApi";
+import {
+  createBillableServiceUsageDataStub,
+  createDashboardAccountStub,
+} from "../../../../../stories/stubs";
+import { BadgeContainer, mobileViewport } from "../../../../../stories/utils";
+import { BillingAlertsUI } from "./Alert";
+
+const meta = {
+  title: "blocks/BillingAlerts",
+  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 yesterday(d: Date) {
+  return new Date(d.getTime() - 24 * 60 * 60 * 1000);
+}
+
+function tomorrow(d: Date) {
+  return new Date(d.getTime() + 24 * 60 * 60 * 1000);
+}
+
+function Story() {
+  return (
+    <div className="py-4">
+      <ChakraProviderSetup>
+        <ThirdwebProvider>
+          <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
+            <BadgeContainer label="#usage">
+              <BillingAlertsUI
+                dashboardAccount={createDashboardAccountStub("foo")}
+                usageData={createBillableServiceUsageDataStub()}
+              />
+            </BadgeContainer>
+
+            <BadgeContainer label="#paymentVerification">
+              <BillingAlertsUI
+                dashboardAccount={createDashboardAccountStub("foo", {
+                  status: AccountStatus.PaymentVerification,
+                  stripePaymentActionUrl: "https://example.com",
+                })}
+                usageData={createBillableServiceUsageDataStub({
+                  limits: {
+                    embeddedWallets: 100,
+                    storage: 100,
+                  },
+                })}
+              />
+
+              <BadgeContainer label="#serviceCutoff">
+                <BillingAlertsUI
+                  dashboardAccount={createDashboardAccountStub("foo", {
+                    recurringPaymentFailures: [
+                      {
+                        subscriptionId: "s1",
+                        subscriptionDescription: "s1 desc",
+                        paymentFailureCode: "400",
+                        serviceCutoffDate: yesterday(new Date()).toISOString(),
+                      },
+                    ],
+                  })}
+                  usageData={createBillableServiceUsageDataStub({
+                    limits: {
+                      embeddedWallets: 100,
+                      storage: 100,
+                    },
+                  })}
+                />
+              </BadgeContainer>
+
+              <BadgeContainer label="#recurringPayment">
+                <BillingAlertsUI
+                  dashboardAccount={createDashboardAccountStub("foo", {
+                    recurringPaymentFailures: [
+                      {
+                        subscriptionId: "s1",
+                        subscriptionDescription: "s1 desc",
+                        paymentFailureCode: "400",
+                        serviceCutoffDate: tomorrow(new Date()).toISOString(),
+                      },
+                    ],
+                  })}
+                  usageData={createBillableServiceUsageDataStub({
+                    limits: {
+                      embeddedWallets: 100,
+                      storage: 100,
+                    },
+                  })}
+                />
+              </BadgeContainer>
+
+              <BadgeContainer label="usage + serviceCutoff">
+                <BillingAlertsUI
+                  dashboardAccount={createDashboardAccountStub("foo", {
+                    recurringPaymentFailures: [
+                      {
+                        subscriptionId: "s1",
+                        subscriptionDescription: "s1 desc",
+                        paymentFailureCode: "400",
+                        serviceCutoffDate: yesterday(new Date()).toISOString(),
+                      },
+                    ],
+                  })}
+                  usageData={createBillableServiceUsageDataStub()}
+                />
+              </BadgeContainer>
+            </BadgeContainer>
+          </div>
+        </ThirdwebProvider>
+      </ChakraProviderSetup>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
index 8b548d2af1f..f6463150be1 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
@@ -1,12 +1,7 @@
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Flex,
-} from "@chakra-ui/react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { getBillingPaymentMethodVerificationFailureResponse } from "lib/billing";
-import { Heading, Text, TrackedLinkButton } from "tw-components";
+import { ExternalLinkIcon } from "lucide-react";
 
 type PaymentVerificationFailureAlertProps = {
   onDismiss?: () => void;
@@ -20,44 +15,25 @@ export const PaymentVerificationFailureAlert: React.FC<
     getBillingPaymentMethodVerificationFailureResponse({ paymentFailureCode });
 
   return (
-    <Alert
-      status="error"
-      borderRadius="md"
-      as={Flex}
-      alignItems="start"
-      justifyContent="space-between"
-      variant="left-accent"
-      bg="inputBg"
-    >
-      <div className="flex flex-row">
-        <AlertIcon boxSize={4} mt={1} ml={1} />
-        <Flex flexDir="column" pl={1}>
-          <AlertTitle>
-            <Heading as="span" size="subtitle.sm">
-              ERROR: {title}
-            </Heading>
-          </AlertTitle>
-          <AlertDescription mb={2} as={Flex} direction="column">
-            <Text>
-              {reason ? `${reason}. ` : ""}
-              {resolution ? `${resolution}.` : ""}
-            </Text>
-            <Flex mt="4">
-              <TrackedLinkButton
-                variant="link"
-                href="/support"
-                category="billing"
-                label="support"
-                color="blue.500"
-                fontSize="small"
-                isExternal
-              >
-                Contact Support
-              </TrackedLinkButton>
-            </Flex>
-          </AlertDescription>
-        </Flex>
-      </div>
+    <Alert variant="destructive">
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>
+        <p>
+          {reason ? `${reason}. ` : ""}
+          {resolution ? `${resolution}.` : ""}
+        </p>
+
+        <TrackedLinkTW
+          className="mt-3 flex items-center gap-2 text-muted-foreground hover:text-foreground"
+          href="/support"
+          category="billing"
+          label="support"
+          target="_blank"
+        >
+          Contact Support
+          <ExternalLinkIcon className="size-4" />
+        </TrackedLinkTW>
+      </AlertDescription>
     </Alert>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
index b88830e20b2..1427a48fb1d 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
@@ -1,19 +1,12 @@
-import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Flex,
-  IconButton,
-  UnorderedList,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { type Account, AccountStatus } from "@3rdweb-sdk/react/hooks/useApi";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { getRecurringPaymentFailureResponse } from "lib/billing";
+import { ExternalLinkIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { FiX } from "react-icons/fi";
-import { Heading, Text, TrackedLinkButton } from "tw-components";
+import { Text } from "tw-components";
 import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
 import { ManageBillingButton } from "../ManageButton";
 
@@ -22,11 +15,13 @@ type RecurringPaymentFailureAlertProps = {
   onDismiss?: () => void;
   affectedServices?: string[];
   paymentFailureCode: string;
+  dashboardAccount: Account;
 };
 
 export const RecurringPaymentFailureAlert: React.FC<
   RecurringPaymentFailureAlertProps
 > = ({
+  dashboardAccount,
   isServiceCutoff = false,
   onDismiss,
   affectedServices = [],
@@ -35,18 +30,11 @@ export const RecurringPaymentFailureAlert: React.FC<
   // TODO: We should find a way to move this deeper into the
   // TODO: ManageBillingButton component and set an optional field to override
   const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-  const meQuery = useAccount();
-  const { data: account } = meQuery;
-
-  const {
-    onOpen: onPaymentMethodOpen,
-    onClose: onPaymentMethodClose,
-    isOpen: isPaymentMethodOpen,
-  } = useDisclosure();
+  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false);
 
   const handlePaymentAdded = () => {
     setPaymentMethodSaving(true);
-    onPaymentMethodClose();
+    setIsPaymentMethodOpen(false);
   };
 
   const { title, reason, resolution } = getRecurringPaymentFailureResponse({
@@ -58,100 +46,77 @@ export const RecurringPaymentFailureAlert: React.FC<
     : title;
 
   return (
-    <Alert
-      status="error"
-      borderRadius="md"
-      as={Flex}
-      alignItems="start"
-      justifyContent="space-between"
-      variant="left-accent"
-      bg="backgroundCardHighlight"
-    >
-      <OnboardingModal
-        isOpen={isPaymentMethodOpen}
-        onClose={onPaymentMethodClose}
-      >
+    <Alert variant="destructive" className="py-6">
+      <OnboardingModal isOpen={isPaymentMethodOpen}>
         <LazyOnboardingBilling
           onSave={handlePaymentAdded}
-          onCancel={onPaymentMethodClose}
+          onCancel={() => setIsPaymentMethodOpen(false)}
         />
       </OnboardingModal>
 
-      <div className="flex flex-row">
-        <AlertIcon boxSize={4} mt={1} ml={1} />
-        <Flex flexDir="column" pl={1}>
-          <AlertTitle>
-            <Heading as="span" size="subtitle.sm">
-              {header}
-            </Heading>
-          </AlertTitle>
-          <AlertDescription mt={4} mb={2}>
-            <Flex direction="column" gap={4}>
-              <Text>
-                {reason ? `${reason}. ` : ""}
-                {resolution ? `${resolution}. ` : ""}
-                {isServiceCutoff
-                  ? ""
-                  : "We will retry several times over the next 10 days after your invoice date, after which you will lose access to your services."}
-              </Text>
-              {affectedServices.length > 0 && (
-                <div className="flex flex-col">
-                  <Text>Affected services:</Text>
-                  <UnorderedList mb={4}>
-                    {affectedServices.map((service) => (
-                      <li key={service}>
-                        <Text>{service}</Text>
-                      </li>
-                    ))}
-                  </UnorderedList>
-                </div>
-              )}
-              <div className="flex flex-row">
-                {account && (
-                  <ManageBillingButton
-                    account={account}
-                    loading={paymentMethodSaving}
-                    loadingText="Verifying payment method"
-                    buttonProps={{ colorScheme: "primary" }}
-                    onClick={
-                      [
-                        AccountStatus.ValidPayment,
-                        AccountStatus.InvalidPayment,
-                      ].includes(account.status)
-                        ? undefined
-                        : onPaymentMethodOpen
-                    }
-                  />
-                )}
-                <TrackedLinkButton
-                  ml="4"
-                  variant="outline"
-                  href="/support"
-                  category="billing"
-                  label="support"
-                  color="blue.500"
-                  fontSize="small"
-                  isExternal
-                >
-                  Contact Support
-                </TrackedLinkButton>
-              </div>
-            </Flex>
-          </AlertDescription>
-        </Flex>
+      <AlertTitle>{header}</AlertTitle>
+      <AlertDescription>
+        {reason ? `${reason}. ` : ""}
+        {resolution ? `${resolution}. ` : ""}
+        {isServiceCutoff
+          ? ""
+          : "We will retry several times over the next 10 days after your invoice date, after which you will lose access to your services."}
+      </AlertDescription>
+
+      <div className="mt-4 flex flex-col gap-4 text-muted-foreground text-sm">
+        {affectedServices.length > 0 && (
+          <div className="flex flex-col">
+            <p className="mb-1"> Affected services: </p>
+            <ul className="list-disc pl-3.5">
+              {affectedServices.map((service) => (
+                <li key={service}>
+                  <Text>{service}</Text>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <div className="flex gap-2">
+          <ManageBillingButton
+            account={dashboardAccount}
+            loading={paymentMethodSaving}
+            loadingText="Verifying payment method"
+            onClick={
+              [
+                AccountStatus.ValidPayment,
+                AccountStatus.InvalidPayment,
+              ].includes(dashboardAccount.status)
+                ? undefined
+                : () => setIsPaymentMethodOpen(true)
+            }
+          />
+
+          <Button variant="outline" asChild>
+            <TrackedLinkTW
+              href="/support"
+              category="billing"
+              label="support"
+              target="_blank"
+              className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+            >
+              Contact Support
+              <ExternalLinkIcon className="size-4" />
+            </TrackedLinkTW>
+          </Button>
+        </div>
       </div>
 
       {onDismiss && (
-        <IconButton
-          size="xs"
-          aria-label="Close announcement"
-          icon={<FiX />}
-          color="bgBlack"
+        <Button
+          size="icon"
+          aria-label="Close"
           variant="ghost"
-          opacity={0.6}
-          _hover={{ opacity: 1 }}
           onClick={onDismiss}
-        />
+          className="absolute top-2 right-2 text-muted-foreground hover:text-foreground"
+        >
+          <XIcon className="size-5" />
+        </Button>
       )}
     </Alert>
   );
diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
index ef9ebbe6db9..7f3721b3692 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/index.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
@@ -248,10 +248,7 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
         <>
           <StepsCard title="Get started with billing" steps={steps} />
 
-          <OnboardingModal
-            isOpen={isPaymentMethodOpen}
-            onClose={onPaymentMethodClose}
-          >
+          <OnboardingModal isOpen={isPaymentMethodOpen}>
             <LazyOnboardingBilling
               onSave={handlePaymentAdded}
               onCancel={onPaymentMethodClose}
diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts
index 40823b14172..b5c3519c8b5 100644
--- a/apps/dashboard/src/stories/stubs.ts
+++ b/apps/dashboard/src/stories/stubs.ts
@@ -1,11 +1,19 @@
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
-import type { ApiKey, ApiKeyService } from "@3rdweb-sdk/react/hooks/useApi";
+import {
+  type Account,
+  AccountPlan,
+  AccountStatus,
+  type ApiKey,
+  type ApiKeyService,
+  type UsageBillableByService,
+} from "@3rdweb-sdk/react/hooks/useApi";
 import type {
   EngineAlert,
   EngineAlertRule,
   EngineNotificationChannel,
 } from "@3rdweb-sdk/react/hooks/useEngine";
+import { ZERO_ADDRESS } from "thirdweb";
 
 function projectStub(id: string, teamId: string) {
   const project: Project = {
@@ -156,3 +164,55 @@ export function createEngineAlertStub(
     ...overrides,
   };
 }
+
+export function createDashboardAccountStub(
+  id: string,
+  overrides: Partial<Account> = {},
+): Account {
+  return {
+    id: id,
+    name: `Name ${id}`,
+    email: `email-${id}@example.com`,
+    status: AccountStatus.NoPayment,
+    plan: AccountPlan.Free,
+    advancedEnabled: false,
+    currentBillingPeriodStartsAt: new Date().toISOString(),
+    currentBillingPeriodEndsAt: new Date().toISOString(),
+    emailConfirmedAt: new Date().toISOString(),
+    creatorWalletAddress: ZERO_ADDRESS,
+    isStaff: false,
+    recurringPaymentFailures: [],
+    ...overrides,
+  };
+}
+
+export function createBillableServiceUsageDataStub(
+  overrides: Partial<UsageBillableByService> = {},
+): UsageBillableByService {
+  return {
+    usage: {
+      bundler: [],
+      storage: {
+        sumFileSizeBytes: 0,
+      },
+      embeddedWallets: {
+        countWalletAddresses: 0,
+      },
+    },
+    billableUsd: {
+      bundler: 0,
+      storage: 0,
+      embeddedWallets: 0,
+    },
+    limits: {
+      storage: 0,
+      embeddedWallets: 0,
+    },
+    rateLimits: {
+      storage: 0,
+      rpc: 0,
+    },
+    rateLimitedAt: {},
+    ...overrides,
+  };
+}