diff --git a/.env.testnet b/.env.testnet
index 630719cc9..ee34db3f5 100644
--- a/.env.testnet
+++ b/.env.testnet
@@ -9,6 +9,6 @@ VITE_STABLE_TOKEN_ADDRESS=0x7E65A71046170A5b1AaB5C5cC64242EDF95CaBEA
 VITE_NETWORK=testnet
 VITE_FLEXPLAN_ENABLED=true
 VITE_GQL_PROXY=https://gql-proxy.thechaindata.com
-VITE_AUTH_URL=https://kepler-auth.thechaindata.com
+VITE_AUTH_URL=https://dev-auth.thechaindata.com
 VITE_NETWORK_DEPLOYMENT_ID=QmQDQa6id3QP1Tiznu7gE4ZjNw4urQnS6R9mgfvzANWgqb
 VITE_AIRDROP_DOMAIN=https://sq-airdrop-backend.thechaindata.com
diff --git a/package.json b/package.json
index 87e570a23..327a6dcfe 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18",
+    "@web3-name-sdk/core": "^0.1.5",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.9",
diff --git a/public/static/connectWallet.png b/public/static/connectWallet.png
new file mode 100644
index 000000000..de174c459
Binary files /dev/null and b/public/static/connectWallet.png differ
diff --git a/src/components/ConnectWallet/ConnectWallet.module.less b/src/components/ConnectWallet/ConnectWallet.module.less
index 55b97b830..2dd64aeb1 100644
--- a/src/components/ConnectWallet/ConnectWallet.module.less
+++ b/src/components/ConnectWallet/ConnectWallet.module.less
@@ -1,77 +1,24 @@
 .container {
   display: flex;
   flex-direction: column;
-
-  padding: 2rem 3rem;
+  align-items: center;
+  padding: 24px;
   background: white;
   margin: 1rem 0;
   border-radius: 8px;
+  max-width: 420px;
+
+  box-shadow: 0px 10px 20px 0px rgba(67, 136, 221, 0.06);
 }
 
 .subtitle {
   color: var(--gray700);
   margin: 1rem 0;
+  text-align: center;
 }
 
