diff --git a/src/app/components/ActionsBackground.tsx b/src/app/components/ActionsBackground.tsx
index ad25ceed5..99815d07e 100644
--- a/src/app/components/ActionsBackground.tsx
+++ b/src/app/components/ActionsBackground.tsx
@@ -4,11 +4,11 @@ import styles from "./ActionsBackground.module.scss"
 const ActionsBackground = () => {
   const { name } = useTheme()
 
-  if (name === "light" || name === "whale") {
-    return <></>
+  if (name === "moon") {
+    return <div className={styles.background_blur} />
   }
 
-  return <div className={styles.background_blur} />
+  return <></>
 }
 
 export default ActionsBackground
diff --git a/src/app/sections/DisplayChainsSetting.tsx b/src/app/sections/DisplayChainsSetting.tsx
index a7e2aeb58..81bbdae83 100644
--- a/src/app/sections/DisplayChainsSetting.tsx
+++ b/src/app/sections/DisplayChainsSetting.tsx
@@ -14,9 +14,9 @@ const DisplayChainsSetting = () => {
 
   const onChange = (value: string) => {
     if (isTerraChain(value)) return
-    const newDisplayChains = displayChains.includes(value)
-      ? displayChains.filter((chainID) => chainID !== value)
-      : [...displayChains, value]
+    const newDisplayChains = displayChains?.includes(value)
+      ? displayChains?.filter((chainID) => chainID !== value)
+      : [...(displayChains || []), value]
     changeDisplayChains(newDisplayChains)
     if (value === selectedDisplayChain) {
       changeSelectedDisplayChain(undefined)
@@ -42,7 +42,7 @@ const DisplayChainsSetting = () => {
             )
             .map((chainID) => ({
               value: chainID,
-              selected: displayChains.includes(chainID),
+              selected: displayChains?.includes(chainID),
               label: network[chainID].name,
               icon: network[chainID].icon,
             }))
diff --git a/src/app/sections/LCDSetting.tsx b/src/app/sections/LCDSetting.tsx
index caad30c6a..cf9c24a85 100644
--- a/src/app/sections/LCDSetting.tsx
+++ b/src/app/sections/LCDSetting.tsx
@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"
 import { Form, FormItem, Input } from "components/form"
 import { useTranslation } from "react-i18next"
 import { useNetworks } from "app/InitNetworks"
-import ChainSelector from "components/form/ChainSelector"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { useEffect, useMemo, useState } from "react"
 import { Button } from "components/general"
 import styles from "./LCDSetting.module.scss"
diff --git a/src/components/form/Selectors/AssetSelector/AssetList.tsx b/src/components/form/Selectors/AssetSelector/AssetList.tsx
new file mode 100644
index 000000000..c798330b7
--- /dev/null
+++ b/src/components/form/Selectors/AssetSelector/AssetList.tsx
@@ -0,0 +1,60 @@
+import styles from "../../ChainSelector.module.scss"
+import WithSearchInput from "pages/custom/WithSearchInput"
+import classNames from "classnames"
+
+interface AssetType {
+  denom: string
+  balance: string
+  icon: string
+  symbol: string
+  price: number
+  chains: string[]
+}
+
+interface Props {
+  list: AssetType[]
+  onChange: (symbol: string, index: number) => void
+  value: string
+  small?: boolean
+  noSearch?: boolean
+}
+
+const ChainList = ({ list, onChange, value, small, noSearch }: Props) => {
+  return (
+    <div className={styles.options}>
+      <WithSearchInput disabled={noSearch} inline gap={4}>
+        {(search) => (
+          <div
+            className={classNames(
+              styles.options__container,
+              small && styles.options__container__small
+            )}
+          >
+            {list
+              .filter(
+                ({ denom, symbol }) =>
+                  denom.toLowerCase().includes(search.toLowerCase()) ||
+                  symbol.toLowerCase().includes(search.toLowerCase())
+              )
+              .map(({ denom, symbol, icon }, index) => (
+                <button
+                  className={symbol === value ? styles.active : ""}
+                  key={denom}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    onChange(denom, index)
+                  }}
+                >
+                  <img src={icon} alt={denom} />
+                  {symbol}
+                </button>
+              ))}
+          </div>
+        )}
+      </WithSearchInput>
+    </div>
+  )
+}
+
+export default ChainList
diff --git a/src/components/form/Selectors/AssetSelector/AssetSelector.tsx b/src/components/form/Selectors/AssetSelector/AssetSelector.tsx
new file mode 100644
index 000000000..375b99a58
--- /dev/null
+++ b/src/components/form/Selectors/AssetSelector/AssetSelector.tsx
@@ -0,0 +1,74 @@
+import { useState, useRef, useEffect } from "react"
+import styles from "../../ChainSelector.module.scss"
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
+import AssetList from "./AssetList"
+
+interface AssetType {
+  denom: string
+  balance: string
+  icon: string
+  symbol: string
+  price: number
+  chains: string[]
+}
+
+interface Props {
+  assetList: AssetType[]
+  onChange: (chain: string) => void
+  value: string
+  assetsByDenom: Record<string, AssetType>
+}
+
+const AssetSelector = ({
+  assetList,
+  onChange,
+  value,
+  assetsByDenom,
+}: Props) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setOpen(false)
+    }
+  }
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const handleSelection = (denom: string) => {
+    onChange(denom)
+    setOpen(false)
+  }
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <button
+        type="button"
+        className={styles.selector}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (e.screenX && e.screenY) setOpen((o) => !o) // negate onClick triggered by enter key press
+        }}
+      >
+        <span>
+          <img
+            src={assetsByDenom[value]?.icon}
+            alt={assetsByDenom[value]?.denom}
+          />{" "}
+          {assetsByDenom[value]?.symbol}
+        </span>{" "}
+        <ArrowDropDownIcon style={{ fontSize: 20 }} className={styles.caret} />
+      </button>
+      {open && (
+        <AssetList list={assetList} onChange={handleSelection} value={value} />
+      )}
+    </div>
+  )
+}
+
+export default AssetSelector
diff --git a/src/components/form/ChainList.tsx b/src/components/form/Selectors/ChainSelector/ChainList.tsx
similarity index 96%
rename from src/components/form/ChainList.tsx
rename to src/components/form/Selectors/ChainSelector/ChainList.tsx
index ea33dff35..630877200 100644
--- a/src/components/form/ChainList.tsx
+++ b/src/components/form/Selectors/ChainSelector/ChainList.tsx
@@ -1,4 +1,4 @@
-import styles from "./ChainSelector.module.scss"
+import styles from "../../ChainSelector.module.scss"
 import WithSearchInput from "pages/custom/WithSearchInput"
 import classNames from "classnames"
 
