diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
index efb6c90b..95f77768 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx
@@ -71,10 +71,10 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
   };
 
   return (
-    <div className="flex flex-col gap-1 w-full">
-      <div className="flex items-center">
-        {paramType.name && <span className="text-xs font-medium mr-2">{paramType.name}</span>}
-        <span className="block text-xs font-extralight">{paramType.type}</span>
+    <div className="flex flex-col gap-1.5 w-full">
+      <div className="flex items-center ml-2">
+        {paramType.name && <span className="text-xs font-medium mr-2 leading-none">{paramType.name}</span>}
+        <span className="block text-xs font-extralight leading-none">{paramType.type}</span>
       </div>
       {renderInput()}
     </div>
diff --git a/packages/nextjs/components/scaffold-eth/Contract/Tuple.tsx b/packages/nextjs/components/scaffold-eth/Contract/Tuple.tsx
index 0e3175db..6000d262 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/Tuple.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/Tuple.tsx
@@ -27,9 +27,9 @@ export const Tuple = ({ abiTupleParameter, setParentForm, parentStateObjectKey }
 
   return (
     <div>
-      <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
+      <div className="collapse collapse-arrow pl-4 py-1.5 border-2 border-secondary">
         <input type="checkbox" className="min-h-fit peer" />
-        <div className="collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50">
+        <div className="collapse-title p-0 min-h-fit peer-checked:mb-2 text-secondary-content/70">
           <p className="m-0 p-0 text-[1rem]">{abiTupleParameter.internalType}</p>
         </div>
         <div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-4 collapse-content">
diff --git a/packages/nextjs/components/scaffold-eth/Contract/TupleArray.tsx b/packages/nextjs/components/scaffold-eth/Contract/TupleArray.tsx
index 1eb23c25..01f30322 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/TupleArray.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/TupleArray.tsx
@@ -97,15 +97,15 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
 
   return (
     <div>
-      <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
+      <div className="collapse collapse-arrow pl-4 py-1.5 border-2 border-secondary">
         <input type="checkbox" className="min-h-fit peer" />
-        <div className="collapse-title p-0 min-h-fit peer-checked:mb-1 text-primary-content/50">
+        <div className="collapse-title p-0 min-h-fit peer-checked:mb-1 text-secondary-content/70">
           <p className="m-0 text-[1rem]">{abiTupleParameter.internalType}</p>
         </div>
         <div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-4 collapse-content">
           {additionalInputs.map((additionalInput, additionalIndex) => (
             <div key={additionalIndex} className="space-y-1">
-              <span className="badge bg-base-300 badge-sm">
+              <span className="badge bg-secondary/60 badge-sm">
                 {depth > 1 ? `${additionalIndex}` : `tuple[${additionalIndex}]`}
               </span>
               <div className="space-y-4">
diff --git a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
index 81f4b4cd..6311c642 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
@@ -103,10 +103,10 @@ export const WriteOnlyFunctionForm = ({
         </p>
         {inputs}
         {abiFunction.stateMutability === "payable" ? (
-          <div className="flex flex-col gap-1 w-full pl-2">
-            <div className="flex items-center">
-              <span className="text-xs font-medium mr-2">value</span>
-              <span className="block text-xs font-thin">(wei)</span>
+          <div className="flex flex-col gap-1.5 w-full">
+            <div className="flex items-center ml-2">
+              <span className="text-xs font-medium mr-2 leading-none">payable value</span>
+              <span className="block text-xs font-extralight leading-none">wei</span>
             </div>
             <IntegerInput
               value={txValue}
@@ -114,7 +114,7 @@ export const WriteOnlyFunctionForm = ({
                 setDisplayedTxResult(undefined);
                 setTxValue(updatedTxValue);
               }}
-              placeholder="wei"
+              placeholder="value (wei)"
             />
           </div>
         ) : null}