diff --git a/system-contract-dapp-playground/__tests__/hedera/hts-interactions/token-transfer-contract/index.test.ts b/system-contract-dapp-playground/__tests__/hedera/hts-interactions/token-transfer-contract/index.test.ts
index 2bca1fbd9..1379144ba 100644
--- a/system-contract-dapp-playground/__tests__/hedera/hts-interactions/token-transfer-contract/index.test.ts
+++ b/system-contract-dapp-playground/__tests__/hedera/hts-interactions/token-transfer-contract/index.test.ts
@@ -31,9 +31,12 @@ import {
 import { Contract } from 'ethers';
 
 describe('TokenTransferContract test suite', () => {
+  const quantity = 369;
   const responseCode = 22;
   const gasLimit = 1000000;
   const invalidSender = '0xabc';
+  const nonFungibleAmounts = [3, 6, 9];
+  const fungibleAmounts = [-18, 3, 6, 9];
   const senderA = '0xDd7fCb7c2ee96A79B1e201d25F5E43d6a0cED5e6';
   const senderB = '0x0851072d7bB726305032Eff23CB8fd22eB74c85B';
   const receiverA = '0x7a35433804d8Cd070d98d66C6E9b45c6C32C3CDD';
@@ -116,7 +119,8 @@ describe('TokenTransferContract test suite', () => {
         baseContract as unknown as Contract,
         hederaTokenAddress,
         [senderA, senderB],
-        [3, 6, 9]
+        fungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBeNull;
@@ -129,7 +133,8 @@ describe('TokenTransferContract test suite', () => {
         baseContract as unknown as Contract,
         '0xabc',
         [senderA, senderB],
-        [3, 6, 9]
+        fungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBe('Invalid token address');
@@ -142,7 +147,8 @@ describe('TokenTransferContract test suite', () => {
         baseContract as unknown as Contract,
         hederaTokenAddress,
         [senderA, '0xabc'],
-        [3, 6, 9]
+        fungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBe(`${invalidSender} is an invalid accountID`);
@@ -155,7 +161,8 @@ describe('TokenTransferContract test suite', () => {
         baseContract as unknown as Contract,
         hederaTokenAddress,
         [senderA, senderB],
-        [-3, 6, 9]
+        [-9, -3, 6],
+        gasLimit
       );
 
       expect(txRes.err).toBe(`-3 is an invalid amount`);
@@ -171,7 +178,8 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         [senderA, senderB],
         [receiverA, receiverB],
-        [3, 6, 9]
+        nonFungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBeNull;
@@ -185,7 +193,8 @@ describe('TokenTransferContract test suite', () => {
         '0xabc',
         [senderA, senderB],
         [receiverA, receiverB],
-        [3, 6, 9]
+        nonFungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBe('Invalid token address');
@@ -199,7 +208,8 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         [senderA, '0xabc'],
         [receiverA, receiverB],
-        [3, 6, 9]
+        nonFungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBe(`${invalidSender} is an invalid sender accountID`);
@@ -213,7 +223,8 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         [senderA, senderB],
         [receiverA, '0xabc'],
-        [3, 6, 9]
+        nonFungibleAmounts,
+        gasLimit
       );
 
       expect(txRes.err).toBe(`${invalidSender} is an invalid receiver accountID`);
@@ -227,7 +238,8 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         [senderA, senderB],
         [receiverA, receiverB],
-        [-3, 6, 9]
+        [-3, 6, 9],
+        gasLimit
       );
 
       expect(txRes.err).toBe(`-3 is an invalid serial number`);
@@ -244,7 +256,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -253,14 +265,14 @@ describe('TokenTransferContract test suite', () => {
       expect(txRes.transactionHash).toBe(txHash);
     });
 
-    it('should execute transferSingleToken with API === "NON_FUNGIBLE" then return a successful response code', async () => {
+    it('should execute transferSingleToken with API === "NFT" then return a successful response code', async () => {
       const txRes = await transferSingleToken(
         baseContract as unknown as Contract,
-        'NON_FUNGIBLE',
+        'NFT',
         hederaTokenAddress,
         senderA,
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -276,7 +288,7 @@ describe('TokenTransferContract test suite', () => {
         '0xabc',
         senderA,
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -292,7 +304,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         '0xabc',
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -308,7 +320,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         '0xabc',
-        369,
+        quantity,
         gasLimit
       );
 
@@ -324,7 +336,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         receiverB,
-        -369,
+        quantity * -1,
         gasLimit
       );
 
@@ -342,7 +354,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -358,7 +370,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -374,7 +386,7 @@ describe('TokenTransferContract test suite', () => {
         '0xabc',
         senderA,
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -390,7 +402,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         '0xabc',
         receiverA,
-        369,
+        quantity,
         gasLimit
       );
 
@@ -406,7 +418,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         '0xabc',
-        369,
+        quantity,
         gasLimit
       );
 
@@ -422,7 +434,7 @@ describe('TokenTransferContract test suite', () => {
         hederaTokenAddress,
         senderA,
         receiverB,
-        -369,
+        quantity * -1,
         gasLimit
       );
 
diff --git a/system-contract-dapp-playground/src/api/hedera/tokenTransfer-interactions/index.ts b/system-contract-dapp-playground/src/api/hedera/tokenTransfer-interactions/index.ts
index 4d8c47160..9820f4351 100644
--- a/system-contract-dapp-playground/src/api/hedera/tokenTransfer-interactions/index.ts
+++ b/system-contract-dapp-playground/src/api/hedera/tokenTransfer-interactions/index.ts
@@ -73,13 +73,16 @@ export const transferCrypto = async (
  *
  * @param amount: number[]
  *
+ * @param gasLimit: number
+ *
  * @return Promise Promise<SmartContractExecutionResult>
  */
 export const transferFungibleTokens = async (
   baseContract: Contract,
   hederaTokenAddress: string,
   accountIDs: string[],
-  amounts: number[]
+  amounts: number[],
+  gasLimit: number
 ): Promise<SmartContractExecutionResult> => {
   // sanitize params
   let sanitizeErr;
@@ -95,7 +98,7 @@ export const transferFungibleTokens = async (
     });
   }
   if (!sanitizeErr) {
-    amounts.some((amount) => {
+    amounts.slice(1).some((amount) => {
       if (amount < 0) {
         sanitizeErr = `${amount} is an invalid amount`;
         return true;
@@ -109,7 +112,9 @@ export const transferFungibleTokens = async (
 
   // invoking contract methods
   try {
-    const tx = await baseContract.transferTokensPublic(hederaTokenAddress, accountIDs, amounts);
+    const tx = await baseContract.transferTokensPublic(hederaTokenAddress, accountIDs, amounts, {
+      gasLimit,
+    });
 
     return await handleContractResponse(tx);
   } catch (err: any) {
@@ -133,6 +138,8 @@ export const transferFungibleTokens = async (
  *
  * @param serialNumbers: number[]
  *
+ * @param gasLimit: number
+ *
  * @return Promise<SmartContractExecutionResult>
  */
 export const transferNonFungibleTokens = async (
@@ -140,7 +147,8 @@ export const transferNonFungibleTokens = async (
   hederaTokenAddress: string,
   senders: string[],
   receivers: string[],
-  serialNumbers: number[]
+  serialNumbers: number[],
+  gasLimit: number
 ): Promise<SmartContractExecutionResult> => {
   // sanitize params
   let sanitizeErr;
@@ -182,7 +190,8 @@ export const transferNonFungibleTokens = async (
       hederaTokenAddress,
       senders,
       receivers,
-      serialNumbers
+      serialNumbers,
+      { gasLimit }
     );
 
     return await handleContractResponse(tx);
@@ -205,7 +214,7 @@ export const transferNonFungibleTokens = async (
  *
  * @param baseContract: ethers.Contract
  *
- * @param API: "FUNGIBLE" | "NON_FUNGIBLE" | 'FUNGIBLE_FROM' | 'NFT_FROM'
+ * @param API: "FUNGIBLE" | "NFT" | 'FUNGIBLE_FROM' | 'NFT_FROM'
  *
  * @param hederaTokenAddress: string
  *
@@ -219,7 +228,7 @@ export const transferNonFungibleTokens = async (
  */
 export const transferSingleToken = async (
   baseContract: Contract,
-  API: 'FUNGIBLE' | 'NON_FUNGIBLE' | 'FUNGIBLE_FROM' | 'NFT_FROM',
+  API: 'FUNGIBLE' | 'NFT' | 'FUNGIBLE_FROM' | 'NFT_FROM',
   hederaTokenAddress: string,
   sender: string,
   receiver: string,
@@ -257,7 +266,7 @@ export const transferSingleToken = async (
         );
         break;
 
-      case 'NON_FUNGIBLE':
+      case 'NFT':
         transactionResult = await baseContract.transferNFTPublic(
           hederaTokenAddress,
           sender,
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/erc/erc-20/methods/BalanceOf.tsx b/system-contract-dapp-playground/src/components/contract-interaction/erc/erc-20/methods/BalanceOf.tsx
index 4ac96967d..04bf7d268 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/erc/erc-20/methods/BalanceOf.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/erc/erc-20/methods/BalanceOf.tsx
@@ -27,8 +27,8 @@ import { ReactNode, useEffect, useState } from 'react';
 import { balanceOf } from '@/api/hedera/erc20-interactions';
 import { getBalancesFromLocalStorage } from '@/api/localStorage';
 import { CommonErrorToast } from '@/components/toast/CommonToast';
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
 import HederaCommonTextField from '@/components/common/HederaCommonTextField';
+import { HEDERA_BRANDING_COLORS, HEDERA_CHAKRA_INPUT_BOX_SIZES } from '@/utils/common/constants';
 import {
   Popover,
   PopoverContent,
@@ -209,7 +209,7 @@ const BalanceOf = ({ baseContract }: PageProps) => {
       <div className="flex gap-12 items-center w-[580px]">
         {/* method */}
         <HederaCommonTextField
-          size={'md'}
+          size={HEDERA_CHAKRA_INPUT_BOX_SIZES.medium}
           value={accountAddress}
           title={'Balance of'}
           explanation={'Returns the amount of tokens owned by account.'}
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/components/SigningKeysForm.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/components/SigningKeysForm.tsx
index f7da06439..b538da94c 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/components/SigningKeysForm.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/components/SigningKeysForm.tsx
@@ -22,18 +22,22 @@ import Link from 'next/link';
 import { AiOutlineMinus } from 'react-icons/ai';
 import { Dispatch, SetStateAction } from 'react';
 import { Tooltip, Select, Input } from '@chakra-ui/react';
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
 import { convertCalmelCaseFunctionName } from '@/utils/common/helpers';
+import {
+  HEDERA_BRANDING_COLORS,
+  HEDERA_CHAKRA_INPUT_BOX_SIZES,
+  HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME,
+} from '@/utils/common/constants';
 import {
   CommonKeyObject,
   IHederaTokenServiceKeyType,
   IHederaTokenServiceKeyValueType,
 } from '@/types/contract-interactions/HTS';
 import {
-  handleAddingOrRemovingKeys,
+  handleUpdateKeyValue,
   handleKeyTypeOnChange,
+  handleAddingOrRemovingKeys,
   handleKeyValueTypeOnChange,
-  handleUpdateKeyValue,
 } from '../methods/signingKeys';
 
 /** @dev shared component presenting signing keys*/
@@ -152,9 +156,9 @@ export const SharedSigningKeysComponent = ({
                       ? 'ID of a smart contract instance...'
                       : `${key.keyValueType.split('_')[0].toUpperCase()} compressed public key...`
                   }
-                  size={'md'}
+                  size={HEDERA_CHAKRA_INPUT_BOX_SIZES.medium}
                   focusBorderColor={HEDERA_BRANDING_COLORS.purple}
-                  className={'w-full border-white/30'}
+                  className={HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME}
                 />
               )}
             </div>
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/hooks/useToastSuccessful.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/hooks/useToastSuccessful.tsx
index dabeaff21..89929c320 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/hooks/useToastSuccessful.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/hooks/useToastSuccessful.tsx
@@ -25,6 +25,10 @@ import {
 } from '@/types/contract-interactions/HTS';
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import { HederaTokenKeyTypes, TRANSACTION_PAGE_SIZE } from '../states/commonStates';
+import {
+  generateInitialFungibleParamValue,
+  generateInitialNonFungibleParamValue,
+} from '../../token-transfer-contract/method/transferMultipleTokens/helpers/generateInitialValues';
 
 interface HookProps {
   toaster: any;
@@ -34,7 +38,9 @@ interface HookProps {
   resetParamValues?: any;
   setTokenAddresses?: any;
   toastDescription?: string;
+  setFungibleParamValues?: any;
   setParamValues?: Dispatch<any>;
+  setNonFungibleParamValues?: any;
   initialTokenAddressesValues?: any;
   setTokenTransferParamValues?: any;
   setCryptoTransferParamValues?: any;
@@ -64,7 +70,9 @@ export const useToastSuccessful = ({
   setTokenAddresses,
   setKeyTypesToShow,
   transactionResults,
+  setFungibleParamValues,
   setCurrentTransactionPage,
+  setNonFungibleParamValues,
   setTokenTransferParamValues,
   initialTokenAddressesValues,
   setCryptoTransferParamValues,
@@ -90,6 +98,8 @@ export const useToastSuccessful = ({
       if (setKeyTypesToShow) setKeyTypesToShow(new Set(HederaTokenKeyTypes));
       if (setTokenAddresses) setTokenAddresses([initialTokenAddressesValues]);
       if (setChosenKeys) setChosenKeys(new Set<IHederaTokenServiceKeyType>());
+      if (setFungibleParamValues) setFungibleParamValues(generateInitialFungibleParamValue);
+      if (setNonFungibleParamValues) setFungibleParamValues(generateInitialNonFungibleParamValue);
       // set the current page to the last page so it can show the newly created transaction
       const maxPageNum = Math.ceil(transactionResults.length / TRANSACTION_PAGE_SIZE);
       setCurrentTransactionPage(maxPageNum === 0 ? 1 : maxPageNum);
@@ -109,10 +119,12 @@ export const useToastSuccessful = ({
     resetParamValues,
     setKeyTypesToShow,
     setTokenAddresses,
+    setFungibleParamValues,
     transactionResults.length,
     setCurrentTransactionPage,
-    setTokenTransferParamValues,
+    setNonFungibleParamValues,
     initialTokenAddressesValues,
+    setTokenTransferParamValues,
     setCryptoTransferParamValues,
   ]);
 };
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/methods/handleSanitizeFormInputs.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/methods/handleSanitizeFormInputs.tsx
index d87346e0f..bb32e53a0 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/methods/handleSanitizeFormInputs.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/shared/methods/handleSanitizeFormInputs.tsx
@@ -32,13 +32,16 @@ interface ParamsProps {
   feeValue?: string;
   maxSupply?: string;
   initSupply?: string;
+  amounts?: number[];
+  senders?: string[];
   serialNumber?: string;
   ownerAddress?: string;
   senderAddress?: string;
   spenderAddress?: string;
-  receiverAddress?: string;
   withCustomFee?: boolean;
   accountAddress?: string;
+  serialNumbers?: number[];
+  receiverAddress?: string;
   feeTokenAddress?: string;
   keys?: CommonKeyObject[];
   autoRenewPeriod?: string;
@@ -48,6 +51,8 @@ interface ParamsProps {
   associatingAddress?: string;
   tokenAddressToMint?: string;
   hederaTokenAddress?: string;
+  fungibleReceivers?: string[];
+  nonFungibleReceivers?: string[];
   grantingKYCAccountAddress?: string;
   API:
     | 'Mint'
@@ -64,11 +69,15 @@ interface ParamsProps {
     | 'QueryTokenInfo'
     | 'QueryTokenInfo'
     | 'TransferSingle'
+    | 'TransferSingle'
+    | 'MULTI_FUNGIBLE'
     | 'UpdateTokenInfo'
     | 'QueryTokenStatus'
     | 'UpdateTokenExpiry'
     | 'APPROVED_FUNGIBLE'
     | 'WIPE_NON_FUNGIBLE'
+    | 'QueryTokenRelation'
+    | 'MULTI_NON_FUNGIBLE'
     | 'UpdateTokenRelation'
     | 'APPROVED_NON_FUNGIBLE';
 }
@@ -80,6 +89,8 @@ export const handleSanitizeHederaFormInputs = ({
   amount,
   symbol,
   second,
+  amounts,
+  senders,
   decimals,
   treasury,
   feeValue,
@@ -89,6 +100,7 @@ export const handleSanitizeHederaFormInputs = ({
   serialNumber,
   senderAddress,
   withCustomFee,
+  serialNumbers,
   spenderAddress,
   accountAddress,
   tokenAddresses,
@@ -97,9 +109,11 @@ export const handleSanitizeHederaFormInputs = ({
   autoRenewPeriod,
   recipientAddress,
   autoRenewAccount,
+  fungibleReceivers,
   tokenAddressToMint,
   associatingAddress,
   hederaTokenAddress,
+  nonFungibleReceivers,
   grantingKYCAccountAddress,
 }: ParamsProps) => {
   // sanitize params
@@ -327,6 +341,76 @@ export const handleSanitizeHederaFormInputs = ({
     } else if (feeValue === '') {
       sanitizeErr = 'Gas limit should be set for this transaction';
     }
+  } else if (API === 'MULTI_FUNGIBLE') {
+    if (!isAddress(hederaTokenAddress)) {
+      sanitizeErr = 'Invalid token address';
+    }
+
+    if (!sanitizeErr) {
+      fungibleReceivers?.some((receiver) => {
+        if (receiver === '') {
+          sanitizeErr = 'Receiver cannot be empty';
+          return true;
+        } else if (!isAddress(receiver)) {
+          sanitizeErr = `${receiver} is an invalid receiver address`;
+          return true;
+        }
+      });
+    }
+
+    if (!sanitizeErr) {
+      amounts?.some((amount) => {
+        if (amount < 0) {
+          sanitizeErr = `${amount} is an invalid amount`;
+          return true;
+        }
+      });
+    }
+
+    if (!sanitizeErr && feeValue === '') {
+      sanitizeErr = 'Gas limit should be set for this transaction';
+    }
+  } else if (API === 'MULTI_NON_FUNGIBLE') {
+    if (!isAddress(hederaTokenAddress)) {
+      sanitizeErr = 'Invalid token address';
+    }
+
+    if (!sanitizeErr) {
+      senders?.some((semder) => {
+        if (semder === '') {
+          sanitizeErr = 'sender address cannot be empty';
+          return true;
+        } else if (!isAddress(semder)) {
+          sanitizeErr = `${semder} is an invalid sender address`;
+          return true;
+        }
+      });
+    }
+
+    if (!sanitizeErr) {
+      nonFungibleReceivers?.some((receiver) => {
+        if (receiver === '') {
+          sanitizeErr = 'Receiver cannot be empty';
+          return true;
+        } else if (!isAddress(receiver)) {
+          sanitizeErr = `${receiver} is an invalid receiver address`;
+          return true;
+        }
+      });
+    }
+
+    if (!sanitizeErr) {
+      serialNumbers?.some((serialNumber) => {
+        if (serialNumber < 0) {
+          sanitizeErr = `${serialNumber} is an invalid serial number`;
+          return true;
+        }
+      });
+    }
+
+    if (!sanitizeErr && feeValue === '') {
+      sanitizeErr = 'Gas limit should be set for this transaction';
+    }
   }
 
   return sanitizeErr;
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/TokenKeysForm.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/TokenKeysForm.tsx
index 4a2b67a4a..5c25e58fd 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/TokenKeysForm.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-management-contract/methods/manageTokenInfo/TokenKeysForm.tsx
@@ -19,9 +19,13 @@
  */
 
 import { Select, Input } from '@chakra-ui/react';
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
 import { convertCalmelCaseFunctionName } from '@/utils/common/helpers';
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import {
+  HEDERA_BRANDING_COLORS,
+  HEDERA_CHAKRA_INPUT_BOX_SIZES,
+  HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME,
+} from '@/utils/common/constants';
 import {
   handleKeyValueTypeOnChange,
   handleUpdateKeyValue,
@@ -146,9 +150,9 @@ const TokenKeysForm = ({
                       ? 'ID of a smart contract instance...'
                       : `${key.keyValueType.split('_')[0].toUpperCase()} compressed public key...`
                   }
-                  size={'md'}
+                  size={HEDERA_CHAKRA_INPUT_BOX_SIZES.medium}
                   focusBorderColor={HEDERA_BRANDING_COLORS.purple}
-                  className={'w-full border-white/30'}
+                  className={HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME}
                 />
               )}
             </div>
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx
index 413d49901..334b15e42 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-query-contract/methods/queryTokenValidity/index.tsx
@@ -22,7 +22,6 @@ import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
 import { useToast } from '@chakra-ui/react';
 import { Contract, isAddress } from 'ethers';
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
 import { CommonErrorToast } from '@/components/toast/CommonToast';
 import { TransactionResult } from '@/types/contract-interactions/HTS';
 import { queryTokenValidity } from '@/api/hedera/tokenQuery-interactions';
@@ -33,6 +32,11 @@ import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResul
 import { TransactionResultTable } from '../../../shared/components/TransactionResultTable';
 import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage';
 import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage';
+import {
+  HEDERA_BRANDING_COLORS,
+  HEDERA_CHAKRA_INPUT_BOX_SIZES,
+  HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME,
+} from '@/utils/common/constants';
 import {
   SharedExecuteButton,
   SharedFormInputField,
@@ -150,9 +154,9 @@ const QueryTokenValidity = ({ baseContract }: PageProps) => {
           paramValue={paramValues['hederaTokenAddress']}
           paramKey={'hederaTokenAddress'}
           paramType={'text'}
-          paramSize={'md'}
+          paramSize={HEDERA_CHAKRA_INPUT_BOX_SIZES.medium}
           explanation={'represents the Hedera Token for querying'}
-          paramClassName={'w-full border-white/30'}
+          paramClassName={HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME}
           paramPlaceholder={'Token address...'}
           paramFocusColor={HEDERA_BRANDING_COLORS.purple}
         />
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/index.tsx
index 8c47c8fbb..55ff3c686 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/index.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/index.tsx
@@ -21,6 +21,7 @@
 import { Contract } from 'ethers';
 import CryptoTransfer from './transferCrypto';
 import TransferSingleToken from './transferSingleToken';
+import TransferMultipleTokens from './transferMultipleTokens';
 
 interface PageProps {
   method: string;
@@ -31,9 +32,9 @@ const HederaTokenTransferMethods = ({ baseContract, method }: PageProps) => {
   return (
     <>
       {method === 'transferFrom' && <>{method}</>}
-      {method === 'transferTokens' && <>{method}</>}
       {method === 'crypto' && <CryptoTransfer baseContract={baseContract} />}
       {method === 'transferToken' && <TransferSingleToken baseContract={baseContract} />}
+      {method === 'transferTokens' && <TransferMultipleTokens baseContract={baseContract} />}
     </>
   );
 };
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/TransferRecordForm.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/TransferRecordForm.tsx
new file mode 100644
index 000000000..f9a5b4752
--- /dev/null
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/TransferRecordForm.tsx
@@ -0,0 +1,81 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {
+  SharedFormInputField,
+  SharedRemoveFieldsButton,
+} from '../../../shared/components/ParamInputForm';
+import { htsMultiTokensTransferParamFields } from '@/utils/contract-interactions/HTS/token-transfer/paramFieldConstant';
+
+interface PageProps {
+  paramKeys: any;
+  paramValue: any;
+  paramValues: any;
+  setParamValues: any;
+  handleInputOnChange: any;
+  handleModifyTransferRecords: any;
+}
+
+const TransferRecordForm = ({
+  paramKeys,
+  paramValue,
+  paramValues,
+  setParamValues,
+  handleInputOnChange,
+  handleModifyTransferRecords,
+}: PageProps) => {
+  return (
+    <div key={paramValue.fieldKey} className="flex gap-6 items-center">
+      {paramKeys.map((param: any) => {
+        return (
+          <SharedFormInputField
+            key={param}
+            param={param}
+            handleInputOnChange={(e: any) =>
+              handleInputOnChange(e, 'UNIQUE', param, paramValue.fieldKey, setParamValues)
+            }
+            paramValue={paramValue.fieldValue[param]}
+            paramKey={(htsMultiTokensTransferParamFields as any)[param].paramKey}
+            paramType={(htsMultiTokensTransferParamFields as any)[param].inputType}
+            paramSize={(htsMultiTokensTransferParamFields as any)[param].inputSize}
+            explanation={(htsMultiTokensTransferParamFields as any)[param].explanation}
+            paramClassName={(htsMultiTokensTransferParamFields as any)[param].inputClassname}
+            paramPlaceholder={(htsMultiTokensTransferParamFields as any)[param].inputPlaceholder}
+            paramFocusColor={
+              (htsMultiTokensTransferParamFields as any)[param].inputFocusBorderColor
+            }
+          />
+        );
+      })}
+
+      {/* delete key button */}
+      {paramValues.length > 1 && (
+        <SharedRemoveFieldsButton
+          fieldKey={paramValue.fieldKey}
+          handleModifyTokenAddresses={() =>
+            handleModifyTransferRecords('REMOVE', paramValues, setParamValues, paramValue.fieldKey)
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferRecordForm;
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/helpers/generateInitialValues.ts b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/helpers/generateInitialValues.ts
new file mode 100644
index 000000000..57d735660
--- /dev/null
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/helpers/generateInitialValues.ts
@@ -0,0 +1,59 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { generatedRandomUniqueKey } from '@/utils/common/helpers';
+
+export interface FungibleParamValue {
+  fieldKey: string;
+  fieldValue: {
+    receiverAddress: string;
+    amount: string;
+  };
+}
+
+export interface NonFungibleParamValue {
+  fieldKey: string;
+  fieldValue: {
+    senderAddress: string;
+    receiverAddress: string;
+    serialNumber: string;
+  };
+}
+
+export const generateInitialFungibleParamValue = (): FungibleParamValue => {
+  return {
+    fieldKey: generatedRandomUniqueKey(9),
+    fieldValue: {
+      receiverAddress: '',
+      amount: '',
+    },
+  };
+};
+
+export const generateInitialNonFungibleParamValue = (): NonFungibleParamValue => {
+  return {
+    fieldKey: generatedRandomUniqueKey(9),
+    fieldValue: {
+      senderAddress: '',
+      receiverAddress: '',
+      serialNumber: '',
+    },
+  };
+};
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx
new file mode 100644
index 000000000..9086ef8f9
--- /dev/null
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferMultipleTokens/index.tsx
@@ -0,0 +1,421 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import Cookies from 'js-cookie';
+import { Contract } from 'ethers';
+import { useToast } from '@chakra-ui/react';
+import { useEffect, useMemo, useState } from 'react';
+import { CommonErrorToast } from '@/components/toast/CommonToast';
+import { handleAPIErrors } from '../../../shared/methods/handleAPIErrors';
+import { TRANSACTION_PAGE_SIZE } from '../../../shared/states/commonStates';
+import { useToastSuccessful } from '../../../shared/hooks/useToastSuccessful';
+import { usePaginatedTxResults } from '../../../shared/hooks/usePaginatedTxResults';
+import { TransactionResultTable } from '../../../shared/components/TransactionResultTable';
+import { handleSanitizeHederaFormInputs } from '../../../shared/methods/handleSanitizeFormInputs';
+import { SmartContractExecutionResult, TransactionResult } from '@/types/contract-interactions/HTS';
+import { useUpdateTransactionResultsToLocalStorage } from '../../../shared/hooks/useUpdateLocalStorage';
+import { htsMultiTokensTransferParamFields } from '@/utils/contract-interactions/HTS/token-transfer/paramFieldConstant';
+import { handleRetrievingTransactionResultsFromLocalStorage } from '../../../shared/methods/handleRetrievingTransactionResultsFromLocalStorage';
+import {
+  transferFungibleTokens,
+  transferNonFungibleTokens,
+} from '@/api/hedera/tokenTransfer-interactions';
+import {
+  FungibleParamValue,
+  NonFungibleParamValue,
+  generateInitialFungibleParamValue,
+  generateInitialNonFungibleParamValue,
+} from './helpers/generateInitialValues';
+import {
+  SharedFormButton,
+  SharedFormInputField,
+  SharedExecuteButtonWithFee,
+} from '../../../shared/components/ParamInputForm';
+import TransferRecordForm from './TransferRecordForm';
+
+interface PageProps {
+  baseContract: Contract;
+}
+
+type API_NAMES = 'FUNGIBLE' | 'NON_FUNGIBLE';
+
+const TransferMultipleTokens = ({ baseContract }: PageProps) => {
+  // general states
+  const toaster = useToast();
+  const [isLoading, setIsLoading] = useState({
+    FUNGIBLE: false,
+    NON_FUNGIBLE: false,
+  });
+  const [isSuccessful, setIsSuccessful] = useState(false);
+  const hederaNetwork = JSON.parse(Cookies.get('_network') as string);
+  const [APIMethods, setAPIMethods] = useState<API_NAMES>('FUNGIBLE');
+  const [currentTransactionPage, setCurrentTransactionPage] = useState(1);
+  const contractCaller = JSON.parse(Cookies.get('_connectedAccounts') as string)[0];
+  const [transactionResults, setTransactionResults] = useState<TransactionResult[]>([]);
+  const transactionResultStorageKey = 'HEDERA.HTS.TOKEN-TRANSFER.MULTIPLE-TOKENS-RESULTS';
+  const tokenCommonFields = useMemo(() => {
+    if (APIMethods === 'FUNGIBLE') {
+      return ['hederaTokenAddress', 'accountIDs', 'amounts'];
+    } else {
+      return ['hederaTokenAddress', 'senders', 'receivers', 'serialNumbers'];
+    }
+  }, [APIMethods]);
+  const initialCommonParamValue = { hederaTokenAddress: '', feeValue: '' };
+  const [commonParamValues, setCommonParamValues] = useState(initialCommonParamValue);
+
+  const APIButtonTitles: { API: API_NAMES; apiSwitchTitle: string; executeTitle: any }[] = [
+    {
+      API: 'FUNGIBLE',
+      apiSwitchTitle: 'Fungible Token',
+      executeTitle: 'Transfer Fungible Tokens',
+    },
+    {
+      API: 'NON_FUNGIBLE',
+      apiSwitchTitle: 'Non-Fungible Token',
+      executeTitle: 'Transfer Non-Fungible Tokens',
+    },
+  ];
+
+  const [fungibleParamValues, setFungibleParamValues] = useState([
+    generateInitialFungibleParamValue(),
+  ]);
+  const [nonFungibleParamValues, setNonFungibleParamValues] = useState([
+    generateInitialNonFungibleParamValue(),
+  ]);
+
+  /** @dev retrieve token creation results from localStorage to maintain data on re-renders */
+  useEffect(() => {
+    handleRetrievingTransactionResultsFromLocalStorage(
+      toaster,
+      transactionResultStorageKey,
+      setCurrentTransactionPage,
+      setTransactionResults
+    );
+  }, [toaster]);
+
+  // declare a paginatedTransactionResults
+  const paginatedTransactionResults = usePaginatedTxResults(
+    currentTransactionPage,
+    transactionResults
+  );
+
+  /** @dev handle modifying transfer records */
+  const handleModifyTransferRecords = (
+    type: 'ADD' | 'REMOVE',
+    paramValues?: FungibleParamValue[] | NonFungibleParamValue[],
+    setParamValues?: any,
+    removingFieldKey?: string,
+    initialParamVaue?: any
+  ) => {
+    switch (type) {
+      case 'ADD':
+        setParamValues((prev: any) => [...prev, initialParamVaue]);
+        break;
+      case 'REMOVE':
+        if (paramValues!.length > 1) {
+          setParamValues((prev: any) =>
+            prev.filter((field: any) => field.fieldKey !== removingFieldKey)
+          );
+        }
+    }
+  };
+
+  /** @dev handle form inputs on change */
+  const handleInputOnChange = (
+    e: any,
+    mode: 'COMMON' | 'UNIQUE',
+    param: string,
+    fieldKey?: string,
+    setParamValues?: any
+  ) => {
+    if (mode === 'COMMON') {
+      setCommonParamValues((prev) => ({ ...prev, [param]: e.target.value }));
+    } else {
+      setParamValues((prev: any) =>
+        prev.map((field: any) => {
+          if (field.fieldKey === fieldKey) {
+            field.fieldValue[param] = e.target.value;
+          }
+          return field;
+        })
+      );
+    }
+  };
+
+  /** @dev handle invoking the API to interact with smart contract and transfer multiple tokens */
+  const handleTransferMultipleTokens = async (API: API_NAMES) => {
+    // destructuring params
+    const { hederaTokenAddress, feeValue } = commonParamValues;
+
+    // extract fungibleParamsAccountIDs && fungibleParamsAmmounts  array
+    const fungibleParamsAccountIDs = fungibleParamValues.map(
+      (prev) => prev.fieldValue.receiverAddress
+    );
+    fungibleParamsAccountIDs.unshift(contractCaller); // add contractCaller to the beginning of the list
+
+    let amountTotal = 0;
+    const fungibleParamsAmmounts = fungibleParamValues.map((prev) => {
+      amountTotal += Number(prev.fieldValue.amount);
+      return Number(prev.fieldValue.amount);
+    });
+    fungibleParamsAmmounts.unshift(amountTotal * -1); // add the negative total amount to the beginning of the list
+
+    // extract nonFungibleParamsSenders, nonFungibleParamsReceivers && nonFungibleParamsSerialNumbers  array
+    const nonFungibleParamsSenders = nonFungibleParamValues.map(
+      (prev) => prev.fieldValue.senderAddress
+    );
+    const nonFungibleParamsReceivers = nonFungibleParamValues.map(
+      (prev) => prev.fieldValue.receiverAddress
+    );
+    const nonFungibleParamsSerialNumbers = nonFungibleParamValues.map((prev) =>
+      Number(prev.fieldValue.serialNumber)
+    );
+
+    // sanitize params
+    const sanitizeErr = handleSanitizeHederaFormInputs({
+      API: `MULTI_${API}`,
+      fungibleReceivers: fungibleParamsAccountIDs,
+      amounts: fungibleParamsAmmounts.slice(1),
+      senders: nonFungibleParamsSenders,
+      nonFungibleReceivers: nonFungibleParamsReceivers,
+      serialNumbers: nonFungibleParamsSerialNumbers,
+      feeValue,
+      hederaTokenAddress,
+    });
+
+    // toast error if any param is invalid
+    if (sanitizeErr) {
+      CommonErrorToast({ toaster, title: 'Invalid parameters', description: sanitizeErr });
+      return;
+    }
+
+    // turn isLoading on
+    setIsLoading({
+      FUNGIBLE: API === 'FUNGIBLE',
+      NON_FUNGIBLE: API === 'NON_FUNGIBLE',
+    });
+
+    let transactionResult: SmartContractExecutionResult;
+    if (API === 'FUNGIBLE') {
+      transactionResult = await transferFungibleTokens(
+        baseContract,
+        hederaTokenAddress,
+        fungibleParamsAccountIDs,
+        fungibleParamsAmmounts,
+        Number(feeValue)
+      );
+    } else {
+      transactionResult = await transferNonFungibleTokens(
+        baseContract,
+        hederaTokenAddress,
+        nonFungibleParamsSenders,
+        nonFungibleParamsReceivers,
+        nonFungibleParamsSerialNumbers,
+        Number(feeValue)
+      );
+    }
+
+    // turn isLoading off
+    setIsLoading({
+      FUNGIBLE: API === 'FUNGIBLE' && false,
+      NON_FUNGIBLE: API === 'NON_FUNGIBLE' && false,
+    });
+
+    // handle err
+    if (transactionResult.err || !transactionResult.result) {
+      handleAPIErrors({
+        toaster,
+        APICalled: API,
+        setTransactionResults,
+        err: transactionResult.err,
+        tokenAddress: commonParamValues.hederaTokenAddress,
+        transactionHash: transactionResult.transactionHash,
+      });
+      return;
+    } else {
+      // handle succesfull
+      setTransactionResults((prev) => [
+        ...prev,
+        {
+          APICalled: API,
+          status: 'success',
+          tokenAddress: commonParamValues.hederaTokenAddress,
+          txHash: transactionResult.transactionHash as string,
+        },
+      ]);
+
+      setIsSuccessful(true);
+    }
+  };
+
+  /** @dev listen to change event on transactionResults state => load to localStorage  */
+  useUpdateTransactionResultsToLocalStorage(transactionResults, transactionResultStorageKey);
+
+  /** @dev toast successful */
+  useToastSuccessful({
+    toaster,
+    isSuccessful,
+    setIsSuccessful,
+    transactionResults,
+    setFungibleParamValues,
+    setNonFungibleParamValues,
+    setCurrentTransactionPage,
+    setParamValues: setCommonParamValues,
+    toastTitle: 'Token update successful',
+    resetParamValues: initialCommonParamValue,
+  });
+
+  return (
+    <div className="w-full mx-3 flex justify-center mt-6 flex-col gap-20">
+      {/* Transfer Token form */}
+      <div className="flex flex-col gap-6 justify-center tracking-tight text-white/70">
+        {/* API methods */}
+        <div className="w-full flex gap-3">
+          {APIButtonTitles.map((APIButton) => (
+            <div key={APIButton.API} className="w-full">
+              <SharedFormButton
+                switcher={APIMethods === APIButton.API}
+                buttonTitle={APIButton.apiSwitchTitle}
+                handleButtonOnClick={() => setAPIMethods(APIButton.API)}
+                explanation={''}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Hedera token address */}
+        <SharedFormInputField
+          param={'hederaTokenAddress'}
+          handleInputOnChange={(e: any) => handleInputOnChange(e, 'COMMON', 'hederaTokenAddress')}
+          paramValue={commonParamValues.hederaTokenAddress}
+          paramKey={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].paramKey}
+          paramType={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputType}
+          paramSize={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputSize}
+          explanation={(htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].explanation}
+          paramClassName={
+            (htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputClassname
+          }
+          paramPlaceholder={
+            (htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputPlaceholder
+          }
+          paramFocusColor={
+            (htsMultiTokensTransferParamFields as any)['hederaTokenAddress'].inputFocusBorderColor
+          }
+        />
+
+        {/* Add tokenAddresses */}
+        <div className="flex flex-col gap-0">
+          <button
+            onClick={() =>
+              handleModifyTransferRecords(
+                'ADD',
+                undefined,
+                APIMethods === 'FUNGIBLE' ? setFungibleParamValues : setNonFungibleParamValues,
+                undefined,
+                APIMethods === 'FUNGIBLE'
+                  ? generateInitialFungibleParamValue()
+                  : generateInitialNonFungibleParamValue()
+              )
+            }
+            className="w-full rounded border border-white/30 text-center text-sm hover:border-hedera-purple hover:text-hedera-purple transition duration-300 hover:cursor-pointer "
+          >
+            Add more transfer records
+          </button>
+        </div>
+
+        {/* Fungible Tokens Form */}
+        {APIMethods === 'FUNGIBLE' && (
+          <>
+            {fungibleParamValues.map((paramValue) => (
+              <TransferRecordForm
+                key={paramValue.fieldKey}
+                paramValue={paramValue}
+                paramValues={fungibleParamValues}
+                setParamValues={setFungibleParamValues}
+                handleInputOnChange={handleInputOnChange}
+                handleModifyTransferRecords={handleModifyTransferRecords}
+                paramKeys={['receiverAddress', 'amount'] as ('receiverAddress' | 'amount')[]}
+              />
+            ))}
+          </>
+        )}
+
+        {/* Non Fungible Tokens Form */}
+        {APIMethods === 'NON_FUNGIBLE' && (
+          <>
+            {nonFungibleParamValues.map((paramValue) => (
+              <TransferRecordForm
+                key={paramValue.fieldKey}
+                paramValue={paramValue}
+                paramValues={nonFungibleParamValues}
+                setParamValues={setNonFungibleParamValues}
+                handleInputOnChange={handleInputOnChange}
+                handleModifyTransferRecords={handleModifyTransferRecords}
+                paramKeys={
+                  ['senderAddress', 'receiverAddress', 'serialNumber'] as (
+                    | 'senderAddress'
+                    | 'receiverAddress'
+                    | 'serialNumber'
+                  )[]
+                }
+              />
+            ))}
+          </>
+        )}
+
+        {/* Execute buttons */}
+        {APIButtonTitles.map((APIButton) => {
+          if (APIMethods === APIButton.API) {
+            return (
+              <SharedExecuteButtonWithFee
+                key={APIButton.API}
+                isLoading={isLoading[APIButton.API]}
+                feeType={'GAS'}
+                paramValues={commonParamValues.feeValue}
+                placeHolder={'Gas limit...'}
+                executeBtnTitle={APIButton.executeTitle}
+                handleInputOnChange={(e) => handleInputOnChange(e, 'COMMON', 'feeValue')}
+                explanation={'Gas limit for the transaction'}
+                handleInvokingAPIMethod={() => handleTransferMultipleTokens(APIButton.API)}
+              />
+            );
+          }
+        })}
+      </div>
+
+      {/* transaction results table */}
+      {transactionResults.length > 0 && (
+        <TransactionResultTable
+          API="TokenCreate"
+          hederaNetwork={hederaNetwork}
+          transactionResults={transactionResults}
+          TRANSACTION_PAGE_SIZE={TRANSACTION_PAGE_SIZE}
+          setTransactionResults={setTransactionResults}
+          currentTransactionPage={currentTransactionPage}
+          setCurrentTransactionPage={setCurrentTransactionPage}
+          transactionResultStorageKey={transactionResultStorageKey}
+          paginatedTransactionResults={paginatedTransactionResults}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferMultipleTokens;
diff --git a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx
index 04bb81979..731e88591 100644
--- a/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx
+++ b/system-contract-dapp-playground/src/components/contract-interaction/hts/token-transfer-contract/method/transferSingleToken/index.tsx
@@ -43,7 +43,7 @@ interface PageProps {
   baseContract: Contract;
 }
 
-type API_NAMES = 'FUNGIBLE' | 'NON_FUNGIBLE' | 'FUNGIBLE_FROM' | 'NFT_FROM';
+type API_NAMES = 'FUNGIBLE' | 'NFT' | 'FUNGIBLE_FROM' | 'NFT_FROM';
 
 const TransferSingleToken = ({ baseContract }: PageProps) => {
   // general states
@@ -61,16 +61,16 @@ const TransferSingleToken = ({ baseContract }: PageProps) => {
     'feeValue',
   ];
   const [isLoading, setIsLoading] = useState({
+    NFT: false,
     FUNGIBLE: false,
-    NON_FUNGIBLE: false,
-    FUNGIBLE_FROM: false,
     NFT_FROM: false,
+    FUNGIBLE_FROM: false,
   });
   const APIButtonTitles: { API: API_NAMES; executeTitle: string }[] = [
+    { API: 'NFT', executeTitle: 'Transfer NFT' },
     { API: 'FUNGIBLE', executeTitle: 'Transfer Fungible' },
-    { API: 'NON_FUNGIBLE', executeTitle: 'Transfer NFT' },
-    { API: 'FUNGIBLE_FROM', executeTitle: 'Transfer Fungible From' },
     { API: 'NFT_FROM', executeTitle: 'Transfer NFT From' },
+    { API: 'FUNGIBLE_FROM', executeTitle: 'Transfer Fungible From' },
   ];
   const initialParamValues = {
     feeValue: '',
diff --git a/system-contract-dapp-playground/src/utils/common/constants.ts b/system-contract-dapp-playground/src/utils/common/constants.ts
index 1ee56f878..c0d839bcd 100644
--- a/system-contract-dapp-playground/src/utils/common/constants.ts
+++ b/system-contract-dapp-playground/src/utils/common/constants.ts
@@ -26,8 +26,8 @@ import PrngSystemContract from '@hashgraph-smartcontract/artifacts/contracts/uti
 import TokenQueryContract from '@hashgraph-smartcontract/artifacts/contracts/hts-precompile/examples/token-query/TokenQueryContract.sol/TokenQueryContract.json';
 import ExchangeRatePrecompile from '@hashgraph-smartcontract/artifacts/contracts/exchange-rate-precompile/ExchangeRatePrecompile.sol/ExchangeRatePrecompile.json';
 import TokenTransferContract from '@hashgraph-smartcontract/artifacts/contracts/hts-precompile/examples/token-transfer/TokenTransferContract.sol/TokenTransferContract.json';
-import TokenManagementContract from '@hashgraph-smartcontract/artifacts/contracts/hts-precompile/examples/token-manage/TokenManagementContract.sol/TokenManagementContract.json';
 import TokenCreateCustomContract from '@hashgraph-smartcontract/artifacts/contracts/hts-precompile/examples/token-create/TokenCreateCustom.sol/TokenCreateCustomContract.json';
+import TokenManagementContract from '@hashgraph-smartcontract/artifacts/contracts/hts-precompile/examples/token-manage/TokenManagementContract.sol/TokenManagementContract.json';
 
 /** @notice Hedera Smart Contract official github url */
 export const HEDERA_SMART_CONTRACT_OFFICIAL_GITHUB_URL =
@@ -39,13 +39,6 @@ export const HEDERA_OFFICIAL_HIPS_URL = 'https://hips.hedera.com/';
 /** @notice hashcan baseURL */
 export const HASHSCAN_BASE_URL = 'https://hashscan.io';
 
-/** @notice Hedera branding colors */
-export const HEDERA_BRANDING_COLORS = {
-  violet: '#82ACF9',
-  purple: '#A98DF4',
-  panel: '#374151',
-};
-
 /** @notice information about Hedera social media */
 export const HEDERA_SOCIAL_MEDIA = [
   {
@@ -295,3 +288,34 @@ export const HEDERA_SMART_CONTRACTS_ASSETS = {
     ],
   },
 };
+
+/** @notice Hedera branding colors */
+export const HEDERA_BRANDING_COLORS = {
+  violet: '#82ACF9',
+  purple: '#A98DF4',
+  panel: '#374151',
+};
+
+/** @notice Input box sizes */
+export const HEDERA_CHAKRA_INPUT_BOX_SIZES = {
+  'extra-small': 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+};
+
+/** @notice Input box shared class name */
+export const HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME = 'w-full border-white/30';
+
+/**
+ * @notice a shared object for parameters input fields
+ */
+export const HEDERA_SHARED_PARAM_INPUT_FIELDS = {
+  paramKey: '',
+  inputType: '',
+  explanation: '',
+  inputPlaceholder: '',
+  inputSize: HEDERA_CHAKRA_INPUT_BOX_SIZES.medium,
+  inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
+  inputClassname: HEDERA_CHAKRA_INPUT_BOX_SHARED_CLASSNAME,
+};
diff --git a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-create-custom/constant.ts b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-create-custom/constant.ts
index 32811dd86..b0481093c 100644
--- a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-create-custom/constant.ts
+++ b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-create-custom/constant.ts
@@ -24,7 +24,7 @@ import {
   IHederaTokenServiceKeyValue,
   IHederaTokenServiceKeyTypeBitValue,
 } from '@/types/contract-interactions/HTS';
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
+import { HEDERA_SHARED_PARAM_INPUT_FIELDS } from '@/utils/common/constants';
 
 /**
  * @notice an object to map key type to the specific bit value
@@ -58,76 +58,60 @@ export const DEFAULT_IHTS_KEY_VALUE: IHederaTokenServiceKeyValue = {
  */
 export const htsTokenCreateParamFields = {
   name: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
     inputPlaceholder: 'Name of the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'name',
     explanation: 'represents the name by which the token should be known',
   },
   symbol: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Ticket symbol of the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'symbol',
+    inputPlaceholder: 'Ticket symbol of the token...',
     explanation: 'represents the ticket symbol of the token',
   },
   memo: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'memo',
     inputType: 'text',
     inputPlaceholder: 'A memo associated with the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'memo',
     explanation: 'represents an optional note that can be attached to a token transfer',
   },
   initSupply: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Initial supply...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'initSupply',
+    inputPlaceholder: 'Initial supply...',
     explanation: 'represents the starting amount of tokens available when the token is deployed',
   },
   maxSupply: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Max supply...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'maxSupply',
+    inputPlaceholder: 'Max supply...',
     explanation: 'defines the maximum number of tokens that can ever exist for the token',
   },
   decimals: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
     inputPlaceholder: 'Decimal places...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'decimals',
     explanation: 'Determines token divisibility and decimal precision',
   },
   treasury: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'The token treasury account ID...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'treasury',
+    inputPlaceholder: 'The token treasury account ID...',
     explanation:
       'represents the account will receive the specified initial supply or the newly minted NFTs',
   },
   feeTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'The denomination token ID...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'feeTokenAddress',
+    inputPlaceholder: 'The denomination token ID...',
     explanation: 'represents the ID of token that is used for fixed fee denomination',
   },
   customFee: {
@@ -151,40 +135,32 @@ export const htsTokenCreateParamFields = {
  */
 export const htsTokenMintParamFields = {
   tokenAddressToMint: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Hedera token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'tokenAddressToMint',
+    inputPlaceholder: 'Hedera token address...',
     explanation: 'represents the address of the Hedera token for which minting will be performed.',
   },
   amount: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Amount to mint...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
     explanation: 'represents the amount you wish to mint for the specified Hedera token.',
   },
   metadata: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Metadata...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'metadata',
+    inputPlaceholder: 'Metadata...',
     explanation:
       'Provide additional information about the minting process if needed. Each metadata is allocated to a new NFT.',
   },
   recipientAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'The receiver address (optional)...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'recipientAddress',
+    inputPlaceholder: 'The receiver address (optional)...',
     explanation:
       'represents the address of the receiver who will receive the amount of newly minted tokens. If leave unset, the minted tokens will be sent to the treasury account.',
   },
@@ -192,42 +168,34 @@ export const htsTokenMintParamFields = {
 
 export const htsTokenAssociateParamFields = {
   tokenAddresses: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token addresses...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'tokenAddresses',
+    inputPlaceholder: 'Token addresses...',
     explanation: 'represents the tokens to be associated with the provided account',
   },
   associatingAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Associating account...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'associatingAddress',
+    inputPlaceholder: 'Associating account...',
     explanation: 'represents the account to be associated with the provided tokens',
   },
 };
 
 export const htsGrantTokenKYCParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the token for which this account will be granted KYC.',
   },
   grantingKYCAccountAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account to grant KYC...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'grantingKYCAccountAddress',
+    inputPlaceholder: 'Account to grant KYC...',
     explanation: 'represents the account to be KYCed',
   },
 };
diff --git a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-management/constant.ts b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-management/constant.ts
index 8b9f47b36..ee2de0de5 100644
--- a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-management/constant.ts
+++ b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-management/constant.ts
@@ -23,7 +23,7 @@ import {
   IHederaTokenServiceExpiry,
   IHederaTokenServiceHederaToken,
 } from '@/types/contract-interactions/HTS';
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
+import { HEDERA_SHARED_PARAM_INPUT_FIELDS } from '@/utils/common/constants';
 
 /**
  * @notice an object for the IhederaTokenService.Expiry
@@ -52,57 +52,45 @@ export const DEFAULT_HEDERA_TOKEN_INFO_VALUE: IHederaTokenServiceHederaToken = {
 /** @notice an object holding information for the updateTokenInfo's input fields */
 export const htsUpdateTokenInfoParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for updating',
   },
   name: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'name',
     inputType: 'text',
     inputPlaceholder: 'Name of the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'name',
     explanation: 'represents the name by which the token should be known',
   },
   symbol: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Ticket symbol of the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'symbol',
+    inputPlaceholder: 'Ticket symbol of the token...',
     explanation: 'represents the ticket symbol of the token',
   },
   memo: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'memo',
     inputType: 'text',
     inputPlaceholder: 'A memo for the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'memo',
     explanation: 'represents an optional note that can be attached to a token transfer',
   },
   maxSupply: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Max supply...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'maxSupply',
+    inputPlaceholder: 'Max supply...',
     explanation: 'defines the maximum number of tokens that can ever exist for the token',
   },
   treasury: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'The token treasury account ID...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'treasury',
+    inputPlaceholder: 'The token treasury account ID...',
     explanation:
       'represents the account will receive the specified initial supply or the newly minted NFTs',
   },
@@ -126,40 +114,32 @@ export const htsUpdateTokenInfoParamFields = {
 /** @notice an object holding information for the updateTokenExpiry's input fields */
 export const htsUpdateTokenExpiryParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for updating',
   },
   second: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'second',
     inputType: 'number',
     inputPlaceholder: 'The new expiry time of the token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'second',
     explanation: 'represents the epoch second at which the token should expire',
   },
   autoRenewAccount: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'autoRenewAccount',
+    inputPlaceholder: 'Account address...',
     explanation:
       "represents the new account which will be automatically charged to renew the token's expiration",
   },
   autoRenewPeriod: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Expiry interval...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'autoRenewPeriod',
+    inputPlaceholder: 'Expiry interval...',
     explanation:
       "represents the new interval at which the auto-renew account will be charged to extend the token's expiry. The default auto-renew period is 131,500 minutes.",
   },
@@ -168,39 +148,31 @@ export const htsUpdateTokenExpiryParamFields = {
 /** @notice an object holding information for the tokenPermission's input fields */
 export const htsTokenPermissionParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for updating',
   },
   targetApprovedAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'targetApprovedAddress',
+    inputPlaceholder: 'Account address...',
     explanation: 'represents the operator of the update transaction',
   },
   amountToApprove: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Amount...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'amountToApprove',
+    inputPlaceholder: 'Amount...',
     explanation: 'represents the allocated allowance for the operator',
   },
   serialNumber: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Serial number...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'serialNumber',
+    inputPlaceholder: 'Serial number...',
     explanation: "represents the NFT's serial number to be approved for the operator",
   },
   approvedStatus: {
@@ -215,12 +187,10 @@ export const htsTokenPermissionParamFields = {
 /** @notice an object holding information for the tokenStatus's input fields */
 export const htsTokenStatusParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for updating',
   },
 };
@@ -228,30 +198,24 @@ export const htsTokenStatusParamFields = {
 /** @notice an object holding information for the tokenRelation's input fields */
 export const htsTokenRelationParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for updating',
   },
   hederaTokenAddresses: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token addresses (comma-separated)...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddresses',
+    inputPlaceholder: 'Token addresses (comma-separated)...',
     explanation: 'represents the tokens to be dissociated with the provided account',
   },
   accountAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'accountAddress',
+    inputPlaceholder: 'Account address...',
     explanation: 'represents the account address of the update transaction',
   },
 };
@@ -259,39 +223,31 @@ export const htsTokenRelationParamFields = {
 /** @notice an object holding information for the tokenDeduction's input fields */
 export const htsTokenDeductionParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for updating',
   },
   accountAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'accountAddress',
+    inputPlaceholder: 'Account address...',
     explanation: 'represents the account address of the update transaction',
   },
   amount: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'The amount of token...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
     explanation: 'represents the amount of token to be deducted from the transaction',
   },
   serialNumbers: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Serial numbers (comma-separated)...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'serialNumbers',
+    inputPlaceholder: 'Serial numbers (comma-separated)...',
     explanation: "represents the NFT's serial numbers to be deducted from the transaction",
   },
 };
diff --git a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-query/constant.ts b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-query/constant.ts
index 72986c32b..8d65230b3 100644
--- a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-query/constant.ts
+++ b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-query/constant.ts
@@ -18,26 +18,22 @@
  *
  */
 
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
+import { HEDERA_SHARED_PARAM_INPUT_FIELDS } from '@/utils/common/constants';
 
 /** @notice an object holding information for the tokenRelation's input fields */
 export const htsQueryTokenInfoParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for querying',
   },
   serialNumber: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Serial number...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'serialNumber',
+    inputPlaceholder: 'Serial number...',
     explanation: "represents the NFT's serial number to be queried",
   },
 };
@@ -45,39 +41,31 @@ export const htsQueryTokenInfoParamFields = {
 /** @notice an object holding information for the queryTokenPermission's input fields */
 export const htsQueryTokenPermissionParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for querying',
   },
   serialNumber: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Serial number...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'serialNumber',
+    inputPlaceholder: 'Serial number...',
     explanation: "represents the NFT's serial number to be queried",
   },
   ownerAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'string',
-    inputPlaceholder: 'Owner address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'ownerAddress',
+    inputPlaceholder: 'Owner address...',
     explanation: "represents the address of the token's owner",
   },
   spenderAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'string',
-    inputPlaceholder: 'Spender/Operator address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'spenderAddress',
+    inputPlaceholder: 'Spender/Operator address...',
     explanation: 'represents the spender or operator address',
   },
 };
@@ -85,21 +73,17 @@ export const htsQueryTokenPermissionParamFields = {
 /** @notice an object holding information for the queryTokenInfo's input fields */
 export const htsQueryTokenStatusParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token for querying',
   },
   accountAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'accountAddress',
+    inputPlaceholder: 'Account address...',
     explanation: 'represents the account address to check status against',
   },
 };
diff --git a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-transfer/paramFieldConstant.ts b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-transfer/paramFieldConstant.ts
index c3b3f5b09..08f21665b 100644
--- a/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-transfer/paramFieldConstant.ts
+++ b/system-contract-dapp-playground/src/utils/contract-interactions/HTS/token-transfer/paramFieldConstant.ts
@@ -18,26 +18,22 @@
  *
  */
 
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
+import { HEDERA_SHARED_PARAM_INPUT_FIELDS } from '@/utils/common/constants';
 
 /** @notice an object holding information for the queryTokenInfo's input fields */
 export const htsCryptoTransferParamFields = {
   accountID: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Account ID...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'accountID',
+    inputPlaceholder: 'Account ID...',
     explanation: 'represents the accountID that sends/receives cryptocurrency or tokens',
   },
   amount: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Amount...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
     explanation:
       'represents the the amount of tinybars (for Crypto transfers) or in the lowest denomination (for Token transfers) that the account sends(negative) or receives(positive)',
   },
@@ -47,39 +43,31 @@ export const htsCryptoTransferParamFields = {
       'If true then the transfer is expected to be an approved allowance and the accountID is expected to be the owner. The default is false (omitted).',
   },
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera Token address',
   },
   senderAccountID: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Sender ID...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'senderAccountID',
+    inputPlaceholder: 'Sender ID...',
     explanation: 'represents the accountID of the sender',
   },
   receiverAccountID: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Receiver ID...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'receiverAccountID',
+    inputPlaceholder: 'Receiver ID...',
     explanation: 'represents the accountID of the receiver',
   },
   serialNumber: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Serial number...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'serialNumber',
+    inputPlaceholder: 'Serial number...',
     explanation: 'represents the serial number of the NFT',
   },
   isApprovalB: {
@@ -92,49 +80,85 @@ export const htsCryptoTransferParamFields = {
 /** @notice an object holding information for the tokenTransfer's input fields */
 export const htsTokenTransferParamFields = {
   hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Token address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
     explanation: 'represents the Hedera token to be transfered',
   },
   senderAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Sender address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'senderAddress',
+    inputPlaceholder: 'Sender address...',
     explanation: 'represents the sender address',
   },
   receiverAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Receiver address...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'receiverAddress',
+    inputPlaceholder: 'Receiver address...',
     explanation: 'represents the receiver address',
   },
   quantity: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
-    inputPlaceholder: 'Amount | Serial number...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'quantity',
+    inputPlaceholder: 'Amount | Serial number...',
     explanation:
       'represents the amount for type FUNGIBLE_COMMON and serial number for type NON_FUNGIBLE_COMMON',
   },
   feeValue: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
+    paramKey: 'feeValue',
     inputPlaceholder: 'Gas limit...',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
+    explanation: 'represents the gas limit for the transaction',
+  },
+};
+
+/** @notice an object holding information for the tokenTransfer's input fields */
+export const htsMultiTokensTransferParamFields = {
+  hederaTokenAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    inputType: 'text',
+    paramKey: 'hederaTokenAddress',
+    inputPlaceholder: 'Token address...',
+    explanation: 'represents the Hedera token to be transfered',
+  },
+  senderAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    inputType: 'text',
+    paramKey: 'senderAddress',
+    inputPlaceholder: 'Sender address...',
+    explanation: 'represents the sender address',
+  },
+  receiverAddress: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    inputType: 'text',
+    paramKey: 'receiverAddress',
+    inputPlaceholder: 'Receiver address...',
+    explanation: 'represents the receiver address',
+  },
+  amount: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
+    inputType: 'number',
+    inputPlaceholder: 'Amount...',
+    explanation: 'represents the amount for to transfer',
+  },
+  serialNumber: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    inputType: 'number',
+    paramKey: 'serialNumber',
+    inputPlaceholder: 'Serial number...',
+    explanation: "represents the token's serialNumber to transfer",
+  },
+  feeValue: {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    inputType: 'number',
     paramKey: 'feeValue',
+    inputPlaceholder: 'Gas limit...',
     explanation: 'represents the gas limit for the transaction',
   },
 };
diff --git a/system-contract-dapp-playground/src/utils/contract-interactions/erc/constant.ts b/system-contract-dapp-playground/src/utils/contract-interactions/erc/constant.ts
index 9e9c96ba9..20352c72d 100644
--- a/system-contract-dapp-playground/src/utils/contract-interactions/erc/constant.ts
+++ b/system-contract-dapp-playground/src/utils/contract-interactions/erc/constant.ts
@@ -17,145 +17,115 @@
  * limitations under the License.
  *
  */
-import { HEDERA_BRANDING_COLORS } from '@/utils/common/constants';
+import { HEDERA_SHARED_PARAM_INPUT_FIELDS } from '@/utils/common/constants';
 
 export const mintParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
     inputPlaceholder: 'Recipient address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'recipient',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'number',
     inputPlaceholder: 'Token amount..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'amount',
   },
 ];
 
 export const approveParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Spender address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'spender',
+    inputPlaceholder: 'Spender address..',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Allowance amount..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
   },
 ];
 
 export const allowanceParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'owner',
     inputType: 'text',
     inputPlaceholder: 'Owner address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'owner',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Spender address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'spender',
+    inputPlaceholder: 'Spender address..',
   },
 ];
 
 export const increaseAllowanceParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Spender address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'spender',
+    inputPlaceholder: 'Spender address..',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Allowance amount..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
   },
 ];
 
 export const decreaseAllowanceParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Spender address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'spender',
+    inputPlaceholder: 'Spender address..',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Allowance amount..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
   },
 ];
 
 export const transferParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Recipient address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'recipient',
+    inputPlaceholder: 'Recipient address..',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Token amount..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
   },
 ];
 
 export const transferFromParamFields = [
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'owner',
     inputType: 'text',
     inputPlaceholder: 'Token owner address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'owner',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
     inputType: 'text',
-    inputPlaceholder: 'Recipient address..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
     paramKey: 'recipient',
+    inputPlaceholder: 'Recipient address..',
   },
   {
+    ...HEDERA_SHARED_PARAM_INPUT_FIELDS,
+    paramKey: 'amount',
     inputType: 'number',
     inputPlaceholder: 'Token amount..',
-    inputSize: 'md',
-    inputFocusBorderColor: HEDERA_BRANDING_COLORS.purple,
-    inputClassname: 'w-full border-white/30',
-    paramKey: 'amount',
   },
 ];