diff --git a/packages/website/components/ConnectToMetamaskButton.tsx b/packages/website/components/ConnectToMetamaskButton.tsx
new file mode 100644
index 00000000000..44c98f145ef
--- /dev/null
+++ b/packages/website/components/ConnectToMetamaskButton.tsx
@@ -0,0 +1,50 @@
+import { taikoChainConfig } from "../constants/taikoChainConfig";
+
+type ConnectButtonProps = {
+  network: "Sepolia" | "Taiko";
+};
+
+async function ConnectToMetamask(network: ConnectButtonProps["network"]) {
+  if (!(window as any).ethereum) {
+    alert("Metamask not detected! Install Metamask then try again.");
+  }
+  if (
+    (window as any).ethereum.networkVersion ==
+    (network === "Sepolia" ? 11155111 : 167005)
+  ) {
+    alert(`You are already connected to ${network}.`);
+  }
+  try {
+    if (network === "Sepolia") {
+      await (window as any).ethereum.request({
+        method: "wallet_switchEthereumChain",
+        params: [
+          {
+            chainId: "0xaa36a7",
+          },
+        ],
+      });
+    } else {
+      await (window as any).ethereum.request({
+        method: "wallet_addEthereumChain",
+        params: [taikoChainConfig],
+      });
+    }
+  } catch (error) {
+    alert(
+      "Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " +
+        error.message
+    );
+  }
+}
+
+export default function ConnectToMetamaskButton(props: ConnectButtonProps) {
+  return (
+    <div
+      onClick={() => ConnectToMetamask(props.network)}
+      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+    >
+      Connect to {props.network}
+    </div>
+  );
+}
diff --git a/packages/website/components/MetamaskNetworkButton.tsx b/packages/website/components/MetamaskNetworkButton.tsx
deleted file mode 100644
index 8bfb0062fc4..00000000000
--- a/packages/website/components/MetamaskNetworkButton.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-type Props = {
-  buttonText: string;
-};
-
-async function ConnectToMetamask(props: Props) {
-  if (!(window as any).ethereum) {
-    alert("Wallet not detected! Install Metamask then try again.");
-    return;
-  }
-  if(props.buttonText == "Connect to Sepolia"){
-    ConnectToSepolia();
-  }
-  if(props.buttonText == "Connect to Taiko"){
-    ConnectToTaiko();
-  }
-}
-
-async function ConnectToSepolia() {
-  if (!(window as any).ethereum) {
-    alert("Metamask not detected! Install Metamask then try again.")
-    return;
-  }
-  if ((window as any).ethereum.networkVersion == "11155111") {
-    alert("You are already connected to Sepolia (chainId 11155111).", )
-    return;
-  }
-  try{
-    await (window as any).ethereum.request({
-      method: "wallet_switchEthereumChain",
-      params: [{
-         chainId: "0xaa36a7"
-      }]
-    });
-  } catch (error) {
-    alert("Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " + error.message)
-  }
-}
-
-async function ConnectToTaiko() {
-  if ((window as any).ethereum.networkVersion == "167005") {
-    alert("You are already connected to Taiko Alpha 3 (chainId 167005).", )
-    return;
-  }
-  interface AddEthereumChainParameter {
-    chainId: string; // A 0x-prefixed hexadecimal string
-    chainName: string;
-    nativeCurrency: {
-      name: string;
-      symbol: string; // 2-6 characters long
-      decimals: 18;
-    };
-    rpcUrls: string[];
-    blockExplorerUrls?: string[];
-    // iconUrls?: string[]; // Currently ignored.
-  }
-  const taikoParams: AddEthereumChainParameter = {
-    chainId: "0x28c5d",
-    chainName: "Taiko (Alpha-3 Testnet)",
-    nativeCurrency: {
-      name: "Ether",
-      symbol: "ETH",
-      decimals: 18,
-    },
-    rpcUrls: ["https://rpc.test.taiko.xyz"],
-    blockExplorerUrls: ["https://explorer.test.taiko.xyz/"],
-    // iconUrls: [],
-  };
-  try{
-    await (window as any).ethereum.request({
-      method: "wallet_addEthereumChain",
-      params: [taikoParams],
-    });
-  } catch (error) {
-    alert("Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " + error.message)
-  } 
-}
-
-export default function ConnectToMetamaskButton(props: Props) {
-  return (
-    <div
-      onClick={() => ConnectToMetamask(props)}
-      className="hover:cursor-pointer text-neutral-900 bg-neutral-100 hover:bg-neutral-200 border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center dark:focus:ring-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700"
-    >
-      {props.buttonText}
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/packages/website/constants/taikoChainConfig.ts b/packages/website/constants/taikoChainConfig.ts
new file mode 100644
index 00000000000..c6a813a3ef7
--- /dev/null
+++ b/packages/website/constants/taikoChainConfig.ts
@@ -0,0 +1,25 @@
+interface AddEthereumChainParameter {
+  chainId: string; // A 0x-prefixed hexadecimal string
+  chainName: string;
+  nativeCurrency: {
+    name: string;
+    symbol: string; // 2-6 characters long
+    decimals: 18;
+  };
+  rpcUrls: string[];
+  blockExplorerUrls?: string[];
+  iconUrls?: string[]; // Currently ignored.
+}
+
+export const taikoChainConfig: AddEthereumChainParameter = {
+  chainId: "0x28c5d",
+  chainName: "Taiko (Alpha-3 Testnet)",
+  nativeCurrency: {
+    name: "ETH",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  rpcUrls: ["https://rpc.test.taiko.xyz"],
+  blockExplorerUrls: ["https://explorer.test.taiko.xyz/"],
+  iconUrls: [],
+};
diff --git a/packages/website/pages/docs/reference/rpc-configuration.mdx b/packages/website/pages/docs/reference/rpc-configuration.mdx
index 6d216c44090..8f7afd10c8b 100644
--- a/packages/website/pages/docs/reference/rpc-configuration.mdx
+++ b/packages/website/pages/docs/reference/rpc-configuration.mdx
@@ -1,10 +1,10 @@
-import ConnectToMetamask from 'components/MetamaskNetworkButton';
+import ConnectToMetamaskButton from 'components/ConnectToMetamaskButton';
 
 # RPC configuration
 
 ## Sepolia
-
-<ConnectToMetamask buttonText={"Connect to Sepolia"} />
+<br/>
+<ConnectToMetamaskButton network="Sepolia" />
 
 | Name               | Value                        |
 | ------------------ | ---------------------------- |
@@ -14,8 +14,8 @@ import ConnectToMetamask from 'components/MetamaskNetworkButton';
 | Block Explorer URL | https://sepolia.etherscan.io |
 
 ## Taiko
-
-<ConnectToMetamask buttonText={"Connect to Taiko"} />
+<br/>
+<ConnectToMetamaskButton network="Taiko" />
 
 | Name               | Value                           |
 | ------------------ | ------------------------------- |