diff --git a/playground/nextjs-app-router/components/DemoOptions.tsx b/playground/nextjs-app-router/components/DemoOptions.tsx
index da71b55d4b..3ac610ec64 100644
--- a/playground/nextjs-app-router/components/DemoOptions.tsx
+++ b/playground/nextjs-app-router/components/DemoOptions.tsx
@@ -11,74 +11,76 @@ import { SwapConfig } from './form/swap-config';
 import { TransactionOptions } from './form/transaction-options';
 import { WalletType } from './form/wallet-type';
 
+const COMMON_OPTIONS = [
+  ActiveComponent,
+  ComponentMode,
+  ComponentTheme,
+  WalletType,
+];
+
+const COMPONENT_CONFIG: Partial<
+  Record<OnchainKitComponent, (() => React.JSX.Element)[]>
+> = {
+  [OnchainKitComponent.Checkout]: [
+    Chain,
+    PaymasterUrl,
+    IsSponsored,
+    CheckoutOptions,
+  ],
+  [OnchainKitComponent.Swap]: [Chain, PaymasterUrl, IsSponsored, SwapConfig],
+  [OnchainKitComponent.SwapDefault]: [
+    Chain,
+    PaymasterUrl,
+    IsSponsored,
+    SwapConfig,
+  ],
+  [OnchainKitComponent.Transaction]: [
+    Chain,
+    PaymasterUrl,
+    IsSponsored,
+    TransactionOptions,
+  ],
+  [OnchainKitComponent.TransactionDefault]: [
+    Chain,
+    PaymasterUrl,
+    IsSponsored,
+    TransactionOptions,
+  ],
+  [OnchainKitComponent.NFTCard]: [Chain, NFTOptions],
+  [OnchainKitComponent.NFTCardDefault]: [Chain, NFTOptions],
+  [OnchainKitComponent.NFTMintCard]: [
+    Chain,
+    PaymasterUrl,
+    IsSponsored,
+    NFTOptions,
+  ],
+  [OnchainKitComponent.NFTMintCardDefault]: [
+    Chain,
+    PaymasterUrl,
+    IsSponsored,
+    NFTOptions,
+  ],
+};
+
 export default function DemoOptions({
   component,
 }: {
   component?: OnchainKitComponent;
 }) {
-  const commonOptions = (
+  const commonElements = COMMON_OPTIONS.map((Component) => (
+    <Component key={Component.name} />
+  ));
+
+  const specificElements = component
+    ? (COMPONENT_CONFIG[component] || []).map((Component) => (
+        <Component key={Component.name} />
+      ))
+    : [];
+
+  return (
     <>
-      <ActiveComponent />
-      <ComponentMode />
-      <ComponentTheme />
-      <WalletType />
+      {commonElements}
+      {specificElements}
     </>
   );
-
-  switch (component) {
-    case OnchainKitComponent.Checkout:
-      return (
-        <>
-          {commonOptions}
-          <Chain />
-          <PaymasterUrl />
-          <IsSponsored />
-          <CheckoutOptions />
-        </>
-      );
-    case OnchainKitComponent.Swap:
-    case OnchainKitComponent.SwapDefault:
-      return (
-        <>
-          {commonOptions}
-          <Chain />
-          <PaymasterUrl />
-          <IsSponsored />
-          <SwapConfig />
-        </>
-      );
-    case OnchainKitComponent.Transaction:
-    case OnchainKitComponent.TransactionDefault:
-      return (
-        <>
-          {commonOptions}
-          <Chain />
-          <PaymasterUrl />
-          <IsSponsored />
-          <TransactionOptions />
-        </>
-      );
-    case OnchainKitComponent.NFTCard:
-    case OnchainKitComponent.NFTCardDefault:
-      return (
-        <>
-          {commonOptions}
-          <Chain />
-          <NFTOptions />
-        </>
-      );
-    case OnchainKitComponent.NFTMintCard:
-    case OnchainKitComponent.NFTMintCardDefault:
-      return (
-        <>
-          {commonOptions}
-          <Chain />
-          <PaymasterUrl />
-          <IsSponsored />
-          <NFTOptions />
-        </>
-      );
-    default:
-      return commonOptions;
-  }
 }
diff --git a/playground/nextjs-app-router/components/form/checkout-options.tsx b/playground/nextjs-app-router/components/form/checkout-options.tsx
index fed28b84f0..53781c1677 100644
--- a/playground/nextjs-app-router/components/form/checkout-options.tsx
+++ b/playground/nextjs-app-router/components/form/checkout-options.tsx
@@ -3,11 +3,10 @@ import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useContext } from 'react';
 import { useState } from 'react';