-.walletContainer {
-  border-radius: 8px !important;
-  margin: 1rem 0;
-}
-
-.walletContainer::before {
-  border-radius: 8px !important;
-}
-
-.walletContainer :is(p, i) {
-  background: unset;
-  -webkit-background-clip: unset;
-  -webkit-text-fill-color: unset;
-}
-
-.wallet {
-  width: 400px;
-  cursor: pointer;
-}
-
-.title {
-  font-size: 26px;
-  font-weight: 600;
-}
-
-.walletIcon {
-  width: 180px;
-  margin: 1rem 0;
-  padding-right: 12px;
-}
-
-.walletSubtitle {
-  color: var(--gray700);
-}
-
-.arrow {
-  font-size: 30px;
-  color: var(--gray900);
-}
-
-.connectButton {
-  will-change: transform;
-  font-weight: 700;
-  line-height: 1;
-  height: 44px;
-  transition-timing-function: ease;
-  transition-duration: .1s;
-  font-family: var(--sq-font-family);
-  padding: 0 24px;
-  border-radius: 9999px;
-  background: #fff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  gap: 8px;
-}
-
-.connectButton + .connectButton {
-  margin-top: 20px;
+.connectBtn {
+  &:hover {
+    transform: scale(1.03);
+  }
 }
diff --git a/src/components/ConnectWallet/ConnectWallet.tsx b/src/components/ConnectWallet/ConnectWallet.tsx
index 99b12f733..2a6233cc5 100644
--- a/src/components/ConnectWallet/ConnectWallet.tsx
+++ b/src/components/ConnectWallet/ConnectWallet.tsx
@@ -4,7 +4,8 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
-import { Button, Typography } from '@subql/components';
+import { Typography } from '@subql/components';
+import { Button } from 'antd';
 import clsx from 'clsx';
 
 import styles from './ConnectWallet.module.less';
@@ -15,91 +16,39 @@ type Props = {
   className?: string;
 };
 
-export const SUPPORTED_NETWORKS = [
-  {
-    icon: '/static/metaMask.svg',
-    name: 'MetaMask',
-    desc: 'Connect with Metamask browser extension',
-  },
-  {
-    icon: '/static/walletConnect.svg',
-    name: 'WalletConnect',
-    desc: 'Connect with WalletConnect browser extension',
-  },
-  {
-    icon: '/static/talisman.png',
-    name: 'Talisman',
-    desc: 'Connect with Talisman browser extension',
-  },
-  {
-    icon: '/static/rainbow.svg',
-    name: 'Rainbow',
-    desc: 'Connect with Rainbow browser extension',
-  },
-];
-
-const Wallet: React.FC<{ description?: string; name: string; icon: string; onClick?: () => void }> = ({
-  icon,
-  name,
-  onClick,
-  description,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Button
-      type="secondary"
-      className={styles.walletContainer}
-      onClick={onClick}
-      leftItem={
-        <div className={styles.wallet}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <img src={icon} alt="wallet logo" style={{ width: 36, height: 36, marginRight: 10 }} />
-            <Typography variant="h4" style={{ color: '#000' }}>
-              {name}
-            </Typography>
-          </div>
-          <Typography variant="text" className={styles.walletSubtitle}>
-            {description ?? t('connectWallet.metamaskDesc')}
-          </Typography>
-          <i className={['bi-arrow-right', styles.arrow].join(' ')} role="img" aria-label="arrow right" />
-        </div>
-      }
-    />
-  );
-};
-
 export const ConnectWallet: React.FC<Props> = ({ title, subTitle, className }) => {
   const { t } = useTranslation();
 
   return (
     <div className={clsx(styles.container, className)}>
-      <Typography variant="h4" className={styles.title}>
+      <img
+        src="/static/connectWallet.png"
+        alt="connect wallet"
+        width="238"
+        height="238"
+        style={{ objectFit: 'contain' }}
+      ></img>
+      <Typography variant="h4" className={styles.title} weight={600}>
         {title || t('connectWallet.title')}
       </Typography>
       <Typography variant="text" className={styles.subtitle}>
         {subTitle || t('connectWallet.subtitle')}
       </Typography>
 
-      {SUPPORTED_NETWORKS.map((supportConnector) => {
-        const { icon, name, desc } = supportConnector;
-        return (
-          <ConnectButton.Custom key={name}>
-            {({ openConnectModal }) => {
-              return (
-                <Wallet
-                  icon={icon}
-                  name={name}
-                  description={desc}
-                  onClick={() => {
-                    openConnectModal();
-                  }}
-                ></Wallet>
-              );
-            }}
-          </ConnectButton.Custom>
-        );
-      })}
+      <ConnectButton.Custom>
+        {({ openConnectModal }) => (
+          <Button
+            shape="round"
+            size="large"
+            onClick={() => openConnectModal()}
+            type="primary"
+            style={{ width: '100%', background: 'var(--sq-blue600)' }}
+            className={styles.connectBtn}
+          >
+            Connect Wallet
+          </Button>
+        )}
+      </ConnectButton.Custom>
     </div>
   );
 };
diff --git a/src/components/IndexerDetails/IndexerName.tsx b/src/components/IndexerDetails/IndexerName.tsx
index 4bc1041c0..eef8e7818 100644
--- a/src/components/IndexerDetails/IndexerName.tsx
+++ b/src/components/IndexerDetails/IndexerName.tsx
@@ -7,7 +7,7 @@ import { limitQueue } from '@utils/limitation';
 import { toSvg } from 'jdenticon';
 
 import { useIndexerMetadata } from '../../hooks';
-import { useENS } from '../../hooks/useEns';
+import { useWeb3Name } from '../../hooks/useSpaceId';
 import { truncateAddress } from '../../utils';
 import Copy from '../Copy';
 import IPFSImage from '../IPFSImage';
@@ -38,38 +38,38 @@ export const IndexerName: React.FC<Props> = ({
   onClick,
   onAddressClick,
 }) => {
-  const { fetchEnsNameOnce, fetchEnsFromCache } = useENS(address);
-  const [ensName, setEnsName] = useState<string>();
+  const { fetchWeb3NameOnce, fetchWeb3NameFromCache } = useWeb3Name(address);
+  const [web3Name, setWeb3Name] = useState<string>();
 
   const sortedName = useMemo(() => {
-    return ensName || name || `${address.slice(0, 6)}...${address.slice(address.length - 4, address.length)}`;
-  }, [name, ensName]);
+    return web3Name || name || `${address.slice(0, 6)}...${address.slice(address.length - 4, address.length)}`;
+  }, [name, web3Name]);
 
