diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
index 13eae1c36..451a65846 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
@@ -31,6 +31,7 @@ export const ContractReadMethods = ({ deployedContractData }: { deployedContract
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
         <ReadOnlyFunctionForm
+          abi={deployedContractData.abi as Abi}
           contractAddress={deployedContractData.address}
           abiFunction={fn}
           key={fn.name}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx
index 0e625cc0c..9d2578297 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx
@@ -37,6 +37,7 @@ export const ContractVariables = ({
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
         <DisplayVariable
+          abi={deployedContractData.abi as Abi}
           abiFunction={fn}
           contractAddress={deployedContractData.address}
           key={fn.name}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
index e42baf373..47308d252 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
@@ -36,6 +36,7 @@ export const ContractWriteMethods = ({
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }, idx) => (
         <WriteOnlyFunctionForm
+          abi={deployedContractData.abi as Abi}
           key={`${fn.name}-${idx}}`}
           abiFunction={fn}
           onChange={onChange}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
index 0604a9de4..9e4096c7f 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
@@ -13,12 +13,14 @@ type DisplayVariableProps = {
   abiFunction: AbiFunction;
   refreshDisplayVariables: boolean;
   inheritedFrom?: string;
+  abi: Abi;
 };
 
 export const DisplayVariable = ({
   contractAddress,
   abiFunction,
   refreshDisplayVariables,
+  abi,
   inheritedFrom,
 }: DisplayVariableProps) => {
   const {
@@ -28,7 +30,7 @@ export const DisplayVariable = ({
   } = useContractRead({
     address: contractAddress,
     functionName: abiFunction.name,
-    abi: [abiFunction] as Abi,
+    abi: abi,
     onError: error => {
       notification.error(error.message);
     },
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
index 2965b6e9f..69fab37a1 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
@@ -9,6 +9,7 @@ import {
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
+  getParsedError,
 } from "~~/components/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
@@ -16,20 +17,27 @@ type ReadOnlyFunctionFormProps = {
   contractAddress: Address;
   abiFunction: AbiFunction;
   inheritedFrom?: string;
+  abi: Abi;
 };
 
-export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction, inheritedFrom }: ReadOnlyFunctionFormProps) => {
+export const ReadOnlyFunctionForm = ({
+  contractAddress,
+  abiFunction,
+  inheritedFrom,
+  abi,
+}: ReadOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [result, setResult] = useState<unknown>();
 
   const { isFetching, refetch } = useContractRead({
     address: contractAddress,
     functionName: abiFunction.name,
-    abi: [abiFunction] as Abi,
+    abi: abi,
     args: getParsedContractFunctionArgs(form),
     enabled: false,
     onError: (error: any) => {
-      notification.error(error.message);
+      const parsedErrror = getParsedError(error);
+      notification.error(parsedErrror);
     },
   });
 
diff --git a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
index b86ce0f98..b3b09aff0 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
@@ -17,6 +17,7 @@ import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { notification } from "~~/utils/scaffold-eth";
 
 type WriteOnlyFunctionFormProps = {
+  abi: Abi;
   abiFunction: AbiFunction;
   onChange: () => void;
   contractAddress: Address;
@@ -24,6 +25,7 @@ type WriteOnlyFunctionFormProps = {
 };
 
 export const WriteOnlyFunctionForm = ({
+  abi,
   abiFunction,
   onChange,
   contractAddress,
@@ -43,7 +45,7 @@ export const WriteOnlyFunctionForm = ({
   } = useContractWrite({
     address: contractAddress,
     functionName: abiFunction.name,
-    abi: [abiFunction] as Abi,
+    abi: abi,
     args: getParsedContractFunctionArgs(form),
   });
 
diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
index e31941ef3..0c7d662ad 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
@@ -1,5 +1,5 @@
 import { AbiFunction, AbiParameter } from "abitype";
-import { BaseError as BaseViemError } from "viem";
+import { BaseError as BaseViemError, DecodeErrorResultReturnType } from "viem";
 
 /**
  * Generates a key based on function metadata
@@ -18,14 +18,21 @@ const getFunctionInputKey = (functionName: string, input: AbiParameter, inputInd
  * @param e - error object
  * @returns {string} parsed error string
  */
-const getParsedError = (e: any | BaseViemError): string => {
-  let message = e.message ?? "An unknown error occurred";
-
+const getParsedError = (e: any): string => {
+  let message: string = e.message ?? "An unknown error occurred";
   if (e instanceof BaseViemError) {
     if (e.details) {
       message = e.details;
     } else if (e.shortMessage) {
       message = e.shortMessage;
+      const cause = e.cause as { data?: DecodeErrorResultReturnType };
+      // if its not generic error, append custom error name and its args to message
+      if (cause.data && cause.data?.abiItem?.name !== "Error") {
+        const customErrorArgs = cause.data.args?.toString() ?? "";
+        message = `${message.replace(/reverted\.$/, "reverted with following reason:")}\n${
+          cause.data.errorName
+        }(${customErrorArgs})`;
+      }
     } else if (e.message) {
       message = e.message;
     } else if (e.name) {
diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx
index 3024c35cf..a0204c78f 100644
--- a/packages/nextjs/utils/scaffold-eth/notification.tsx
+++ b/packages/nextjs/utils/scaffold-eth/notification.tsx
@@ -55,7 +55,7 @@ const Notification = ({
         }`}
       >
         <div className="text-2xl self-start">{icon ? icon : ENUM_STATUSES[status]}</div>
-        <div className={`break-all whitespace-pre-line ${icon ? "mt-1" : ""}`}>{content}</div>
+        <div className={`overflow-x-hidden break-words whitespace-pre-line ${icon ? "mt-1" : ""}`}>{content}</div>
 
         <div className={`cursor-pointer text-lg ${icon ? "mt-1" : ""}`} onClick={() => toast.dismiss(t.id)}>
           <XMarkIcon className="w-6 cursor-pointer" onClick={() => toast.remove(t.id)} />