diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/page-client.tsx
index 29f251219..d817facea 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/page-client.tsx
@@ -3,6 +3,7 @@
 import { DesignEditableGrid, type DesignEditableGridItem } from "@/components/design-components";
 import { EditableInput } from "@/components/editable-input";
 import { Link, StyledLink } from "@/components/link";
+import { ItemDialog } from "@/components/payments/item-dialog";
 import { useRouter } from "@/components/router";
 import {
   ActionCell,
@@ -1056,9 +1057,12 @@ type EditingItem = {
 };
 
 function ProductItemsSection({ productId, product, items, onItemsChange, config, inline = false }: ProductItemsSectionProps) {
+  const adminApp = useAdminApp();
+  const updateConfig = useUpdateConfig();
   const [editingItem, setEditingItem] = useState<EditingItem | null>(null);
   const [isAddingItem, setIsAddingItem] = useState(false);
   const [selectedItemId, setSelectedItemId] = useState<string>('');
+  const [showCreateItemDialog, setShowCreateItemDialog] = useState(false);
 
   // Get all available items for this customer type
   const availableItems = useMemo(() => {
@@ -1089,6 +1093,34 @@ function ProductItemsSection({ productId, product, items, onItemsChange, config,
     setSelectedItemId('');
   };
 
+  const openCreateItemDialog = () => {
+    setEditingItem(null);
+    setIsAddingItem(false);
+    setSelectedItemId('');
+    setShowCreateItemDialog(true);
+  };
+
+  const handleCreateAndAddItem = async (item: { id: string, displayName: string, customerType: 'user' | 'team' | 'custom' }) => {
+    const success = await updateConfig({
+      adminApp,
+      configUpdate: { [`payments.items.${item.id}`]: { displayName: item.displayName, customerType: item.customerType } },
+      pushable: true,
+    });
+    if (!success) {
+      return;
+    }
+
+    onItemsChange({
+      ...items,
+      [item.id]: {
+        quantity: 1,
+        repeat: 'never',
+        expires: 'never',
+      },
+    });
+    toast({ title: "Item created", description: "Save product changes to keep it included." });
+  };
+
   const handleDeleteItem = (itemId: string) => {
     const { [itemId]: _, ...remainingItems } = items;
     onItemsChange(remainingItems);
@@ -1159,8 +1191,10 @@ function ProductItemsSection({ productId, product, items, onItemsChange, config,
       ) : (
         <div className="flex flex-col">
           {itemEntries.map(([itemId, item]) => {
-            const itemConfig = config.payments.items[itemId];
-            const displayName = itemConfig.displayName || itemId;
+            const itemConfig = Object.prototype.hasOwnProperty.call(config.payments.items, itemId)
+              ? config.payments.items[itemId]
+              : undefined;
+            const displayName = itemConfig?.displayName || itemId;
             return (
               <div key={itemId} className="group flex items-center text-sm leading-6">
                 <span className="font-semibold tabular-nums text-foreground">{prettyPrintWithMagnitudes(item.quantity)}×</span>
@@ -1242,14 +1276,8 @@ function ProductItemsSection({ productId, product, items, onItemsChange, config,
               No items available for this customer type.
             </p>
             <p className="text-xs text-muted-foreground/70 text-center">
-              Create items in the Items list first before adding them to a product.
+              Create an item now and it will be added to this product automatically.
             </p>
-            <Button variant="outline" onClick={() => {
-              setEditingItem(null);
-              setIsAddingItem(false);
-            }}>
-              Close
-            </Button>
           </div>
         ) : editingItem && (
           <div className="grid gap-4 py-4">
@@ -1355,19 +1383,34 @@ function ProductItemsSection({ productId, product, items, onItemsChange, config,
           }}>
             Cancel
           </Button>
-          <Button onClick={editingItem ? () => handleSaveItem(editingItem) : undefined}>
-            {isAddingItem ? "Add Item" : "Apply"}
+          <Button
+            onClick={isAddingItem && availableItems.length === 0
+              ? openCreateItemDialog
+              : editingItem ? () => handleSaveItem(editingItem) : undefined}
+          >
+            {isAddingItem && availableItems.length === 0 ? "Create Item" : isAddingItem ? "Add Item" : "Apply"}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 
+  const createItemDialog = (
+    <ItemDialog
+      open={showCreateItemDialog}
+      onOpenChange={setShowCreateItemDialog}
+      onSave={handleCreateAndAddItem}
+      existingItemIds={Object.keys(config.payments.items)}
+      forceCustomerType={product.customerType}
+    />
+  );
+
   if (inline) {
     return (
       <>
         {listContent}
         {itemDialog}
+        {createItemDialog}
       </>
     );
   }
@@ -1377,6 +1420,7 @@ function ProductItemsSection({ productId, product, items, onItemsChange, config,
       <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Included Items</h3>
       {listContent}
       {itemDialog}
+      {createItemDialog}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx b/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
index ea80cd28e..c4301bb91 100644
--- a/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
@@ -1,17 +1,23 @@
 "use client";
 
-import { CheckoutForm, TestModeBypassForm } from "@/components/payments/checkout";
+import { CheckoutForm, PaymentsNotEnabledCard, TestModeBypassForm } from "@/components/payments/checkout";
+import { PurchasePriceOption } from "@/components/payments/purchase-price-option";
+import { PurchaseQuantitySelector } from "@/components/payments/purchase-quantity-selector";
+import { isFreePrice, shortenedInterval } from "@/components/payments/purchase-utils";
 import { StripeElementsProvider } from "@/components/payments/stripe-elements-provider";
-import { Alert, AlertDescription, AlertTitle, Button, Card, CardContent, Input, Skeleton, Typography } from "@/components/ui";
+import { DesignAlert } from "@/components/design-components/alert";
+import { DesignCard } from "@/components/design-components/card";
+import { Skeleton, Typography } from "@/components/ui";
 import { getPublicEnvVar } from "@/lib/env";
-import { MinusIcon, PlusIcon } from "@phosphor-icons/react";
+import { XCircleIcon } from "@phosphor-icons/react";
 import { inlineProductSchema } from "@hexclave/shared/dist/schema-fields";
 import { throwErr } from "@hexclave/shared/dist/utils/errors";
 import { typedEntries } from "@hexclave/shared/dist/utils/objects";
-import Image from 'next/image';
+import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import * as yup from "yup";
+
 type ProductData = {
   product?: Omit<yup.InferType<typeof inlineProductSchema>, "included_items" | "server_only"> & { stackable: boolean },
   stripe_account_id: string | null,
@@ -25,6 +31,7 @@ type ProductData = {
 
 const apiUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");
 const baseUrl = new URL("/api/v1", apiUrl).toString();
+const MAX_STRIPE_AMOUNT_CENTS = 999_999 * 100;
 
 export default function PageClient({ code }: { code: string }) {
   const [data, setData] = useState<ProductData | null>(null);
@@ -50,8 +57,6 @@ export default function PageClient({ code }: { code: string }) {
     return Math.round(Number(data.product.prices[selectedPriceId].USD) * 100);
   }, [data, selectedPriceId]);
 
-  const MAX_STRIPE_AMOUNT_CENTS = 999_999 * 100;
-
   const rawAmountCents = useMemo(() => {
     return unitCents * Math.max(0, quantityNumber);
   }, [unitCents, quantityNumber]);
@@ -63,7 +68,7 @@ export default function PageClient({ code }: { code: string }) {
     if (rawAmountCents < 1) return unitCents;
     if (isTooLarge) return MAX_STRIPE_AMOUNT_CENTS;
     return rawAmountCents;
-  }, [unitCents, rawAmountCents, isTooLarge, MAX_STRIPE_AMOUNT_CENTS]);
+  }, [unitCents, rawAmountCents, isTooLarge]);
 
   const elementsMode = useMemo<"subscription" | "payment">(() => {
     if (!selectedPriceId || !data?.product?.prices) return "subscription";
@@ -71,51 +76,11 @@ export default function PageClient({ code }: { code: string }) {
     return price.interval ? "subscription" : "payment";
   }, [data, selectedPriceId]);
 
-  const shortenedInterval = (interval: [number, string]) => {
-    if (interval[0] === 1) {
-      return interval[1];
-    }
-    return `${interval[0]} ${interval[1]}s`;
-  };
-
-  const getPriceLabel = (interval: [number, string] | undefined): string => {
-    if (!interval) {
-      return "One-time";
-    }
-    const [count, unit] = interval;
-
-    if (count === 1) {
-      if (unit === "day") {
-        return "Daily";
-      } else if (unit === "week") {
-        return "Weekly";
-      } else if (unit === "month") {
-        return "Monthly";
-      } else if (unit === "year") {
-        return "Yearly";
-      } else {
-        return `Every ${unit}`;
-      }
-    }
-
-    if (unit === "day") {
-      return `Every ${count} days`;
-    } else if (unit === "week") {
-      return `Once every ${count} weeks`;
-    } else if (unit === "month") {
-      return `Every ${count} months`;
-    } else if (unit === "year") {
-      return `Every ${count} years`;
-    } else {
-      return `Every ${count} ${unit}s`;
-    }
-  };
-
   const validateCode = useCallback(async () => {
     const response = await fetch(`${baseUrl}/payments/purchases/validate-code`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         full_code: code,
@@ -123,39 +88,42 @@ export default function PageClient({ code }: { code: string }) {
       }),
     });
     if (!response.ok) {
-      throw new Error('Failed to validate code');
+      throw new Error("Failed to validate code");
     }
     const result = await response.json();
     setData(result);
     if (result?.product?.prices) {
-      const firstPriceId = Object.keys(result.product.prices)[0];
-      setSelectedPriceId(firstPriceId);
+      const priceIds = Object.keys(result.product.prices);
+      if (priceIds.length > 0) {
+        setSelectedPriceId(priceIds[0]);
+      }
     }
   }, [code, returnUrl]);
 
   useEffect(() => {
     setLoading(true);
     validateCode().catch((err) => {
-      setError(err instanceof Error ? err.message : 'An error occurred');
+      setError(err instanceof Error ? err.message : "An error occurred");
     }).finally(() => {
       setLoading(false);
     });
   }, [validateCode]);
 
-  // True iff the price the user is about to purchase is $0. The backend
-  // intentionally omits client_secret for $0 subs (Stripe activates them
-  // synchronously, nothing to confirm), so this drives both the
-  // missing-secret-is-ok check below and the skip-Stripe-Elements branch in
   const isFreeSelected = useMemo<boolean>(() => {
     if (!selectedPriceId || !data?.product?.prices) return false;
     const usd = data.product.prices[selectedPriceId].USD;
-    return usd === "0" || usd === "0.00";
+    return isFreePrice(usd);
+  }, [data, selectedPriceId]);
+
+  const selectedPriceData = useMemo(() => {
+    if (!selectedPriceId || !data?.product?.prices) return null;
+    return data.product.prices[selectedPriceId];
   }, [data, selectedPriceId]);
 
   const setupSubscription = async () => {
     const response = await fetch(`${baseUrl}/payments/purchases/purchase-session`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ full_code: code, price_id: selectedPriceId, quantity: quantityNumber }),
     });
     const result = await response.json();
@@ -175,12 +143,12 @@ export default function PageClient({ code }: { code: string }) {
       return;
     }
     const response = await fetch(`${baseUrl}/internal/payments/test-mode-purchase-session`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         full_code: code,
         price_id: selectedPriceId,
-        quantity: quantityNumber
+        quantity: quantityNumber,
       }),
     });
     if (!response.ok) {
@@ -195,235 +163,181 @@ export default function PageClient({ code }: { code: string }) {
     window.location.assign(url.toString());
   }, [code, selectedPriceId, quantityNumber, isTooLarge, returnUrl]);
 
+  const checkoutDisabled = quantityNumber < 1 || isTooLarge || data?.already_bought_non_stackable === true;
+  const showInvalidPurchaseCode = !loading && error != null;
+
+  if (showInvalidPurchaseCode) {
+    return (
+      <div className="relative flex min-h-screen items-center justify-center bg-white px-6 dark:bg-zinc-950">
+        <div className="w-full max-w-md text-center">
+          <DesignCard glassmorphic contentClassName="flex flex-col items-center gap-4 p-8">
+            <div className="flex size-12 items-center justify-center rounded-full bg-destructive/10">
+              <XCircleIcon className="size-6 text-destructive" weight="fill" />
+            </div>
+            <div className="space-y-2">
+              <Typography type="h2" className="mb-2 text-xl font-semibold text-foreground">
+                Invalid Purchase Code
+              </Typography>
+              <Typography type="p" variant="secondary" className="text-sm">
+                The purchase code is invalid or has expired. Please check your link and try again.
+              </Typography>
+            </div>
+          </DesignCard>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className="min-h-screen flex flex-col md:flex-row">
-      <div className="w-full md:w-1/2 flex flex-col bg-background border-b md:border-b-0 md:border-r border-primary/10">
-        <div className="flex-1 overflow-y-auto">
-          <div className="max-w-xl mx-auto px-4 py-6 md:py-8">
+    <div className="relative min-h-screen bg-white dark:bg-zinc-950">
+      <div className="relative flex min-h-screen w-full flex-col lg:flex-row">
+        {/* Left Panel: Product & Pricing Selection */}
+        <div className="flex flex-1 flex-col border-b border-border/40 bg-white dark:bg-zinc-950 lg:w-1/2 lg:border-b-0 lg:border-r">
+          <div className="mx-auto w-full max-w-md px-6 pb-12 pt-16 lg:pt-20">
             {loading ? (
-              <div>
-                <Skeleton className="h-10 w-10 rounded-lg" />
-                <Skeleton className="w-3/4 h-7 mt-5" />
-                <Skeleton className="w-full h-16 mt-5" />
-                <Skeleton className="w-full h-16 mt-5" />
-              </div>
-            ) : error ? (
-              <div className="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-3">
-                <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
-                  <svg className="w-6 h-6 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </div>
-                <Typography type="h2" className="mb-2 text-xl">Invalid Purchase Code</Typography>
-                <Typography type="p" variant="secondary" className="max-w-md text-sm">
-                  The purchase code is invalid or has expired. Please check your link and try again.
-                </Typography>
+              <div className="space-y-5">
+                <Skeleton className="size-12 rounded-full" />
+                <Skeleton className="mt-4 h-10 w-2/3" />
+                <Skeleton className="mt-2 h-5 w-full" />
+                <Skeleton className="mt-8 h-20 w-full rounded-xl" />
+                <Skeleton className="mt-4 h-24 w-full rounded-xl" />
               </div>
             ) : (
-              <div className="space-y-5">
+              <div className="space-y-8">
+                {/* Product Logo */}
                 {data?.project_logo_url && (
-                  <div className="flex items-center">
+                  <div>
                     <Image
                       src={data.project_logo_url}
                       alt="Project logo"
-                      className="h-10 w-10 object-contain"
-                      width={40}
-                      height={40}
+                      className="size-12 rounded-full border border-border/40 bg-white p-1 object-contain shadow-sm dark:bg-zinc-950"
+                      width={48}
+                      height={48}
                       unoptimized
                     />
                   </div>
                 )}
 
-                <div className="space-y-1">
-                  <Typography type="h2" className="text-xl font-semibold">
-                    {data?.product?.display_name || "Choose Your Plan"}
-                  </Typography>
-                </div>
+                {/* Product Name */}
+                <Typography type="h1" className="text-3xl font-bold tracking-tight text-foreground">
+                  {data?.product?.display_name || "Choose Your Plan"}
+                </Typography>
 
+                {/* Prominent Selected Price Display */}
+                {selectedPriceData && (
+                  <div className="py-2">
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-5xl font-bold tabular-nums tracking-tight text-foreground">
+                        ${selectedPriceData.USD ?? "0.00"}
+                      </span>
+                      {selectedPriceData.interval && (
+                        <span className="text-lg font-medium text-muted-foreground">
+                          /{shortenedInterval(selectedPriceData.interval)}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Conflict / Already Purchased Alerts */}
                 {(data?.already_bought_non_stackable || (data?.conflicting_products && data.conflicting_products.length > 0)) && (
                   <div className="space-y-2">
                     {data.already_bought_non_stackable && (
-                      <Alert variant="destructive">
-                        <AlertTitle className="text-sm">Already Purchased</AlertTitle>
-                        <AlertDescription className="text-sm">
-                          You already have this product and cannot purchase it again.
-                        </AlertDescription>
-                      </Alert>
+                      <DesignAlert
+                        variant="error"
+                        title="Already Purchased"
+                        description="You already have this product and cannot purchase it again."
+                      />
                     )}
                     {data.conflicting_products && data.conflicting_products.length > 0 && (
-                      <Alert>
-                        <AlertTitle className="text-sm">Plan Change Detected</AlertTitle>
-                        <AlertDescription className="text-sm">
-                          {data.conflicting_products.length === 1 ? (
-                            <>This purchase will replace your current plan: <strong>{data.conflicting_products[0].display_name}</strong></>
-                          ) : (
-                            <>This purchase will replace one of your existing plans.</>
-                          )}
-                        </AlertDescription>
-                      </Alert>
+                      <DesignAlert
+                        variant="warning"
+                        title="Plan Change Detected"
+                        description={
+                          data.conflicting_products.length === 1
+                            ? `This purchase will replace your current plan: ${data.conflicting_products[0].display_name}`
+                            : "This purchase will replace one of your existing plans."
+                        }
+                      />
                     )}
                   </div>
                 )}
 
+                {/* Pricing Options */}
                 {data?.product?.prices && typedEntries(data.product.prices).length > 0 && (
                   <div className="space-y-3">
-                    <Typography type="label" className="text-xs font-medium uppercase tracking-wide text-primary/60">
+                    <Typography type="label" className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                       Select a Pricing Option
                     </Typography>
-                    <div className="grid gap-3">
-                      {typedEntries(data.product.prices).map(([priceId, priceData], index) => (
-                        <Card
+                    <div className="grid gap-2.5">
+                      {typedEntries(data.product.prices).map(([priceId, priceData]) => (
+                        <PurchasePriceOption
                           key={priceId}
-                          className={`cursor-pointer transition-all duration-200 border-0 ${
-                            selectedPriceId === priceId
-                              ? 'outline-2 outline-primary outline'
-                              : 'outline outline-2 outline-primary/20 hover:outline-primary/40'
-                          }`}
-                          onClick={() => setSelectedPriceId(priceId)}
-                        >
-                          <CardContent className="p-4">
-                            <div className="flex items-start justify-between gap-3">
-                              <div className="flex-1 space-y-1">
-                                <div className="flex items-center gap-2">
-                                  <Typography type="h4" className="text-sm font-semibold">
-                                    {getPriceLabel(priceData.interval)}
-                                  </Typography>
-                                  {selectedPriceId === priceId && (
-                                    <div className="w-4 h-4 rounded-full bg-primary flex items-center justify-center">
-                                      <svg className="w-2.5 h-2.5 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                                      </svg>
-                                    </div>
-                                  )}
-                                </div>
-
-                              </div>
-                              <div className="text-right">
-                                <Typography type="h3" className="text-lg font-bold">
-                                  ${priceData.USD}
-                                </Typography>
-                                {priceData.interval && (
-                                  <Typography type="p" variant="secondary" className="text-xs mt-0.5">
-                                    per {shortenedInterval(priceData.interval)}
-                                  </Typography>
-                                )}
-                              </div>
-                            </div>
-                          </CardContent>
-                        </Card>
+                          priceId={priceId}
+                          priceData={priceData}
+                          selected={selectedPriceId === priceId}
+                          onSelect={setSelectedPriceId}
+                        />
                       ))}
                     </div>
                   </div>
                 )}
 
+                {/* Stackable Quantity Selector */}
                 {data?.product?.stackable && selectedPriceId && (
-                  <div className="bg-primary/5 rounded-lg p-4 space-y-4 border border-primary/10">
-                    <div className="space-y-3">
-                      <div className="flex items-center justify-between">
-                        <Typography type="label" className="text-sm font-semibold">
-                          Quantity
-                        </Typography>
-                        <div className="flex items-center gap-2">
-                          <Button
-                            type="button"
-                            size="icon"
-                            variant="outline"
-                            className="h-8 w-8"
-                            disabled={quantityNumber <= 1}
-                            onClick={() => setQuantityInput(String(Math.max(1, quantityNumber - 1)))}
-                          >
-                            <MinusIcon className="w-3.5 h-3.5" />
-                          </Button>
-                          <Input
-                            className="text-center w-20 h-8 text-sm font-semibold"
-                            inputMode="numeric"
-                            pattern="[0-9]*"
-                            type="text"
-                            value={quantityInput}
-                            onChange={e => {
-                              const digitsOnly = e.target.value.replace(/[^0-9]/g, "");
-                              setQuantityInput(digitsOnly);
-                            }}
-                          />
-                          <Button
-                            type="button"
-                            size="icon"
-                            variant="outline"
-                            className="h-8 w-8"
-                            onClick={() => setQuantityInput(String(quantityNumber + 1))}
-                          >
-                            <PlusIcon className="w-3.5 h-3.5" />
-                          </Button>
-                        </div>
-                      </div>
-                      {(quantityNumber < 1 || isTooLarge) && (
-                        <Typography type="footnote" variant="destructive" className="text-xs">
-                          {quantityNumber < 1
-                            ? "Please enter a quantity of at least 1."
-                            : "Amount exceeds the maximum limit of $999,999. Please reduce the quantity."}
-                        </Typography>
-                      )}
-                    </div>
-
-                    <div className="pt-3 border-t border-primary/10">
-                      <div className="flex items-baseline justify-between">
-                        <Typography type="label" className="text-sm font-semibold">
-                          Total Amount
-                        </Typography>
-                        <div className="text-right">
-                          <Typography type="h2" className="text-xl font-bold">
-                            ${selectedPriceId ? (Number(data.product.prices[selectedPriceId].USD) * Math.max(0, quantityNumber)).toFixed(2) : "0.00"}
-                          </Typography>
-                          {selectedPriceId && data.product.prices[selectedPriceId].interval && (
-                            <Typography type="p" variant="secondary" className="text-xs mt-0.5">
-                              per {shortenedInterval(data.product.prices[selectedPriceId].interval!)}
-                            </Typography>
-                          )}
-                        </div>
-                      </div>
-                    </div>
+                  <div className="rounded-xl border border-border/40 bg-foreground/[0.01] p-4 sm:p-5">
+                    <PurchaseQuantitySelector
+                      quantityInput={quantityInput}
+                      quantityNumber={quantityNumber}
+                      onQuantityChange={setQuantityInput}
+                      isTooLarge={isTooLarge}
+                      selectedPriceId={selectedPriceId}
+                      priceData={data.product.prices[selectedPriceId]}
+                    />
                   </div>
                 )}
               </div>
             )}
           </div>
         </div>
-      </div>
 
-      <div className="w-full md:w-1/2 flex flex-grow items-center justify-center bg-gradient-to-br from-primary/5 via-primary/3 to-background p-6 md:p-12">
-        {data && (
-          <div className="w-full max-w-lg">
-            {data.test_mode ? (
-              <TestModeBypassForm
-                onBypass={handleBypass}
-                disabled={quantityNumber < 1 || isTooLarge || data.already_bought_non_stackable === true}
-              />
-            ) : data.stripe_account_id == null ? (
-              <div className="flex flex-col gap-4 max-w-md w-full p-6 rounded-md bg-background">
-                <Typography type="h3" variant="destructive">Payments not enabled</Typography>
-                <p className="text-sm text-muted-foreground">
-                  This project does not have payments enabled yet. Please contact the app developer to finish setting up payments.
-                </p>
+        {/* Right Panel: Checkout Form / Payment Details */}
+        <div className="flex flex-1 flex-col justify-center bg-zinc-200 dark:bg-black lg:w-1/2">
+          <div className="mx-auto w-full max-w-md px-6 py-12">
+            {loading ? (
+              <div className="space-y-4">
+                <Skeleton className="h-64 w-full rounded-2xl" />
               </div>
-            ) : (
-              <StripeElementsProvider
-                stripeAccountId={data.stripe_account_id}
-                amount={elementsAmountCents}
-                mode={elementsMode}
-              >
-                <CheckoutForm
-                  fullCode={code}
-                  stripeAccountId={data.stripe_account_id}
-                  setupSubscription={setupSubscription}
-                  returnUrl={returnUrl ?? undefined}
-                  disabled={quantityNumber < 1 || isTooLarge || data.already_bought_non_stackable === true}
-                  chargesEnabled={data.charges_enabled ?? false}
-                  isFree={isFreeSelected}
-                />
-              </StripeElementsProvider>
-            )}
+            ) : data ? (
+              <div className="space-y-4">
+                {data.test_mode ? (
+                  <TestModeBypassForm
+                    onBypass={handleBypass}
+                    disabled={checkoutDisabled}
+                  />
+                ) : data.stripe_account_id == null ? (
+                  <PaymentsNotEnabledCard />
+                ) : (
+                  <StripeElementsProvider
+                    stripeAccountId={data.stripe_account_id}
+                    amount={elementsAmountCents}
+                    mode={elementsMode}
+                  >
+                    <CheckoutForm
+                      fullCode={code}
+                      stripeAccountId={data.stripe_account_id}
+                      setupSubscription={setupSubscription}
+                      returnUrl={returnUrl ?? undefined}
+                      disabled={checkoutDisabled}
+                      chargesEnabled={data.charges_enabled ?? false}
+                      isFree={isFreeSelected}
+                    />
+                  </StripeElementsProvider>
+                )}
+              </div>
+            ) : null}
           </div>
-        )}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx b/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
index c21b6ac8d..e945c8f6c 100644
--- a/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { StyledLink } from "@/components/link";
+import { DesignCard } from "@/components/design-components/card";
+import { Typography } from "@/components/ui";
 import { getPublicEnvVar } from "@/lib/env";
 import { throwErr } from "@hexclave/shared/dist/utils/errors";
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
-import { Typography } from "@/components/ui";
+import { CheckCircleIcon, SpinnerGapIcon, XCircleIcon } from "@phosphor-icons/react";
 import { loadStripe } from "@stripe/stripe-js";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
@@ -104,31 +106,53 @@ export default function ReturnClient({ clientSecret, stripeAccountId, purchaseFu
   }, [updateViewState]);
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen text-center px-4 gap-4">
-      {state.kind === "loading" && (
-        <>
-          <Typography type="h2">Finalizing purchase…</Typography>
-          <Typography type="label">Please wait while we verify your payment.</Typography>
-        </>
-      )}
-      {state.kind === "success" && (
-        <>
-          <Typography type="h2">Purchase successful</Typography>
-          <Typography type="label">{state.message}</Typography>
-        </>
-      )}
-      {state.kind === "error" && (
-        <>
-          <Typography type="h2">Purchase failed</Typography>
-          <Typography type="label">
-            The following error occurred: &quot;{state.message}&quot;
-          </Typography>
-          <Typography type="label">
-            <StyledLink href={`/purchase/${purchaseFullCode}`}>Click here</StyledLink> to try making your purchase again.
-          </Typography>
-        </>
-      )}
+    <div className="relative flex min-h-screen items-center justify-center bg-white px-4 py-12 dark:bg-black">
+      <DesignCard glassmorphic className="relative w-full max-w-md" contentClassName="flex flex-col items-center gap-5 p-8 text-center">
+        {state.kind === "loading" && (
+          <>
+            <div className="flex size-14 items-center justify-center rounded-full bg-primary/10">
+              <SpinnerGapIcon className="size-7 animate-spin text-primary" />
+            </div>
+            <Typography type="h2" className="text-xl font-semibold tracking-tight">
+              Finalizing purchase…
+            </Typography>
+            <Typography type="label" className="text-sm text-muted-foreground">
+              Please wait while we verify your payment.
+            </Typography>
+          </>
+        )}
+
+        {state.kind === "success" && (
+          <>
+            <div className="flex size-14 items-center justify-center rounded-full bg-emerald-500/10">
+              <CheckCircleIcon className="size-7 text-emerald-600 dark:text-emerald-400" weight="fill" />
+            </div>
+            <Typography type="h2" className="text-xl font-semibold tracking-tight">
+              Purchase successful
+            </Typography>
+            <Typography type="label" className="text-sm text-muted-foreground">
+              {state.message}
+            </Typography>
+          </>
+        )}
+
+        {state.kind === "error" && (
+          <>
+            <div className="flex size-14 items-center justify-center rounded-full bg-destructive/10">
+              <XCircleIcon className="size-7 text-destructive" weight="fill" />
+            </div>
+            <Typography type="h2" className="text-xl font-semibold tracking-tight">
+              Purchase failed
+            </Typography>
+            <Typography type="label" className="text-sm text-muted-foreground">
+              The following error occurred: &quot;{state.message}&quot;
+            </Typography>
+            <Typography type="label" className="text-sm text-muted-foreground">
+              <StyledLink href={`/purchase/${purchaseFullCode}`}>Click here</StyledLink> to try making your purchase again.
+            </Typography>
+          </>
+        )}
+      </DesignCard>
     </div>
   );
 }
-
diff --git a/apps/dashboard/src/components/design-components/select.tsx b/apps/dashboard/src/components/design-components/select.tsx
index 5153d6732..c596092a1 100644
--- a/apps/dashboard/src/components/design-components/select.tsx
+++ b/apps/dashboard/src/components/design-components/select.tsx
@@ -27,6 +27,7 @@ export type DesignSelectorDropdownProps = {
   className?: string,
   triggerClassName?: string,
   contentClassName?: string,
+  triggerId?: string,
 };
 
 const triggerSizeClasses = new Map<DesignSelectorSize, string>([
@@ -53,13 +54,14 @@ export function DesignSelectorDropdown({
   className,
   triggerClassName,
   contentClassName,
+  triggerId,
 }: DesignSelectorDropdownProps) {
   const triggerSizeClass = getMapValueOrThrow(triggerSizeClasses, size, "triggerSizeClasses");
 
   return (
     <div className={className}>
       <Select value={value} onValueChange={onValueChange} disabled={disabled}>
-        <SelectTrigger className={cn(triggerSizeClass, triggerClassName)}>
+        <SelectTrigger id={triggerId} className={cn(triggerSizeClass, triggerClassName)}>
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent className={contentClassName}>
diff --git a/apps/dashboard/src/components/form-fields.tsx b/apps/dashboard/src/components/form-fields.tsx
index e8d4fdce9..f5966428b 100644
--- a/apps/dashboard/src/components/form-fields.tsx
+++ b/apps/dashboard/src/components/form-fields.tsx
@@ -249,11 +249,15 @@ export function SelectField<F extends FieldValues>(props: {
         <FormItem>
           <FieldLabel required={props.required}>{props.label}</FieldLabel>
           <FormControl>
-            <Select onValueChange={field.onChange} defaultValue={field.value} disabled={props.disabled}>
+            <Select
+              onValueChange={field.onChange}
+              value={field.value ?? ""}
+              disabled={props.disabled}
+            >
               <SelectTrigger className="max-w-lg">
-                <SelectValue placeholder={props.placeholder} />
+                <SelectValue placeholder={props.placeholder ?? "Select an option"} />
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent position="popper" sideOffset={4}>
                 <SelectGroup>
                   {props.options.map(option => (
                     <SelectItem key={option.value} value={option.value}>
diff --git a/apps/dashboard/src/components/payments/checkout.tsx b/apps/dashboard/src/components/payments/checkout.tsx
index 595c80018..5a20f1e3d 100644
--- a/apps/dashboard/src/components/payments/checkout.tsx
+++ b/apps/dashboard/src/components/payments/checkout.tsx
@@ -1,10 +1,15 @@
-import { Button, Typography } from "@/components/ui";
+"use client";
+
+import { DesignButton } from "@/components/design-components/button";
+import { DesignCard } from "@/components/design-components/card";
+import { Typography } from "@/components/ui";
 import {
   PaymentElement,
   useElements,
   useStripe,
 } from "@stripe/react-stripe-js";
 import { StripeError, StripePaymentElementOptions } from "@stripe/stripe-js";
+import { FlaskIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 
 const paymentElementOptions = {
@@ -27,6 +32,26 @@ type Props = {
   isFree: boolean,
 };
 
+export function PaymentsNotEnabledCard() {
+  return (
+    <DesignCard glassmorphic contentClassName="space-y-4 p-5 sm:p-6">
+      <div className="flex items-start gap-3">
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-destructive/10 text-destructive">
+          <WarningCircleIcon className="size-4" weight="fill" />
+        </div>
+        <div className="space-y-1">
+          <Typography type="h3" className="text-base font-semibold text-destructive">
+            Payments not enabled
+          </Typography>
+          <Typography type="p" variant="secondary" className="text-sm">
+            This project does not have payments enabled yet. Please contact the app developer to finish setting up payments.
+          </Typography>
+        </div>
+      </div>
+    </DesignCard>
+  );
+}
+
 export function TestModeBypassForm({
   onBypass,
   disabled,
@@ -35,20 +60,27 @@ export function TestModeBypassForm({
   disabled?: boolean,
 }) {
   return (
-    <div className="flex flex-col gap-4 max-w-md w-full p-6 rounded-md bg-background">
-      <div className="space-y-1">
-        <Typography type="h3">Test mode active</Typography>
-        <p className="text-sm text-muted-foreground">
-          This project is in test mode. Use the bypass button to simulate a purchase.
-        </p>
+    <div className="flex flex-col items-center justify-center space-y-6 py-8 text-center">
+      <div className="flex size-12 items-center justify-center rounded-2xl bg-orange-500/10 text-orange-500 shadow-[0_0_20px_rgba(249,115,22,0.05)]">
+        <FlaskIcon className="size-5" weight="fill" />
       </div>
-      <Button
+
+      <div className="max-w-xs space-y-2">
+        <Typography type="h3" className="text-lg font-semibold text-foreground">
+          Test mode active
+        </Typography>
+        <Typography type="p" variant="secondary" className="text-sm leading-relaxed text-muted-foreground">
+          This project is in test mode. Use the bypass button to simulate a purchase.
+        </Typography>
+      </div>
+
+      <DesignButton
         disabled={disabled}
         onClick={onBypass}
-        className="mt-2"
+        className="h-11 w-full max-w-xs rounded-xl text-sm font-semibold"
       >
         Complete test purchase
-      </Button>
+      </DesignButton>
     </div>
   );
 }
@@ -113,30 +145,24 @@ export function CheckoutForm({
   };
 
   if (!chargesEnabled) {
-    return (
-      <div className="flex flex-col gap-4 max-w-md w-full p-6 rounded-md bg-background">
-        <div className="space-y-1">
-          <Typography type="h3" variant="destructive">Payments not enabled</Typography>
-          <p className="text-sm text-muted-foreground">
-            This project does not have payments enabled yet. Please contact the app developer to finish setting up payments.
-          </p>
-        </div>
-      </div>
-    );
+    return <PaymentsNotEnabledCard />;
   }
 
   return (
-    <div className="flex flex-col gap-6 max-w-md w-full p-6 rounded-md bg-background">
+    <DesignCard glassmorphic contentClassName="space-y-5 p-5 sm:p-6">
       <PaymentElement options={paymentElementOptions} />
-      <Button
+      <DesignButton
         disabled={!stripe || !elements || disabled || !chargesEnabled}
         onClick={handleSubmit}
+        className="w-full"
       >
         Submit
-      </Button>
+      </DesignButton>
       {message && (
-        <div className="text-destructive">{message}</div>
+        <Typography type="p" variant="destructive" className="text-sm">
+          {message}
+        </Typography>
       )}
-    </div>
+    </DesignCard>
   );
 }
diff --git a/apps/dashboard/src/components/payments/create-checkout-dialog.tsx b/apps/dashboard/src/components/payments/create-checkout-dialog.tsx
index 992b412c7..3c7318a4a 100644
--- a/apps/dashboard/src/components/payments/create-checkout-dialog.tsx
+++ b/apps/dashboard/src/components/payments/create-checkout-dialog.tsx
@@ -1,12 +1,22 @@
+"use client";
+
 import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
+import { StyledLink } from "@/components/link";
+import {
+  DesignAlert,
+  DesignButton,
+  DesignDialog,
+  DesignDialogClose,
+  DesignSelectorDropdown,
+} from "@/components/design-components";
+import { InlineCode, Label, toast } from "@/components/ui";
+import { LinkIcon, ShoppingCartIcon } from "@phosphor-icons/react";
 import { ServerUser, Team } from "@hexclave/next";
 import { KnownErrors } from "@hexclave/shared";
+import { urlString } from "@hexclave/shared/dist/utils/urls";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
 import { Result } from "@hexclave/shared/dist/utils/results";
-import { ActionDialog, InlineCode, Typography, toast } from "@/components/ui";
-import { useState } from "react";
-import * as yup from "yup";
-import { FormDialog } from "../form-dialog";
-import { SelectField } from "../form-fields";
+import { useEffect, useMemo, useState } from "react";
 
 type Props = {
   open: boolean,
@@ -26,58 +36,136 @@ export function CreateCheckoutDialog(props: Props) {
   const project = hexclaveAdminApp.useProject();
   const config = project.useConfig();
   const [checkoutUrl, setCheckoutUrl] = useState<string | null>(null);
+  const [productId, setProductId] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
   const customer = props.user ?? props.team;
   const products = config.payments.products;
-  const shownProducts = Object.keys(products).filter(id => products[id].customerType === (props.user ? "user" : "team"));
+  const customerType = props.user ? "user" : "team";
+  const createProductHref = urlString`/projects/${hexclaveAdminApp.projectId}/payments/products/new?customerType=${customerType}`;
 
-  const createCheckoutUrl = async (data: { productId: string }) => {
-    const result = await Result.fromPromise(customer.createCheckoutUrl({ productId: data.productId }));
-    if (result.status === "ok") {
-      setCheckoutUrl(result.data);
+  const productOptions = useMemo(() => {
+    return Object.entries(products)
+      .filter(([, product]) => product.customerType === customerType)
+      .map(([id, product]) => ({
+        value: id,
+        label: product.displayName ? `${product.displayName} (${id})` : id,
+      }));
+  }, [products, customerType]);
+
+  useEffect(() => {
+    if (props.open) {
+      setProductId("");
+    }
+  }, [props.open]);
+
+  const createCheckoutUrl = async () => {
+    if (!productId) {
+      toast({ title: "Please select a product", variant: "destructive" });
       return;
     }
-    if (result.error instanceof KnownErrors.ProductDoesNotExist) {
-      toast({ title: "Product with given productId does not exist", variant: "destructive" });
-    } else if (result.error instanceof KnownErrors.ProductCustomerTypeDoesNotMatch) {
-      toast({ title: "Customer type does not match expected type for this product", variant: "destructive" });
-    } else if (result.error instanceof KnownErrors.CustomerDoesNotExist) {
-      toast({ title: "Customer with given customerId does not exist", variant: "destructive" });
-    } else if (result.error instanceof KnownErrors.ProductAlreadyGranted) {
-      toast({ title: "This customer already owns the selected product", variant: "destructive" });
-    } else {
-      toast({ title: "An unknown error occurred", variant: "destructive" });
+
+    setIsCreating(true);
+    try {
+      const result = await Result.fromPromise(customer.createCheckoutUrl({ productId }));
+      if (result.status === "ok") {
+        setCheckoutUrl(result.data);
+        props.onOpenChange(false);
+        return;
+      }
+      if (result.error instanceof KnownErrors.ProductDoesNotExist) {
+        toast({ title: "Product with given productId does not exist", variant: "destructive" });
+      } else if (result.error instanceof KnownErrors.ProductCustomerTypeDoesNotMatch) {
+        toast({ title: "Customer type does not match expected type for this product", variant: "destructive" });
+      } else if (result.error instanceof KnownErrors.CustomerDoesNotExist) {
+        toast({ title: "Customer with given customerId does not exist", variant: "destructive" });
+      } else if (result.error instanceof KnownErrors.ProductAlreadyGranted) {
+        toast({ title: "This customer already owns the selected product", variant: "destructive" });
+      } else {
+        toast({ title: "An unknown error occurred", variant: "destructive" });
+      }
+    } finally {
+      setIsCreating(false);
     }
-    return "prevent-close";
   };
 
   return (
     <>
-      <FormDialog
+      <DesignDialog
         open={props.open}
         onOpenChange={props.onOpenChange}
+        size="md"
+        icon={ShoppingCartIcon}
         title="Create Checkout URL"
-        formSchema={yup.object({
-          productId: yup.string().defined().label("Product ID"),
-        })}
-        cancelButton
-        okButton={{ label: "Create" }}
-        onSubmit={values => createCheckoutUrl(values)}
-        render={form => <SelectField
-          control={form.control}
-          name="productId"
-          label="Product"
-          options={shownProducts.map(id => ({ value: id, label: id }))}
-        />}
-      />
-      <ActionDialog
-        open={checkoutUrl !== null}
-        onOpenChange={() => setCheckoutUrl(null)}
-        title="Checkout URL"
-        okButton
+        footer={(
+          <>
+            <DesignDialogClose asChild>
+              <DesignButton variant="secondary" size="sm" type="button" disabled={isCreating}>
+                Cancel
+              </DesignButton>
+            </DesignDialogClose>
+            <DesignButton
+              size="sm"
+              type="button"
+              disabled={isCreating || productOptions.length === 0}
+              loading={isCreating}
+              onClick={() => runAsynchronouslyWithAlert(createCheckoutUrl())}
+            >
+              Create
+            </DesignButton>
+          </>
+        )}
       >
-        <Typography className="mb-2">This is a temporary URL. It will expire in 24 hours.</Typography>
-        <InlineCode className="whitespace-nowrap overflow-x-auto block">{checkoutUrl}</InlineCode>
-      </ActionDialog>
+        <div className="grid gap-4">
+          {productOptions.length === 0 ? (
+            <DesignAlert
+              variant="warning"
+              title="No products available"
+              description={(
+                <>
+                  No {customerType} products are configured for this project.{" "}
+                  <StyledLink href={createProductHref}>Create one here</StyledLink>.
+                </>
+              )}
+            />
+          ) : (
+            <div className="grid gap-2">
+              <Label htmlFor="checkout-product" className="text-sm font-medium">
+                Product
+              </Label>
+              <DesignSelectorDropdown
+                value={productId}
+                onValueChange={setProductId}
+                options={productOptions}
+                placeholder="Select a product"
+                size="md"
+                triggerId="checkout-product"
+              />
+            </div>
+          )}
+        </div>
+      </DesignDialog>
+
+      <DesignDialog
+        open={checkoutUrl !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCheckoutUrl(null);
+          }
+        }}
+        size="md"
+        icon={LinkIcon}
+        title="Checkout URL"
+        description="This is a temporary URL. It will expire in 24 hours."
+        footer={(
+          <DesignDialogClose asChild>
+            <DesignButton variant="secondary" size="sm" type="button">
+              Close
+            </DesignButton>
+          </DesignDialogClose>
+        )}
+      >
+        <InlineCode className="block overflow-x-auto whitespace-nowrap">{checkoutUrl}</InlineCode>
+      </DesignDialog>
     </>
   );
 }
diff --git a/apps/dashboard/src/components/payments/purchase-price-option.tsx b/apps/dashboard/src/components/payments/purchase-price-option.tsx
new file mode 100644
index 000000000..d3697ac31
--- /dev/null
+++ b/apps/dashboard/src/components/payments/purchase-price-option.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { getPriceLabel, shortenedInterval } from "./purchase-utils";
+
+type PriceData = {
+  USD?: string,
+  interval?: [number, string],
+};
+
+type Props = {
+  priceId: string,
+  priceData: PriceData,
+  selected: boolean,
+  onSelect: (priceId: string) => void,
+};
+
+export function PurchasePriceOption({ priceId, priceData, selected, onSelect }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(priceId)}
+      aria-pressed={selected}
+      className={cn(
+        "group relative w-full rounded-2xl border py-5 px-6 text-left transition-all duration-150 hover:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        selected
+          ? "border-blue-500 bg-blue-500/[0.03] ring-1 ring-blue-500/20 shadow-[0_0_20px_rgba(59,130,246,0.06)]"
+          : "border-border/30 bg-foreground/[0.015] hover:border-blue-500/30 hover:bg-foreground/[0.03] hover:shadow-[0_0_15px_rgba(255,255,255,0.01)]",
+      )}
+    >
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-4 min-w-0 flex-1">
+          {/* Custom Radio Indicator */}
+          {selected ? (
+            <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.3)]">
+              <div className="size-2 rounded-full bg-white" />
+            </div>
+          ) : (
+            <div className="size-5 shrink-0 rounded-full border border-border/60 dark:border-white/20 group-hover:border-blue-500/50 transition-colors duration-150" />
+          )}
+          <span className="text-base font-semibold text-foreground truncate">
+            {getPriceLabel(priceData.interval)}
+          </span>
+        </div>
+        <div className="shrink-0 text-right">
+          <span className="text-base font-bold text-foreground">${priceData.USD ?? "0.00"}</span>
+          {priceData.interval && (
+            <span className="text-xs text-muted-foreground/80 ml-1">
+              /{shortenedInterval(priceData.interval)}
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}
diff --git a/apps/dashboard/src/components/payments/purchase-quantity-selector.tsx b/apps/dashboard/src/components/payments/purchase-quantity-selector.tsx
new file mode 100644
index 000000000..d0e5c3a64
--- /dev/null
+++ b/apps/dashboard/src/components/payments/purchase-quantity-selector.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { DesignInput } from "@/components/design-components/input";
+import { DesignButton } from "@/components/design-components/button";
+import { Typography } from "@/components/ui";
+import { MinusIcon, PlusIcon } from "@phosphor-icons/react";
+import { shortenedInterval } from "./purchase-utils";
+
+type PriceData = {
+  USD?: string,
+  interval?: [number, string],
+};
+
+type Props = {
+  quantityInput: string,
+  quantityNumber: number,
+  onQuantityChange: (value: string) => void,
+  isTooLarge: boolean,
+  selectedPriceId: string,
+  priceData: PriceData,
+};
+
+export function PurchaseQuantitySelector({
+  quantityInput,
+  quantityNumber,
+  onQuantityChange,
+  isTooLarge,
+  selectedPriceId,
+  priceData,
+}: Props) {
+  const unitPriceUsd = Number(priceData.USD ?? "0");
+  const totalAmount = selectedPriceId && Number.isFinite(unitPriceUsd)
+    ? (unitPriceUsd * Math.max(0, quantityNumber)).toFixed(2)
+    : "0.00";
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        <div className="flex items-center justify-between gap-4">
+          <Typography type="label" className="text-sm font-semibold text-foreground">
+            Quantity
+          </Typography>
+          <div className="flex items-center gap-2">
+            <DesignButton
+              type="button"
+              size="icon"
+              variant="outline"
+              className="size-8 border-border/40 bg-foreground/[0.01] hover:bg-foreground/[0.03]"
+              disabled={quantityNumber <= 1}
+              aria-label="Decrease quantity"
+              onClick={() => onQuantityChange(String(Math.max(1, quantityNumber - 1)))}
+            >
+              <MinusIcon className="size-3.5 text-foreground" />
+            </DesignButton>
+            <DesignInput
+              className="h-8 w-20 text-center text-sm font-semibold tabular-nums border-border/40 bg-foreground/[0.01] text-foreground focus-visible:ring-blue-500/20"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              type="text"
+              value={quantityInput}
+              aria-label="Quantity"
+              onChange={(event) => {
+                const digitsOnly = event.target.value.replace(/[^0-9]/g, "");
+                onQuantityChange(digitsOnly);
+              }}
+            />
+            <DesignButton
+              type="button"
+              size="icon"
+              variant="outline"
+              className="size-8 border-border/40 bg-foreground/[0.01] hover:bg-foreground/[0.03]"
+              aria-label="Increase quantity"
+              onClick={() => onQuantityChange(String(quantityNumber + 1))}
+            >
+              <PlusIcon className="size-3.5 text-foreground" />
+            </DesignButton>
+          </div>
+        </div>
+        {(quantityNumber < 1 || isTooLarge) && (
+          <Typography type="footnote" variant="destructive" className="text-xs">
+            {quantityNumber < 1
+              ? "Please enter a quantity of at least 1."
+              : "Amount exceeds the maximum limit of $999,999. Please reduce the quantity."}
+          </Typography>
+        )}
+      </div>
+
+      <div className="border-t border-border/40 pt-3">
+        <div className="flex items-baseline justify-between gap-3">
+          <Typography type="label" className="text-sm font-semibold text-foreground">
+            Total Amount
+          </Typography>
+          <div className="text-right">
+            <Typography type="h2" className="text-xl font-bold tabular-nums text-foreground">
+              ${totalAmount}
+            </Typography>
+            {selectedPriceId && priceData.interval && (
+              <Typography type="p" variant="secondary" className="text-xs text-muted-foreground mt-0.5">
+                per {shortenedInterval(priceData.interval)}
+              </Typography>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/payments/purchase-utils.ts b/apps/dashboard/src/components/payments/purchase-utils.ts
new file mode 100644
index 000000000..078016ec6
--- /dev/null
+++ b/apps/dashboard/src/components/payments/purchase-utils.ts
@@ -0,0 +1,48 @@
+export function shortenedInterval(interval: [number, string]): string {
+  if (interval[0] === 1) {
+    return interval[1];
+  }
+  return `${interval[0]} ${interval[1]}s`;
+}
+
+export function getPriceLabel(interval: [number, string] | undefined): string {
+  if (!interval) {
+    return "One-time";
+  }
+  const [count, unit] = interval;
+
+  if (count === 1) {
+    if (unit === "day") {
+      return "Daily";
+    } else if (unit === "week") {
+      return "Weekly";
+    } else if (unit === "month") {
+      return "Monthly";
+    } else if (unit === "year") {
+      return "Yearly";
+    } else {
+      return `Every ${unit}`;
+    }
+  }
+
+  if (unit === "day") {
+    return `Every ${count} days`;
+  } else if (unit === "week") {
+    return `Once every ${count} weeks`;
+  } else if (unit === "month") {
+    return `Every ${count} months`;
+  } else if (unit === "year") {
+    return `Every ${count} years`;
+  } else {
+    return `Every ${count} ${unit}s`;
+  }
+}
+
+export function isFreePrice(usd: string | undefined): boolean {
+  if (usd == null || usd.trim() === "") {
+    return false;
+  }
+
+  const usdAmount = Number(usd);
+  return Number.isFinite(usdAmount) && usdAmount === 0;
+}
diff --git a/apps/dashboard/src/components/ui/select.tsx b/apps/dashboard/src/components/ui/select.tsx
index 802765aff..7dda92711 100644
--- a/apps/dashboard/src/components/ui/select.tsx
+++ b/apps/dashboard/src/components/ui/select.tsx
@@ -81,17 +81,18 @@ SelectScrollDownButton.displayName =
 const SelectContent = forwardRefIfNeeded<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = "popper", style, ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "stack-scope relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-black/[0.08] dark:border-white/[0.08] bg-white/95 dark:bg-background/95 backdrop-blur-xl text-popover-foreground shadow-lg ring-1 ring-black/[0.08] dark:ring-white/[0.08] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "stack-scope relative z-[100] max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-black/[0.08] dark:border-white/[0.08] bg-white/95 dark:bg-background/95 backdrop-blur-xl text-popover-foreground shadow-lg ring-1 ring-black/[0.08] dark:ring-white/[0.08] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       )}
       position={position}
+      style={{ ...style, maxHeight: "var(--radix-select-content-available-height)" }}
       {...props}
     >
       <SelectScrollUpButton />
@@ -99,7 +100,7 @@ const SelectContent = forwardRefIfNeeded<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}