diff --git a/app/src/js/components/AppLayout.tsx b/app/src/js/components/AppLayout.tsx
index af326be..3303472 100644
--- a/app/src/js/components/AppLayout.tsx
+++ b/app/src/js/components/AppLayout.tsx
@@ -8,7 +8,7 @@ import Form from './Form/Form';
 const AppLayout = () => (
   <Page.BlankPage>
     <Container.FlexRow className="justify-between items-center py-4 bg-brand px-4">
-      <span className="text-xl text-white">NFT WebUI</span>
+      <span className="text-xl text-white">ERC20 WebUI</span>
       <MetamaskConnect />
     </Container.FlexRow>
     <Container.PageContent className="py-8">
diff --git a/app/src/js/components/MetamaskConnect.tsx b/app/src/js/components/MetamaskConnect.tsx
index cc76119..b7788dd 100644
--- a/app/src/js/components/MetamaskConnect.tsx
+++ b/app/src/js/components/MetamaskConnect.tsx
@@ -11,11 +11,10 @@ export enum ChainId {
   Rinkeby = '0x4',
   Goerli = '0x5',
   Kovan = '0x2a',
+  Hardhat = '0x7a69',
 }
 
 const MetamaskConnect = () => {
-  const [chainId, setChainId] = React.useState<ChainId>();
-
   const {
     status,
     connect,
@@ -23,6 +22,10 @@ const MetamaskConnect = () => {
     chainId: currentChainId,
     switchChain,
   } = useMetaMask();
+  const [chainId, setChainId] = React.useState<ChainId>(
+    currentChainId as ChainId,
+  );
+
   const disabled =
     ['initializing', 'unavailable', 'connecting', 'connected'].includes(
       status,
@@ -53,6 +56,18 @@ const MetamaskConnect = () => {
     return undefined;
   };
 
+  React.useEffect(() => {
+    if (currentChainId && chainId && currentChainId !== chainId) {
+      switchChain(chainId);
+    }
+  }, [chainId, switchChain]);
+
+  React.useEffect(() => {
+    if (!chainId) {
+      setChainId(currentChainId as ChainId);
+    }
+  }, [currentChainId]);
+
   return (
     <Container.FlexRow className="items-center gap-8">
       <Select
@@ -69,6 +84,7 @@ const MetamaskConnect = () => {
         )}
         <option value={ChainId.Mainnet}>Mainnet</option>
         <option value={ChainId.Goerli}>Goerli</option>
+        <option value={ChainId.Hardhat}>Hardhat</option>
       </Select>
       <Button.Alternative
         className="my-0 !mb-0"
diff --git a/app/src/js/web3/contracts/MyToken.ts b/app/src/js/web3/contracts/MyToken.ts
index 08a7e6f..e334928 100644
--- a/app/src/js/web3/contracts/MyToken.ts
+++ b/app/src/js/web3/contracts/MyToken.ts
@@ -422,6 +422,7 @@ interface ContractAddress {
   [ChainId.Mainnet]: string;
   [ChainId.Rinkeby]: string;
   [ChainId.Ropsten]: string;
+  [ChainId.Hardhat]: string;
 }
 
 export const CONTRACT_ADDRESS: ContractAddress = {
@@ -430,4 +431,5 @@ export const CONTRACT_ADDRESS: ContractAddress = {
   [ChainId.Mainnet]: '0xa0647F0Da8B541C8876C234Bc9C4dC50F19515ea',
   [ChainId.Rinkeby]: '0x5FbDB2315678afecb367f032d93F642f64180aa3',
   [ChainId.Ropsten]: '0x5FbDB2315678afecb367f032d93F642f64180aa3',
+  [ChainId.Hardhat]: '0x5FbDB2315678afecb367f032d93F642f64180aa3',
 };