-import { AppContext, CheckoutTypes, OnchainKitComponent } from '../AppProvider';
+import { AppContext, CheckoutTypes } from '../AppProvider';
 
 export function CheckoutOptions() {
   const {
-    activeComponent,
     checkoutTypes,
     setCheckoutTypes,
     checkoutOptions,
@@ -24,77 +23,75 @@ export function CheckoutOptions() {
   });
 
   return (
-    activeComponent === OnchainKitComponent.Checkout && (
-      <div className="grid gap-2">
-        <Label htmlFor="chain">Checkout Types</Label>
-        <RadioGroup
-          id="pay-type"
-          value={checkoutTypes}
-          className="flex items-center justify-between"
-          onValueChange={(value) => setCheckoutTypes?.(value as CheckoutTypes)}
-        >
-          <div className="flex items-center gap-2">
-            <Label
-              htmlFor="pay-type-product-id"
-              className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
-            >
-              <RadioGroupItem
-                id="pay-type-product-id"
-                value={CheckoutTypes.ProductID}
-              />
-              Product ID
-            </Label>
-            <Label
-              htmlFor="pay-type-charge-id"
-              className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
-            >
-              <RadioGroupItem
-                id="pay-type-charge-id"
-                value={CheckoutTypes.ChargeID}
-              />
-              Charge ID
-            </Label>
-          </div>
-        </RadioGroup>
-
-        {checkoutTypes === CheckoutTypes.ChargeID && (
-          <div>
-            <Label htmlFor="charge-id">Charge ID</Label>
-            <Input
-              id="charge-id"
-              value={productOptions.chargeId}
-              placeholder="Enter Charge ID"
-              onChange={(e) => {
-                setProductOptions({
-                  ...productOptions,
-                  chargeId: e.target.value,
-                });
-                setCheckoutOptions?.({
-                  ...checkoutOptions,
-                  chargeId: e.target.value,
-                });
-              }}
+    <div className="grid gap-2">
+      <Label htmlFor="chain">Checkout Types</Label>
+      <RadioGroup
+        id="pay-type"
+        value={checkoutTypes}
+        className="flex items-center justify-between"
+        onValueChange={(value) => setCheckoutTypes?.(value as CheckoutTypes)}
+      >
+        <div className="flex items-center gap-2">
+          <Label
+            htmlFor="pay-type-product-id"
+            className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
+          >
+            <RadioGroupItem
+              id="pay-type-product-id"
+              value={CheckoutTypes.ProductID}
             />
-          </div>
-        )}
-        {checkoutTypes === CheckoutTypes.ProductID && (
-          <div>
-            <Label htmlFor="product-id">Product ID</Label>
-            <Input
-              id="product-id"
-              placeholder="Enter Product ID"
-              value={productId}
-              onChange={(e) => {
-                setProductId(e.target.value);
-                setCheckoutOptions?.({
-                  ...checkoutOptions,
-                  productId: e.target.value,
-                });
-              }}
+            Product ID
+          </Label>
+          <Label
+            htmlFor="pay-type-charge-id"
+            className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
+          >
+            <RadioGroupItem
+              id="pay-type-charge-id"
+              value={CheckoutTypes.ChargeID}
             />
-          </div>
-        )}
-      </div>
-    )
+            Charge ID
+          </Label>
+        </div>
+      </RadioGroup>
+
+      {checkoutTypes === CheckoutTypes.ChargeID && (
+        <div>
+          <Label htmlFor="charge-id">Charge ID</Label>
+          <Input
+            id="charge-id"
+            value={productOptions.chargeId}
+            placeholder="Enter Charge ID"
+            onChange={(e) => {
+              setProductOptions({
+                ...productOptions,
+                chargeId: e.target.value,
+              });
+              setCheckoutOptions?.({
+                ...checkoutOptions,
+                chargeId: e.target.value,
+              });
+            }}
+          />
+        </div>
+      )}
+      {checkoutTypes === CheckoutTypes.ProductID && (
+        <div>
+          <Label htmlFor="product-id">Product ID</Label>
+          <Input
+            id="product-id"
+            placeholder="Enter Product ID"
+            value={productId}
+            onChange={(e) => {
+              setProductId(e.target.value);
+              setCheckoutOptions?.({
+                ...checkoutOptions,
+                productId: e.target.value,
+              });
+            }}
+          />
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/playground/nextjs-app-router/components/form/transaction-options.tsx b/playground/nextjs-app-router/components/form/transaction-options.tsx
index 3cacbaf8e9..c6574676b7 100644
--- a/playground/nextjs-app-router/components/form/transaction-options.tsx
+++ b/playground/nextjs-app-router/components/form/transaction-options.tsx
@@ -7,50 +7,40 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useContext } from 'react';
-import {
-  AppContext,
-  OnchainKitComponent,
-  TransactionTypes,
-} from '../AppProvider';
+import { AppContext, TransactionTypes } from '../AppProvider';
 
 export function TransactionOptions() {
-  const { activeComponent, transactionType, setTransactionType } =
-    useContext(AppContext);
+  const { transactionType, setTransactionType } = useContext(AppContext);
 
   return (
-    (activeComponent === OnchainKitComponent.Transaction ||
-      activeComponent === OnchainKitComponent.TransactionDefault) && (
-      <div className="grid gap-2">
-        <Label htmlFor="chain">Transaction Options</Label>
-        <Select
-          value={transactionType}
-          onValueChange={(value) =>
-            value ? setTransactionType?.(value as TransactionTypes) : value
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select transaction type" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value={TransactionTypes.Calls}>Calls</SelectItem>
-            <SelectItem value={TransactionTypes.Contracts}>
-              Contracts
-            </SelectItem>
-            <SelectItem value={TransactionTypes.CallsPromise}>
-              Calls Promise
-            </SelectItem>
-            <SelectItem value={TransactionTypes.ContractsPromise}>
-              Contracts Promise
-            </SelectItem>
-            <SelectItem value={TransactionTypes.CallsCallback}>
-              Calls Callback
-            </SelectItem>
-            <SelectItem value={TransactionTypes.ContractsCallback}>
-              Contracts Callback
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    )
+    <div className="grid gap-2">
+      <Label htmlFor="chain">Transaction Options</Label>
+      <Select
+        value={transactionType}
+        onValueChange={(value) =>
+          value ? setTransactionType?.(value as TransactionTypes) : value
+        }
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select transaction type" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={TransactionTypes.Calls}>Calls</SelectItem>
+          <SelectItem value={TransactionTypes.Contracts}>Contracts</SelectItem>
+          <SelectItem value={TransactionTypes.CallsPromise}>
+            Calls Promise
+          </SelectItem>
+          <SelectItem value={TransactionTypes.ContractsPromise}>
+            Contracts Promise
+          </SelectItem>
+          <SelectItem value={TransactionTypes.CallsCallback}>
+            Calls Callback
+          </SelectItem>
+          <SelectItem value={TransactionTypes.ContractsCallback}>
+            Contracts Callback
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
   );
 }