diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
index 0b3808897..5586736bf 100644
--- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
+++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
@@ -65,7 +65,9 @@ export default function Page({
   const proposalData = data?.cvproposal;
   const metadata = proposalData?.metadata;
   const proposalIdNumber =
-    !!proposalData ? BigInt(proposalData.proposalNumber) : undefined;
+    proposalData?.proposalNumber ?
+      BigInt(proposalData.proposalNumber)
+    : undefined;
 
   const { publish } = usePubSubContext();
   const chainId = useChainIdFromPath();
@@ -158,48 +160,53 @@ export default function Page({
             <div>
               <div className="mb-4 flex flex-col items-start gap-4 sm:mb-2 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
                 <h2>
-                  {ipfsResult?.title} #{proposalIdNumber}
+                  {ipfsResult?.title} #{proposalData?.proposalNumber}
                 </h2>
                 <Badge type={proposalType} />
               </div>
               <div className="flex items-center justify-between gap-4 sm:justify-start">
                 <Badge status={proposalData.proposalStatus} />
-                <p className="font-semibold">
-                  {prettyTimestamp(proposalData?.createdAt ?? 0)}
+                <p className="">
+                  Created:{" "}
+                  <span className="font-semibold">
+                    {prettyTimestamp(proposalData?.createdAt ?? 0)}
+                  </span>
                 </p>
               </div>
             </div>
             <p>{ipfsResult?.description}</p>
-            <div className="flex flex-col gap-2">
-              {!isSignalingType && (
-                <>
-                  <Statistic
-                    label={"requested amount"}
-                    icon={<InformationCircleIcon />}
-                  >
-                    <DisplayNumber
-                      number={formatUnits(requestedAmount, 18)}
-                      tokenSymbol={tokenSymbol}
-                      compact={true}
-                      className="font-bold text-black"
-                    />
-                  </Statistic>
-                  <Statistic label={"beneficiary"} icon={<UserIcon />}>
-                    <EthAddress address={beneficiary} actions="copy" />
-                  </Statistic>
-                </>
-              )}
-              <Statistic label={"created by"} icon={<UserIcon />}>
-                <EthAddress address={submitter} actions="copy" />
-              </Statistic>
+            <div className="flex justify-between">
+              <div className="flex flex-col gap-2">
+                {!isSignalingType && (
+                  <>
+                    <Statistic
+                      label={"requested amount"}
+                      icon={<InformationCircleIcon />}
+                    >
+                      <DisplayNumber
+                        number={formatUnits(requestedAmount, 18)}
+                        tokenSymbol={tokenSymbol}
+                        compact={true}
+                        className="font-bold text-black"
+                      />
+                    </Statistic>
+                    <Statistic label={"beneficiary"} icon={<UserIcon />}>
+                      <EthAddress address={beneficiary} actions="copy" />
+                    </Statistic>
+                  </>
+                )}
+                <Statistic label={"created by"} icon={<UserIcon />}>
+                  <EthAddress address={submitter} actions="copy" />
+                </Statistic>
+              </div>
+              <div className="flex items-end">
+                <DisputeButton
+                  proposalData={{ ...proposalData, ...ipfsResult }}
+                />
+              </div>
             </div>
           </div>
         </div>
-        <div className="w-full justify-end flex gap-4">
-          <div className="flex w-full justify-end">
-            <DisputeButton proposalData={{ ...proposalData, ...ipfsResult }} />
-          </div>
-        </div>
       </header>
       <section className="section-layout">
         {status && status !== "active" && status !== "disputed" ?
@@ -211,7 +218,26 @@ export default function Page({
             : `Proposal as been ${status}.`}
           </h4>
         : <>
-            <h2>Metrics</h2>
+            <div className="flex justify-between">
+              <h2>Metrics</h2>
+              {status === "active" && !isSignalingType && (
+                <Button
+                  onClick={() =>
+                    writeDistribute?.({
+                      args: [
+                        [],
+                        encodedDataProposalId(proposalIdNumber),
+                        "0x0",
+                      ],
+                    })
+                  }
+                  disabled={currentConvictionPct < thresholdPct}
+                  tooltip="Proposal not executable"
+                >
+                  Execute
+                </Button>
+              )}
+            </div>
             <ConvictionBarChart
               currentConvictionPct={currentConvictionPct}
               thresholdPct={thresholdPct}
@@ -221,21 +247,6 @@ export default function Page({
             />
           </>
         }
-        <div className="absolute top-8 right-10">
-          {status === "active" && !isSignalingType && (
-            <Button
-              onClick={() =>
-                writeDistribute?.({
-                  args: [[], encodedDataProposalId(proposalIdNumber), "0x0"],
-                })
-              }
-              disabled={currentConvictionPct < thresholdPct}
-              tooltip="Proposal not executable"
-            >
-              Execute
-            </Button>
-          )}
-        </div>
       </section>
     </div>
   );
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/create-proposal/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/create-proposal/page.tsx
index d70703561..0139d4d9f 100644
--- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/create-proposal/page.tsx
+++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/create-proposal/page.tsx
@@ -47,12 +47,10 @@ export default function Page({
   return (
     <div className="page-layout">
       <section className="section-layout">
-        <div className="text-center sm:mt-5">
-          <h2 className="text-xl font-semibold leading-6 text-gray-900">
-            Create a Proposal in Pool #{poolId}
-          </h2>
-          <div className="mt-1">
-            <h4 className="text-sm">{metadata.title}</h4>
+        <div className="text-center sm:mt-5 mb-12">
+          <h2 className="mb-2">Create a Proposal in Pool #{poolId}</h2>
+          <div className="">
+            <h4 className="">{metadata.title}</h4>
           </div>
         </div>
         <ProposalForm
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/create-pool/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/create-pool/page.tsx
index 329b85e69..7e1840ee9 100644
--- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/create-pool/page.tsx
+++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/create-pool/page.tsx
@@ -27,10 +27,8 @@ export default function Page({
   return result ?
       <div className="page-layout">
         <section className="section-layout">
-          <div className="text-center sm:mt-5">
-            <h2 className="text-xl font-semibold leading-6 text-gray-900">
-              Create a Pool in {communityName} community
-            </h2>
+          <div className="text-center sm:mt-5 mb-12">
+            <h2 className="">Create a Pool in {communityName} community</h2>
           </div>
           <PoolForm
             alloAddr={alloAddr}
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/create-community/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/create-community/page.tsx
index 97df58350..050e06842 100644
--- a/apps/web/app/(app)/gardens/[chain]/[garden]/create-community/page.tsx
+++ b/apps/web/app/(app)/gardens/[chain]/[garden]/create-community/page.tsx
@@ -39,12 +39,12 @@ export default function Page({
   return tokenGarden ?
       <div className="page-layout">
         <section className="section-layout">
-          <div className="text-center sm:mt-5">
-            <h2 className="text-xl font-semibold leading-6 text-gray-900">
+          <div className="text-center sm:mt-5 mb-12">
+            <h2 className="mb-2">
               Welcome to the {tokenGarden.symbol} Community Form!
             </h2>
-            <div className="mt-1">
-              <p className="text-sm">
+            <div className="">
+              <p className="">
                 Create a vibrant community around the {tokenGarden.name} by
                 providing the necessary details below.
               </p>
diff --git a/apps/web/components/Button.tsx b/apps/web/components/Button.tsx
index 96ad71906..b0513687f 100644
--- a/apps/web/components/Button.tsx
+++ b/apps/web/components/Button.tsx
@@ -79,18 +79,22 @@ export function Button({
   icon,
   type = "button",
 }: ButtonProps) {
-  const buttonContent =
-    isLoading ? <span className="loading loading-spinner" /> : children;
-
   const buttonElement = (
     <button
       type={type}
       className={`${btnStyles[btnStyle][disabled ? "disabled" : color]}
-      flex cursor-pointer items-center justify-center gap-2 rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed ${styles}`}
+      flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed ${styles}`}
       onClick={onClick}
       disabled={disabled || isLoading}
     >
-      {icon && icon} {buttonContent}
+      <div
+        className={`${isLoading ? "invisible" : "visible"} flex gap-2 items-center`}
+      >
+        {icon && icon} {children}
+      </div>
+      <span
+        className={`loading loading-spinner absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${isLoading ? "block" : "hidden"}`}
+      />
     </button>
   );
 
diff --git a/apps/web/components/ConnectWalletButton.tsx b/apps/web/components/ConnectWalletButton.tsx
index 34c474b91..f75cd913b 100644
--- a/apps/web/components/ConnectWalletButton.tsx
+++ b/apps/web/components/ConnectWalletButton.tsx
@@ -151,12 +151,10 @@ export function ConnectWallet() {
                               </div>
                               <div className="flex justify-between py-1">
                                 <p className="subtitle2">Balance</p>
-
                                 <DisplayNumber
                                   number={(token?.formatted ?? 0).toString()}
                                   tokenSymbol={token?.symbol}
                                   className="text-primary-content"
-                                  compact={true}
                                 />
                               </div>
                             </Menu.Item>
@@ -199,17 +197,6 @@ export function ConnectWallet() {
                 </Menu>
               );
             })()}
-            {urlChainId === chain?.id && tokenUrlAddress !== undefined && (
-              <div className="py-2 flex flex-col gap-0.5">
-                <p className="text-xs font-medium">Balance</p>
-                <DisplayNumber
-                  number={(token?.formatted ?? 0).toString()}
-                  tokenSymbol={token?.symbol}
-                  className="text-primary-content"
-                  compact={true}
-                />
-              </div>
-            )}
           </>
         );
       }}
diff --git a/apps/web/components/DisputeButton.tsx b/apps/web/components/DisputeButton.tsx
index 7d80e883f..aac422bda 100644
--- a/apps/web/components/DisputeButton.tsx
+++ b/apps/web/components/DisputeButton.tsx
@@ -155,13 +155,17 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
 
   async function handleSubmit() {
     setIsLoading(true);
-    const reasonHash = await ipfsJsonUpload({ reason }, "disputeReason");
-    if (!reasonHash) {
-      return;
+    try {
+      const reasonHash = await ipfsJsonUpload({ reason }, "disputeReason");
+      if (!reasonHash) {
+        return;
+      }
+      await writeDisputeProposalAsync({
+        args: [BigInt(proposalData.proposalNumber), reasonHash, "0x0"],
+      });
+    } catch (error) {
+      setIsLoading(false);
     }
-    await writeDisputeProposalAsync({
-      args: [BigInt(proposalData.proposalNumber), reasonHash, "0x0"],
-    });
     setIsLoading(false);
   }
 
@@ -315,7 +319,6 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
               />
             )}
           </div>
-
           <div className="flex gap-2">
             <Button
               onClick={() => setIsModalOpened(false)}
@@ -324,7 +327,6 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
             >
               Cancel
             </Button>
-
             <Button
               onClick={handleSubmit}
               color="danger"
@@ -349,26 +351,26 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
 
   return (
     <>
-      {ProposalStatus[proposalData?.proposalStatus] === "active" ||
-        (ProposalStatus[proposalData?.proposalStatus] === "disputed" && (
-          <>
-            <Button
-              color="danger"
-              btnStyle="outline"
-              onClick={() => setIsModalOpened(true)}
-            >
-              {isDisputed ? "Open dispute" : "Dispute"}
-            </Button>
-            <Modal
-              title={`Disputed Proposal: ${proposalData.title} #${proposalData.proposalNumber}`}
-              onClose={() => setIsModalOpened(false)}
-              isOpen={isModalOpened}
-            >
-              {content}
-              {buttons}
-            </Modal>
-          </>
-        ))}
+      {(ProposalStatus[proposalData?.proposalStatus] === "active" ||
+        ProposalStatus[proposalData?.proposalStatus] === "disputed") && (
+        <>
+          <Button
+            color="danger"
+            btnStyle="outline"
+            onClick={() => setIsModalOpened(true)}
+          >
+            {isDisputed ? "Open dispute" : "Dispute"}
+          </Button>
+          <Modal
+            title={`Disputed Proposal: ${proposalData.title} #${proposalData.proposalNumber}`}
+            onClose={() => setIsModalOpened(false)}
+            isOpen={isModalOpened}
+          >
+            {content}
+            {buttons}
+          </Modal>
+        </>
+      )}
     </>
   );
 };
diff --git a/apps/web/components/Forms/CommunityForm.tsx b/apps/web/components/Forms/CommunityForm.tsx
index 7d5ce9127..49e591ed5 100644
--- a/apps/web/components/Forms/CommunityForm.tsx
+++ b/apps/web/components/Forms/CommunityForm.tsx
@@ -43,7 +43,7 @@ type FormRowTypes = {
   parse?: (value: any) => string;
 };
 
-const ethereumAddressRegEx = /^(0x)?[0-9a-fA-F]{40}$/;
+const ethereumAddressRegEx = /^0x[a-fA-F0-9]{40}$/;
 
 export const CommunityForm = ({
   chainId,
diff --git a/apps/web/components/Forms/FormInput.tsx b/apps/web/components/Forms/FormInput.tsx
index a2c0767d1..14051fe49 100644
--- a/apps/web/components/Forms/FormInput.tsx
+++ b/apps/web/components/Forms/FormInput.tsx
@@ -91,7 +91,7 @@ export function FormInput({
         {children}
       </div>
       {errors && (
-        <p className="text-red mt-2 text-sm">
+        <p className="text-error mt-2 text-sm font-semibold ml-1">
           {errors[registerKey]?.message || ""}
         </p>
       )}
diff --git a/apps/web/components/Forms/FormPreview.tsx b/apps/web/components/Forms/FormPreview.tsx
index 3ee58c435..4a82a8708 100644
--- a/apps/web/components/Forms/FormPreview.tsx
+++ b/apps/web/components/Forms/FormPreview.tsx
@@ -19,32 +19,15 @@ export function FormPreview({
     return <>Error no Data</>;
   }
 
-  // description or covenant
-  {
-    /* <h3 className="text-sm font-medium leading-6 text-gray-900">
-Covenant
-</h3>
-<p className="text-md max-h-56 overflow-y-auto rounded-xl border p-2 leading-7">
-{covenant}
-</p> */
-  }
-
   return (
     <>
-      {/* <div className="divider-default divider" /> */}
-      <div className="px-4 sm:px-0 py-4">
-        <h4 className="mt-0 max-w-2xl leading-6 text-gray-600">
-          {previewTitle}
-        </h4>
+      <div className="px-4 sm:px-0 mb-12 mt-16">
+        <p className="subtitle font-medium">{previewTitle}</p>
       </div>
       {title && description && (
-        <div className="my-6 flex flex-col items-center">
-          <h4 className="text-xl font-medium leading-6 text-gray-900">
-            {title}
-          </h4>
-          <p className="text-md max-h-56 overflow-y-auto rounded-xl text-center leading-7">
-            {description}
-          </p>
+        <div className="my-8 flex flex-col">
+          <h3 className="mb-4">{title}</h3>
+          <p className="">{description}</p>
         </div>
       )}
 
diff --git a/apps/web/components/Modal.tsx b/apps/web/components/Modal.tsx
index fb3eb8d46..cea078a9c 100644
--- a/apps/web/components/Modal.tsx
+++ b/apps/web/components/Modal.tsx
@@ -22,15 +22,29 @@ export function Modal({
   const dialogRef = useRef<HTMLDialogElement>(null);
 
   useEffect(() => {
+    const dialogElement = dialogRef.current;
+
     if (isOpen) {
-      dialogRef.current?.showModal();
+      dialogElement?.showModal();
     } else {
-      dialogRef.current?.close();
+      dialogElement?.close();
     }
-  }, [isOpen]);
+
+    const handleDialogClose = () => {
+      if (!dialogElement?.open) {
+        onClose();
+      }
+    };
+
+    dialogElement?.addEventListener("close", handleDialogClose);
+
+    return () => {
+      dialogElement?.removeEventListener("close", handleDialogClose);
+    };
+  }, [isOpen, onClose]);
 
   const handleClose = () => {
-    onClose?.();
+    onClose();
     dialogRef.current?.close();
   };
 
diff --git a/apps/web/components/PoolHeader.tsx b/apps/web/components/PoolHeader.tsx
index f9e3aa883..86095c1f9 100644
--- a/apps/web/components/PoolHeader.tsx
+++ b/apps/web/components/PoolHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   BoltIcon,
   ChartBarIcon,
@@ -154,7 +154,7 @@ export default function PoolHeader({
     abi: abiWithErrors(registryCommunityABI),
     contractName: "Registry Community",
     functionName: "addStrategyByPoolId",
-    fallbackErrorMessage: "Error creating a pool. Please ty again.",
+    fallbackErrorMessage: "Error approving pool. Please try again.",
     args: [BigInt(poolId)],
     onConfirmations: () => {
       publish({
@@ -171,7 +171,7 @@ export default function PoolHeader({
     abi: abiWithErrors(registryCommunityABI),
     contractName: "Registry Community",
     functionName: "removeStrategyByPoolId",
-    fallbackErrorMessage: "Error creating a pool. Please ty again.",
+    fallbackErrorMessage: "Error disabling pool. Please try again.",
     args: [BigInt(poolId)],
     onConfirmations: () => {
       publish({
diff --git a/apps/web/components/ProposalCard.tsx b/apps/web/components/ProposalCard.tsx
index f48f1f935..a350fbc08 100644
--- a/apps/web/components/ProposalCard.tsx
+++ b/apps/web/components/ProposalCard.tsx
@@ -111,8 +111,9 @@ export function ProposalCard({
                     }
                   />
                   <div className="flex w-full justify-between px-2.5">
-                    {[...Array(21)].map((_) => (
-                      <span className="text-[8px]" key={"span_"}>
+                    {[...Array(21)].map((_, i) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <span className="text-[8px]" key={`span_${i}`}>
                         |
                       </span>
                     ))}
diff --git a/apps/web/components/Proposals.tsx b/apps/web/components/Proposals.tsx
index 8d70cb57c..2c83f9e5a 100644
--- a/apps/web/components/Proposals.tsx
+++ b/apps/web/components/Proposals.tsx
@@ -5,6 +5,7 @@ import {
   AdjustmentsHorizontalIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
+import { filter } from "lodash-es";
 import Link from "next/link";
 import { Address as AddressType, useAccount } from "wagmi";
 import {
@@ -30,7 +31,7 @@ import { useContractWriteWithConfirmations } from "@/hooks/useContractWriteWithC
 import { ConditionObject, useDisableButtons } from "@/hooks/useDisableButtons";
 import { useSubgraphQuery } from "@/hooks/useSubgraphQuery";
 import { alloABI, cvStrategyABI } from "@/src/generated";
-import { LightCVStrategy } from "@/types";
+import { LightCVStrategy, ProposalStatus } from "@/types";
 import { abiWithErrors } from "@/utils/abiWithErrors";
 import { encodeFunctionParams } from "@/utils/encodeFunctionParams";
 import { useErrorDetails } from "@/utils/getErrorName";
@@ -98,11 +99,18 @@ export function Proposals({
       me: wallet?.toLowerCase(),
       comm: strategy.registryCommunity.id.toLowerCase(),
     },
-    changeScope: {
-      topic: "member",
-      id: wallet,
-      type: ["add", "delete"],
-    },
+    changeScope: [
+      {
+        topic: "member",
+        id: wallet,
+        type: ["add", "delete"],
+      },
+      {
+        topic: "proposal",
+        containerId: strategy.id,
+        function: "allocate",
+      },
+    ],
     enabled: !!wallet,
   });
 
@@ -197,7 +205,11 @@ export function Proposals({
     getProposals(wallet, strategy)
       .then((res) => {
         if (res !== undefined) {
-          setProposals(res);
+          const filteredProposals = res.filter(
+            ({ status }) => ProposalStatus[status] !== "rejected",
+          );
+          console.log(filteredProposals);
+          setProposals(filteredProposals);
         } else {
           console.debug("No proposals");
         }
@@ -289,9 +301,8 @@ export function Proposals({
       publish({
         topic: "proposal",
         type: "update",
-        id: alloInfo.id,
+        containerId: strategy.id,
         function: "allocate",
-        urlChainId,
       });
     },
   });
@@ -471,7 +482,10 @@ function UserAllocationStats({ stats }: { stats: Stats[] }) {
       <h3>Your Allocation Overview</h3>
       <div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
         {stats.map((stat) => (
-          <div key={stat.id} className="section-layout sm:px-6 sm:pt-6">
+          <div
+            key={`stat_${stat.id}`}
+            className="section-layout sm:px-6 sm:pt-6"
+          >
             <div>
               <div
                 className={`radial-progress absolute rounded-full border-4 border-neutral transition-all duration-300 ease-in-out ${stat.className}`}
diff --git a/apps/web/components/Statistic.tsx b/apps/web/components/Statistic.tsx
index 9d0884d58..04c3cd4e3 100644
--- a/apps/web/components/Statistic.tsx
+++ b/apps/web/components/Statistic.tsx
@@ -14,18 +14,21 @@ export const Statistic = ({
   count,
   label,
   children,
-  className,
+  tooltip,
 }: IdentifierProps) => {
   return (
-    <div
-      className={`flex items-center gap-2 text-neutral-soft-content ${className}`}
-    >
-      {icon && <div className="h-6 w-6">{icon}</div>}
-      {(label ?? count) && (
-        <p className="first-letter:uppercase">
-          {label}: {count}
-        </p>
-      )}
+    <div className="flex items-center gap-2 text-neutral-soft-content">
+      <div
+        className={"tooltip flex cursor-default items-center max-w-sm"}
+        data-tip={tooltip}
+      >
+        {icon && <div className="mr-1">{icon}</div>}
+        {label && (
+          <p className="first-letter:uppercase">
+            {label}: {count}
+          </p>
+        )}
+      </div>
       {children}
     </div>
   );
diff --git a/apps/web/components/WalletBalance.tsx b/apps/web/components/WalletBalance.tsx
index b641ff96e..7a3c06c4d 100644
--- a/apps/web/components/WalletBalance.tsx
+++ b/apps/web/components/WalletBalance.tsx
@@ -76,10 +76,10 @@ export const WalletBalance: FC<Props> = ({
             <p className="font-medium">Your balance:</p>
             <div
               className={`tooltip ml-2 flex cursor-pointer items-center ${isEnoughBalanceRef.current ? "text-primary-content" : "text-neutral-soft-content"} `}
-              data-tip={`${isEnoughBalanceRef.current ? balance : "Insufficient balance"}`}
+              data-tip={`${isEnoughBalanceRef.current ? `${(+formatEther(data?.value ?? 0n)).toPrecision(2)} ETH` : "Insufficient balance"}`}
             >
               <DisplayNumber
-                number={(+(data?.formatted ?? 0)).toPrecision(2).toString()}
+                number={(+(data?.formatted ?? 0)).toPrecision(2)}
                 className={`font-semibold ${isEnoughBalanceRef.current ? "text-primary-content" : "text-neutral-soft-content"}`}
                 disableTooltip={true}
                 compact={true}
diff --git a/apps/web/hooks/useTransactionNotification.tsx b/apps/web/hooks/useTransactionNotification.tsx
index eb7cb489f..5f095d143 100644
--- a/apps/web/hooks/useTransactionNotification.tsx
+++ b/apps/web/hooks/useTransactionNotification.tsx
@@ -54,11 +54,16 @@ export const useTransactionNotification = ({
     let notifProps: Parameters<typeof TransactionStatusNotification>[0];
     let toastOptions: Partial<ToastOptions>;
 
-    const clickToExplorer = () =>
-      window.open(
-        `${chainDataMap[chain?.id ?? 0].explorer}/tx/${transactionData?.hash}`,
-        "_blank",
-      );
+    const clickToExplorer = () => {
+      if (transactionData?.hash) {
+        window.open(
+          `${chainDataMap[chain?.id ?? 0].explorer}/tx/${transactionData?.hash}`,
+          "_blank",
+        );
+      } else {
+        return;
+      }
+    };
 
     switch (transactionStatus) {
       case "waiting":
@@ -173,6 +178,8 @@ export const TransactionStatusNotification = ({
       break;
   }
 
+  // if error on wagmi or no tx hash then not clickable
+
   return (
     <div className="flex flex-row items-center gap-2">
       {icon && (