diff --git a/app/src/components/CheckoutSheet.tsx b/app/src/components/CheckoutSheet.tsx
new file mode 100644
index 0000000..bbdbffb
--- /dev/null
+++ b/app/src/components/CheckoutSheet.tsx
@@ -0,0 +1,135 @@
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+import { View } from "react-native";
+import { useRouter } from "expo-router";
+import { BottomSheet, Button, Spinner, Typography, useThemeColor } from "heroui-native";
+import { PRODUCTS, RESOLVERS } from "@/data/mock";
+import { useModals } from "@/state/modals";
+import { ResolverCard } from "@/components/ResolverCard";
+
+export function CheckoutSheet(): JSX.Element {
+  const router = useRouter();
+  const accentColor = useThemeColor("accent");
+  const { isCheckoutSheetOpen, checkoutListingId, checkoutStep, closeCheckoutSheet, confirmOrder } =
+    useModals();
+  const [resolverId, setResolverId] = useState(0);
+
+  const listing = useMemo(
+    () => PRODUCTS.find((product) => product.id === checkoutListingId) ?? PRODUCTS[0],
+    [checkoutListingId],
+  );
+
+  const handleViewOrders = () => {
+    closeCheckoutSheet();
+    router.push("/orders");
+  };
+
+  const handleContinueShopping = () => {
+    closeCheckoutSheet();
+    router.push("/browse");
+  };
+
+  return (
+    <BottomSheet
+      isOpen={isCheckoutSheetOpen}
+      onOpenChange={(open) => {
+        if (!open) closeCheckoutSheet();
+      }}
+    >
+      <BottomSheet.Portal>
+        <BottomSheet.Overlay isCloseOnPress={checkoutStep !== "pending"} />
+        <BottomSheet.Content>
+          {checkoutStep === "review" && (
+            <View className="gap-4">
+              <BottomSheet.Close />
+              <BottomSheet.Title>Place Order</BottomSheet.Title>
+              <View className="flex-row items-center gap-3 rounded-xl bg-surface-secondary p-3">
+                <View
+                  className="size-11 items-center justify-center rounded-lg"
+                  style={{ backgroundColor: listing.bg }}
+                >
+                  <Typography className="text-xl">{listing.emoji}</Typography>
+                </View>
+                <View className="flex-1">
+                  <Typography type="body-sm" weight="semibold" numberOfLines={1}>
+                    {listing.name}
+                  </Typography>
+                  <Typography type="body-xs" color="muted">
+                    {listing.seller}
+                  </Typography>
+                </View>
+              </View>
+
+              <View className="gap-1 rounded-xl bg-surface-secondary p-3.5">
+                <Typography type="body-xs" color="muted">
+                  Payment
+                </Typography>
+                <View className="flex-row items-baseline gap-2">
+                  <Typography type="h5">{listing.price}</Typography>
+                  <Typography type="body-sm" color="muted">
+                    ≈ {listing.usd} USD
+                  </Typography>
+                </View>
+              </View>
+
+              <View className="gap-2 rounded-xl bg-surface-secondary p-3.5">
+                <Typography type="body-xs" color="muted">
+                  Dispute Protection
+                </Typography>
+                {RESOLVERS.map((item) => (
+                  <ResolverCard
+                    key={item.id}
+                    resolver={item}
+                    isSelected={item.id === resolverId}
+                    onSelect={() => setResolverId(item.id)}
+                  />
+                ))}
+              </View>
+
+              <View className="flex-row gap-2">
+                <Button variant="secondary" className="flex-1" onPress={closeCheckoutSheet}>
+                  <Button.Label>Cancel</Button.Label>
+                </Button>
+                <Button className="flex-[2]" onPress={confirmOrder}>
+                  <Button.Label>Confirm & Place Order →</Button.Label>
+                </Button>
+              </View>
+            </View>
+          )}
+
+          {checkoutStep === "pending" && (
+            <View className="items-center gap-4 py-10">
+              <Spinner size="lg" color={accentColor} />
+              <Typography type="h6">Confirming on Solana…</Typography>
+              <Typography type="body-sm" color="muted" align="center">
+                {"Approve the transaction in your wallet.\nThis takes a few seconds."}
+              </Typography>
+            </View>
+          )}
+
+          {checkoutStep === "success" && (
+            <View className="gap-4">
+              <View className="items-center gap-2">
+                <View className="size-14 items-center justify-center rounded-full bg-success/15">
+                  <Typography className="text-2xl">✓</Typography>
+                </View>
+                <Typography type="h5">Order Placed!</Typography>
+                <Typography type="body-sm" color="muted" align="center">
+                  {`${listing.price} is now held in secure escrow.\nThe seller has been notified.`}
+                </Typography>
+              </View>
+              <View className="flex-row gap-2">
+                <Button variant="secondary" className="flex-1" onPress={handleContinueShopping}>
+                  <Button.Label>Continue Shopping</Button.Label>
+                </Button>
+                <Button className="flex-1" onPress={handleViewOrders}>
+                  <Button.Label>View My Orders</Button.Label>
+                </Button>
+              </View>
+            </View>
+          )}
+        </BottomSheet.Content>
+      </BottomSheet.Portal>
+    </BottomSheet>
+  );
+}