diff --git a/examples/framework/nextjs-evm/src/app/Provider.tsx b/examples/framework/nextjs-evm/src/app/Provider.tsx
index 9403f28..0469d8a 100644
--- a/examples/framework/nextjs-evm/src/app/Provider.tsx
+++ b/examples/framework/nextjs-evm/src/app/Provider.tsx
@@ -21,7 +21,7 @@ const config = createConfig(
     // Required App Info
     appName: "Sonar Next.js example app",
     appDescription: "Next.js app showing how to integrate with the Sonar API via backend OAuth.",
-  })
+  }),
 );
 
 const queryClient = new QueryClient();
diff --git a/examples/framework/nextjs-evm/src/app/actions/sonar.ts b/examples/framework/nextjs-evm/src/app/actions/sonar.ts
index 4e53b13..7416dc8 100644
--- a/examples/framework/nextjs-evm/src/app/actions/sonar.ts
+++ b/examples/framework/nextjs-evm/src/app/actions/sonar.ts
@@ -18,7 +18,7 @@ export const getEntities = createSonarServerAction<ListAvailableEntitiesInput, L
       throw new Error("Missing saleUUID");
     }
     return client.listAvailableEntities({ saleUUID });
-  }
+  },
 );
 
 type PrePurchaseCheckInput = { saleUUID: string; entityID: string; walletAddress: string };
@@ -32,7 +32,7 @@ export const prePurchaseCheck = createSonarServerAction<PrePurchaseCheckInput, P
       throw new Error("Missing required parameters");
     }
     return client.prePurchaseCheck({ saleUUID, entityID, walletAddress });
-  }
+  },
 );
 
 type GeneratePurchasePermitInput = { saleUUID: string; entityID: string; walletAddress: string };
diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..764a819
--- /dev/null
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { Hex } from "@echoxyz/sonar-core";
+import { useState } from "react";
+import { useSaleContract } from "../../hooks/use-sale-contract";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  const {
+    cancelBid,
+    contractStage,
+    entityState,
+    entityStateError,
+    awaitingTxReceipt,
+    txReceipt,
+    awaitingTxReceiptError,
+  } = useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const committedAmount = entityState?.currentBid?.amount;
+  const hasCommitment = committedAmount !== undefined && committedAmount > BigInt(0);
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        </div>
+      ) : hasCommitment ? (
+        <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
+              </p>
+            </div>
+          )}
+
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      )}
+
+      {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
+      {txReceipt?.status === "success" && (
+        <p className="text-green-500">Cancellation successful — your funds have been refunded</p>
+      )}
+      {txReceipt?.status === "reverted" && <p className="text-red-500">Cancellation reverted</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+      {awaitingTxReceiptError && <p className="text-red-500 wrap-anywhere">{awaitingTxReceiptError.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx
index 261129b..4e5cd55 100644
--- a/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx
@@ -7,8 +7,10 @@ import { saleUUID, paymentTokenAddress } from "@/lib/config";
 import { useSonarPurchase } from "../../hooks/use-sonar-purchase";
 import { useSaleContract } from "../../hooks/use-sale-contract";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -39,11 +41,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -70,6 +72,7 @@ function CommitSection({
     awaitingTxReceiptError,
     isWrongChain,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -87,6 +90,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance != null && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -127,10 +131,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -154,7 +175,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx
index 28c4d9d..5013506 100644
--- a/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx
@@ -12,7 +12,7 @@ function calculateCommitmentTotal(amounts: WalletTokenAmount[]): bigint {
 }
 
 // The timestamp is a string in ISO 8601 format
-function formatTimestamp(timestamp: string ): string {
+function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp);
   return date.toLocaleString(undefined, {
     month: "short",
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -81,9 +79,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
index a8141b8..9275892 100644
--- a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
@@ -89,6 +89,20 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     [writeContractAsync, config, chainId, switchChainAsync],
   );
 
+  const cancelBid = useCallback(async () => {
+    if (chainId !== baseSepolia.id) {
+      await switchChainAsync({ chainId: baseSepolia.id });
+    }
+    const { request } = await simulateContract(config, {
+      address: saleContract,
+      abi: settlementSaleAbi,
+      functionName: "cancelBid",
+      args: [],
+    });
+    const hash = await writeContractAsync(request);
+    setTxHash(hash);
+  }, [writeContractAsync, config, chainId, switchChainAsync]);
+
   const { data: entityStates, error: entityStateError } = useReadContract({
     address: saleContract,
     abi: settlementSaleAbi,
@@ -111,18 +125,31 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   });
 
   const isEntityStateLoaded = entityStates !== undefined;
-  const currentTotalRaw: bigint = entityStates?.[0]?.currentBid?.amount ?? 0n;
+  const entityState = entityStates?.[0];
+  const currentTotalRaw: bigint = entityState?.currentBid?.amount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   });
 
+  const { data: contractStage } = useReadContract({
+    address: saleContract,
+    abi: settlementSaleAbi,
+    functionName: "stage",
+    query: {
+      refetchInterval: 3000,
+    },
+  });
+
   return {
     entityStateError,
     isEntityStateLoaded,
+    entityState,
     currentTotalRaw,
     currentTotalReadableStr,
     commitWithPermit,
+    cancelBid,
+    contractStage,
     awaitingTxReceipt,
     txReceipt,
     awaitingTxReceiptError,
diff --git a/examples/framework/nextjs-evm/src/app/page.tsx b/examples/framework/nextjs-evm/src/app/page.tsx
index 278232a..3d994bd 100644
--- a/examples/framework/nextjs-evm/src/app/page.tsx
+++ b/examples/framework/nextjs-evm/src/app/page.tsx
@@ -9,30 +9,31 @@ import { AuthenticationSection } from "./components/auth/AuthenticationSection";
 import { useSonarEntities } from "./hooks/use-sonar-entities";
 import { useSession } from "./hooks/use-session";
 import CommitCard from "./components/sale/CommitCard";
+import CancelCard from "./components/sale/CancelCard";
 import { EntitiesList } from "./components/registration/EntitiesList";
 import { EligibilityResults } from "./components/registration/EligibilityResults";
 import { ConnectKitButton } from "connectkit";
 import { CommitmentDataCard } from "./components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancellation";
+
 export default function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
   const { sonarConnected } = useSession();
   const { address } = useAccount();
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Entities data
@@ -77,9 +78,7 @@ export default function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -141,16 +140,15 @@ export default function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancellation">🟡 Cancellation</option>
+          </select>
         </div>
       </div>
 
@@ -163,8 +161,8 @@ export default function Home() {
                 <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
               </div>
 
-              {/* Countdown Banner */}
-              {!saleIsLive && (
+              {/* Phase Banner */}
+              {salePhase === "presale" && (
                 <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -173,20 +171,29 @@ export default function Home() {
                 </div>
               )}
 
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                   </div>
                 </div>
               )}
+
+              {salePhase === "cancellation" && (
+                <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
+                  <div className="text-center">
+                    <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                    <p className="text-amber-700">Commitments can be cancelled during this period</p>
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="flex flex-col gap-8">
               <AuthenticationSection />
 
               {/* Registration Phase */}
-              {sonarConnected && !saleIsLive && (
+              {sonarConnected && salePhase === "presale" && (
                 <div className="flex flex-col gap-4">
                   <h2 className="text-xl font-semibold text-gray-900">Check Your Eligibility</h2>
 
@@ -210,7 +217,7 @@ export default function Home() {
               )}
 
               {/* Sale Phase */}
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="flex flex-col gap-4">
                   {sonarConnected && (
                     <div className="flex flex-col gap-4">
@@ -240,6 +247,29 @@ export default function Home() {
                   </div>
                 </div>
               )}
+
+              {/* Cancellation Phase */}
+              {salePhase === "cancellation" && (
+                <div className="flex flex-col gap-4">
+                  {sonarConnected && (
+                    <div className="flex flex-col gap-4">
+                      <ConnectKitButton />
+
+                      <div className="flex flex-col gap-4">
+                        <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                        <EntitySection />
+                      </div>
+
+                      {address && selectedEntity && (
+                        <div className="flex flex-col gap-4">
+                          <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                          <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/examples/framework/nextjs-svm/src/app/actions/sonar.ts b/examples/framework/nextjs-svm/src/app/actions/sonar.ts
index 4e53b13..7416dc8 100644
--- a/examples/framework/nextjs-svm/src/app/actions/sonar.ts
+++ b/examples/framework/nextjs-svm/src/app/actions/sonar.ts
@@ -18,7 +18,7 @@ export const getEntities = createSonarServerAction<ListAvailableEntitiesInput, L
       throw new Error("Missing saleUUID");
     }
     return client.listAvailableEntities({ saleUUID });
-  }
+  },
 );
 
 type PrePurchaseCheckInput = { saleUUID: string; entityID: string; walletAddress: string };
@@ -32,7 +32,7 @@ export const prePurchaseCheck = createSonarServerAction<PrePurchaseCheckInput, P
       throw new Error("Missing required parameters");
     }
     return client.prePurchaseCheck({ saleUUID, entityID, walletAddress });
-  }
+  },
 );
 
 type GeneratePurchasePermitInput = { saleUUID: string; entityID: string; walletAddress: string };
diff --git a/examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx b/examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..c6a98b3
--- /dev/null
+++ b/examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { useSaleContract } from "../../hooks/use-sale-contract";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  const { cancelBid, contractStage, committedAmount, entityStateError, awaitingTxReceipt } =
+    useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [cancelSuccess, setCancelSuccess] = useState(false);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+  const hasCommitment = committedAmount !== undefined && committedAmount > 0n;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+      setCancelSuccess(true);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        </div>
+      ) : hasCommitment ? (
+        <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
+              </p>
+            </div>
+          )}
+
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      )}
+
+      {awaitingTxReceipt && <p className="text-gray-900">Waiting for transaction confirmation...</p>}
+      {cancelSuccess && <p className="text-green-500">Cancellation successful — your funds have been refunded</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx b/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx
index 71372f6..8a90f08 100644
--- a/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx
+++ b/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx
@@ -7,8 +7,10 @@ import { saleUUID } from "@/lib/config";
 import { useSonarPurchase } from "../../hooks/use-sonar-purchase";
 import { useSaleContract } from "../../hooks/use-sale-contract";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -39,11 +41,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -68,6 +70,7 @@ function CommitSection({
     entityStateError,
     awaitingTxReceipt,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -85,6 +88,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance !== undefined && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -116,10 +120,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -143,7 +164,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx b/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx
index ea6aefd..5013506 100644
--- a/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -81,9 +79,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
index bd4ace6..a9dc5e3 100644
--- a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
@@ -29,6 +29,22 @@ interface EntityStateAccount {
 interface SettlementSaleAccount {
   permitSigner: PublicKey;
   vault: PublicKey;
+  stage: unknown;
+}
+
+function stageToNumber(stage: unknown): number {
+  if (typeof stage === "object" && stage !== null) {
+    const key = Object.keys(stage as object)[0];
+    const map: Record<string, number> = {
+      preOpen: 0,
+      commitment: 1,
+      cancellation: 2,
+      settlement: 3,
+      done: 4,
+    };
+    return map[key] ?? -1;
+  }
+  return -1;
 }
 
 function parseIdBytes(id: string): Uint8Array {
@@ -46,6 +62,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
   const [committedAmount, setCommittedAmount] = useState<bigint | undefined>();
   const [entityStateError, setEntityStateError] = useState<Error | undefined>();
   const [usdcBalance, setUsdcBalance] = useState<bigint | undefined>();
+  const [contractStage, setContractStage] = useState<number | undefined>();
 
   const programPublicKey = useMemo(() => new PublicKey(PROGRAM_ID), []);
 
@@ -53,12 +70,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
     const saleUuidBytes = parseIdBytes(saleUUID);
     const [salePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("settlement_sale"), Buffer.from(saleUuidBytes)],
-      programPublicKey
+      programPublicKey,
     );
     const saleEntityIdBytes = parseIdBytes(saleSpecificEntityID);
     const [entityStatePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdBytes)],
-      programPublicKey
+      programPublicKey,
     );
     return { salePDA, entityStatePDA };
   }, [saleSpecificEntityID, programPublicKey]);
@@ -72,14 +89,21 @@ export function useSaleContract(saleSpecificEntityID: string) {
           connection,
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           wallet ?? ({ publicKey: PublicKey.default } as any),
-          { commitment: "confirmed" }
+          { commitment: "confirmed" },
         );
         const program = new Program(IDL, provider);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const state = (await (program.account as any).entityState.fetchNullable(entityStatePDA)) as EntityStateAccount | null;
+        const state = (await (program.account as any).entityState.fetchNullable(
+          entityStatePDA,
+        )) as EntityStateAccount | null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(
+          salePDA,
+        )) as SettlementSaleAccount | null;
         if (!cancelled) {
           setCommittedAmount(state ? BigInt(state.currentAmount.toString()) : 0n);
           setEntityStateError(undefined);
+          if (saleAccount) setContractStage(stageToNumber(saleAccount.stage));
         }
 
         if (!cancelled && wallet && PAYMENT_TOKEN_MINT) {
@@ -128,7 +152,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
       // since the program validates the account against the permit's entity ID.
       const [permitEntityStatePDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdArr)],
-        programPublicKey
+        programPublicKey,
       );
       const walletBytes = Array.from(new PublicKey(permit.Wallet).toBytes());
       const payloadHex = permit.Payload.replace(/^0x/, "");
@@ -169,7 +193,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
       const [walletBindingPDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("wallet_binding"), salePDA.toBuffer(), wallet.publicKey.toBuffer()],
-        programPublicKey
+        programPublicKey,
       );
 
       const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
@@ -206,9 +230,47 @@ export function useSaleContract(saleSpecificEntityID: string) {
       setConfirmedTxSignature(sig);
       setAwaitingTxReceipt(false);
     },
-    [wallet, connection, salePDA, entityStatePDA, programPublicKey]
+    [wallet, connection, salePDA, entityStatePDA, programPublicKey],
   );
 
+  const cancelBid = useCallback(async () => {
+    if (!wallet) throw new Error("Wallet not connected");
+
+    const provider = new AnchorProvider(connection, wallet, { commitment: "confirmed" });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const program = new Program(IDL as any, provider);
+
+    const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tx = await (program.methods as any)
+      .cancelBid()
+      .accounts({
+        bidder: wallet.publicKey,
+        sale: salePDA,
+        bidderTokenAccount,
+        paymentTokenMint: new PublicKey(PAYMENT_TOKEN_MINT),
+        tokenProgram: TOKEN_PROGRAM_ID,
+      })
+      .transaction();
+
+    tx.feePayer = wallet.publicKey;
+    const { blockhash } = await connection.getLatestBlockhash();
+    tx.recentBlockhash = blockhash;
+
+    const signed = await wallet.signTransaction(tx);
+    const sig = await connection.sendRawTransaction(signed.serialize());
+    setTxSignature(sig);
+
+    setAwaitingTxReceipt(true);
+    try {
+      await connection.confirmTransaction(sig, "confirmed");
+      setConfirmedTxSignature(sig);
+    } finally {
+      setAwaitingTxReceipt(false);
+    }
+  }, [wallet, connection, salePDA]);
+
   const isEntityStateLoaded = committedAmount !== undefined;
   const currentTotalRaw: bigint = committedAmount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
@@ -218,6 +280,9 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
   return {
     commitWithPermit,
+    cancelBid,
+    contractStage,
+    committedAmount,
     txSignature,
     confirmedTxSignature,
     awaitingTxReceipt,
diff --git a/examples/framework/nextjs-svm/src/app/page.tsx b/examples/framework/nextjs-svm/src/app/page.tsx
index c96f801..cd2b4b1 100644
--- a/examples/framework/nextjs-svm/src/app/page.tsx
+++ b/examples/framework/nextjs-svm/src/app/page.tsx
@@ -10,30 +10,31 @@ import { AuthenticationSection } from "./components/auth/AuthenticationSection";
 import { useSonarEntities } from "./hooks/use-sonar-entities";
 import { useSession } from "./hooks/use-session";
 import CommitCard from "./components/sale/CommitCard";
+import CancelCard from "./components/sale/CancelCard";
 import { EntitiesList } from "./components/registration/EntitiesList";
 import { EligibilityResults } from "./components/registration/EligibilityResults";
 import { CommitmentDataCard } from "./components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancellation";
+
 export default function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
   const { sonarConnected } = useSession();
   const { publicKey } = useWallet();
   const address = publicKey?.toBase58();
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Entities data
@@ -78,9 +79,7 @@ export default function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -142,16 +141,15 @@ export default function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancellation">🟡 Cancellation</option>
+          </select>
         </div>
       </div>
 
@@ -164,8 +162,8 @@ export default function Home() {
                 <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
               </div>
 
-              {/* Countdown Banner */}
-              {!saleIsLive && (
+              {/* Phase Banner */}
+              {salePhase === "presale" && (
                 <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -174,20 +172,29 @@ export default function Home() {
                 </div>
               )}
 
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                   </div>
                 </div>
               )}
+
+              {salePhase === "cancellation" && (
+                <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
+                  <div className="text-center">
+                    <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                    <p className="text-amber-700">Commitments can be cancelled during this period</p>
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="flex flex-col gap-8">
               <AuthenticationSection />
 
               {/* Registration Phase */}
-              {sonarConnected && !saleIsLive && (
+              {sonarConnected && salePhase === "presale" && (
                 <div className="flex flex-col gap-4">
                   <h2 className="text-xl font-semibold text-gray-900">Check Your Eligibility</h2>
 
@@ -211,7 +218,7 @@ export default function Home() {
               )}
 
               {/* Sale Phase */}
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="flex flex-col gap-4">
                   {sonarConnected && (
                     <div className="flex flex-col gap-4">
@@ -241,6 +248,29 @@ export default function Home() {
                   </div>
                 </div>
               )}
+
+              {/* Cancellation Phase */}
+              {salePhase === "cancellation" && (
+                <div className="flex flex-col gap-4">
+                  {sonarConnected && (
+                    <div className="flex flex-col gap-4">
+                      <WalletMultiButton />
+
+                      <div className="flex flex-col gap-4">
+                        <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                        <EntitySection />
+                      </div>
+
+                      {address && selectedEntity && (
+                        <div className="flex flex-col gap-4">
+                          <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                          <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/examples/framework/nextjs-svm/src/lib/pkce-store.ts b/examples/framework/nextjs-svm/src/lib/pkce-store.ts
index 06e7312..397a320 100644
--- a/examples/framework/nextjs-svm/src/lib/pkce-store.ts
+++ b/examples/framework/nextjs-svm/src/lib/pkce-store.ts
@@ -46,18 +46,18 @@ class InMemoryPKCEStore implements PKCEStore {
   }
 }
 
-// Singleton instance - can be swapped for a different implementation
-let pkceStoreInstance: PKCEStore | null = null;
+// Use globalThis to survive Next.js dev-mode hot module reloads.
+const g = globalThis as typeof globalThis & { __pkceStore?: PKCEStore };
 
 /**
  * Get the PKCE store instance.
  * This factory function allows swapping implementations without changing call sites.
  */
 export function getPKCEStore(): PKCEStore {
-  if (!pkceStoreInstance) {
-    pkceStoreInstance = new InMemoryPKCEStore();
+  if (!g.__pkceStore) {
+    g.__pkceStore = new InMemoryPKCEStore();
   }
-  return pkceStoreInstance;
+  return g.__pkceStore;
 }
 
 /**
@@ -65,7 +65,7 @@ export function getPKCEStore(): PKCEStore {
  * Useful for swapping to a database-backed store.
  */
 export function setPKCEStore(store: PKCEStore): void {
-  pkceStoreInstance = store;
+  g.__pkceStore = store;
 }
 
 const PKCE_TTL_MS = 10 * 60 * 1000; // 10 minutes
diff --git a/examples/framework/react-evm/src/App.tsx b/examples/framework/react-evm/src/App.tsx
index 58ca82b..09d9ded 100644
--- a/examples/framework/react-evm/src/App.tsx
+++ b/examples/framework/react-evm/src/App.tsx
@@ -16,4 +16,3 @@ export function App() {
     </Provider>
   );
 }
-
diff --git a/examples/framework/react-evm/src/Provider.tsx b/examples/framework/react-evm/src/Provider.tsx
index e8361cb..efa998e 100644
--- a/examples/framework/react-evm/src/Provider.tsx
+++ b/examples/framework/react-evm/src/Provider.tsx
@@ -19,7 +19,7 @@ const config = createConfig(
     appName: "Sonar React example app",
     appDescription:
       "React app showing how to integrate with the Sonar API via the sonar-react and sonar-core libraries.",
-  })
+  }),
 );
 
 const queryClient = new QueryClient();
diff --git a/examples/framework/react-evm/src/components/sale/CancelCard.tsx b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..33b8d95
--- /dev/null
+++ b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
@@ -0,0 +1,107 @@
+import { Hex } from "@echoxyz/sonar-core";
+import { useState } from "react";
+import { useSaleContract } from "../../hooks";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  const {
+    cancelBid,
+    contractStage,
+    entityState,
+    entityStateError,
+    awaitingTxReceipt,
+    txReceipt,
+    awaitingTxReceiptError,
+  } = useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const committedAmount = entityState?.currentBid?.amount;
+  const hasCommitment = committedAmount !== undefined && committedAmount > BigInt(0);
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        </div>
+      ) : hasCommitment ? (
+        <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
+              </p>
+            </div>
+          )}
+
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      )}
+
+      {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
+      {txReceipt?.status === "success" && (
+        <p className="text-green-500">Cancellation successful — your funds have been refunded</p>
+      )}
+      {txReceipt?.status === "reverted" && <p className="text-red-500">Cancellation reverted</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+      {awaitingTxReceiptError && <p className="text-red-500 wrap-anywhere">{awaitingTxReceiptError.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/react-evm/src/components/sale/CommitCard.tsx b/examples/framework/react-evm/src/components/sale/CommitCard.tsx
index 3e6307f..e4e1dab 100644
--- a/examples/framework/react-evm/src/components/sale/CommitCard.tsx
+++ b/examples/framework/react-evm/src/components/sale/CommitCard.tsx
@@ -8,8 +8,10 @@ import {
 } from "@echoxyz/sonar-react";
 import { useSaleContract } from "../../hooks";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -40,11 +42,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -71,6 +73,7 @@ function CommitSection({
     awaitingTxReceiptError,
     isWrongChain,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -88,6 +91,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance != null && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -128,10 +132,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -155,7 +176,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx b/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx
index 51cf590..170efbd 100644
--- a/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx
@@ -12,7 +12,7 @@ function calculateCommitmentTotal(amounts: WalletTokenAmount[]): bigint {
 }
 
 // The timestamp is a string in ISO 8601 format
-function formatTimestamp(timestamp: string ): string {
+function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp);
   return date.toLocaleString(undefined, {
     month: "short",
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -79,9 +77,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/react-evm/src/hooks.ts b/examples/framework/react-evm/src/hooks.ts
index 86cccb4..78e0c48 100644
--- a/examples/framework/react-evm/src/hooks.ts
+++ b/examples/framework/react-evm/src/hooks.ts
@@ -89,6 +89,20 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     [writeContractAsync, config, chainId, switchChainAsync],
   );
 
+  const cancelBid = useCallback(async () => {
+    if (chainId !== baseSepolia.id) {
+      await switchChainAsync({ chainId: baseSepolia.id });
+    }
+    const { request } = await simulateContract(config, {
+      address: saleContract,
+      abi: settlementSaleAbi,
+      functionName: "cancelBid",
+      args: [],
+    });
+    const hash = await writeContractAsync(request);
+    setTxHash(hash);
+  }, [writeContractAsync, config, chainId, switchChainAsync]);
+
   const { data: entityStates, error: entityStateError } = useReadContract({
     address: saleContract,
     abi: settlementSaleAbi,
@@ -111,18 +125,31 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   });
 
   const isEntityStateLoaded = entityStates !== undefined;
-  const currentTotalRaw: bigint = entityStates?.[0]?.currentBid?.amount ?? 0n;
+  const entityState = entityStates?.[0];
+  const currentTotalRaw: bigint = entityState?.currentBid?.amount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   });
 
+  const { data: contractStage } = useReadContract({
+    address: saleContract,
+    abi: settlementSaleAbi,
+    functionName: "stage",
+    query: {
+      refetchInterval: 3000,
+    },
+  });
+
   return {
     entityStateError,
     isEntityStateLoaded,
+    entityState,
     currentTotalRaw,
     currentTotalReadableStr,
     commitWithPermit,
+    cancelBid,
+    contractStage,
     awaitingTxReceipt,
     txReceipt,
     awaitingTxReceiptError,
diff --git a/examples/framework/react-evm/src/main.tsx b/examples/framework/react-evm/src/main.tsx
index 6b6cb86..61f2cd1 100644
--- a/examples/framework/react-evm/src/main.tsx
+++ b/examples/framework/react-evm/src/main.tsx
@@ -6,6 +6,5 @@ import "./globals.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
-
diff --git a/examples/framework/react-evm/src/pages/Home.tsx b/examples/framework/react-evm/src/pages/Home.tsx
index fa4af52..f28097f 100644
--- a/examples/framework/react-evm/src/pages/Home.tsx
+++ b/examples/framework/react-evm/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { useSonarAuth, useSonarEntities } from "@echoxyz/sonar-react";
 import { saleUUID, sonarConfig } from "../config";
 import { useAccount } from "wagmi";
 import CommitCard from "../components/sale/CommitCard";
+import CancelCard from "../components/sale/CancelCard";
 import { SaleEligibility } from "@echoxyz/sonar-core";
 import { AuthenticationSection } from "../components/auth/AuthenticationSection";
 import { EntityCard } from "../components/entity/EntityCard";
@@ -11,23 +12,23 @@ import { EntitiesList } from "../components/registration/EntitiesList";
 import { EligibilityResults } from "../components/registration/EligibilityResults";
 import { CommitmentDataCard } from "../components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancellation";
+
 export function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Auth and data hooks
@@ -82,9 +83,7 @@ export function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -146,16 +145,15 @@ export function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancellation">🟡 Cancellation</option>
+          </select>
         </div>
       </div>
 
@@ -167,8 +165,8 @@ export function Home() {
               <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
             </div>
 
-            {/* Countdown Banner */}
-            {!saleIsLive && (
+            {/* Phase Banner */}
+            {salePhase === "presale" && (
               <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -177,17 +175,26 @@ export function Home() {
               </div>
             )}
 
-            {saleIsLive && (
+            {salePhase === "live" && (
               <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                 </div>
               </div>
             )}
+
+            {salePhase === "cancellation" && (
+              <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
+                <div className="text-center">
+                  <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                  <p className="text-amber-700">Commitments can be cancelled during this period</p>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Registration Phase */}
-          {!saleIsLive && (
+          {salePhase === "presale" && (
             <div className="flex flex-col gap-8">
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
 
@@ -217,7 +224,7 @@ export function Home() {
           )}
 
           {/* Sale Phase */}
-          {saleIsLive && (
+          {salePhase === "live" && (
             <div className="flex flex-col gap-8">
               {/* Connection Buttons */}
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
@@ -248,6 +255,29 @@ export function Home() {
               </div>
             </div>
           )}
+
+          {/* Cancellation Phase */}
+          {salePhase === "cancellation" && (
+            <div className="flex flex-col gap-8">
+              {/* Connection Buttons */}
+              <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
+              <ConnectKitButton />
+
+              {/* Entity Information */}
+              <div className="flex flex-col gap-4">
+                <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                <EntitySection />
+              </div>
+
+              {/* Cancel Card */}
+              {address && selectedEntity && (
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                  <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>
diff --git a/examples/framework/react-svm/src/App.tsx b/examples/framework/react-svm/src/App.tsx
index 58ca82b..09d9ded 100644
--- a/examples/framework/react-svm/src/App.tsx
+++ b/examples/framework/react-svm/src/App.tsx
@@ -16,4 +16,3 @@ export function App() {
     </Provider>
   );
 }
-
diff --git a/examples/framework/react-svm/src/components/sale/CancelCard.tsx b/examples/framework/react-svm/src/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..17226aa
--- /dev/null
+++ b/examples/framework/react-svm/src/components/sale/CancelCard.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { useSaleContract } from "../../hooks/use-sale-contract";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  const { cancelBid, contractStage, committedAmount, entityStateError, awaitingTxReceipt } =
+    useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [cancelSuccess, setCancelSuccess] = useState(false);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+  const hasCommitment = committedAmount !== undefined && committedAmount > 0n;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+      setCancelSuccess(true);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        </div>
+      ) : hasCommitment ? (
+        <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
+              </p>
+            </div>
+          )}
+
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      )}
+
+      {awaitingTxReceipt && <p className="text-gray-900">Waiting for transaction confirmation...</p>}
+      {cancelSuccess && <p className="text-green-500">Cancellation successful — your funds have been refunded</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/react-svm/src/components/sale/CommitCard.tsx b/examples/framework/react-svm/src/components/sale/CommitCard.tsx
index 09fd1ab..4c0d73a 100644
--- a/examples/framework/react-svm/src/components/sale/CommitCard.tsx
+++ b/examples/framework/react-svm/src/components/sale/CommitCard.tsx
@@ -8,8 +8,10 @@ import {
 } from "@echoxyz/sonar-react";
 import { useSaleContract } from "../../hooks/use-sale-contract";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -40,11 +42,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -69,6 +71,7 @@ function CommitSection({
     entityStateError,
     awaitingTxReceipt,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -86,6 +89,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance !== undefined && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -117,10 +121,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -144,7 +165,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx b/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx
index 51cf590..170efbd 100644
--- a/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx
@@ -12,7 +12,7 @@ function calculateCommitmentTotal(amounts: WalletTokenAmount[]): bigint {
 }
 
 // The timestamp is a string in ISO 8601 format
-function formatTimestamp(timestamp: string ): string {
+function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp);
   return date.toLocaleString(undefined, {
     month: "short",
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -79,9 +77,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/react-svm/src/hooks/use-sale-contract.ts b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
index ff65fc9..83d9a64 100644
--- a/examples/framework/react-svm/src/hooks/use-sale-contract.ts
+++ b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
@@ -30,6 +30,22 @@ interface EntityStateAccount {
 interface SettlementSaleAccount {
   permitSigner: PublicKey;
   vault: PublicKey;
+  stage: unknown;
+}
+
+function stageToNumber(stage: unknown): number {
+  if (typeof stage === "object" && stage !== null) {
+    const key = Object.keys(stage as object)[0];
+    const map: Record<string, number> = {
+      preOpen: 0,
+      commitment: 1,
+      cancellation: 2,
+      settlement: 3,
+      done: 4,
+    };
+    return map[key] ?? -1;
+  }
+  return -1;
 }
 
 function parseIdBytes(id: string): Uint8Array {
@@ -47,6 +63,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
   const [committedAmount, setCommittedAmount] = useState<bigint | undefined>();
   const [entityStateError, setEntityStateError] = useState<Error | undefined>();
   const [usdcBalance, setUsdcBalance] = useState<bigint | undefined>();
+  const [contractStage, setContractStage] = useState<number | undefined>();
 
   const programPublicKey = useMemo(() => new PublicKey(PROGRAM_ID), []);
 
@@ -54,12 +71,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
     const saleUuidBytes = parseIdBytes(saleUUID);
     const [salePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("settlement_sale"), Buffer.from(saleUuidBytes)],
-      programPublicKey
+      programPublicKey,
     );
     const saleEntityIdBytes = parseIdBytes(saleSpecificEntityID);
     const [entityStatePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdBytes)],
-      programPublicKey
+      programPublicKey,
     );
     return { salePDA, entityStatePDA };
   }, [saleSpecificEntityID, programPublicKey]);
@@ -73,15 +90,22 @@ export function useSaleContract(saleSpecificEntityID: string) {
           connection,
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           wallet ?? ({ publicKey: PublicKey.default } as any),
-          { commitment: "confirmed" }
+          { commitment: "confirmed" },
         );
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const program = new Program(IDL as any, provider);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const state = (await (program.account as any).entityState.fetchNullable(entityStatePDA)) as EntityStateAccount | null;
+        const state = (await (program.account as any).entityState.fetchNullable(
+          entityStatePDA,
+        )) as EntityStateAccount | null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(
+          salePDA,
+        )) as SettlementSaleAccount | null;
         if (!cancelled) {
           setCommittedAmount(state ? BigInt(state.currentAmount.toString()) : 0n);
           setEntityStateError(undefined);
+          if (saleAccount) setContractStage(stageToNumber(saleAccount.stage));
         }
 
         if (!cancelled && wallet && PAYMENT_TOKEN_MINT) {
@@ -130,7 +154,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
       // since the program validates the account against the permit's entity ID.
       const [permitEntityStatePDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdArr)],
-        programPublicKey
+        programPublicKey,
       );
       const walletBytes = Array.from(new PublicKey(permit.Wallet).toBytes());
       const payloadHex = permit.Payload.replace(/^0x/, "");
@@ -171,7 +195,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
       const [walletBindingPDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("wallet_binding"), salePDA.toBuffer(), wallet.publicKey.toBuffer()],
-        programPublicKey
+        programPublicKey,
       );
 
       const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
@@ -219,9 +243,56 @@ export function useSaleContract(saleSpecificEntityID: string) {
       setConfirmedTxSignature(sig);
       setAwaitingTxReceipt(false);
     },
-    [wallet, connection, salePDA, entityStatePDA, programPublicKey]
+    [wallet, connection, salePDA, entityStatePDA, programPublicKey],
   );
 
+  const cancelBid = useCallback(async () => {
+    if (!wallet) throw new Error("Wallet not connected");
+
+    const provider = new AnchorProvider(connection, wallet, { commitment: "confirmed" });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const program = new Program(IDL as any, provider);
+
+    const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tx = await (program.methods as any)
+      .cancelBid()
+      .accounts({
+        bidder: wallet.publicKey,
+        sale: salePDA,
+        bidderTokenAccount,
+        paymentTokenMint: new PublicKey(PAYMENT_TOKEN_MINT),
+        tokenProgram: TOKEN_PROGRAM_ID,
+      })
+      .transaction();
+
+    tx.feePayer = wallet.publicKey;
+    const { blockhash } = await connection.getLatestBlockhash();
+    tx.recentBlockhash = blockhash;
+
+    const signed = await wallet.signTransaction(tx);
+    // Compute sig before sending — same pattern as commitWithPermit
+    const rawSig = signed.signatures[0]?.signature;
+    if (!rawSig) throw new Error("Transaction not signed");
+    const sig = bs58.encode(rawSig);
+    setTxSignature(sig);
+    try {
+      await connection.sendRawTransaction(signed.serialize());
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      if (!msg.includes("already been processed")) throw e;
+    }
+
+    setAwaitingTxReceipt(true);
+    try {
+      await connection.confirmTransaction(sig, "confirmed");
+      setConfirmedTxSignature(sig);
+    } finally {
+      setAwaitingTxReceipt(false);
+    }
+  }, [wallet, connection, salePDA]);
+
   const isEntityStateLoaded = committedAmount !== undefined;
   const currentTotalRaw: bigint = committedAmount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
@@ -231,6 +302,9 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
   return {
     commitWithPermit,
+    cancelBid,
+    contractStage,
+    committedAmount,
     txSignature,
     confirmedTxSignature,
     awaitingTxReceipt,
diff --git a/examples/framework/react-svm/src/main.tsx b/examples/framework/react-svm/src/main.tsx
index a28a11d..b3227d8 100644
--- a/examples/framework/react-svm/src/main.tsx
+++ b/examples/framework/react-svm/src/main.tsx
@@ -7,6 +7,5 @@ import "./globals.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
-
diff --git a/examples/framework/react-svm/src/pages/Home.tsx b/examples/framework/react-svm/src/pages/Home.tsx
index a0548ca..8d68f21 100644
--- a/examples/framework/react-svm/src/pages/Home.tsx
+++ b/examples/framework/react-svm/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { useWallet } from "@solana/wallet-adapter-react";
 import { useSonarAuth, useSonarEntities } from "@echoxyz/sonar-react";
 import { saleUUID, sonarConfig } from "../config";
 import CommitCard from "../components/sale/CommitCard";
+import CancelCard from "../components/sale/CancelCard";
 import { SaleEligibility } from "@echoxyz/sonar-core";
 import { AuthenticationSection } from "../components/auth/AuthenticationSection";
 import { EntityCard } from "../components/entity/EntityCard";
@@ -11,23 +12,23 @@ import { EntitiesList } from "../components/registration/EntitiesList";
 import { EligibilityResults } from "../components/registration/EligibilityResults";
 import { CommitmentDataCard } from "../components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancellation";
+
 export function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Auth and data hooks
@@ -83,9 +84,7 @@ export function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -147,16 +146,15 @@ export function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancellation">🟡 Cancellation</option>
+          </select>
         </div>
       </div>
 
@@ -168,8 +166,8 @@ export function Home() {
               <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
             </div>
 
-            {/* Countdown Banner */}
-            {!saleIsLive && (
+            {/* Phase Banner */}
+            {salePhase === "presale" && (
               <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -178,17 +176,26 @@ export function Home() {
               </div>
             )}
 
-            {saleIsLive && (
+            {salePhase === "live" && (
               <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                 </div>
               </div>
             )}
+
+            {salePhase === "cancellation" && (
+              <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
+                <div className="text-center">
+                  <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                  <p className="text-amber-700">Commitments can be cancelled during this period</p>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Registration Phase */}
-          {!saleIsLive && (
+          {salePhase === "presale" && (
             <div className="flex flex-col gap-8">
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
 
@@ -218,7 +225,7 @@ export function Home() {
           )}
 
           {/* Sale Phase */}
-          {saleIsLive && (
+          {salePhase === "live" && (
             <div className="flex flex-col gap-8">
               {/* Connection Buttons */}
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
@@ -249,6 +256,29 @@ export function Home() {
               </div>
             </div>
           )}
+
+          {/* Cancellation Phase */}
+          {salePhase === "cancellation" && (
+            <div className="flex flex-col gap-8">
+              {/* Connection Buttons */}
+              <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
+              <WalletMultiButton />
+
+              {/* Entity Information */}
+              <div className="flex flex-col gap-4">
+                <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                <EntitySection />
+              </div>
+
+              {/* Cancel Card */}
+              {address && selectedEntity && (
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                  <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>