diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
index 82512ea97..bf16a56f3 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -2,7 +2,7 @@ import { useTheme } from "next-themes";
 import { useAccount, useSwitchChain } from "wagmi";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
 import { getNetworkColor } from "~~/hooks/scaffold-eth";
-import { AllowedChainIds, getTargetNetworks } from "~~/utils/scaffold-eth";
+import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
 const allowedNetworks = getTargetNetworks();
 
@@ -34,7 +34,7 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
                 Switch to{" "}
                 <span
                   style={{
-                    color: getNetworkColor(allowedNetwork.id as AllowedChainIds, isDarkMode),
+                    color: getNetworkColor(allowedNetwork, isDarkMode),
                   }}
                 >
                   {allowedNetwork.name}
diff --git a/packages/nextjs/hooks/scaffold-eth/useAllowedChain.ts b/packages/nextjs/hooks/scaffold-eth/useAllowedChain.ts
index 161a4f6e0..610522d52 100644
--- a/packages/nextjs/hooks/scaffold-eth/useAllowedChain.ts
+++ b/packages/nextjs/hooks/scaffold-eth/useAllowedChain.ts
@@ -2,7 +2,7 @@ import scaffoldConfig from "~~/scaffold.config";
 import { useGlobalState } from "~~/services/store/store";
 import { AllowedChainIds } from "~~/utils/scaffold-eth";
 
-export function useAllowedChain(chainId: AllowedChainIds) {
+export function useAllowedChain(chainId?: AllowedChainIds) {
   const targetNetwork = useGlobalState(({ targetNetwork }) => targetNetwork);
   return scaffoldConfig.targetNetworks.find(targetNetwork => targetNetwork.id === chainId) ?? targetNetwork;
 }
diff --git a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts
index c4732d735..e8e0f9dc0 100644
--- a/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts
+++ b/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts
@@ -1,10 +1,11 @@
+import { useAllowedChain } from "./useAllowedChain";
 import { useTargetNetwork } from "./useTargetNetwork";
 import { useTheme } from "next-themes";
-import { AllowedChainIds } from "~~/utils/scaffold-eth";
+import { AllowedChainIds, ChainWithAttributes } from "~~/utils/scaffold-eth";
 
 export const DEFAULT_NETWORK_COLOR: [string, string] = ["#666666", "#bbbbbb"];
 
-export function getNetworkColor(network: AllowedChainIds, isDarkMode: boolean) {
+export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolean) {
   const colorConfig = network.color ?? DEFAULT_NETWORK_COLOR;
   return Array.isArray(colorConfig) ? (isDarkMode ? colorConfig[1] : colorConfig[0]) : colorConfig;
 }
@@ -16,7 +17,8 @@ export const useNetworkColor = (chainId?: AllowedChainIds) => {
   const { resolvedTheme } = useTheme();
   const { targetNetwork } = useTargetNetwork();
 
+  const chain = useAllowedChain(chainId);
   const isDarkMode = resolvedTheme === "dark";
 
-  return getNetworkColor(chainId ? chainId : (targetNetwork.id as AllowedChainIds), isDarkMode);
+  return getNetworkColor(chain ? chain : targetNetwork, isDarkMode);
 };
diff --git a/packages/nextjs/utils/scaffold-eth/networks.ts b/packages/nextjs/utils/scaffold-eth/networks.ts
index 649ed367a..cb27f6af8 100644
--- a/packages/nextjs/utils/scaffold-eth/networks.ts
+++ b/packages/nextjs/utils/scaffold-eth/networks.ts
@@ -11,7 +11,7 @@ type ChainAttributes = {
 
 export type ChainWithAttributes = chains.Chain & Partial<ChainAttributes>;
 export type TargetNetworks = typeof scaffoldConfig.targetNetworks;
-export type AllowedChainIds = TargetNetworks[number]["id"] & Partial<ChainAttributes>;
+export type AllowedChainIds = TargetNetworks[number]["id"];
 
 // export type ConfiguredChains = (typeof scaffoldConfig)["targetNetworks"];