diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
index 11dabc68..e5a01f9d 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -15,33 +15,35 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
   const mainChainId = useAbiNinjaState(state => state.mainChainId);
   const chains = useGlobalState(state => state.chains);
 
+  const filteredChains = chains.filter(allowedNetwork => allowedNetwork.id === mainChainId);
+  // if chainId is 31337 we render one element, since viem chains have 3 chains with same chainId.
+  const networksToRender = mainChainId === 31337 ? [filteredChains[0]] : filteredChains;
+
   return (
     <>
-      {chains
-        .filter(allowedNetwork => allowedNetwork.id === mainChainId)
-        .map(allowedNetwork => (
-          <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
-            <button
-              className="menu-item btn-sm !rounded-xl flex gap-3 py-3 whitespace-nowrap"
-              type="button"
-              onClick={() => {
-                switchChain?.({ chainId: allowedNetwork.id });
-              }}
-            >
-              <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
-              <span>
-                Switch to{" "}
-                <span
-                  style={{
-                    color: getNetworkColor(allowedNetwork, isDarkMode),
-                  }}
-                >
-                  {allowedNetwork.name}
-                </span>
+      {networksToRender.map(allowedNetwork => (
+        <li key={`${allowedNetwork.id}-${allowedNetwork.name}`} className={hidden ? "hidden" : ""}>
+          <button
+            className="menu-item btn-sm !rounded-xl flex gap-3 py-3 whitespace-nowrap"
+            type="button"
+            onClick={() => {
+              switchChain?.({ chainId: allowedNetwork.id });
+            }}
+          >
+            <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
+            <span>
+              Switch to{" "}
+              <span
+                style={{
+                  color: getNetworkColor(allowedNetwork, isDarkMode),
+                }}
+              >
+                {allowedNetwork.id === 31337 ? "Localhost" : allowedNetwork.name}
               </span>
-            </button>
-          </li>
-        ))}
+            </span>
+          </button>
+        </li>
+      ))}
     </>
   );
 };
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 269c2c48..48bd960d 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -81,7 +81,7 @@ const Home: NextPage = () => {
       setContractAbi(contractData.abi);
     }
 
-    if (network === "31337") {
+    if (network === "31337" && isAddress(verifiedContractAddress)) {
       setActiveTab(TabName.addressAbi);
       setLocalAbiContractAddress(verifiedContractAddress);
       return;
@@ -243,6 +243,7 @@ const Home: NextPage = () => {
                       <button
                         className="btn btn-primary min-h-fit h-10 px-4 text-base font-semibold border-2 hover:bg-neutral hover:text-primary"
                         onClick={() => fetchAbiFromHeimdall(localAbiContractAddress as Address)}
+                        disabled={network === "31337"}
                       >
                         {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Decompile (beta)"}
                       </button>