diff --git a/src/components/form/ChainSelector.tsx b/src/components/form/Selectors/ChainSelector/ChainSelector.tsx
similarity index 97%
rename from src/components/form/ChainSelector.tsx
rename to src/components/form/Selectors/ChainSelector/ChainSelector.tsx
index 1ec70ec97..58fa69e02 100644
--- a/src/components/form/ChainSelector.tsx
+++ b/src/components/form/Selectors/ChainSelector/ChainSelector.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState, useRef, useEffect } from "react"
-import styles from "./ChainSelector.module.scss"
+import styles from "../../ChainSelector.module.scss"
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import { useNetworks } from "app/InitNetworks"
 import ChainList from "./ChainList"
diff --git a/src/components/form/TokenList.tsx b/src/components/form/Selectors/TokenSelector/TokenList.tsx
similarity index 100%
rename from src/components/form/TokenList.tsx
rename to src/components/form/Selectors/TokenSelector/TokenList.tsx
diff --git a/src/components/form/TokenSelector.module.scss b/src/components/form/Selectors/TokenSelector/TokenSelector.module.scss
similarity index 100%
rename from src/components/form/TokenSelector.module.scss
rename to src/components/form/Selectors/TokenSelector/TokenSelector.module.scss
diff --git a/src/components/form/TokenSelector.tsx b/src/components/form/Selectors/TokenSelector/TokenSelector.tsx
similarity index 100%
rename from src/components/form/TokenSelector.tsx
rename to src/components/form/Selectors/TokenSelector/TokenSelector.tsx
diff --git a/src/components/form/index.ts b/src/components/form/index.ts
index c653971d5..c37c007e3 100644
--- a/src/components/form/index.ts
+++ b/src/components/form/index.ts
@@ -14,7 +14,7 @@ export { default as Checkbox } from "./Checkbox"
 export * from "./Checkbox"
 export { default as Toggle } from "./Toggle"
 export { default as Upload } from "./Upload"
-export { default as ChainSelector } from "./ChainSelector"
+export { default as ChainSelector } from "./Selectors/ChainSelector/ChainSelector"
 
 /* modules */
 export { default as Paste } from "./Paste"
