diff --git a/faucet-ui/src/App.js b/faucet-ui/src/App.js
index 873774d..dff7e63 100644
--- a/faucet-ui/src/App.js
+++ b/faucet-ui/src/App.js
@@ -9,70 +9,102 @@ function App() {
   const [fcContract, setFcContract] = useState();
   const [withdrawError, setWithdrawError] = useState("");
   const [withdrawSuccess, setWithdrawSuccess] = useState("");
-  const [transactionData, setTransactionData] = useState("");
+  const [transactionData, setTransactionData] = useState(
+    localStorage.getItem("transactionData") || ""
+  );
+  const [isConnected, setIsConnected] = useState(false);
+  const [isCorrectNetwork, setIsCorrectNetwork] = useState(true);
+  const [isSwitchingChain, setIsSwitchingChain] = useState(false);
 
   useEffect(() => {
     getCurrentWalletConnected();
     addWalletListener();
   }, [walletAddress]);
 
+  useEffect(() => {
+    localStorage.setItem("transactionData", transactionData);
+  }, [transactionData]);
+
   const connectWallet = async () => {
-    if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
+    if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
       try {
-        /* get provider */
-        const provider = new ethers.providers.Web3Provider(window.ethereum);
-        /* get accounts */
-        const accounts = await provider.send("eth_requestAccounts", []);
-        /* get signer */
-        setSigner(provider.getSigner());
-        /* local contract instance */
-        setFcContract(faucetContract(provider));
-        /* set active wallet address */
-        setWalletAddress(accounts[0]);
-      } catch (err) {
-        console.error(err.message);
+        if (isSwitchingChain) {
+          setIsSwitchingChain(false);
+          await window.ethereum.request({
+            method: "wallet_switchEthereumChain",
+            params: [{ chainId: "0x28c60" }],
+          });
+        } else {
+          await window.ethereum.request({
+            method: "wallet_addEthereumChain",
+            params: [
+              {
+                chainId: "0x28c60",
+                chainName: "Katla",
+                nativeCurrency: {
+                  name: "Ethereum",
+                  symbol: "ETH",
+                  decimals: 18,
+                },
+                rpcUrls: ["https://rpc.katla.taiko.xyz"],
+                blockExplorerUrls: ["https://explorer.katla.taiko.xyz/"],
+              },
+            ],
+          });
+          const provider = new ethers.providers.Web3Provider(window.ethereum);
+          const accounts = await provider.send("eth_requestAccounts", []);
+          setSigner(provider.getSigner());
+          setFcContract(faucetContract(provider));
+          setWalletAddress(accounts[0]);
+          setIsConnected(true);
+        }
+      } catch (error) {
+        console.error(error);
+        setIsConnected(false);
       }
     } else {
-      /* MetaMask is not installed */
-      console.log("Please install MetaMask");
+      console.log("MetaMask is not installed");
     }
   };
 
   const getCurrentWalletConnected = async () => {
-    if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
+    if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
       try {
-        /* get provider */
         const provider = new ethers.providers.Web3Provider(window.ethereum);
-        /* get accounts */
-        const accounts = await provider.send("eth_accounts", []);
-        if (accounts.length > 0) {
-          /* get signer */
-          setSigner(provider.getSigner());
-          /* local contract instance */
-          setFcContract(faucetContract(provider));
-          /* set active wallet address */
-          setWalletAddress(accounts[0]);
+        const chainId = await provider.send("eth_chainId");
+        if (chainId === "0x28c60") {
+          setIsCorrectNetwork(true);
+          const accounts = await provider.send("eth_accounts", []);
+          if (accounts.length > 0) {
+            setSigner(provider.getSigner());
+            setFcContract(faucetContract(provider));
+            setWalletAddress(accounts[0]);
+            setIsConnected(true);
+          }
         } else {
-          console.log("Connect to MetaMask using the Connect Wallet button");
+          setIsCorrectNetwork(false);
         }
-      } catch (err) {
-        console.error(err.message);
+      } catch (error) {
+        console.error(error);
+        setIsConnected(false);
       }
     } else {
-      /* MetaMask is not installed */
-      console.log("Please install MetaMask");
+      console.log("MetaMask is not installed");
     }
   };
 
   const addWalletListener = async () => {
-    if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
+    if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
       window.ethereum.on("accountsChanged", (accounts) => {
         setWalletAddress(accounts[0]);
       });
+      window.ethereum.on("chainChanged", () => {
+        window.location.reload();
+      });
     } else {
-      /* MetaMask is not installed */
       setWalletAddress("");
-      console.log("Please install MetaMask");
+      setIsConnected(false);
+      console.log("MetaMask is not installed");
     }
   };
 
@@ -89,6 +121,11 @@ function App() {
     }
   };
 
+  const handleSwitchChain = () => {
+    setIsSwitchingChain(true);
+    connectWallet();
+  };
+
   return (
     <div>
       <nav className="navbar">
@@ -101,13 +138,16 @@ function App() {
               <button
                 className="button is-white connect-wallet"
                 onClick={connectWallet}
+                disabled={!isCorrectNetwork || isSwitchingChain}
               >
                 <span className="is-link has-text-weight-bold">
-                  {walletAddress && walletAddress.length > 0
+                  {isConnected
                     ? `Connected: ${walletAddress.substring(
                         0,
                         6
                       )}...${walletAddress.substring(38)}`
+                    : isSwitchingChain
+                    ? "Switching Chain..."
                     : "Connect Wallet"}
                 </span>
               </button>
@@ -120,7 +160,7 @@ function App() {
           <div className="container has-text-centered main-content">
             <h1 className="title is-1">Faucet</h1>
             <p>Fast and reliable. 500 AT/12h</p>
-                  <a href="https://test.everypunks.xyz">COINFILP DAPP!</a>
+            <a href="https://test.everypunks.xyz">COINFILP DAPP!</a>
             <div className="mt-5">
               {withdrawError && (
                 <div className="withdraw-error">{withdrawError}</div>
@@ -137,13 +177,14 @@ function App() {
                     type="text"
                     placeholder="Enter your wallet address (0x...)"
                     defaultValue={walletAddress}
+                    disabled={!isConnected}
                   />
                 </div>
                 <div className="column">
                   <button
                     className="button is-link is-medium"
                     onClick={getOCTHandler}
-                    disabled={walletAddress ? false : true}
+                    disabled={!isConnected || !isCorrectNetwork}
                   >
                     GET TOKENS
                   </button>
@@ -153,9 +194,17 @@ function App() {
                 <p className="panel-heading">Transaction Data</p>
                 <div className="panel-block">
                   <p>
-                    {transactionData
-                      ? `Transaction hash: ${transactionData}`
-                      : "--"}
+                    {transactionData ? (
+                      <a
+                        href={`https://explorer.katla.taiko.xyz/tx/${transactionData}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Transaction hash: {transactionData}
+                      </a>
+                    ) : (
+                      "--"
+                    )}
                   </p>
                 </div>
               </article>
@@ -167,5 +216,4 @@ function App() {
   );
 }
 
-
 export default App;