diff --git a/packages/nextjs/components/example-ui/TierList.tsx b/packages/nextjs/components/example-ui/TierList.tsx
index 577df2b..059a54d 100644
--- a/packages/nextjs/components/example-ui/TierList.tsx
+++ b/packages/nextjs/components/example-ui/TierList.tsx
@@ -1,7 +1,7 @@
 import { TierCard } from "./TierCard";
 import { TierSetup } from "./TierSetup";
 
-export const TierList = (props: { merchant?: string; tiersLength?: bigint }) => {
+export const TierList = (props: { merchant?: string; tiersLength?: bigint; showOfferedStatus: boolean }) => {
   const tiersLength = props.tiersLength;
   const merchant = props.merchant;
   if (typeof tiersLength == "undefined" || typeof merchant == "undefined") {
@@ -16,7 +16,12 @@ export const TierList = (props: { merchant?: string; tiersLength?: bigint }) =>
       <div className="flex justify-between w-full">
         <ol>
           {indicies.map(index => (
-            <TierCard key={index.toString()} merchant={merchant} tierIndex={index} showOfferedStatus={true} />
+            <TierCard
+              key={index.toString()}
+              merchant={merchant}
+              tierIndex={index}
+              showOfferedStatus={props.showOfferedStatus}
+            />
           ))}
           <TierSetup />
         </ol>
diff --git a/packages/nextjs/components/example-ui/TierListing.tsx b/packages/nextjs/components/example-ui/TierListing.tsx
index b5c4155..9f7fb14 100644
--- a/packages/nextjs/components/example-ui/TierListing.tsx
+++ b/packages/nextjs/components/example-ui/TierListing.tsx
@@ -7,7 +7,7 @@ import {
   useScaffoldEventSubscriber,
 } from "~~/hooks/scaffold-eth";
 
-export const TierListing = () => {
+export const TierListing = (props: { showOfferedStatus: boolean }) => {
   const { address } = useAccount();
 
   const { data: tiersLength, isLoading: isTierCountLoading } = useScaffoldContractRead({
@@ -60,7 +60,7 @@ export const TierListing = () => {
       <div className="topRow">
         <h2 className="text-4xl">{tierCountText}</h2>
       </div>
-      <TierList merchant={address} tiersLength={tiersLength} />
+      <TierList merchant={address} tiersLength={tiersLength} showOfferedStatus={props.showOfferedStatus} />
     </div>
   );
 };
diff --git a/packages/nextjs/pages/merchant.tsx b/packages/nextjs/pages/merchant.tsx
index fb6ae50..c565312 100644
--- a/packages/nextjs/pages/merchant.tsx
+++ b/packages/nextjs/pages/merchant.tsx
@@ -10,7 +10,7 @@ const MerchantSetup: NextPage = () => {
         description="Allows the maker of an API to set up offerings to sell access for cryptocurrency payments."
       />
       <div className="grid lg:grid-cols-2 flex-grow" data-theme="exampleUi">
-        <TierListing />
+        <TierListing showOfferedStatus={true} />
       </div>
     </>
   );