diff --git a/src/components/layout/ChainFilter.tsx b/src/components/layout/ChainFilter.tsx
index 78024c4e5..a5d3b347c 100644
--- a/src/components/layout/ChainFilter.tsx
+++ b/src/components/layout/ChainFilter.tsx
@@ -51,7 +51,7 @@ const ChainFilter = ({
     () =>
       sortedDisplayChains
         .map((id) => network[id])
-        .filter((n) => displayChains.includes(n?.chainID)),
+        .filter((n) => displayChains?.includes(n?.chainID)),
     [network, sortedDisplayChains, displayChains]
   )
 
diff --git a/src/components/layout/OtherChainsButton.tsx b/src/components/layout/OtherChainsButton.tsx
index 4b875333b..bde337a2b 100644
--- a/src/components/layout/OtherChainsButton.tsx
+++ b/src/components/layout/OtherChainsButton.tsx
@@ -21,7 +21,7 @@ const OtherChainsButton = ({ list, handleSetChain }: Props) => {
   const closePopover = () => setKey((key) => key + 1)
 
   const onClick = (chainID: string) => {
-    if (displayChains.includes(chainID)) {
+    if (displayChains?.includes(chainID)) {
       changeSelectedDisplayChain(chainID)
       handleSetChain(chainID)
     } else {
diff --git a/src/components/layout/SimpleChainList.tsx b/src/components/layout/SimpleChainList.tsx
index 62e715965..a38755f38 100644
--- a/src/components/layout/SimpleChainList.tsx
+++ b/src/components/layout/SimpleChainList.tsx
@@ -12,9 +12,10 @@ const cx = classNames.bind(styles)
 const SimpleChainList = ({ list, onClick }: Props) => {
   const { displayChains } = useDisplayChains()
   const sortedList = list.sort((a, b) =>
-    displayChains.includes(a.chainID) && !displayChains.includes(b.chainID)
+    displayChains?.includes(a.chainID) && !displayChains?.includes(b.chainID)
       ? -1
-      : !displayChains.includes(a.chainID) && displayChains.includes(b.chainID)
+      : !displayChains?.includes(a.chainID) &&
+        displayChains?.includes(b.chainID)
       ? 1
       : 0
   )
@@ -25,7 +26,7 @@ const SimpleChainList = ({ list, onClick }: Props) => {
         <button
           key={chainID}
           className={cx(styles.button, {
-            [styles.active]: displayChains.includes(chainID),
+            [styles.active]: displayChains?.includes(chainID),
           })}
           onClick={() => onClick(chainID)}
         >
diff --git a/src/components/layout/Table.module.scss b/src/components/layout/Table.module.scss
index f967910b5..18947249e 100644
--- a/src/components/layout/Table.module.scss
+++ b/src/components/layout/Table.module.scss
@@ -12,8 +12,8 @@
   }
 
   td {
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
   }
 
   tr {
@@ -25,7 +25,7 @@
 
   thead {
     th {
-      padding: 12px;
+      padding: 12px 16px;
       position: sticky;
       top: 0;
       background: hsl(
@@ -62,7 +62,7 @@
   }
 
   td {
-    padding: 10px 20px;
+    padding: 10px 16px;
     border-top: 1px solid var(--card-border);
   }
 }
diff --git a/src/data/queries/gov.ts b/src/data/queries/gov.ts
index d69a4dcd9..b4c6cf20c 100644
--- a/src/data/queries/gov.ts
+++ b/src/data/queries/gov.ts
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next"
-import { useQuery } from "react-query"
+import { useQueries, useQuery } from "react-query"
 import { last } from "ramda"
 import { sentenceCase } from "sentence-case"
 import { AccAddress, Proposal, Vote } from "@terra-money/feather.js"
@@ -116,15 +116,12 @@ export interface ProposalResult46 {
 /* proposals */
 export const useProposals = (status: ProposalStatus) => {
   const networks = useNetwork()
-  return useQuery(
-    [queryKey.gov.proposals, status],
-    async () => {
-      const chainList = Object.values(networks)
-      // TODO: Pagination
-      // Required when the number of results exceed 100
-      // About 50 passed propsals from 2019 to 2021
-      const proposals = await Promise.all(
-        chainList.map(async ({ lcd, version }) => {
+
+  return useQueries(
+    Object.values(networks).map(({ lcd, version, chainID }) => {
+      return {
+        queryKey: [queryKey.gov.proposals, lcd, status],
+        queryFn: async () => {
           if (version === "0.46") {
             const {
               data: { proposals },
@@ -136,30 +133,32 @@ export const useProposals = (status: ProposalStatus) => {
               },
             })
 
-            return (proposals as ProposalResult46[]).map((prop) => ({
-              ...prop,
-              proposal_id: prop.id,
-              content: prop.messages.length
-                ? prop.messages[0]["@type"] ===
-                  "/cosmos.gov.v1.MsgExecLegacyContent"
-                  ? prop.messages[0].content
+            return (
+              (proposals as ProposalResult46[]).map((prop) => ({
+                ...prop,
+                proposal_id: prop.id,
+                content: prop.messages.length
+                  ? prop.messages[0]["@type"] ===
+                    "/cosmos.gov.v1.MsgExecLegacyContent"
+                    ? prop.messages[0].content
+                    : {
+                        ...prop.messages[0],
+                        title: JSON.parse(prop.metadata).title,
+                        description: JSON.parse(prop.metadata).summary,
+                      }
                   : {
-                      ...prop.messages[0],
+                      "@type": "/cosmos.gov.v1.TextProposal",
                       title: JSON.parse(prop.metadata).title,
                       description: JSON.parse(prop.metadata).summary,
-                    }
-                : {
-                    "@type": "/cosmos.gov.v1.TextProposal",
-                    title: JSON.parse(prop.metadata).title,
-                    description: JSON.parse(prop.metadata).summary,
-                  },
-              final_tally_result: {
-                yes: prop.final_tally_result.yes_count,
-                abstain: prop.final_tally_result.abstain_count,
-                no: prop.final_tally_result.no_count,
-                no_with_veto: prop.final_tally_result.no_with_veto_count,
-              },
-            })) as ProposalResult[]
+                    },
+                final_tally_result: {
+                  yes: prop.final_tally_result.yes_count,
+                  abstain: prop.final_tally_result.abstain_count,
+                  no: prop.final_tally_result.no_count,
+                  no_with_veto: prop.final_tally_result.no_with_veto_count,
+                },
+              })) as ProposalResult[]
+            ).map((prop) => ({ prop, chain: chainID }))
           } else {
             const {
               data: { proposals },
@@ -170,23 +169,15 @@ export const useProposals = (status: ProposalStatus) => {
                 proposal_status: Proposal.Status[status],
               },
             })
-            return proposals as ProposalResult[]
+            return (proposals as ProposalResult[]).map((prop) => ({
+              prop,
+              chain: chainID,
+            }))
           }
-        })
-      )
-
-      return proposals
-        .reduce(
-          (acc, cur, i) => {
-            cur.map((prop) => acc.push({ prop, chain: chainList[i].chainID }))
-            return acc
-          },
-          [] as { prop: ProposalResult; chain: string }[]
-          // remove proposals with unsupported protobuf content
-        )
-        .filter(({ prop }) => prop.content)
-    },
-    { ...RefetchOptions.DEFAULT }
+        },
+        ...RefetchOptions.DEFAULT,
+      }
+    })
   )
 }
 
diff --git a/src/data/queries/tendermint.ts b/src/data/queries/tendermint.ts
index 30342fd6b..96adb0472 100644
--- a/src/data/queries/tendermint.ts
+++ b/src/data/queries/tendermint.ts
@@ -84,13 +84,15 @@ export const useValidNetworks = (networks: Network[]) => {
         queryFn: async () => {
           if (prefix === "terra") return chainID
 
-          const { data } = await axios.get(
+          const { data } = (await axios.get(
             `/cosmos/bank/v1beta1/balances/${randomAddress(prefix)}`,
             {
               baseURL: lcd, // TODO: pass custom lcd to the function
               timeout: VALIDATION_TIMEOUT,
             }
-          )
+          )) || {
+            data: {},
+          }
 
           if (Array.isArray(data.balances)) return chainID
         },
diff --git a/src/pages/custom/ManageCustomTokens.tsx b/src/pages/custom/ManageCustomTokens.tsx
index a728f285d..e227e0308 100644
--- a/src/pages/custom/ManageCustomTokens.tsx
+++ b/src/pages/custom/ManageCustomTokens.tsx
@@ -116,7 +116,6 @@ const Component = ({ whitelist, keyword }: Props) => {
 
 const ManageCustomTokens = () => {
   const { data: cw20, ...cw20WhitelistState } = useCW20Whitelist()
-  console.log(cw20)
   const { whitelist } = useWhitelist()
   const networkName = useNetworkName()
 
diff --git a/src/pages/gov/ProposalDescription.tsx b/src/pages/gov/ProposalDescription.tsx
index 3d9b32c8c..4d29d5054 100644
--- a/src/pages/gov/ProposalDescription.tsx
+++ b/src/pages/gov/ProposalDescription.tsx
@@ -118,7 +118,6 @@ const ProposalDescription = ({ proposal }: { proposal: ProposalResult }) => {
 export default ProposalDescription
 
 function isLinkSafe(url: string) {
-  console.log(url)
   try {
     const { protocol, hostname } = new URL(url)
     return (
diff --git a/src/pages/gov/ProposalsByStatus.tsx b/src/pages/gov/ProposalsByStatus.tsx
index bd9a13152..b9572dda1 100644
--- a/src/pages/gov/ProposalsByStatus.tsx
+++ b/src/pages/gov/ProposalsByStatus.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next"
 import {
+  ProposalResult,
   ProposalStatus,
   useProposals,
   useProposalStatusItem,
@@ -10,10 +11,17 @@ import ProposalItem from "./ProposalItem"
 import GovernanceParams from "./GovernanceParams"
 import styles from "./ProposalsByStatus.module.scss"
 import ChainFilter from "components/layout/ChainFilter"
+import { combineState } from "data/query"
 
 const ProposalsByStatus = ({ status }: { status: ProposalStatus }) => {
   const { t } = useTranslation()
-  const { data: proposals, ...proposalState } = useProposals(status)
+  const proposalsResult = useProposals(status)
+  const proposals = proposalsResult.reduce(
+    (acc, { data }) => (data ? [...acc, ...data] : acc),
+    [] as { prop: ProposalResult; chain: string }[]
+  )
+
+  const proposalState = combineState(...proposalsResult)
   const { label } = useProposalStatusItem(status)
 
   const render = () => {
diff --git a/src/pages/stake/QuickStake.module.scss b/src/pages/stake/QuickStake.module.scss
index 51a105481..a56262d02 100644
--- a/src/pages/stake/QuickStake.module.scss
+++ b/src/pages/stake/QuickStake.module.scss
@@ -19,9 +19,9 @@
   margin-right: 12px;
 
   .token__icon {
-    width: 50px;
-    height: 50px;
-    padding: 12px;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
     border-radius: 50%;
     background: hsl(
       var(--button-default-bg-h),
@@ -34,9 +34,9 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    width: 20px;
-    height: 20px;
-    padding: 2px;
+    width: 16px;
+    height: 16px;
+    padding: 1px;
     border-radius: 50%;
     background-color: var(--card-bg-muted);
   }
diff --git a/src/pages/stake/QuickStake.tsx b/src/pages/stake/QuickStake.tsx
index c69f444f4..32fd834d0 100644
--- a/src/pages/stake/QuickStake.tsx
+++ b/src/pages/stake/QuickStake.tsx
@@ -21,7 +21,9 @@ import {
 import { combineState } from "data/query"
 import { Tooltip, TooltipIcon } from "components/display"
 import { Delegation } from "@terra-money/feather.js"
-import TokenSelector, { TokenInterface } from "components/form/TokenSelector"
+import TokenSelector, {
+  TokenInterface,
+} from "components/form/Selectors/TokenSelector/TokenSelector"
 import { useState } from "react"
 import { useAuth } from "auth"
 import is from "auth/scripts/is"
@@ -266,6 +268,7 @@ const QuickStake = () => {
               defaultSortOrder: "desc",
               sorter: ({ unbonding: a = 0 }, { unbonding: b = 0 }) => a - b,
               render: (value = 0) => t("{{value}} days", { value }),
+              align: "right",
             },
             {
               title: (
@@ -291,6 +294,7 @@ const QuickStake = () => {
               defaultSortOrder: "desc",
               sorter: ({ rewards: a = 0 }, { rewards: b = 0 }) => a - b,
               render: (rewards = 0) => readPercent(rewards),
+              align: "right",
             },
             {
               title: t("Actions"),
diff --git a/src/pages/stake/StakingDetailsCompact.tsx b/src/pages/stake/StakingDetailsCompact.tsx
index 2cfae7a71..38101820a 100644
--- a/src/pages/stake/StakingDetailsCompact.tsx
+++ b/src/pages/stake/StakingDetailsCompact.tsx
@@ -40,8 +40,6 @@ const StakingDetailsCompact = ({
   const { data: allianceDelegations, ...allianceDelegationsState } =
     useAllianceDelegations(chainID, !isAlliance)
 
-  console.log(delegations)
-
   const delegated = isAlliance
     ? allianceDelegations?.reduce(
         (acc, { balance: amount }) => acc + Number(amount),
diff --git a/src/pages/stake/Validators.module.scss b/src/pages/stake/Validators.module.scss
index 8cc16a8bc..098d26345 100644
--- a/src/pages/stake/Validators.module.scss
+++ b/src/pages/stake/Validators.module.scss
@@ -45,9 +45,9 @@
   margin-right: 12px;
 
   .token__icon {
-    width: 50px;
-    height: 50px;
-    padding: 12px;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
     border-radius: 50%;
     background: hsl(
       var(--button-default-bg-h),
@@ -60,9 +60,9 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    width: 20px;
-    height: 20px;
-    padding: 2px;
+    width: 16px;
+    height: 16px;
+    padding: 1px;
     border-radius: 50%;
     background-color: var(--card-bg-muted);
   }
diff --git a/src/pages/stake/Validators.tsx b/src/pages/stake/Validators.tsx
index a5685ac10..c2bf039c2 100644
--- a/src/pages/stake/Validators.tsx
+++ b/src/pages/stake/Validators.tsx
@@ -7,7 +7,9 @@ import styles from "./Validators.module.scss"
 import ValidatorsList from "./ValidatorsList"
 import { Flex, Grid, InlineFlex, Page, Table } from "components/layout"
 import { useTranslation } from "react-i18next"
-import TokenSelector, { TokenInterface } from "components/form/TokenSelector"
+import TokenSelector, {
+  TokenInterface,
+} from "components/form/Selectors/TokenSelector/TokenSelector"
 import { useNetwork } from "data/wallet"
 import { useState } from "react"
 import {
@@ -237,6 +239,7 @@ const Validators = () => {
                   defaultSortOrder: "desc",
                   sorter: ({ unbonding: a = 0 }, { unbonding: b = 0 }) => a - b,
                   render: (value = 0) => t("{{value}} days", { value }),
+                  align: "right",
                 },
                 {
                   title: (
@@ -263,6 +266,7 @@ const Validators = () => {
                   defaultSortOrder: "desc",
                   sorter: ({ rewards: a = 0 }, { rewards: b = 0 }) => a - b,
                   render: (rewards = 0) => readPercent(rewards),
+                  align: "right",
                 },
               ]}
             />
diff --git a/src/pages/stake/ValidatorsList.tsx b/src/pages/stake/ValidatorsList.tsx
index a417e014e..d8068924e 100644
--- a/src/pages/stake/ValidatorsList.tsx
+++ b/src/pages/stake/ValidatorsList.tsx
@@ -117,6 +117,7 @@ const ValidatorsList = ({
                 { voting_power_rate: b = 0 }
               ) => a - b,
               render: (value = 0) => readPercent(value),
+              align: "right",
             },
             {
               title: t("Commission"),
@@ -128,6 +129,7 @@ const ValidatorsList = ({
               ) => a.rate.toNumber() - b.rate.toNumber(),
               render: ({ rate }: Validator.CommissionRates) =>
                 readPercent(rate.toString(), { fixed: 2 }),
+              align: "right",
             },
             {
               title: t("Actions"),
diff --git a/src/pages/wallet/IbcSendBackTx.tsx b/src/pages/wallet/IbcSendBackTx.tsx
index 293553037..0e345777b 100644
--- a/src/pages/wallet/IbcSendBackTx.tsx
+++ b/src/pages/wallet/IbcSendBackTx.tsx
@@ -129,12 +129,10 @@ function IbcSendBackTx({ token, chainID }: Props) {
     if (waitUntil) {
       ;(async () => {
         while (maxIterations--) {
-          console.log(waitUntil)
           const tokenBalance = await getBalance(
             waitUntil.denom,
             waitUntil.chainID
           )
-          console.log(tokenBalance)
 
           if (Number(tokenBalance) > waitUntil.balance) {
             setWaitUntil(undefined)
diff --git a/src/pages/wallet/SendPage.tsx b/src/pages/wallet/SendPage.tsx
index 7546967ae..7c4323254 100644
--- a/src/pages/wallet/SendPage.tsx
+++ b/src/pages/wallet/SendPage.tsx
@@ -5,10 +5,10 @@ import {
   MsgSend,
   MsgTransfer,
 } from "@terra-money/feather.js"
-import { isDenom, toAmount } from "@terra-money/terra-utils"
+import { toAmount } from "@terra-money/terra-utils"
 import { useInterchainAddresses } from "auth/hooks/useAddress"
-import { Form, FormItem, FormWarning, Input, Select } from "components/form"
-import ChainSelector from "components/form/ChainSelector"
+import { Form, FormItem, FormWarning, Input } from "components/form"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { Flex, Grid } from "components/layout"
 import { SAMPLE_ADDRESS } from "config/constants"
 import { useBankBalance } from "data/queries/bank"
@@ -31,9 +31,10 @@ import { queryKey } from "data/query"
 import Tx from "txs/Tx"
 import AddressBookList from "txs/AddressBook/AddressBookList"
 import { ModalButton } from "components/feedback"
+import AssetSelector from "components/form/Selectors/AssetSelector/AssetSelector"
 
 interface TxValues {
-  asset: string
+  asset?: string
   chain?: string
   recipient?: string // AccAddress | TNS
   address?: AccAddress // hidden input
@@ -131,6 +132,13 @@ const SendPage = () => {
       readNativeDenom(denom).token === watch("asset")
   )
 
+  /* resolve asset */
+  useEffect(() => {
+    if (!asset) {
+      setValue("asset", defaultAsset)
+    }
+  }, [form, asset, defaultAsset, setValue])
+
   /* resolve recipient */
   useEffect(() => {
     if (!recipient) {
@@ -208,19 +216,19 @@ const SendPage = () => {
       if (!chain || !destinationChain || !token) return
 
       if (destinationChain === chain) {
-        const msgs = isDenom(token?.denom)
+        const msgs = AccAddress.validate(token?.denom)
           ? [
-              new MsgSend(
+              new MsgExecuteContract(
                 addresses[token?.chain ?? ""],
-                address,
-                amount + token?.denom
+                token?.denom ?? "",
+                execute_msg
               ),
             ]
           : [
-              new MsgExecuteContract(
+              new MsgSend(
                 addresses[token?.chain ?? ""],
-                token?.denom ?? "",
-                execute_msg
+                address,
+                amount + token?.denom
               ),
             ]
 
@@ -325,6 +333,19 @@ const SendPage = () => {
     }
   }, [chain, trigger, recipient])
 
+  const filteredAssets = useMemo(
+    () => availableAssets.filter(({ symbol }) => !symbol.endsWith("...")),
+    [availableAssets]
+  )
+
+  const assetsByDenom = filteredAssets.reduce(
+    (acc: Record<string, AssetType>, item: AssetType) => {
+      acc[item.denom] = item
+      return acc
+    },
+    {}
+  )
+
   return (
     // @ts-expect-error
     <Tx {...tx}>
@@ -339,20 +360,12 @@ const SendPage = () => {
                 label={t("Asset")}
                 error={errors.asset?.message ?? errors.address?.message}
               >
-                <Select
-                  {...register("asset", {
-                    value: defaultAsset,
-                  })}
-                  autoFocus
-                >
-                  {availableAssets
-                    .filter(({ symbol }) => !symbol.endsWith("..."))
-                    .map(({ denom, symbol }, i) => (
-                      <option value={denom} key={i}>
-                        {symbol}
-                      </option>
-                    ))}
-                </Select>
+                <AssetSelector
+                  value={asset ?? ""}
+                  onChange={(asset) => setValue("asset", asset)}
+                  assetList={filteredAssets}
+                  assetsByDenom={assetsByDenom}
+                />
               </FormItem>
               {availableChains && (
                 <FormItem label={t("Source chain")}>
diff --git a/src/pages/wallet/TransferPage.tsx b/src/pages/wallet/TransferPage.tsx
index a597d6702..99ef83f33 100644
--- a/src/pages/wallet/TransferPage.tsx
+++ b/src/pages/wallet/TransferPage.tsx
@@ -8,7 +8,7 @@ import {
 import { isDenom, toAmount } from "@terra-money/terra-utils"
 import { useInterchainAddresses } from "auth/hooks/useAddress"
 import { Form, FormItem, Input, Select } from "components/form"
-import ChainSelector from "components/form/ChainSelector"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { Flex } from "components/layout"
 import { useBankBalance } from "data/queries/bank"
 import { useExchangeRates } from "data/queries/coingecko"
diff --git a/src/pages/wallet/Wallet.tsx b/src/pages/wallet/Wallet.tsx
index 0e1ebd4b1..86ca66519 100644
--- a/src/pages/wallet/Wallet.tsx
+++ b/src/pages/wallet/Wallet.tsx
@@ -10,6 +10,7 @@ import AssetPage from "./AssetPage"
 import ReceivePage from "./ReceivePage"
 import SendPage from "./SendPage"
 import { atom, useRecoilState } from "recoil"
+import { useEffect } from "react"
 
 enum Path {
   wallet = "wallet",
@@ -47,7 +48,7 @@ export { useWalletRoute, Path }
 
 export const isWalletBarOpen = atom({
   key: "isWalletBarOpen",
-  default: true,
+  default: false,
 })
 
 export const walletBarRoute = atom({
@@ -59,6 +60,12 @@ const Wallet = () => {
   const [isOpen, setIsOpen] = useRecoilState(isWalletBarOpen)
   const [route, setRoute] = useRecoilState(walletBarRoute)
 
+  useEffect(() => {
+    if (document.body.clientWidth > 992) {
+      setIsOpen(true)
+    }
+  }, [setIsOpen])
+
   const BackButton = () => {
     if (route.path === Path.wallet) return null
 
diff --git a/src/txs/swap/TFMSwapForm.tsx b/src/txs/swap/TFMSwapForm.tsx
index b03c5ce2e..7fe39c485 100644
--- a/src/txs/swap/TFMSwapForm.tsx
+++ b/src/txs/swap/TFMSwapForm.tsx
@@ -36,6 +36,8 @@ import { SwapAssets, validateAssets } from "./useSwapUtils"
 import { validateParams } from "./useSwapUtils"
 import { calcMinimumReceive, SlippageParams } from "./SingleSwapContext"
 import { useTFMSwap, validateTFMSlippageParams } from "./TFMSwapContext"
+import { useCustomTokensCW20 } from "data/settings/CustomTokens"
+import { useNativeDenoms } from "data/token"
 
 interface TFMSwapParams extends SwapAssets {
   amount: string
@@ -49,6 +51,10 @@ const TFMSwapForm = ({ chainID }: { chainID: string }) => {
   const address = useAddress()
   const { state } = useLocation()
 
+  // token whitelists
+  const cw20 = useCustomTokensCW20()
+  const readNativeDenom = useNativeDenoms()
+
   /* swap context */
   const { options, findTokenItem, findDecimals } = useTFMSwap()
 
@@ -202,14 +208,19 @@ const TFMSwapForm = ({ chainID }: { chainID: string }) => {
     createTx,
     queryKeys: [
       queryKey.bank.balances,
-      ...[offerAsset, askAsset]
-        .filter((asset) => asset && AccAddress.validate(asset))
-        .map((token) => [
-          queryKey.wasm.contractQuery,
-          token,
-          { balance: address },
-        ]),
+      queryKey.bank.balance,
+      queryKey.wasm.contractQuery,
     ],
+    onSuccess: () => {
+      if (askAsset && AccAddress.validate(askAsset)) {
+        const data = readNativeDenom(askAsset)
+        cw20.add({
+          ...data,
+          token: askAsset,
+          name: data.name ?? data.symbol,
+        })
+      }
+    },
     chain: chainID,
   }
 
diff --git a/src/txs/utils.ts b/src/txs/utils.ts
index 13c16d35e..99e22e4f9 100644
--- a/src/txs/utils.ts
+++ b/src/txs/utils.ts
@@ -1,10 +1,17 @@
-import BigNumber from "bignumber.js"
 import { readAmount, toAmount } from "@terra-money/terra-utils"
 import { Coin, Coins } from "@terra-money/feather.js"
-import { has } from "utils/num"
-import { FindDecimals } from "./IBCHelperContext"
 import { getShouldTax } from "data/queries/treasury"
+import { FindDecimals } from "./IBCHelperContext"
 import { calcMinimumTaxAmount } from "./Tx"
+import BigNumber from "bignumber.js"
+import { has } from "utils/num"
+import axios from "axios"
+
+// Intercept all axios errors.
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {}
+)
 
 export const getPlaceholder = (decimals = 6) => "0.".padEnd(decimals + 2, "0")
 
diff --git a/src/utils/chain.ts b/src/utils/chain.ts
index 8112a0776..eb9985fbe 100644
--- a/src/utils/chain.ts
+++ b/src/utils/chain.ts
@@ -45,7 +45,7 @@ export const useSortedDisplayChains = () => {
   const chains = useChainsByAssetValue()
   const { displayChains } = useDisplayChains()
   const sorted = chains
-    .filter((c) => displayChains.includes(c.chain))
+    .filter((c) => displayChains?.includes(c.chain))
     .filter((c) => isTerraChain(c.chain))
     .concat(
       chains.filter((c) => isOsmosisChain(c.chain)),
diff --git a/src/utils/localStorage/hooks.ts b/src/utils/localStorage/hooks.ts
index 9cb7051cb..abf131ab7 100644
--- a/src/utils/localStorage/hooks.ts
+++ b/src/utils/localStorage/hooks.ts
@@ -60,7 +60,10 @@ export const useDisplayChains = () => {
   const [displayChains, setDisplayChains] = useRecoilState(displayChainsState)
   const changeDisplayChains = useCallback(
     (newChains: string[]) => {
-      const newDisplayChains = { ...displayChains, [networkName]: newChains }
+      const newDisplayChains = {
+        ...(displayChains || []),
+        [networkName]: newChains,
+      }
       setLocalSetting(SettingKey.DisplayChains, newDisplayChains)
       setDisplayChains(newDisplayChains)
     },
@@ -68,7 +71,7 @@ export const useDisplayChains = () => {
   )
   return {
     all: displayChains,
-    displayChains: displayChains[networkName].filter((c) => c !== ""),
+    displayChains: displayChains[networkName]?.filter((c) => c !== ""),
     changeDisplayChains,
   }
 }