-  const fetchEns = async () => {
-    const fetchedEns = await limitQueue.add(() => fetchEnsNameOnce());
-    if (fetchedEns) {
-      setEnsName(fetchedEns);
+  const fetchWeb3 = async () => {
+    const fetchedWeb3 = await limitQueue.add(() => fetchWeb3NameOnce());
+    if (fetchedWeb3) {
+      setWeb3Name(fetchedWeb3);
     }
   };
 
-  const initEns = async () => {
-    const cachedName = await fetchEnsFromCache();
+  const initWeb3 = async () => {
+    const cachedName = await fetchWeb3NameFromCache();
     if (cachedName) {
-      setEnsName(cachedName);
+      setWeb3Name(cachedName);
       return;
     }
 
-    fetchEns();
+    fetchWeb3();
   };
 
   useEffect(() => {
-    initEns();
+    initWeb3();
   }, []);
 
   return (
     <div
       className={styles.indexer}
-      onMouseEnter={fetchEns}
+      onMouseEnter={fetchWeb3}
       onClick={() => {
         onClick?.(address);
       }}
diff --git a/src/hooks/useEns.tsx b/src/hooks/useEns.tsx
deleted file mode 100644
index 754a38cbd..000000000
--- a/src/hooks/useEns.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import localforage from 'localforage';
-import { once } from 'lodash-es';
-
-import { useWeb3Store } from 'src/stores';
-
-type EnsReturnFuncType = () => Promise<string | null | undefined>;
-export function useENS(address: string): {
-  fetchEnsName: EnsReturnFuncType;
-  fetchEnsNameOnce: EnsReturnFuncType;
-  fetchEnsFromCache: EnsReturnFuncType;
-} {
-  const { ethProvider } = useWeb3Store();
-
-  const fetchEnsName = async () => {
-    if (!address || !ethProvider) return undefined;
-    const ens = await ethProvider().lookupAddress(address);
-    localforage.setItem(`ens-${address}`, ens);
-    return ens;
-  };
-
-  const fetchEnsFromCache = async () => {
-    if (!address) return;
-    return await localforage.getItem<string | null | undefined>(`ens-${address}`);
-  };
-
-  return {
-    fetchEnsName,
-    fetchEnsNameOnce: once(fetchEnsName),
-    fetchEnsFromCache,
-  };
-}
diff --git a/src/hooks/useLocalProjects.ts b/src/hooks/useLocalProjects.ts
index 9fc392f69..19d59c6ef 100644
--- a/src/hooks/useLocalProjects.ts
+++ b/src/hooks/useLocalProjects.ts
@@ -6,15 +6,17 @@ import { useProjectMetadata } from '@containers';
 import { ProjectFieldsFragment, ProjectsOrderBy } from '@subql/network-query';
 import { useGetProjectsLazyQuery } from '@subql/react-hooks';
 import { notEmpty } from '@utils';
-import { filterSuccessPromoiseSettledResult } from '@utils';
 import { makeCacheKey } from '@utils/limitation';
 import { waitForSomething } from '@utils/waitForSomething';
-import { useInterval, useMount } from 'ahooks';
+import { useMount } from 'ahooks';
 import localforage from 'localforage';
 import { uniqWith } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 const cacheKey = makeCacheKey('localProjectWithMetadata');
 
+type ProjectWithMetadata = { description: string; versionDescription: string; name: string } & ProjectFieldsFragment;
+
 export const useLocalProjects = () => {
   // this hooks want to do these things:
   // 1. Get all projects order by order
@@ -35,64 +37,80 @@ export const useLocalProjects = () => {
   });
   const { getMetadataFromCid } = useProjectMetadata();
 
-  const projects = useRef<
-    ({ description: string; versionDescription: string; name: string } & ProjectFieldsFragment)[]
-  >([]);
+  const projects = useRef<ProjectWithMetadata[]>([]);
 
-  const fetchAllProjects = async (length = 0) => {
-    try {
-      loading.current = true;
+  const fetchAllProjects = async (cachedProjects?: ProjectWithMetadata[], withLoading = true) => {
+    const innerFetch: (fetchedProjects: ProjectWithMetadata[]) => Promise<ProjectWithMetadata[]> = async (
+      fetchedProjects,
+    ) => {
+      let tempProjects = cloneDeep(fetchedProjects) || [];
 
-      const res = await getProjects({
-        variables: {
-          offset: length,
-          orderBy: [ProjectsOrderBy.ID_DESC],
-          ids: [],
-        },
-      });
-
-      if (res.data?.projects?.nodes) {
-        const nonEmptyProjects = res.data.projects?.nodes.filter(notEmpty);
-        const allMetadata = await Promise.allSettled(nonEmptyProjects.map((i) => getMetadataFromCid(i.metadata)));
-        const projectsWithMetadata = nonEmptyProjects.map((project, index) => {
-          const rawMetadata = allMetadata[index];
-          const metadata =
-            rawMetadata.status === 'fulfilled'
-              ? rawMetadata.value
-              : { name: '', description: '', versionDescription: '' };
-          return {
-            ...project,
-            ...metadata,
-          };
+      try {
+        if (withLoading) {
+          loading.current = true;
+        }
+
+        const res = await getProjects({
+          variables: {
+            offset: tempProjects.length,
+            orderBy: [ProjectsOrderBy.ID_ASC],
+            ids: [],
+          },
+          defaultOptions: {
+            fetchPolicy: 'network-only',
+          },
         });
-        const mergered = uniqWith([...projects.current, ...projectsWithMetadata], (x, y) => x.id === y.id);
-        projects.current = mergered;
-        await localforage.setItem(cacheKey, mergered);
 
-        if (mergered.length >= res.data.projects.totalCount) {
-          loading.current = false;
-          return;
+        if (res.data?.projects?.nodes) {
+          const nonEmptyProjects = res.data.projects?.nodes.filter(notEmpty);
+          const allMetadata = await Promise.allSettled(nonEmptyProjects.map((i) => getMetadataFromCid(i.metadata)));
+          const projectsWithMetadata = nonEmptyProjects.map((project, index) => {
+            const rawMetadata = allMetadata[index];
+            const metadata =
+              rawMetadata.status === 'fulfilled'
+                ? rawMetadata.value
+                : { name: '', description: '', versionDescription: '' };
+            return {
+              ...project,
+              ...metadata,
+            };
+          });
+          const mergered = uniqWith([...tempProjects, ...projectsWithMetadata], (x, y) => x.id === y.id);
+          tempProjects = mergered;
+          if (mergered.length >= res.data.projects.totalCount) {
+            loading.current = false;
+            return tempProjects;
+          }
+
+          return await innerFetch(tempProjects);
         }
-
-        window.requestIdleCallback(() => fetchAllProjects(mergered.length));
+      } catch (e) {
+        setError(e);
+        loading.current = false;
+        return tempProjects;
       }
-    } catch (e) {
-      setError(e);
-      loading.current = false;
-    }
+
+      return tempProjects;
+    };
+
+    const res = await innerFetch(cachedProjects || []);
+
+    projects.current = res;
+    await localforage.setItem(cacheKey, res);
   };
 
   const init = async () => {
     // When first estiblish the local cache. We need to fetch all of it.
     // See fetchAllProject. It's a low-priority(requestsIdleCallback) fetch
-    // if there have cache, just add & update metadata.
+    // if there have cache, use cache first, and then fetch from initial to update.
     const cached = await localforage.getItem<
       ({ description: string; versionDescription: string; name: string } & ProjectFieldsFragment)[]
     >(cacheKey);
-
     if (cached) {
       projects.current = cached;
-      fetchAllProjects(cached.length);
+      await fetchAllProjects(cached);
+      // update for next search
+      window.requestIdleCallback(() => fetchAllProjects([], false));
       return;
     }
     fetchAllProjects();
@@ -117,39 +135,10 @@ export const useLocalProjects = () => {
     };
   };
 
-  const updateExistMetadata = async () => {
-    await waitForSomething({ func: () => !loading.current });
-    // IPFS can be cache. So fetch all of it would ok.
-    const allMetadata = await Promise.allSettled(
-      projects.current.map(async (i) => {
-        const data = await getMetadataFromCid(i.metadata);
-        return {
-          [i.id]: data,
-        };
-      }),
-    );
-    const successData = allMetadata.filter(filterSuccessPromoiseSettledResult);
-
-    const newProjectsData = projects.current.map((i) => {
-      const find = successData.find((x) => x.value[i.id]);
-      return {
-        ...i,
-        ...find,
-      };
-    });
-    await localforage.setItem(cacheKey, newProjectsData);
-
-    projects.current = newProjectsData;
-  };
-
   useMount(() => {
     window.requestIdleCallback(() => init());
   });
 
-  useInterval(() => {
-    window.requestIdleCallback(() => updateExistMetadata());
-  }, 60000);
-
   return {
     loading,
     error,
diff --git a/src/hooks/useSpaceId.tsx b/src/hooks/useSpaceId.tsx
new file mode 100644
index 000000000..95108551c
--- /dev/null
+++ b/src/hooks/useSpaceId.tsx
@@ -0,0 +1,84 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { createWeb3Name } from '@web3-name-sdk/core';
+import localforage from 'localforage';
+import { once } from 'lodash-es';
+
+type Web3ReturnFuncType = () => Promise<string | null | undefined>;
+export function useWeb3Name(address: string): {
+  fetchWeb3Name: Web3ReturnFuncType;
+  fetchWeb3NameOnce: Web3ReturnFuncType;
+  fetchWeb3NameFromCache: Web3ReturnFuncType;
+} {
+  const web3Name = createWeb3Name();
+  const rpcMainnet = [
+    'https://eth.llamarpc.com',
+    'https://ethereum.blockpi.network/v1/rpc/public',
+    'https://rpc.payload.de',
+    'https://ethereum.publicnode.com',
+    'https://eth.merkle.io',
+    'https://eth.drpc.org',
+  ];
+  const rpcMainnetRandom = rpcMainnet[Math.floor(Math.random() * rpcMainnet.length)];
+  const rpcBNB = [
+    'https://binance.llamarpc.com',
+    'https://bsc.blockpi.network/v1/rpc/public',
+    'https://bsc.publicnode.com',
+    'https://bsc.drpc.org',
+    'https://1rpc.io/bnb',
+  ];
+  const rpcBNBRandom = rpcBNB[Math.floor(Math.random() * rpcBNB.length)];
+  const rpcARB = [
+    'https://arbitrum.llamarpc.com',
+    'https://arbitrum.blockpi.network/v1/rpc/public',
+    'https://arbitrum-one.publicnode.com',
+    'https://arbitrum.drpc.org',
+    'https://1rpc.io/arb',
+  ];
+  const rpcARBRandom = rpcARB[Math.floor(Math.random() * rpcARB.length)];
+
+  const fetchWeb3Name = async () => {
+    if (!address || !web3Name) return undefined;
+    let web3name = await web3Name.getDomainName({
+      address,
+      queryTldList: ['eth'],
+      rpcUrl: rpcMainnetRandom,
+    });
+    // If there is no eth domain name for that address check for bnb
+    if (web3name === null) {
+      web3name = await web3Name.getDomainName({
+        address,
+        queryTldList: ['bnb'],
+        rpcUrl: rpcBNBRandom,
+      });
+    }
+    // if there is no bnb domain name for that address check for arb
+    if (web3name === null) {
+      web3name = await web3Name.getDomainName({
+        address,
+        queryTldList: ['arb'],
+        rpcUrl: rpcARBRandom,
+      });
+    }
+    // if there is no arb domain name for that address then check for any other tld for that address
+    if (web3name === null) {
+      web3name = await web3Name.getDomainName({
+        address,
+      });
+    }
+    localforage.setItem(`web3name-${address}`, web3name);
+    return web3name;
+  };
+
+  const fetchWeb3NameFromCache = async () => {
+    if (!address) return;
+    return await localforage.getItem<string | null | undefined>(`web3name-${address}`);
+  };
+
+  return {
+    fetchWeb3Name,
+    fetchWeb3NameOnce: once(fetchWeb3Name),
+    fetchWeb3NameFromCache,
+  };
+}
diff --git a/src/i18n/en/explorer.ts b/src/i18n/en/explorer.ts
index d94e1a6ba..c66543011 100644
--- a/src/i18n/en/explorer.ts
+++ b/src/i18n/en/explorer.ts
@@ -210,8 +210,9 @@ const translation = {
     deploymentId: 'Deployment ID',
   },
   connectWallet: {
-    title: 'Connect wallet',
-    subtitle: 'To participate in our test network, please start by connecting your wallet first.',
+    title: 'Connect your wallet',
+    subtitle:
+      "To continue, please connect your wallet to the SubQuery Network. If you don't have a wallet, you can select a provider and create one now.",
     connectWith: 'Connect With:',
     metamaskDesc: 'Connect with Metamask browser extension',
     talismanDesc: 'Connect with Talisman browser extension',
diff --git a/src/index.less b/src/index.less
index e7cfe279f..b451cd3ad 100644
--- a/src/index.less
+++ b/src/index.less
@@ -227,7 +227,7 @@ label,
 
 .button {
   margin-right: 1rem;
-  background: var(--gradient-to);
+  background: var(--sq-blue600);
   color: white;
 }
 
@@ -284,3 +284,13 @@ label,
   height: 100%;
   max-height: 60px;
 }
+
+
+.ant-btn-primary {
+  background-color: var(--sq-blue600);
+}
+
+.ant-steps .ant-steps-item-process .ant-steps-item-icon {
+  background-color: var(--sq-blue600);
+  border-color: var(--sq-blue600);
+}
\ No newline at end of file
diff --git a/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx b/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx
index 6385a047b..531144a62 100644
--- a/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx
+++ b/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx
@@ -9,6 +9,7 @@ import CreateHostingFlexPlan, {
   CreateHostingFlexPlanRef,
 } from '@pages/explorer/FlexPlans/CreateHostingPlan/CreateHostingPlan';
 import { Typography } from '@subql/components';
+import { bytes32ToCid } from '@subql/network-clients';
 import { formatSQT } from '@subql/react-hooks';
 import { TOKEN } from '@utils';
 import { Table } from 'antd';
@@ -46,7 +47,10 @@ const MyHostedPlan: FC = (props) => {
       const res = await getHostingPlanApi();
       const allMetadata = await Promise.allSettled(
         res.data.map((i) => {
-          return getMetadataFromCid(i.project.metadata);
+          const cid = i.project.metadata.startsWith('Qm')
+            ? i.project.metadata
+            : bytes32ToCid(`0x${i.project.metadata}`);
+          return getMetadataFromCid(cid);
         }),
       );
       setCreatedHostingPlan(
diff --git a/src/pages/consumer/MyOffers/MyOffers.module.css b/src/pages/consumer/MyOffers/MyOffers.module.css
index c4fa5763d..c20ecf3ba 100644
--- a/src/pages/consumer/MyOffers/MyOffers.module.css
+++ b/src/pages/consumer/MyOffers/MyOffers.module.css
@@ -9,6 +9,7 @@
 
 .create {
   height: 40px;
+  flex-shrink: 0;
 }
 
 .description {
diff --git a/src/pages/delegator/DoDelegate/DelegateFrom.tsx b/src/pages/delegator/DoDelegate/DelegateFrom.tsx
index c09908e5a..e2d7763e6 100644
--- a/src/pages/delegator/DoDelegate/DelegateFrom.tsx
+++ b/src/pages/delegator/DoDelegate/DelegateFrom.tsx
@@ -222,7 +222,7 @@ export const DelegateForm: React.FC<FormProps> = ({
       {({ submitForm, isValid, isSubmitting, setFieldValue, setErrors, values, resetForm }) => {
         return (
           <Form>
-            <div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
               <SummaryList list={summaryList} />
               <Divider className={styles.divider} />
 
diff --git a/src/pages/delegator/DoDelegate/DoDelegate.module.less b/src/pages/delegator/DoDelegate/DoDelegate.module.less
index 6b072fc09..f9f84a162 100644
--- a/src/pages/delegator/DoDelegate/DoDelegate.module.less
+++ b/src/pages/delegator/DoDelegate/DoDelegate.module.less
@@ -16,11 +16,6 @@
   margin: 1rem 0;
 }
 
-.divider {
-  margin-top: 28px;
-  margin-bottom: 24px;
-}
-
 .delegatorSelect {
 
   :global {
@@ -32,7 +27,7 @@
     }
 
     .ant-select-selection-search-input.ant-select-selection-search-input.ant-select-selection-search-input.ant-select-selection-search-input {
-      margin-top: 7px;
+      margin-top: 5px;
     }
 
     .ant-space {
diff --git a/src/pages/explorer/FlexPlans/CreateHostingPlan/CreateHostingPlan.tsx b/src/pages/explorer/FlexPlans/CreateHostingPlan/CreateHostingPlan.tsx
index 0f1e833c3..e2b289f22 100644
--- a/src/pages/explorer/FlexPlans/CreateHostingPlan/CreateHostingPlan.tsx
+++ b/src/pages/explorer/FlexPlans/CreateHostingPlan/CreateHostingPlan.tsx
@@ -243,7 +243,7 @@ const CreateHostingFlexPlan = forwardRef<
                 onClick={() => {
                   setShowCreateFlexPlan(true);
                 }}
-                disabled={formatEther(balance, 4) === '0.0'}
+                disabled={formatEther(balance, 4) === '0.0' || !hasLogin}
               >
                 {t('flexPlans.createFlexPlan')}
               </Button>
diff --git a/src/pages/explorer/Home/Home.tsx b/src/pages/explorer/Home/Home.tsx
index 86562ed69..916ae091c 100644
--- a/src/pages/explorer/Home/Home.tsx
+++ b/src/pages/explorer/Home/Home.tsx
@@ -165,6 +165,7 @@ const Home: React.FC = () => {
               mutate(res);
             }
           }}
+          disabled={loading}
           onChange={(e) => {
             setSearchKeywords(e.target.value);
           }}
@@ -197,7 +198,7 @@ const Home: React.FC = () => {
           })}
       </div>
 
-      {inSearchMode && !projects.length && (
+      {inSearchMode && !loading && !projects.length && (
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <Typography>No projects match your search</Typography>
         </div>
diff --git a/src/pages/indexer/MyPlans/Create/Create.module.less b/src/pages/indexer/MyPlans/Create/Create.module.less
index 79ecacf1d..808a905ab 100644
--- a/src/pages/indexer/MyPlans/Create/Create.module.less
+++ b/src/pages/indexer/MyPlans/Create/Create.module.less
@@ -57,3 +57,7 @@
     }
   }
 }
+
+.planSelector:global(.ant-select-single.ant-select-lg) {
+      height: 60px;
+}
diff --git a/src/pages/indexer/MyPlans/Create/Create.tsx b/src/pages/indexer/MyPlans/Create/Create.tsx
index 7b23ebcfb..919d2def9 100644
--- a/src/pages/indexer/MyPlans/Create/Create.tsx
+++ b/src/pages/indexer/MyPlans/Create/Create.tsx
@@ -143,7 +143,7 @@ const DeploymentIdOptions = ({ onChooseSpecificPlan }: { onChooseSpecificPlan: (
         placeholder="Select specific deployment Id"
         optionFilterProp="children"
         onChange={(deploymentId) => onChooseSpecificPlan(deploymentId)}
-        className={clsx('fullWidth', 'flex')}
+        className={clsx('fullWidth', 'flex', styles.planSelector)}
         loading={indexerDeployments.loading}
         size="large"
         allowClear
diff --git a/src/pages/indexer/MyPlans/Plans.module.css b/src/pages/indexer/MyPlans/Plans.module.css
index 0f7122e9e..8c93ff811 100644
--- a/src/pages/indexer/MyPlans/Plans.module.css
+++ b/src/pages/indexer/MyPlans/Plans.module.css
@@ -7,4 +7,5 @@
 
 .create {
   height: 40px;
+  flex-shrink: 0;
 }
diff --git a/src/pages/swap/SwapForm.module.css b/src/pages/swap/SwapForm.module.less
similarity index 89%
rename from src/pages/swap/SwapForm.module.css
rename to src/pages/swap/SwapForm.module.less
index ca2ff577e..989cc81cf 100644
--- a/src/pages/swap/SwapForm.module.css
+++ b/src/pages/swap/SwapForm.module.less
@@ -31,6 +31,12 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 2rem;
+
+  :global {
+    .subql-typography {
+      display: inline-flex;
+    }
+  }
 }
 
 .stats {
diff --git a/src/pages/swap/SwapForm.tsx b/src/pages/swap/SwapForm.tsx
index 50e5af38d..6b300913b 100644
--- a/src/pages/swap/SwapForm.tsx
+++ b/src/pages/swap/SwapForm.tsx
@@ -25,7 +25,7 @@ import {
 } from '../../components';
 import TransactionModal from '../../components/TransactionModal';
 import { STABLE_TOKEN, STABLE_TOKEN_DECIMAL, TOKEN, tokenDecimals, truncFormatEtherStr } from '../../utils';
-import styles from './SwapForm.module.css';
+import styles from './SwapForm.module.less';
 
 interface Stats {
   title: string;
diff --git a/yarn.lock b/yarn.lock
index b539b0074..83bcb4c43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.2.0.tgz#e1a84fca468f4b337816fcb7f0964beb620ba855"
   integrity sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==
 
+"@adraffy/ens-normalize@1.10.0", "@adraffy/ens-normalize@^1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
+  integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
+
 "@adraffy/ens-normalize@1.9.4":
   version "1.9.4"
   resolved "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.9.4.tgz#aae21cb858bbb0411949d5b7b3051f4209043f62"
@@ -2361,6 +2366,11 @@
     ts-node "^9"
     tslib "^2"
 
+"@ensdomains/ens-validation@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@ensdomains/ens-validation/-/ens-validation-0.1.0.tgz#9ebfe66016fbf069a6ebca70c043714f6f02fbe6"
+  integrity sha512-rbDh2K6GfqXvBcJUISaTTYEt3f079WA4ohTE5Lh4/8EaaPAk/9vk3EisMUQV2UVxeFIZQEEyRCIOmRTpqN0W7A==
+
 "@esbuild/android-arm64@0.18.17":
   version "0.18.17"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.17.tgz#9e00eb6865ed5f2dbe71a1e96f2c52254cd92903"
@@ -5799,6 +5809,15 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
+"@web3-name-sdk/core@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@web3-name-sdk/core/-/core-0.1.5.tgz#658d2bc6bd43167f553e4f8dcc8427e43f9fc8b6"
+  integrity sha512-mHcpvmXNa7V51YDcQ9uz4Ryz0if7O+LweOyAw5kcofM8kTSF6MbqmotgBiwqwQ1JRdJPNyTj7GqAHQD7+09SaQ==
+  dependencies:
+    "@adraffy/ens-normalize" "^1.10.0"
+    "@ensdomains/ens-validation" "^0.1.0"
+    viem "^1.10.9"
+
 "@web3-react/abstract-connector@^6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@web3-react/abstract-connector/-/abstract-connector-6.0.7.tgz#401b3c045f1e0fab04256311be49d5144e9badc6"
@@ -15568,6 +15587,20 @@ viem@^1.0.0, viem@^1.19.0:
     isows "1.0.3"
     ws "8.13.0"
 
+viem@^1.10.9:
+  version "1.19.9"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-1.19.9.tgz#a11f3ad4a3323994ebd2010dbc659d1a2b12e583"
+  integrity sha512-Sf9U2x4jU0S/FALqYypcspWOGene0NZyD470oUripNhE0Ta6uOE/OgE4toTDVfRxov8qw0JFinr/wPGxYE3+HQ==
+  dependencies:
+    "@adraffy/ens-normalize" "1.10.0"
+    "@noble/curves" "1.2.0"
+    "@noble/hashes" "1.3.2"
+    "@scure/bip32" "1.3.2"
+    "@scure/bip39" "1.2.1"
+    abitype "0.9.8"
+    isows "1.0.3"
+    ws "8.13.0"
+
 vite-tsconfig-paths@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.5.tgz#c7c54e2cf7ccc5e600db565cecd7b368a1fa8889"