diff --git a/packages/boba/gateway/src/actions/farmAction.js b/packages/boba/gateway/src/actions/earnAction.js
similarity index 93%
rename from packages/boba/gateway/src/actions/farmAction.js
rename to packages/boba/gateway/src/actions/earnAction.js
index cdafb74e42..e7d0b911c4 100644
--- a/packages/boba/gateway/src/actions/farmAction.js
+++ b/packages/boba/gateway/src/actions/earnAction.js
@@ -20,12 +20,12 @@
 import networkService from 'services/networkService'
 import { createAction } from './createAction'
 
-const getFarmInfoBegin = () => ({
-  type: 'GET_FARMINFO',
+const getEarnInfoBegin = () => ({
+  type: 'GET_EARNINFO',
 })
 
-const getFarmInfoSuccess = (L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo) => ({
-  type: 'GET_FARMINFO_SUCCESS',
+const getEarnInfoSuccess = (L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo) => ({
+  type: 'GET_EARNINFO_SUCCESS',
   payload: { L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo }
 })
 
@@ -47,13 +47,13 @@ const getFarmInfoSuccess = (L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo) => (
 //   payload: { totalFeeRate, userRewardFeeRate },
 // })
 
-export const getFarmInfo = () => async (dispatch) => {
-  dispatch(getFarmInfoBegin())
+export const getEarnInfo = () => async (dispatch) => {
+  dispatch(getEarnInfoBegin())
    const [L1LPInfo, L2LPInfo] = await Promise.all([
     networkService.getL1LPInfo(),
     networkService.getL2LPInfo(),
    ])
-  dispatch(getFarmInfoSuccess(
+  dispatch(getEarnInfoSuccess(
     L1LPInfo.poolInfo,
     L1LPInfo.userInfo,
     L2LPInfo.poolInfo,
diff --git a/packages/boba/gateway/src/actions/networkAction.js b/packages/boba/gateway/src/actions/networkAction.js
index 150daedadf..ed47c675d2 100644
--- a/packages/boba/gateway/src/actions/networkAction.js
+++ b/packages/boba/gateway/src/actions/networkAction.js
@@ -102,26 +102,26 @@ export function depositErc20ToL1(payload) {
   return createAction('DEPOSIT_ALTL1/CREATE', () => networkService.depositErc20ToL1(payload))
 }
 
-//FARM
-export function farmL1(value_Wei_String, currencyAddress) {
-  return createAction('FARM/CREATE', () =>
+//EARN
+export function earnL1(value_Wei_String, currencyAddress) {
+  return createAction('EARN/CREATE', () =>
     networkService.approveERC20_L1LP(value_Wei_String, currencyAddress)
   )
 }
-export function farmL2(value_Wei_String, currencyAddress) {
-  return createAction('FARM/CREATE', () =>
+export function earnL2(value_Wei_String, currencyAddress) {
+  return createAction('EARN/CREATE', () =>
     networkService.approveERC20_L2LP(value_Wei_String, currencyAddress)
   )
 }
 export function getReward(currencyAddress, value_Wei_String, L1orL2Pool) {
-  return createAction('FARM/HARVEST', () =>
+  return createAction('EARN/HARVEST', () =>
     networkService.getReward(currencyAddress, value_Wei_String, L1orL2Pool)
   )
 }
 
 export function withdrawLiquidity(currencyAddress, value_Wei_String, L1orL2Pool) {
 
-  return createAction('FARM/WITHDRAW', () =>
+  return createAction('EARN/WITHDRAW', () =>
     networkService.withdrawLiquidity(currencyAddress, value_Wei_String, L1orL2Pool)
   )
 }
diff --git a/packages/boba/gateway/src/components/icons/FarmIcon.js b/packages/boba/gateway/src/components/icons/FarmIcon.js
deleted file mode 100644
index 20c6c7becf..0000000000
--- a/packages/boba/gateway/src/components/icons/FarmIcon.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from "react"
-
-function FarmIcon({ color }) {
-  return (
-    <svg
-      width={18}
-      height={19}
-      viewBox="0 0 18 19"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M.75 1.5h7.5a2.25 2.25 0 012.25 2.25v3.557H.75V1.5z"
-        stroke={color}
-        strokeWidth={1.5}
-      />
-      <path
-        stroke={color}
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        d="M15 6.75V2.625"
-      />
-      <circle
-        cx={3.938}
-        cy={14.813}
-        r={3.188}
-        stroke={color}
-        strokeWidth={1.5}
-      />
-      <circle
-        cx={14.625}
-        cy={15.375}
-        r={2.625}
-        stroke={color}
-        strokeWidth={1.5}
-      />
-      <mask id="prefix__a" fill="#fff">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M0 6.375h15a3 3 0 013 3v6a3.375 3.375 0 11-6.75 0H7.835a3.938 3.938 0 01-7.795 0H0v-9z"
-        />
-      </mask>
-      <path
-        d="M0 6.375v-1.5h-1.5v1.5H0zm11.25 9h1.5v-1.5h-1.5v1.5zm-3.415 0v-1.5h-1.3l-.185 1.288 1.485.212zm-7.795 0l1.485-.212-.184-1.288H.04v1.5zm-.04 0h-1.5v1.5H0v-1.5zm15-10.5H0v3h15v-3zm4.5 4.5a4.5 4.5 0 00-4.5-4.5v3a1.5 1.5 0 011.5 1.5h3zm0 6v-6h-3v6h3zm-3 0c0 1.035-.84 1.875-1.875 1.875v3a4.875 4.875 0 004.875-4.875h-3zm-1.875 1.875a1.875 1.875 0 01-1.875-1.875h-3a4.875 4.875 0 004.875 4.875v-3zm-6.79-.375h3.415v-3H7.835v3zM3.938 20.25a5.438 5.438 0 005.382-4.663l-2.97-.424a2.438 2.438 0 01-2.412 2.087v3zm-5.383-4.663a5.438 5.438 0 005.383 4.663v-3a2.438 2.438 0 01-2.413-2.087l-2.97.424zM0 16.875h.04v-3H0v3zm-1.5-2.063v.563h3v-.563h-3zm0-8.437v8.438h3V6.374h-3z"
-        fill={color}
-        mask="url(#prefix__a)"
-      />
-    </svg>
-  )
-}
-
-export default FarmIcon
diff --git a/packages/boba/gateway/src/components/listFarm/listFarm.js b/packages/boba/gateway/src/components/listEarn/ListEarn.js
similarity index 97%
rename from packages/boba/gateway/src/components/listFarm/listFarm.js
rename to packages/boba/gateway/src/components/listEarn/ListEarn.js
index a920c744ac..43cb039861 100644
--- a/packages/boba/gateway/src/components/listFarm/listFarm.js
+++ b/packages/boba/gateway/src/components/listEarn/ListEarn.js
@@ -5,7 +5,7 @@ import { logAmount, powAmount } from 'util/amountConvert';
 import { BigNumber } from 'ethers';
 
 import { openAlert, openModal } from 'actions/uiAction';
-import { getFarmInfo, updateStakeToken, updateWithdrawToken } from 'actions/farmAction';
+import { getEarnInfo, updateStakeToken, updateWithdrawToken } from 'actions/earnAction';
 
 import Button from 'components/button/Button';
 
@@ -16,12 +16,12 @@ import networkService from 'services/networkService'
 import { getCoinImage } from 'util/coinImage';
 
 import { Box, Typography, Fade, CircularProgress } from '@mui/material';
-import * as S from "./ListFarm.styles"
+import * as S from "./ListEarn.styles"
 import { getAllAddresses, getReward } from 'actions/networkAction';
 import Tooltip from 'components/tooltip/Tooltip';
 import { HelpOutline } from '@mui/icons-material';
 
-class ListFarm extends React.Component {
+class ListEarn extends React.Component {
 
   constructor(props) {
 
@@ -93,7 +93,7 @@ class ListFarm extends React.Component {
 
     const { poolInfo, L1orL2Pool, balance } = this.state
 
-    const { allAddresses } = this.props.farm
+    const { allAddresses } = this.props.earn
 
     this.props.dispatch(updateStakeToken({
       symbol: poolInfo.symbol,
@@ -104,14 +104,14 @@ class ListFarm extends React.Component {
       decimals: poolInfo.decimals
     }))
 
-    this.props.dispatch(openModal('farmDepositModal'))
+    this.props.dispatch(openModal('EarnDepositModal'))
   }
 
   async handleWithdrawToken() {
 
     const { poolInfo, L1orL2Pool, balance } = this.state
 
-    const { allAddresses } = this.props.farm
+    const { allAddresses } = this.props.earn
 
     this.props.dispatch(updateWithdrawToken({
       symbol: poolInfo.symbol,
@@ -122,7 +122,7 @@ class ListFarm extends React.Component {
       decimals: poolInfo.decimals
     }))
 
-    this.props.dispatch(openModal('farmWithdrawModal'))
+    this.props.dispatch(openModal('EarnWithdrawModal'))
   }
 
   async handleHarvest() {
@@ -146,7 +146,7 @@ class ListFarm extends React.Component {
 
     if (getRewardTX) {
       this.props.dispatch(openAlert(`${logAmount(userReward, poolInfo.decimals, 2)} ${poolInfo.symbol} was added to your account`))
-      this.props.dispatch(getFarmInfo())
+      this.props.dispatch(getEarnInfo())
       this.setState({ loading: false })
     } else {
       this.setState({ loading: false })
@@ -496,7 +496,7 @@ class ListFarm extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  farm: state.farm,
+  earn: state.earn,
 })
 
-export default connect(mapStateToProps)(ListFarm)
+export default connect(mapStateToProps)(ListEarn)
diff --git a/packages/boba/gateway/src/components/listFarm/ListFarm.styles.js b/packages/boba/gateway/src/components/listEarn/ListEarn.styles.js
similarity index 100%
rename from packages/boba/gateway/src/components/listFarm/ListFarm.styles.js
rename to packages/boba/gateway/src/components/listEarn/ListEarn.styles.js
diff --git a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
index d404aaba0c..9c7ea59ed0 100644
--- a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
+++ b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
@@ -40,6 +40,7 @@ import {
 import {
   selectActiveNetwork,
   selectActiveNetworkIcon,
+  selectActiveNetworkName,
   selectActiveNetworkType,
 } from 'selectors/networkSelector'
 import * as S from './LayerSwitcher.styles.js'
@@ -56,7 +57,7 @@ import Button from 'components/button/Button.js'
 import { L1_ICONS, L2_ICONS } from 'util/network/network.util.js'
 import { LAYER } from 'util/constant.js'
 
-function LayerSwitcher({ visisble = true }) {
+function LayerSwitcher({ visisble = true, isButton = false }) {
   const dispatch = useDispatch()
   const accountEnabled = useSelector(selectAccountEnabled())
   const baseEnabled = useSelector(selectBaseEnabled())
@@ -64,7 +65,7 @@ function LayerSwitcher({ visisble = true }) {
   let layer = useSelector(selectLayer())
   const network = useSelector(selectActiveNetwork())
   const networkType = useSelector(selectActiveNetworkType())
-
+  const networkName = useSelector(selectActiveNetworkName())
   const networkIcon = useSelector(selectActiveNetworkIcon())
 
   const L1Icon = L1_ICONS[networkIcon]
@@ -226,6 +227,21 @@ function LayerSwitcher({ visisble = true }) {
     )
   }
 
+  if (isButton && layer) {
+    return (
+      <Button
+        type="primary"
+        variant="contained"
+        size="small"
+        newStyle
+        onClick={() => (layer === 'L1') ?  dispatch(setConnectBOBA(true)) : dispatch(setConnectETH(true))}
+        sx={{ fontWeight: '500;' }}
+      >
+        Connect to {networkName[ layer === 'L1' ? 'l2': 'l1' ]}
+      </Button>
+    )
+  }
+
   if (isMobile) {
     return (
       <S.LayerSwitcherWrapperMobile>
diff --git a/packages/boba/gateway/src/components/transaction/ListFarm.styles.js b/packages/boba/gateway/src/components/transaction/ListEarn.styles.js
similarity index 100%
rename from packages/boba/gateway/src/components/transaction/ListFarm.styles.js
rename to packages/boba/gateway/src/components/transaction/ListEarn.styles.js
diff --git a/packages/boba/gateway/src/components/transaction/Transaction.js b/packages/boba/gateway/src/components/transaction/Transaction.js
index 981257f017..edb2de6601 100644
--- a/packages/boba/gateway/src/components/transaction/Transaction.js
+++ b/packages/boba/gateway/src/components/transaction/Transaction.js
@@ -18,7 +18,7 @@ import React, { useState } from 'react'
 import { Typography, Fade, useMediaQuery } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
-import * as S from './ListFarm.styles'
+import * as S from './ListEarn.styles'
 
 import { useTheme } from '@emotion/react'
 
diff --git a/packages/boba/gateway/src/containers/connect/Connect.js b/packages/boba/gateway/src/containers/connect/Connect.js
index 46d1dd06f2..7b217520a0 100644
--- a/packages/boba/gateway/src/containers/connect/Connect.js
+++ b/packages/boba/gateway/src/containers/connect/Connect.js
@@ -30,7 +30,8 @@ const Connect = ({
       <Button
         type="primary"
         variant="contained"
-        size="large"
+          size="small"
+          newStyle
         onClick={() => dispatch(setConnect(true))}
         sx={{fontWeight: '500;'}}
       >
@@ -51,6 +52,7 @@ const Connect = ({
           type="primary"
           variant="contained"
           size="small"
+          newStyle
           onClick={() => dispatch(setConnectBOBA(true))}
         >
           Connect to Boba
diff --git a/packages/boba/gateway/src/containers/earn/Earn.js b/packages/boba/gateway/src/containers/earn/Earn.js
new file mode 100644
index 0000000000..2a5c4f47ba
--- /dev/null
+++ b/packages/boba/gateway/src/containers/earn/Earn.js
@@ -0,0 +1,327 @@
+/*
+  Utility Functions for OMG Plasma
+  Copyright (C) 2021 Enya Inc. Palo Alto, CA
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { useTheme } from '@emotion/react';
+import { Box, FormControlLabel, Checkbox, Typography, useMediaQuery } from '@mui/material'
+import { HelpOutline } from '@mui/icons-material'
+
+import { selectUserInfo, selectPoolInfo } from 'selectors/earnSelector'
+import { selectlayer1Balance, selectlayer2Balance } from 'selectors/balanceSelector'
+import { selectBaseEnabled, selectAccountEnabled, selectLayer } from 'selectors/setupSelector'
+import { selectActiveNetworkName } from 'selectors/networkSelector'
+
+import { getEarnInfo } from 'actions/earnAction'
+
+import Connect from 'containers/connect/Connect'
+
+import ListEarn from 'components/listEarn/ListEarn'
+import AlertIcon from 'components/icons/AlertIcon'
+import Tooltip from 'components/tooltip/Tooltip';
+import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
+import PageTitle from 'components/pageTitle/PageTitle'
+
+import networkService from 'services/networkService'
+
+import * as S from './Earn.styles'
+
+function Earn() {
+  const [showMDO, setShowMDO] = useState(false)
+  const [showMSO, setShowMSO] = useState(false)
+  const [lpChoice, setLpChoice] = useState(networkService.L1orL2 === 'L1' ? 'L1LP' : 'L2LP')
+  const [poolTab, setPoolTab] = useState(networkService.L1orL2 === 'L1' ? 'Ethereum Pool' : 'Boba L2 Pool')
+
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  const userInfo = useSelector(selectUserInfo())
+  const poolInfo = useSelector(selectPoolInfo())
+
+  const layer1Balance = useSelector(selectlayer1Balance)
+  const layer2Balance = useSelector(selectlayer2Balance)
+
+  const baseEnabled = useSelector(selectBaseEnabled())
+  const accountEnabled = useSelector(selectAccountEnabled())
+  const layer = useSelector(selectLayer())
+
+  const activeNetworkName = useSelector(selectActiveNetworkName())
+
+  useEffect(() => {
+    if (baseEnabled) {
+      dispatch(getEarnInfo())
+    }
+  }, [dispatch, baseEnabled])
+
+  function getBalance(address, chain) {
+    if (typeof (layer1Balance) === 'undefined') return [ 0, 0 ]
+    if (typeof (layer2Balance) === 'undefined') return [ 0, 0 ]
+
+    if (chain === 'L1') {
+      let tokens = Object.entries(layer1Balance)
+      for (let i = 0; i < tokens.length; i++) {
+        if (tokens[ i ][ 1 ].address.toLowerCase() === address.toLowerCase()) {
+          return [ tokens[ i ][ 1 ].balance, tokens[ i ][ 1 ].decimals ]
+        }
+      }
+    }
+    else if (chain === 'L2') {
+      let tokens = Object.entries(layer2Balance)
+      for (let i = 0; i < tokens.length; i++) {
+        if (tokens[ i ][ 1 ].address.toLowerCase() === address.toLowerCase()) {
+          return [ tokens[ i ][ 1 ].balance, tokens[ i ][ 1 ].decimals ]
+        }
+      }
+    }
+
+    return [ 0, 0 ]
+  }
+
+  return (
+    <S.EarnPageContainer>
+      <PageTitle title={'Earn'} />
+      <Connect
+        userPrompt={'Connect to MetaMask to see your balances and contribute to the liquidity pool '}
+        accountEnabled={accountEnabled}
+      />
+
+      {layer === 'L2' && lpChoice === 'L1LP' &&
+        <S.LayerAlert>
+          <S.AlertInfo>
+            <AlertIcon sx={{ flex: 1 }} />
+            <S.AlertText
+              variant="body2"
+              component="p"
+            >
+              You are on L2. To transact on L1, SWITCH LAYER to L1
+            </S.AlertText>
+          </S.AlertInfo>
+          <LayerSwitcher isButton={true}/>
+        </S.LayerAlert>
+      }
+
+      {layer === 'L1' && lpChoice === 'L2LP' &&
+        <S.LayerAlert>
+          <S.AlertInfo>
+            <AlertIcon />
+            <S.AlertText
+              variant="body2"
+              component="p"
+            >
+              You are on L1. To transact on L2, SWITCH LAYER to L2
+            </S.AlertText>
+          </S.AlertInfo>
+          <LayerSwitcher isButton={true} />
+        </S.LayerAlert>
+      }
+
+      <Box sx={{ my: 1, width: '100%' }}>
+        <S.EarnActionContainer sx={{ mb: 2, display: 'flex' }}>
+          <S.PageSwitcher>
+            <Typography
+              className={poolTab === 'Ethereum Pool' ? 'active' : ''}
+              onClick={() => {
+                setLpChoice('L1LP')
+                setPoolTab('Ethereum Pool')
+              }}
+              variant="body2"
+              component="span">
+              {activeNetworkName['l1']} Pools
+            </Typography>
+            <Typography
+              className={poolTab === 'Boba L2 Pool' ? 'active' : ''}
+              onClick={() => {
+                setLpChoice('L2LP')
+                setPoolTab('Boba L2 Pool')
+              }}
+              variant="body2"
+              component="span">
+              {activeNetworkName['l2']} Pools
+            </Typography>
+          </S.PageSwitcher>
+
+          <S.EarnAction>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={showMDO}
+                  onChange={(e) => setShowMDO(e.target.checked)}
+                  name="my tokens only"
+                  color="primary"
+                  icon={<S.BpIcon />}
+                />
+              }
+              label="My Tokens Only"
+            />
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={showMSO}
+                  onChange={e => setShowMSO(e.target.checked)}
+                  name="my stakes only"
+                  color="primary"
+                  icon={<S.BpIcon />}
+                />
+              }
+              label="My Stakes Only"
+            />
+          </S.EarnAction>
+
+        </S.EarnActionContainer>
+
+        <S.Help>
+
+          <Typography variant="body3">
+            Bridging fees are proportionally distributed to stakers. The bridges are not farms.
+            Your earnings only increase when someone uses the bridge you have staked into.
+          </Typography>
+
+          <Tooltip
+            title={
+              <Typography variant="body2" sx={{ mt: 1, fontSize: '0.9em' }}>
+                <span style={{ fontWeight: '700' }}>Staking example</span>. When you stake 10 OMG into the L2 pool, then the pool's liquidity and balance both increase by 10 OMG.
+                <br /><br />
+                <span style={{ fontWeight: '700' }}>Fast Bridge example</span>. When a user bridges 10 OMG from L1 to L2 using the fast bridge,
+                they send 10 OMG to the L1 pool, increasing its balance by 10 OMG. Next, 9.99 OMG flow out from the L2 pool to the user's L2 wallet, completing the bridge.
+                Note that bridge operations do not change the pool's liquidity, but only its balance.
+                The difference between what was deposited into the L1 pool (10 OMG) and what was sent
+                to the user on the L2 (9.99 OMG), equal to 0.01 OMG, is sent to the reward pool, for harvesting by stakers.
+                <br /><br />
+                <span style={{ fontWeight: '700' }}>Pool rebalancing</span>. In some circumstances, excess balances can accumulate on one chain. For example, if many people
+                bridge from L1 to L2, then L1 pool balances will increase, while L2 balances will decrease. When needed, the pool operator can
+                rebalance the pools, using 'classic' deposit and exit operations to move funds from one pool to another. Rebalancing takes 7 days, due to the
+                7 day fraud proof window, which also applies to the operator.
+                <br /><br />
+                <span style={{ fontWeight: '700' }}>Dynamic fees</span>. The pools use an automatic supply-and-demand approach to setting the fees.
+                When a pool's liquidity is low, the fees are increased to attract more liquidity into that pool and vice-versa.
+              </Typography>
+            }
+          >
+            <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
+          </Tooltip>
+        </S.Help>
+
+
+        {!isMobile ? (
+          <S.TableHeading>
+            <S.GridItemTagContainer
+              container spacing={1} direction="row" alignItems="center"
+              sx={{
+                justifyContent: "space-around"
+              }}
+            >
+              <S.GridItemTag item xs={4} md={2}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }}>Token</Typography>
+              </S.GridItemTag>
+              <S.GridItemTag item xs={4} md={2}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }} whiteSpace="nowrap">Available Balance
+                </Typography>
+                <Tooltip title="Available Balance refers to the amount of funds currently in each pool.">
+                  <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
+                </Tooltip>
+              </S.GridItemTag>
+              <S.GridItemTag item xs={4} md={2}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }} whiteSpace="nowrap">Total Staked
+                </Typography>
+                <Tooltip title="Total staked denotes the funds staked by liquidity providers.">
+                  <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
+                </Tooltip>
+              </S.GridItemTag>
+              <S.GridItemTag item xs={4} md={2}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }} whiteSpace="nowrap">Past APR %
+                </Typography>
+                <Tooltip title="The APR is the historical APR, which reflects the fees people paid to bridge and the previous usage patterns for each pool.">
+                  <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
+                </Tooltip>
+              </S.GridItemTag>
+              <S.GridItemTag item xs={3} md={2}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }} whiteSpace="nowrap">Your Stake</Typography>
+              </S.GridItemTag>
+              <S.GridItemTag item xs={3} md={1}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }}>Earned</Typography>
+              </S.GridItemTag>
+              <S.GridItemTag item xs={3} md={1}>
+                <Typography variant="body2" sx={{
+                  opacity: 0.65
+                }}>Actions</Typography>
+              </S.GridItemTag>
+            </S.GridItemTagContainer>
+          </S.TableHeading>
+        ) : (null)}
+
+        {lpChoice === 'L1LP' &&
+          <S.EarnListContainer>
+            {Object.keys(poolInfo.L1LP).map((v, i) => {
+              const ret = getBalance(v, 'L1')
+              if (showMDO && Number(ret[ 0 ]) === 0) return null
+              return (
+                <ListEarn
+                  key={i}
+                  poolInfo={poolInfo.L1LP[ v ]}
+                  userInfo={userInfo.L1LP[ v ]}
+                  L1orL2Pool={lpChoice}
+                  balance={ret[ 0 ]}
+                  decimals={ret[ 1 ]}
+                  isMobile={isMobile}
+                  showStakesOnly={showMSO}
+                  accountEnabled={accountEnabled}
+                />
+              )
+            })}
+          </S.EarnListContainer>}
+
+        {lpChoice === 'L2LP' &&
+          <S.EarnListContainer>
+            {Object.keys(poolInfo.L2LP).map((v, i) => {
+              const ret = getBalance(v, 'L2')
+              if (showMDO && Number(ret[ 0 ]) === 0) return null
+              return (
+                <ListEarn
+                  key={i}
+                  poolInfo={poolInfo.L2LP[ v ]}
+                  userInfo={userInfo.L2LP[ v ]}
+                  L1orL2Pool={lpChoice}
+                  balance={ret[ 0 ]}
+                  decimals={ret[ 1 ]}
+                  isMobile={isMobile}
+                  showStakesOnly={showMSO}
+                  accountEnabled={accountEnabled}
+                />
+              )
+            })}
+          </S.EarnListContainer>
+        }
+      </Box>
+    </S.EarnPageContainer>
+  )
+}
+
+export default React.memo(Earn);
diff --git a/packages/boba/gateway/src/containers/farm/Farm.styles.js b/packages/boba/gateway/src/containers/earn/Earn.styles.js
similarity index 97%
rename from packages/boba/gateway/src/containers/farm/Farm.styles.js
rename to packages/boba/gateway/src/containers/earn/Earn.styles.js
index 936c629c84..11e257d422 100644
--- a/packages/boba/gateway/src/containers/farm/Farm.styles.js
+++ b/packages/boba/gateway/src/containers/earn/Earn.styles.js
@@ -104,7 +104,7 @@ export const GridItemTag = styled(Grid)`
   gap:5px;
 `;
 
-export const FarmAction = styled(Box)(({theme})=>({
+export const EarnAction = styled(Box)(({theme})=>({
   display: 'flex',
   justifyContent: 'space-around',
   alignItems: 'center',
@@ -122,7 +122,7 @@ export const EarnActionContainer = styled(Box)(({ theme }) => ({
   }
 }))
 
-export const FarmListContainer = styled(Box)(({theme})=>({
+export const EarnListContainer = styled(Box)(({theme})=>({
   [theme.breakpoints.down('md')]: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/packages/boba/gateway/src/containers/farm/FarmWrapper.js b/packages/boba/gateway/src/containers/earn/EarnWrapper.js
similarity index 62%
rename from packages/boba/gateway/src/containers/farm/FarmWrapper.js
rename to packages/boba/gateway/src/containers/earn/EarnWrapper.js
index 69f8ecd990..bf3c3f62cf 100644
--- a/packages/boba/gateway/src/containers/farm/FarmWrapper.js
+++ b/packages/boba/gateway/src/containers/earn/EarnWrapper.js
@@ -2,10 +2,10 @@
 import { useTheme } from '@emotion/react';
 import { useMediaQuery } from '@mui/material';
 import React from 'react';
-import Farm from './Farm';
+import Earn from './Earn';
 
-export default function FarmWrapper({ ...rest }) {
+export default function EarnWrapper({ ...rest }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  return <Farm {...rest} isMobile={isMobile} />;
+  return <Earn {...rest} isMobile={isMobile} />;
 }
diff --git a/packages/boba/gateway/src/containers/farm/Farm.js b/packages/boba/gateway/src/containers/farm/Farm.js
deleted file mode 100644
index de014dec75..0000000000
--- a/packages/boba/gateway/src/containers/farm/Farm.js
+++ /dev/null
@@ -1,463 +0,0 @@
-/*
-  Utility Functions for OMG Plasma
-  Copyright (C) 2021 Enya Inc. Palo Alto, CA
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU General Public License as published by
-  the Free Software Foundation, either version 3 of the License, or
-  (at your option) any later version.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License
-  along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import React from 'react'
-import { connect } from 'react-redux'
-import { isEqual } from 'lodash'
-
-import { getFarmInfo } from 'actions/farmAction'
-
-import ListFarm from 'components/listFarm/listFarm'
-import AlertIcon from 'components/icons/AlertIcon'
-import networkService from 'services/networkService'
-
-import * as S from './Farm.styles'
-
-import { Box, FormControlLabel, Checkbox, Typography } from '@mui/material'
-import Tooltip from 'components/tooltip/Tooltip';
-import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
-
-import Connect from 'containers/connect/Connect'
-import PageTitle from 'components/pageTitle/PageTitle'
-
-import { HelpOutline } from '@mui/icons-material'
-
-class Farm extends React.Component {
-
-  constructor(props) {
-
-    super(props)
-
-    const {
-      poolInfo,
-      userInfo
-    } = this.props.farm
-
-    const {
-      layer1,
-      layer2
-    } = this.props.balance
-
-    const {
-      baseEnabled,
-      accountEnabled,
-      layer
-    } = this.props.setup
-
-    const {
-      activeNetworkName
-    } = this.props.network
-
-    let initialViewLayer = 'Ethereum Pool'
-    let initialLayer = 'L1LP'
-
-    if (networkService.L1orL2 === 'L2') {
-      initialViewLayer = 'Boba L2 Pool'
-      initialLayer = 'L2LP'
-    }
-
-    this.state = {
-      poolInfo,
-      userInfo,
-      layer,
-      layer1,
-      layer2,
-      lpChoice: initialLayer,
-      poolTab: initialViewLayer,
-      showMDO: false, //MDO = my deposits only
-      showMSO: false, //MSO = my stakes only
-      dropDownBox: false,
-      dropDownBoxInit: true,
-      // provider status
-      baseEnabled,
-      accountEnabled,
-      activeNetworkName
-    }
-
-  }
-
-  componentDidMount() {
-    if (this.state.baseEnabled) {
-      this.props.dispatch(getFarmInfo())
-    }
-  }
-
-  componentDidUpdate(prevState) {
-
-    const {
-      poolInfo,
-      userInfo,
-    } = this.props.farm
-
-    const {
-      layer1,
-      layer2
-    } = this.props.balance
-
-    const {
-      baseEnabled,
-      accountEnabled,
-      layer
-    } = this.props.setup
-
-    const {
-      activeNetworkName
-    } =  this.props.network
-
-    if (!isEqual(prevState.network.activeNetworkName, activeNetworkName)) {
-      this.setState({ activeNetworkName })
-    }
-
-    if (!isEqual(prevState.farm.poolInfo, poolInfo)) {
-      this.setState({ poolInfo })
-    }
-
-    if (!isEqual(prevState.farm.userInfo, userInfo)) {
-      this.setState({ userInfo })
-      if (accountEnabled) this.setState({ accountEnabled })
-    }
-
-    if (!isEqual(prevState.balance.layer1, layer1)) {
-      this.setState({ layer1 })
-    }
-
-    if (!isEqual(prevState.balance.layer2, layer2)) {
-      this.setState({ layer2 })
-    }
-
-    if (prevState.setup.baseEnabled !== baseEnabled) {
-      this.props.dispatch(getFarmInfo())
-      this.setState({ baseEnabled })
-    }
-
-    if (prevState.setup.accountEnabled !== accountEnabled) {
-      this.props.dispatch(getFarmInfo())
-      if (!accountEnabled) this.setState({ accountEnabled })
-    }
-
-    if (prevState.setup.layer !== layer) {
-      this.setState({ layer })
-    }
-  }
-
-  getBalance(address, chain) {
-
-    const { layer1, layer2 } = this.state
-
-    if (typeof (layer1) === 'undefined') return [ 0, 0 ]
-    if (typeof (layer2) === 'undefined') return [ 0, 0 ]
-
-    if (chain === 'L1') {
-      let tokens = Object.entries(layer1)
-      for (let i = 0; i < tokens.length; i++) {
-        if (tokens[ i ][ 1 ].address.toLowerCase() === address.toLowerCase()) {
-          return [ tokens[ i ][ 1 ].balance, tokens[ i ][ 1 ].decimals ]
-        }
-      }
-    }
-    else if (chain === 'L2') {
-      let tokens = Object.entries(layer2)
-      for (let i = 0; i < tokens.length; i++) {
-        if (tokens[ i ][ 1 ].address.toLowerCase() === address.toLowerCase()) {
-          return [ tokens[ i ][ 1 ].balance, tokens[ i ][ 1 ].decimals ]
-        }
-      }
-    }
-
-    return [ 0, 0 ]
-
-  }
-
-  handleChange = (event, t) => {
-    if (t === 'Ethereum Pool') {
-      this.setState({
-        lpChoice: 'L1LP',
-        poolTab: t
-      })
-    } else if (t === 'Boba L2 Pool') {
-      this.setState({
-        lpChoice: 'L2LP',
-        poolTab: t
-      })
-    }
-  }
-
-  handleCheckBox = (e) => {
-    this.setState({
-      showMDO: e.target.checked
-    })
-  }
-
-  handleCheckBoxStakes = (e) => {
-    this.setState({
-      showMSO: e.target.checked
-    })
-  }
-
-
-  render() {
-
-    const {
-      poolInfo,
-      userInfo,
-      lpChoice,
-      poolTab,
-      showMDO,
-      showMSO,
-      accountEnabled,
-      layer,
-      activeNetworkName
-    } = this.state
-
-    const { isMobile } = this.props
-
-    return (
-      <S.EarnPageContainer>
-
-        <PageTitle title={'Earn'} />
-
-        <Connect
-          userPrompt={'Connect to MetaMask to see your balances and contribute to the liquidity pool '}
-          accountEnabled={accountEnabled}
-        />
-
-        <Box sx={{ my: 1, width: '100%' }}>
-          <S.EarnActionContainer sx={{ mb: 2, display: 'flex' }}>
-            <S.PageSwitcher>
-              <Typography
-                className={poolTab === 'Ethereum Pool' ? 'active' : ''}
-                onClick={() => this.handleChange(null, 'Ethereum Pool')}
-                variant="body2"
-                component="span">
-                {activeNetworkName['l1']} Pools
-              </Typography>
-              <Typography
-                className={poolTab === 'Boba L2 Pool' ? 'active' : ''}
-                onClick={() => this.handleChange(null, 'Boba L2 Pool')}
-                variant="body2"
-                component="span">
-                {activeNetworkName['l2']} Pools
-              </Typography>
-            </S.PageSwitcher>
-
-            <S.FarmAction>
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={showMDO}
-                    onChange={this.handleCheckBox}
-                    name="my tokens only"
-                    color="primary"
-                    icon={<S.BpIcon />}
-                  />
-                }
-                label="My Tokens Only"
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={showMSO}
-                    onChange={this.handleCheckBoxStakes}
-                    name="my stakes only"
-                    color="primary"
-                    icon={<S.BpIcon />}
-                  />
-                }
-                label="My Stakes Only"
-              />
-            </S.FarmAction>
-
-          </S.EarnActionContainer>
-
-          <S.Help>
-
-            <Typography variant="body3">
-              Bridging fees are proportionally distributed to stakers. The bridges are not farms.
-              Your earnings only increase when someone uses the bridge you have staked into.
-            </Typography>
-
-            <Tooltip
-              title={
-                <Typography variant="body2" sx={{ mt: 1, fontSize: '0.9em' }}>
-                  <span style={{ fontWeight: '700' }}>Staking example</span>. When you stake 10 OMG into the L2 pool, then the pool's liquidity and balance both increase by 10 OMG.
-                  <br /><br />
-                  <span style={{ fontWeight: '700' }}>Fast Bridge example</span>. When a user bridges 10 OMG from L1 to L2 using the fast bridge,
-                  they send 10 OMG to the L1 pool, increasing its balance by 10 OMG. Next, 9.99 OMG flow out from the L2 pool to the user's L2 wallet, completing the bridge.
-                  Note that bridge operations do not change the pool's liquidity, but only its balance.
-                  The difference between what was deposited into the L1 pool (10 OMG) and what was sent
-                  to the user on the L2 (9.99 OMG), equal to 0.01 OMG, is sent to the reward pool, for harvesting by stakers.
-                  <br /><br />
-                  <span style={{ fontWeight: '700' }}>Pool rebalancing</span>. In some circumstances, excess balances can accumulate on one chain. For example, if many people
-                  bridge from L1 to L2, then L1 pool balances will increase, while L2 balances will decrease. When needed, the pool operator can
-                  rebalance the pools, using 'classic' deposit and exit operations to move funds from one pool to another. Rebalancing takes 7 days, due to the
-                  7 day fraud proof window, which also applies to the operator.
-                  <br /><br />
-                  <span style={{ fontWeight: '700' }}>Dynamic fees</span>. The pools use an automatic supply-and-demand approach to setting the fees.
-                  When a pool's liquidity is low, the fees are increased to attract more liquidity into that pool and vice-versa.
-                </Typography>
-              }
-            >
-              <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
-            </Tooltip>
-          </S.Help>
-
-          {layer === 'L2' && lpChoice === 'L1LP' &&
-            <S.LayerAlert>
-              <S.AlertInfo>
-                <AlertIcon sx={{ flex: 1 }} />
-                <S.AlertText
-                  variant="body1"
-                  component="p"
-                >
-                  You are on L2. To transact on L1, SWITCH LAYER to L1
-                </S.AlertText>
-              </S.AlertInfo>
-              <LayerSwitcher isButton={true} size={isMobile ? "small" : "medium"} />
-            </S.LayerAlert>
-          }
-
-          {layer === 'L1' && lpChoice === 'L2LP' &&
-            <S.LayerAlert>
-              <S.AlertInfo>
-                <AlertIcon />
-                <S.AlertText
-                  variant="body2"
-                  component="p"
-                >
-                  You are on L1. To transact on L2, SWITCH LAYER to L2
-                </S.AlertText>
-              </S.AlertInfo>
-              <LayerSwitcher isButton={true} />
-            </S.LayerAlert>
-          }
-
-          {!isMobile ? (
-            <S.TableHeading>
-              <S.GridItemTagContainer
-                container spacing={1} direction="row" alignItems="center"
-                sx={{
-                  justifyContent: "space-around"
-                }}
-              >
-                <S.GridItemTag item xs={4} md={2}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }}>Token</Typography>
-                </S.GridItemTag>
-                <S.GridItemTag item xs={4} md={2}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }} whiteSpace="nowrap">Available Balance
-                  </Typography>
-                  <Tooltip title="Available Balance refers to the amount of funds currently in each pool.">
-                    <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
-                  </Tooltip>
-                </S.GridItemTag>
-                <S.GridItemTag item xs={4} md={2}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }} whiteSpace="nowrap">Total Staked
-                  </Typography>
-                  <Tooltip title="Total staked denotes the funds staked by liquidity providers.">
-                    <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
-                  </Tooltip>
-                </S.GridItemTag>
-                <S.GridItemTag item xs={4} md={2}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }} whiteSpace="nowrap">Past APR %
-                  </Typography>
-                  <Tooltip title="The APR is the historical APR, which reflects the fees people paid to bridge and the previous usage patterns for each pool.">
-                    <HelpOutline fontSize="small" sx={{ opacity: 0.65 }} />
-                  </Tooltip>
-                </S.GridItemTag>
-                <S.GridItemTag item xs={3} md={2}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }} whiteSpace="nowrap">Your Stake</Typography>
-                </S.GridItemTag>
-                <S.GridItemTag item xs={3} md={1}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }}>Earned</Typography>
-                </S.GridItemTag>
-                <S.GridItemTag item xs={3} md={1}>
-                  <Typography variant="body2" sx={{
-                    opacity: 0.65
-                  }}>Actions</Typography>
-                </S.GridItemTag>
-              </S.GridItemTagContainer>
-            </S.TableHeading>
-          ) : (null)}
-
-          {lpChoice === 'L1LP' &&
-            <S.FarmListContainer>
-              {Object.keys(poolInfo.L1LP).map((v, i) => {
-                const ret = this.getBalance(v, 'L1')
-                if (showMDO && Number(ret[ 0 ]) === 0) return null
-                return (
-                  <ListFarm
-                    key={i}
-                    poolInfo={poolInfo.L1LP[ v ]}
-                    userInfo={userInfo.L1LP[ v ]}
-                    L1orL2Pool={lpChoice}
-                    balance={ret[ 0 ]}
-                    decimals={ret[ 1 ]}
-                    isMobile={isMobile}
-                    showStakesOnly={showMSO}
-                    accountEnabled={accountEnabled}
-                  />
-                )
-              })}
-            </S.FarmListContainer>}
-
-          {lpChoice === 'L2LP' &&
-            <S.FarmListContainer>
-              {Object.keys(poolInfo.L2LP).map((v, i) => {
-                const ret = this.getBalance(v, 'L2')
-                if (showMDO && Number(ret[ 0 ]) === 0) return null
-                return (
-                  <ListFarm
-                    key={i}
-                    poolInfo={poolInfo.L2LP[ v ]}
-                    userInfo={userInfo.L2LP[ v ]}
-                    L1orL2Pool={lpChoice}
-                    balance={ret[ 0 ]}
-                    decimals={ret[ 1 ]}
-                    isMobile={isMobile}
-                    showStakesOnly={showMSO}
-                    accountEnabled={accountEnabled}
-                  />
-                )
-              })}
-            </S.FarmListContainer>
-          }
-        </Box>
-      </S.EarnPageContainer>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  farm: state.farm,
-  balance: state.balance,
-  setup: state.setup,
-  network: state.network
-})
-
-export default connect(mapStateToProps)(Farm)
diff --git a/packages/boba/gateway/src/containers/home/Home.js b/packages/boba/gateway/src/containers/home/Home.js
index d84f823ee8..667eaace0e 100644
--- a/packages/boba/gateway/src/containers/home/Home.js
+++ b/packages/boba/gateway/src/containers/home/Home.js
@@ -63,8 +63,8 @@ import DepositBatchModal from 'containers/modals/deposit/DepositBatchModal'
 import TransferModal from 'containers/modals/transfer/TransferModal'
 import TransferNFTModal from 'containers/modals/transfer/TransferNFTModal'
 import ExitModal from 'containers/modals/exit/ExitModal'
-import FarmDepositModal from 'containers/modals/farm/FarmDepositModal'
-import FarmWithdrawModal from 'containers/modals/farm/FarmWithdrawModal'
+import EarnDepositModal from 'containers/modals/earn/EarnDepositModal'
+import EarnWithdrawModal from 'containers/modals/earn/EarnWithdrawModal'
 import DelegateDaoModal from 'containers/modals/dao/DelegateDaoModal'
 import DelegateDaoXModal from 'containers/modals/dao/DelegateDaoXModal'
 import NewProposalModal from 'containers/modals/dao/old/NewProposalModalOldDao'
@@ -126,8 +126,8 @@ function Home() {
   const lock = useSelector(selectModalState('lock'))
   const proposalId = useSelector(selectModalState('proposalId'))
 
-  const farmDepositModalState = useSelector(selectModalState('farmDepositModal'))
-  const farmWithdrawModalState = useSelector(selectModalState('farmWithdrawModal'))
+  const EarnDepositModalState = useSelector(selectModalState('EarnDepositModal'))
+  const EarnWithdrawModalState = useSelector(selectModalState('EarnWithdrawModal'))
 
   const delegateBobaDaoModalState = useSelector(selectModalState('delegateDaoModal'))
   const delegateBobaDaoXModalState = useSelector(selectModalState('delegateDaoXModal'))
@@ -234,8 +234,8 @@ function Home() {
 
       {!!exitModalState && <ExitModal open={exitModalState} token={token} fast={fast} />}
 
-      {!!farmDepositModalState && <FarmDepositModal open={farmDepositModalState} />}
-      {!!farmWithdrawModalState && <FarmWithdrawModal open={farmWithdrawModalState} />}
+      {!!EarnDepositModalState && <EarnDepositModal open={EarnDepositModalState} />}
+      {!!EarnWithdrawModalState && <EarnWithdrawModal open={EarnWithdrawModalState} />}
 
       {!!delegateBobaDaoModalState && <DelegateDaoModal open={delegateBobaDaoModalState} />}
       {!!delegateBobaDaoXModalState && <DelegateDaoXModal open={delegateBobaDaoXModalState} />}
diff --git a/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js b/packages/boba/gateway/src/containers/modals/earn/EarnDepositModal.js
similarity index 93%
rename from packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js
rename to packages/boba/gateway/src/containers/modals/earn/EarnDepositModal.js
index bdfd9bce10..a06556325b 100644
--- a/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js
+++ b/packages/boba/gateway/src/containers/modals/earn/EarnDepositModal.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { isEqual } from 'lodash'
 
 import { closeModal, openAlert } from 'actions/uiAction'
-import { addLiquidity, getFarmInfo } from 'actions/farmAction'
+import { addLiquidity, getEarnInfo } from 'actions/earnAction'
 
 import Button from 'components/button/Button'
 import Modal from 'components/modal/Modal'
@@ -15,20 +15,20 @@ import BN from 'bignumber.js'
 import { Box, Typography } from '@mui/material'
 import { WrapperActionsModal } from 'components/modal/Modal.styles'
 
-import { farmL1, farmL2 } from 'actions/networkAction'
-import { fetchAllowance } from 'actions/farmAction'
+import { earnL1, earnL2 } from 'actions/networkAction'
+import { fetchAllowance } from 'actions/earnAction'
 import networkService from 'services/networkService'
 import { BigNumber, utils } from 'ethers'
 import { NETWORK } from 'util/network/network.util'
 
-class FarmDepositModal extends React.Component {
+class EarnDepositModal extends React.Component {
 
   constructor(props) {
 
     super(props)
 
     const { open } = this.props
-    const { stakeToken } = this.props.farm
+    const { stakeToken } = this.props.earn
     const { bobaFeeChoice, netLayer, bobaFeePriceRatio } = this.props.setup
 
     this.state = {
@@ -55,7 +55,7 @@ class FarmDepositModal extends React.Component {
   async componentDidUpdate(prevState) {
 
     const { open } = this.props
-    const { stakeToken } = this.props.farm
+    const { stakeToken } = this.props.earn
     const { bobaFeeChoice, netLayer } = this.props.setup
 
     if (prevState.open !== open) {
@@ -70,7 +70,7 @@ class FarmDepositModal extends React.Component {
       this.setState({ bobaFeeChoice })
     }
 
-    if (!isEqual(prevState.farm.stakeToken, stakeToken)) {
+    if (!isEqual(prevState.earn.stakeToken, stakeToken)) {
 
       if ( stakeToken.symbol !== this.state.netLayerNativeToken ) {
         this.props.dispatch(fetchAllowance(
@@ -169,7 +169,7 @@ class FarmDepositModal extends React.Component {
   }
 
   handleClose() {
-    this.props.dispatch(closeModal("farmDepositModal"))
+    this.props.dispatch(closeModal("EarnDepositModal"))
   }
 
   handleStakeValue( value ) {
@@ -209,13 +209,13 @@ class FarmDepositModal extends React.Component {
     let approveTX
 
     if (stakeToken.L1orL2Pool === 'L2LP') {
-      approveTX = await this.props.dispatch(farmL2(
+      approveTX = await this.props.dispatch(earnL2(
         value_Wei_String,
         stakeToken.currency,
       ))
     }
     else if (stakeToken.L1orL2Pool === 'L1LP') {
-      approveTX = await this.props.dispatch(farmL1(
+      approveTX = await this.props.dispatch(earnL1(
         value_Wei_String,
         stakeToken.currency,
       ))
@@ -249,11 +249,11 @@ class FarmDepositModal extends React.Component {
 
     if (addLiquidityTX) {
       this.props.dispatch(openAlert("Your liquidity was added"))
-      this.props.dispatch(getFarmInfo())
+      this.props.dispatch(getEarnInfo())
     }
 
     this.setState({ loading: false, stakeValue: '', value_Wei_String: '' })
-    this.props.dispatch(closeModal("farmDepositModal"))
+    this.props.dispatch(closeModal("EarnDepositModal"))
   }
 
   render() {
@@ -271,7 +271,7 @@ class FarmDepositModal extends React.Component {
       netLayerNativeToken
     } = this.state
 
-    const { approvedAllowance } = this.props.farm
+    const { approvedAllowance } = this.props.earn
 
     let allowanceGTstake = false
 
@@ -396,9 +396,9 @@ class FarmDepositModal extends React.Component {
 
 const mapStateToProps = state => ({
   ui: state.ui,
-  farm: state.farm,
+  earn: state.earn,
   balance: state.balance,
   setup: state.setup,
 })
 
-export default connect(mapStateToProps)(FarmDepositModal)
+export default connect(mapStateToProps)(EarnDepositModal)
diff --git a/packages/boba/gateway/src/containers/modals/farm/FarmWithdrawModal.js b/packages/boba/gateway/src/containers/modals/earn/EarnWithdrawModal.js
similarity index 90%
rename from packages/boba/gateway/src/containers/modals/farm/FarmWithdrawModal.js
rename to packages/boba/gateway/src/containers/modals/earn/EarnWithdrawModal.js
index 552c65a46d..07edba8e79 100644
--- a/packages/boba/gateway/src/containers/modals/farm/FarmWithdrawModal.js
+++ b/packages/boba/gateway/src/containers/modals/earn/EarnWithdrawModal.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { isEqual } from 'lodash'
 
 import { closeModal, openAlert } from 'actions/uiAction'
-import { fetchL1LPBalance, fetchL2LPBalance, getFarmInfo } from 'actions/farmAction'
+import { fetchL1LPBalance, fetchL2LPBalance, getEarnInfo } from 'actions/earnAction'
 
 import Button from 'components/button/Button'
 import Modal from 'components/modal/Modal'
@@ -16,7 +16,7 @@ import { WrapperActionsModal } from 'components/modal/Modal.styles'
 import BN from 'bignumber.js'
 import { withdrawLiquidity } from 'actions/networkAction'
 
-class FarmWithdrawModal extends React.Component {
+class EarnWithdrawModal extends React.Component {
 
   constructor(props) {
     super(props)
@@ -28,7 +28,7 @@ class FarmWithdrawModal extends React.Component {
     const {
       withdrawToken,
       userInfo
-    } = this.props.farm
+    } = this.props.earn
 
     this.state = {
       open,
@@ -48,7 +48,7 @@ class FarmWithdrawModal extends React.Component {
 
   async componentDidMount() {
 
-    const { withdrawToken } = this.props.farm
+    const { withdrawToken } = this.props.earn
 
     let LPBalance_Wei_String = ''
 
@@ -71,21 +71,21 @@ class FarmWithdrawModal extends React.Component {
 
     const { open } = this.props
 
-    const { withdrawToken, userInfo , lpBalanceWeiString} = this.props.farm
+    const { withdrawToken, userInfo , lpBalanceWeiString} = this.props.earn
 
     if (prevState.open !== open) {
       this.setState({ open })
     }
 
-    if (!isEqual(prevState.farm.withdrawToken, withdrawToken)) {
+    if (!isEqual(prevState.earn.withdrawToken, withdrawToken)) {
       this.setState({ withdrawToken })
     }
 
-    if (!isEqual(prevState.farm.userInfo, userInfo)) {
+    if (!isEqual(prevState.earn.userInfo, userInfo)) {
       this.setState({ userInfo })
     }
 
-    if (!isEqual(prevState.farm.lpBalanceWeiString, lpBalanceWeiString)) {
+    if (!isEqual(prevState.earn.lpBalanceWeiString, lpBalanceWeiString)) {
       this.setState({
         LPBalance: logAmount(lpBalanceWeiString, withdrawToken.decimals),
         LPBalance_Wei_String: lpBalanceWeiString
@@ -150,7 +150,7 @@ class FarmWithdrawModal extends React.Component {
   }
 
   handleClose() {
-    this.props.dispatch(closeModal("farmWithdrawModal"))
+    this.props.dispatch(closeModal("EarnWithdrawModal"))
   }
 
   async handleConfirm() {
@@ -169,14 +169,14 @@ class FarmWithdrawModal extends React.Component {
 
     if (withdrawLiquidityTX) {
       this.props.dispatch(openAlert("Your liquidity was withdrawn."))
-      this.props.dispatch(getFarmInfo())
+      this.props.dispatch(getEarnInfo())
     }
     this.setState({
       loading: false,
       value: '',
       value_Wei_String: ''
     })
-    this.props.dispatch(closeModal("farmWithdrawModal"))
+    this.props.dispatch(closeModal("EarnWithdrawModal"))
 
   }
 
@@ -259,8 +259,8 @@ class FarmWithdrawModal extends React.Component {
 
 const mapStateToProps = state => ({
   ui: state.ui,
-  farm: state.farm,
+  earn: state.earn,
   balance: state.balance,
 });
 
-export default connect(mapStateToProps)(FarmWithdrawModal)
+export default connect(mapStateToProps)(EarnWithdrawModal)
diff --git a/packages/boba/gateway/src/layout/routes/routeList.js b/packages/boba/gateway/src/layout/routes/routeList.js
index cf63d7e02e..583bbee404 100644
--- a/packages/boba/gateway/src/layout/routes/routeList.js
+++ b/packages/boba/gateway/src/layout/routes/routeList.js
@@ -9,7 +9,7 @@ import Ecosystem from 'containers/ecosystem/Ecosystem';
 import Wallet from 'containers/wallet/Wallet';
 import OldDao from 'containers/dao/OldDao';
 import History from 'containers/history/History';
-import FarmWrapper from 'containers/farm/FarmWrapper';
+import EarnWrapper from 'containers/earn/EarnWrapper';
 import SaveWrapper from 'containers/save/SaveWrapper';
 import MonsterWrapper from 'containers/monster/MonsterWrapper';
 import { Navigate } from 'react-router-dom';
@@ -64,7 +64,7 @@ export const ROUTE_LIST = [
       },
       {
         path: ROUTES_PATH.EARN,
-        element: <FarmWrapper />,
+        element: <EarnWrapper />,
         key: 'Earn',
       },
       {
diff --git a/packages/boba/gateway/src/reducers/farmReducer.js b/packages/boba/gateway/src/reducers/earnReducer.js
similarity index 96%
rename from packages/boba/gateway/src/reducers/farmReducer.js
rename to packages/boba/gateway/src/reducers/earnReducer.js
index 72e9d94ea8..a03f97baef 100644
--- a/packages/boba/gateway/src/reducers/farmReducer.js
+++ b/packages/boba/gateway/src/reducers/earnReducer.js
@@ -55,11 +55,11 @@ const initialState = {
   allAddresses: {},
 };
 
-function farmReducer (state = initialState, action) {
+function earnReducer (state = initialState, action) {
   switch (action.type) {
-    case 'GET_FARMINFO':
+    case 'GET_EARNINFO':
       return state;
-    case 'GET_FARMINFO_SUCCESS':
+    case 'GET_EARNINFO_SUCCESS':
       return {
         ...state,
         poolInfo: {
@@ -139,4 +139,4 @@ function farmReducer (state = initialState, action) {
   }
 }
 
-export default farmReducer;
+export default earnReducer;
diff --git a/packages/boba/gateway/src/reducers/index.js b/packages/boba/gateway/src/reducers/index.js
index 9c496945a8..744c14c6fc 100644
--- a/packages/boba/gateway/src/reducers/index.js
+++ b/packages/boba/gateway/src/reducers/index.js
@@ -28,7 +28,7 @@ import feeReducer from './feeReducer'
 import uiReducer from './uiReducer'
 import setupReducer from './setupReducer'
 import notificationReducer from './notificationReducer'
-import farmReduer from './farmReducer'
+import earnReduer from './earnReducer'
 import lookupReducer from './lookupReducer'
 import signatureReducer from './signatureReducer'
 import daoReducer from './daoReducer'
@@ -54,7 +54,7 @@ const rootReducer = combineReducers({
   ui: uiReducer,
   setup: setupReducer,
   notification: notificationReducer,
-  farm: farmReduer,
+  earn: earnReduer,
   lookup: lookupReducer,
   dao: daoReducer,
   fixed: fixedReducer,
diff --git a/packages/boba/gateway/src/reducers/uiReducer.js b/packages/boba/gateway/src/reducers/uiReducer.js
index 5ca6ff4e63..e5d529b749 100644
--- a/packages/boba/gateway/src/reducers/uiReducer.js
+++ b/packages/boba/gateway/src/reducers/uiReducer.js
@@ -28,8 +28,8 @@ const initialState = {
   wrongNetworkModal: false,
   ledgerConnectModal: false,
   addNewTokenModal: false,
-  farmDepositModal: false,
-  farmWithdrawModal: false,
+  EarnDepositModal: false,
+  EarnWithdrawModal: false,
   transferDaoModal: false,
   delegateDaoModal: false,
   delegateDaoXModal: false,
diff --git a/packages/boba/gateway/src/selectors/earnSelector.js b/packages/boba/gateway/src/selectors/earnSelector.js
new file mode 100644
index 0000000000..b3998fa7ab
--- /dev/null
+++ b/packages/boba/gateway/src/selectors/earnSelector.js
@@ -0,0 +1,26 @@
+/*
+Copyright 2021-present Boba Network.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+export function selectPoolInfo () {
+  return function (state) {
+    return state.earn.poolInfo
+  }
+}
+
+export function selectUserInfo () {
+  return function (state) {
+    return state.earn.userInfo
+  }
+}
diff --git a/packages/boba/gateway/src/services/networkService.js b/packages/boba/gateway/src/services/networkService.js
index 15df4d79dc..f832ead181 100644
--- a/packages/boba/gateway/src/services/networkService.js
+++ b/packages/boba/gateway/src/services/networkService.js
@@ -2302,7 +2302,7 @@ class NetworkService {
   }
 
   /*****************************************************/
-  /***** Pool, User Info, to populate the Farm tab *****/
+  /***** Pool, User Info, to populate the Earn tab *****/
   /*****************************************************/
   async getL1LPInfo() {