diff --git a/src/assets/images/wallets/fastAuth.png b/src/assets/images/wallets/fastAuth.png
new file mode 100644
index 000000000..d771fe526
Binary files /dev/null and b/src/assets/images/wallets/fastAuth.png differ
diff --git a/src/components/home/Contracts/index.tsx b/src/components/home/Contracts/index.tsx
index ab15b5ede..92c1a84af 100644
--- a/src/components/home/Contracts/index.tsx
+++ b/src/components/home/Contracts/index.tsx
@@ -87,7 +87,7 @@ export const Contracts = () => {
         gap="xl"
         columnsPhone="minmax(0, 1fr)"
         columnsTablet="minmax(0, 1fr)"
-        style={{ flexGrow: 1 }}
+        style={{ height: '88%' }}
       >
         <Flex stack justify="space-between">
           <Flex stack gap="m">
@@ -119,7 +119,7 @@ export const Contracts = () => {
         </Flex>
 
         <Tabs.Root value={language}>
-          <Flex stack justify="space-between" style={{ flexGrow: 1 }}>
+          <Flex stack justify="space-between" style={{ height: '100%' }}>
             <Tabs.Content value="js">
               <Title> One Command Setup </Title>
               <Code code={`npx create-near-app@latest`} language="bash" />
diff --git a/src/components/home/DecentralizedApps/index.tsx b/src/components/home/DecentralizedApps/index.tsx
index 631892092..7f377d45c 100644
--- a/src/components/home/DecentralizedApps/index.tsx
+++ b/src/components/home/DecentralizedApps/index.tsx
@@ -67,6 +67,7 @@ const Carousel = styled.div`
 const WalletImg = styled(Image)`
   margin: 0 2px;
   height: 40px;
+  width: 40px;
   border-radius: 4px;
 `;
 
@@ -80,7 +81,7 @@ export const DecentralizedApps = () => {
         gapTablet="xl"
         columnsPhone="minmax(0, 1fr)"
         columnsTablet="minmax(0, 1fr)"
-        style={{ flex: 1 }}
+        style={{ height: '88%' }}
       >
         <Flex stack justify="space-between">
           <Flex stack gap="m">
@@ -97,7 +98,7 @@ export const DecentralizedApps = () => {
           </Flex>
         </Flex>
 
-        <Flex stack gap="m" justify="space-between" style={{ flexGrow: 1 }}>
+        <Flex stack gap="m" justify="space-between" style={{ height: '100%' }}>
           <Flex stack>
             <Title> NEAR React App </Title>
             <Code code={ReactApp} height={450} language="ts" />
diff --git a/src/components/sidebar-navigation/Search.tsx b/src/components/sidebar-navigation/Search.tsx
index b5f3a8ed2..7cf787836 100644
--- a/src/components/sidebar-navigation/Search.tsx
+++ b/src/components/sidebar-navigation/Search.tsx
@@ -3,6 +3,7 @@ import * as HoverCard from '@radix-ui/react-hover-card';
 import Link from 'next/link';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import { networkId } from '@/config';
 import useDebounce from '@/hooks/useDebounce';
 import { fetchSearchHits } from '@/utils/algoliaSearchApi';
 import { fetchCatalog } from '@/utils/catalogSearchApi';
@@ -51,11 +52,15 @@ export const Search = ({ inputRef }: { inputRef: any }) => {
   const fetchResults = useCallback(async () => {
     setIsLoading(true);
 
-    const [docs, apps, components] = await Promise.all([
+    const isMainnet = networkId === 'mainnet';
+
+    const fetchPromises = [
       fetchSearchHits('Docs', debouncedSearchTerm),
-      fetchCatalog(debouncedSearchTerm),
-      fetchSearchHits('Components', debouncedSearchTerm),
-    ]);
+      isMainnet ? fetchCatalog(debouncedSearchTerm) : Promise.resolve(),
+      isMainnet ? fetchSearchHits('Components', debouncedSearchTerm) : Promise.resolve(),
+    ];
+
+    const [docs, apps, components] = await Promise.all(fetchPromises);
 
     setResults({
       Docs: renderResults('Docs', docs),
@@ -135,11 +140,20 @@ export const Search = ({ inputRef }: { inputRef: any }) => {
               <S.Tab $active={activeTab === 'Docs'} onClick={() => handleTabChange('Docs')} $isFirst={true}>
                 Docs
               </S.Tab>
-              <S.Tab $active={activeTab === 'Apps'} onClick={() => handleTabChange('Apps')}>
-                Apps
+              <S.Tab
+                $active={activeTab === 'Apps'}
+                onClick={() => handleTabChange('Apps')}
+                disabled={networkId == 'testnet'}
+              >
+                Apps {networkId == 'testnet' && '(Mainnet only)'}
               </S.Tab>
-              <S.Tab $active={activeTab === 'Components'} onClick={() => handleTabChange('Components')} $isLast={true}>
-                Components
+              <S.Tab
+                $active={activeTab === 'Components'}
+                onClick={() => handleTabChange('Components')}
+                disabled={networkId == 'testnet'}
+                $isLast={true}
+              >
+                Components {networkId == 'testnet' && '(Mainnet only)'}
               </S.Tab>
             </S.TabContainer>
 
diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
index 17bb8abea..0772e82e3 100644
--- a/src/components/sidebar-navigation/Sidebar.tsx
+++ b/src/components/sidebar-navigation/Sidebar.tsx
@@ -1,10 +1,12 @@
-import { Tooltip } from '@near-pagoda/ui';
+import { Dropdown, SvgIcon, Tooltip } from '@near-pagoda/ui';
+import { CaretDown } from '@phosphor-icons/react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useContext } from 'react';
+import styled from 'styled-components';
 
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
+import { networkId } from '@/config';
 
 import { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
@@ -14,6 +16,26 @@ import * as S from './styles';
 import { UserDropdownMenu } from './UserDropdownMenu';
 import { currentPathMatchesRoute } from './utils';
 
+const Redirect = styled.a<{ selected?: boolean }>`
+  text-decoration: none;
+  color: #444;
+`;
+
+const Badge = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  gap: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: ${() => (networkId === 'mainnet' ? '#0072de' : '#d14e00')};
+  background-color: ${() => (networkId === 'mainnet' ? '#0084f116' : '#f9900026')};
+  text-transform: capitalize;
+  border-radius: 0.25rem;
+  letter-spacing: 0.05em;
+`;
+
 export const Sidebar = () => {
   const router = useRouter();
   const expandedDrawer = useNavigationStore((store) => store.expandedDrawer);
@@ -22,12 +44,14 @@ export const Sidebar = () => {
   const toggleExpandedSidebar = useNavigationStore((store) => store.toggleExpandedSidebar);
   const handleBubbledClickInSidebar = useNavigationStore((store) => store.handleBubbledClickInSidebar);
   const tooltipsDisabled = isSidebarExpanded;
-  const { signedAccountId } = useContext(NearContext);
-  const { requestAuthentication } = useSignInRedirect();
+  const { wallet, signedAccountId } = useContext(NearContext);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isOpenNetwork, setIsOpenNetwork] = useState(false);
 
-  const handleCreateAccount = () => {
-    requestAuthentication(true);
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
   };
 
   const isNavigationItemActive = useCallback(
@@ -53,6 +77,34 @@ export const Sidebar = () => {
           <S.Logo href="/" aria-label="Go Home">
             <Image src={NearIconSvg} alt="NEAR" />
           </S.Logo>
+          <S.Network>
+            <Dropdown.Root open={isOpenNetwork} onOpenChange={(open) => setIsOpenNetwork(open)}>
+              <Dropdown.Trigger asChild>
+                <Badge>
+                  {networkId}{' '}
+                  <SvgIcon
+                    icon={<CaretDown />}
+                    size="xs"
+                    style={{
+                      marginBottom: '1px',
+                      transform: isOpenNetwork ? 'rotate(180deg)' : 'rotate(0deg)',
+                      transition: 'all 200ms',
+                    }}
+                  />
+                </Badge>
+              </Dropdown.Trigger>
+              <Dropdown.Content>
+                <Dropdown.Section>
+                  <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+                    <Dropdown.Item>Mainnet</Dropdown.Item>
+                  </Redirect>
+                  <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
+                    <Dropdown.Item>Testnet</Dropdown.Item>
+                  </Redirect>
+                </Dropdown.Section>
+              </Dropdown.Content>
+            </Dropdown.Root>
+          </S.Network>
 
           <S.ToggleExpandButton type="button" aria-label="Expand/Collapse Menu" onClick={toggleExpandedSidebar}>
             <i className={`ph-bold ${isSidebarExpanded ? 'ph-arrow-line-left' : 'ph-list'}`} />
@@ -202,10 +254,10 @@ export const Sidebar = () => {
           {signedAccountId ? (
             <UserDropdownMenu collapsed={!isSidebarExpanded} />
           ) : (
-            <Tooltip content="Sign-up or Login" side="right" disabled={tooltipsDisabled} asChild>
-              <S.LoginItem $active={false} $type="featured" onClick={handleCreateAccount}>
+            <Tooltip content="Login" side="right" disabled={tooltipsDisabled} asChild>
+              <S.LoginItem $active={false} $type="featured" onClick={wallet?.signIn}>
                 <i className="ph-bold ph-user" />
-                <span>Sign-up or Login</span>
+                <span>Login</span>
               </S.LoginItem>
             </Tooltip>
           )}
diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
index 0f40941d7..972a5c142 100644
--- a/src/components/sidebar-navigation/SmallScreenHeader.tsx
+++ b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -1,10 +1,11 @@
-import { Button } from '@near-pagoda/ui';
-import { MagnifyingGlass } from '@phosphor-icons/react';
+import { Button, Dropdown } from '@near-pagoda/ui';
+import { MagnifyingGlass, WifiHigh } from '@phosphor-icons/react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
+import styled from 'styled-components';
 
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
+import { networkId } from '@/config';
 
 import { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
@@ -12,6 +13,11 @@ import { useNavigationStore } from './store';
 import * as S from './styles';
 import { UserDropdownMenu } from './UserDropdownMenu';
 
+const Redirect = styled.a<{ selected?: boolean }>`
+  text-decoration: none;
+  color: #444;
+`;
+
 export const SmallScreenHeader = () => {
   const router = useRouter();
   const redirect = (url: string) => () => router.push(url);
@@ -20,11 +26,12 @@ export const SmallScreenHeader = () => {
   const setNavigation = useNavigationStore((store) => store.set);
   const showDrawerCollapse = useNavigationStore((store) => store.isOpenedOnSmallScreens && !!store.expandedDrawer);
   const expandedDrawerTitle = useNavigationStore((store) => store.expandedDrawerTitle);
-  const { signedAccountId } = useContext(NearContext);
-  const { requestAuthentication } = useSignInRedirect();
+  const { wallet, signedAccountId } = useContext(NearContext);
 
-  const handleCreateAccount = () => {
-    requestAuthentication(true);
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
   };
 
   return (
@@ -50,7 +57,6 @@ export const SmallScreenHeader = () => {
           <Image src={NearIconSvg} alt="NEAR" />
         </S.SmallScreenHeaderLogo>
       )}
-
       {signedAccountId ? (
         <S.SmallScreenHeaderActions $hidden={isOpenedOnSmallScreens} $gap="16px">
           <Button label="search" icon={<MagnifyingGlass />} variant="secondary" onClick={redirect('/search')} />
@@ -59,14 +65,35 @@ export const SmallScreenHeader = () => {
       ) : (
         <>
           <Button
-            label="Sign-up or Login"
+            label="Login"
             variant="primary"
-            onClick={handleCreateAccount}
+            onClick={wallet?.signIn}
             style={{ alignSelf: 'center', marginRight: '1rem' }}
           />
         </>
       )}
+      <Dropdown.Root>
+        <Dropdown.Trigger asChild>
+          <Button
+            label={networkId}
+            icon={<WifiHigh fill="bold" style={{ color: networkId == 'mainnet' ? '#0072de' : '#d14e00' }} />}
+            fill="outline"
+            style={{ alignSelf: 'center' }}
+            type="button"
+          />
+        </Dropdown.Trigger>
 
+        <Dropdown.Content>
+          <Dropdown.Section>
+            <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+              <Dropdown.Item>Mainnet</Dropdown.Item>
+            </Redirect>
+            <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
+              <Dropdown.Item>Testnet</Dropdown.Item>
+            </Redirect>
+          </Dropdown.Section>
+        </Dropdown.Content>
+      </Dropdown.Root>
       <S.SmallScreenHeaderIconButton
         type="button"
         aria-label="Expand/Collapse Menu"
diff --git a/src/components/sidebar-navigation/styles.ts b/src/components/sidebar-navigation/styles.ts
index 8aae33cd3..251505d6b 100644
--- a/src/components/sidebar-navigation/styles.ts
+++ b/src/components/sidebar-navigation/styles.ts
@@ -70,6 +70,8 @@ export const Logo = styled(Link)`
   }
 `;
 
+export const Network = styled.div``;
+
 export const ToggleExpandButton = styled.button`
   all: unset;
   box-sizing: border-box;
@@ -605,13 +607,13 @@ export const Sidebar = styled.div<{
           ${NavigationItem} span,
           ${SectionLabelIconLink},
           ${SectionLabel},
-          ${Logo} {
+          ${Logo},
+          ${Network} {
             pointer-events: none;
             opacity: 0;
             padding: 0;
             width: 0;
           }
-
           ${SectionLabel} {
             margin-bottom: -2rem;
           }
diff --git a/src/components/tools/FungibleToken/CreateTokenForm.tsx b/src/components/tools/FungibleToken/CreateTokenForm.tsx
index 238c2f9ed..46a4b27d9 100644
--- a/src/components/tools/FungibleToken/CreateTokenForm.tsx
+++ b/src/components/tools/FungibleToken/CreateTokenForm.tsx
@@ -173,7 +173,13 @@ const CreateTokenForm = ({ reload }: { reload: (delay: number) => void }) => {
               label="Total Supply"
               placeholder="e.g. 1000"
               error={errors.total_supply?.message}
-              {...register('total_supply', { required: 'Total supply is required' })}
+              {...register('total_supply', {
+                required: 'Total supply is required',
+                pattern: {
+                  value: /^[1-9][0-9]*$/,
+                  message: 'Total supply must be a whole number greater than 0',
+                },
+              })}
               disabled={!signedAccountId}
             />
             <Input
diff --git a/src/components/wallet-selector/WalletSelector.ts b/src/components/wallet-selector/WalletSelector.ts
index 7f6cdd62b..d6c674d95 100644
--- a/src/components/wallet-selector/WalletSelector.ts
+++ b/src/components/wallet-selector/WalletSelector.ts
@@ -6,11 +6,9 @@ import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
 import { setupHereWallet } from '@near-wallet-selector/here-wallet';
 import { setupLedger } from '@near-wallet-selector/ledger';
 import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
-import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet';
 import { setupModal } from '@near-wallet-selector/modal-ui';
 import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
 import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
-import { setupNeth } from '@near-wallet-selector/neth';
 import { setupNightly } from '@near-wallet-selector/nightly';
 import { setupSender } from '@near-wallet-selector/sender';
 import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
@@ -19,6 +17,7 @@ import { setupFastAuthWallet } from 'near-fastauth-wallet';
 import type { Context } from 'react';
 import { createContext } from 'react';
 
+import fastAuthIcon from '@/assets/images/wallets/fastAuth.png';
 import { networkId as defaultNetwork, signInContractId } from '@/config';
 import { KEYPOM_OPTIONS } from '@/utils/keypom-options';
 import type { NetworkId } from '@/utils/types';
@@ -45,32 +44,36 @@ export class Wallet {
   }
 
   startUp = async (accountChangeHook: (account: string) => void) => {
+    const emailLogin = async (moduleOptions: any) => {
+      const setup = await setupFastAuthWallet({
+        iconUrl: fastAuthIcon.src,
+        walletUrl:
+          this.networkId === 'testnet'
+            ? 'https://wallet.testnet.near.org/fastauth'
+            : 'https://wallet.near.org/fastauth',
+        relayerUrl:
+          this.networkId === 'testnet'
+            ? 'http://34.70.226.83:3030/relay'
+            : 'https://near-relayer-mainnet.api.pagoda.co/relay',
+      });
+      const fastAuth = await setup(moduleOptions);
+      if (fastAuth) fastAuth.metadata.name = 'Email Login';
+      return fastAuth;
+    };
+
     this.selector = setupWalletSelector({
       network: this.networkId,
       modules: [
+        await emailLogin,
         setupEthereumWallets({ wagmiConfig, web3Modal: web3Modal as any, alwaysOnboardDuringSignIn: true }),
         setupMeteorWallet(),
         setupBitteWallet(),
         setupHereWallet(),
         setupMyNearWallet(),
+        setupNearMobileWallet(),
         setupSender(),
-        setupMintbaseWallet(),
-        setupNeth({
-          gas: '300000000000000',
-          bundle: false,
-        }),
         setupNightly(),
         setupWelldoneWallet(),
-        setupFastAuthWallet({
-          walletUrl:
-            this.networkId === 'testnet'
-              ? 'https://wallet.testnet.near.org/fastauth'
-              : 'https://wallet.near.org/fastauth',
-          relayerUrl:
-            this.networkId === 'testnet'
-              ? 'http://34.70.226.83:3030/relay'
-              : 'https://near-relayer-mainnet.api.pagoda.co/relay',
-        }),
         setupKeypom({
           trialAccountSpecs: {
             url:
@@ -89,7 +92,6 @@ export class Wallet {
           signInContractId,
         }) as any, // TODO: Refactor setupKeypom() to TS
         setupLedger(),
-        setupNearMobileWallet(),
       ],
     });
 
diff --git a/src/hooks/useSignInRedirect.ts b/src/hooks/useSignInRedirect.ts
deleted file mode 100644
index e0db0224a..000000000
--- a/src/hooks/useSignInRedirect.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useRouter } from 'next/router';
-import { useCallback } from 'react';
-import { useContext } from 'react';
-
-import { NearContext } from '@/components/wallet-selector/WalletSelector';
-import { signInContractId } from '@/config';
-
-export function useSignInRedirect() {
-  const router = useRouter();
-  const { wallet } = useContext(NearContext);
-
-  const redirect = useCallback(
-    (hardRefresh = false) => {
-      if (!window) return;
-
-      const url = localStorage.getItem('signInRedirectUrl') || '/';
-      localStorage.removeItem('signInRedirectUrl');
-
-      if (hardRefresh) {
-        window.location.href = url; // We need to use hard refresh due to current Fast Auth implementation
-      } else {
-        router.replace(url);
-      }
-    },
-    [router],
-  );
-
-  const saveCurrentUrl = useCallback(() => {
-    if (!window) return;
-    if (['/', '/signin', '/signup', '/verify-email', '/auth-callback'].includes(router.pathname)) return;
-    localStorage.setItem('signInRedirectUrl', router.asPath);
-  }, [router]);
-
-  const requestAuthentication = useCallback(
-    (createAccount = false) => {
-      saveCurrentUrl();
-      if (!wallet) return;
-      wallet.selector
-        .then((selector: any) => selector.wallet('fast-auth-wallet'))
-        .then((fastAuthWallet: any) =>
-          fastAuthWallet.signIn({
-            contractId: signInContractId,
-            isRecovery: !createAccount,
-          }),
-        );
-    },
-    [saveCurrentUrl, wallet],
-  );
-
-  return {
-    redirect,
-    requestAuthentication,
-    saveCurrentUrl,
-  };
-}
diff --git a/src/pages/[accountId]/widget/[componentName].tsx b/src/pages/[accountId]/widget/[componentName].tsx
index 3567630ed..3be47d644 100644
--- a/src/pages/[accountId]/widget/[componentName].tsx
+++ b/src/pages/[accountId]/widget/[componentName].tsx
@@ -8,7 +8,6 @@ import { privacyDomainName, termsDomainName } from '@/config';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useGatewayEvents } from '@/hooks/useGatewayEvents';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const ViewComponentPage: NextPageWithLayout = () => {
@@ -17,15 +16,14 @@ const ViewComponentPage: NextPageWithLayout = () => {
   const [componentProps, setComponentProps] = useState<Record<string, unknown>>({});
   const { wallet, signedAccountId } = useContext(NearContext);
   const components = useBosComponents();
-  const { requestAuthentication } = useSignInRedirect();
   const { emitGatewayEvent, shouldPassGatewayEventProps } = useGatewayEvents();
 
   useEffect(() => {
-    const { requestAuth, createAccount } = componentProps;
+    const { requestAuth } = componentProps;
     if (requestAuth && !signedAccountId) {
-      requestAuthentication(!!createAccount);
+      wallet?.signIn();
     }
-  }, [signedAccountId, componentProps, requestAuthentication]);
+  }, [wallet, signedAccountId, componentProps]);
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search);
diff --git a/src/pages/applications.tsx b/src/pages/applications.tsx
index ebd1b1f2a..f2b9718c8 100644
--- a/src/pages/applications.tsx
+++ b/src/pages/applications.tsx
@@ -5,14 +5,12 @@ import { ComponentWrapperPage } from '@/components/near-org/ComponentWrapperPage
 import { NearContext } from '@/components/wallet-selector/WalletSelector';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const ApplicationsPage: NextPageWithLayout = () => {
   const components = useBosComponents();
   const router = useRouter();
-  const { requestAuthentication } = useSignInRedirect();
-  const { signedAccountId } = useContext(NearContext);
+  const { wallet, signedAccountId } = useContext(NearContext);
 
   const setURLSearchParams = (params: string | string[][] | Record<string, string> | URLSearchParams | undefined) => {
     if (!params) return;
@@ -29,11 +27,11 @@ const ApplicationsPage: NextPageWithLayout = () => {
   };
 
   useEffect(() => {
-    const { requestAuth, createAccount } = router.query;
+    const { requestAuth } = router.query;
     if (requestAuth && !signedAccountId) {
-      requestAuthentication(!!createAccount);
+      wallet?.signIn();
     }
-  }, [signedAccountId, requestAuthentication, router.query]);
+  }, [signedAccountId, wallet, router.query]);
 
   return (
     <ComponentWrapperPage
diff --git a/src/pages/tools.tsx b/src/pages/tools.tsx
index 6ee8b987b..70b54d66b 100644
--- a/src/pages/tools.tsx
+++ b/src/pages/tools.tsx
@@ -133,13 +133,13 @@ const ToolsPage: NextPageWithLayout = () => {
 
   return (
     <Section grow="available" style={{ background: 'var(--sand3)' }}>
-      <Container size="s">
+      <Container size="m" style={{ display: 'flex', justifyContent: 'center' }}>
         <Flex stack gap="l">
           <Text as="h1" size="text-2xl">
             Tools
           </Text>
 
-          <Card style={{ paddingTop: 0 }}>
+          <Card style={{ paddingTop: 0, width: 'min-content' }}>
             <Tabs.Root value={selectedTab}>
               <Tabs.List style={{ marginBottom: 'var(--gap-m)' }}>
                 <Tabs.Trigger href="?tab=ft" value="ft">
diff --git a/src/pages/wallet-utilities.tsx b/src/pages/wallet-utilities.tsx
index fef2ab33c..a6d45d499 100644
--- a/src/pages/wallet-utilities.tsx
+++ b/src/pages/wallet-utilities.tsx
@@ -10,14 +10,12 @@ import KeyTable from '@/components/wallet-utilities/KeyTable';
 import { ReceiveNear } from '@/components/wallet-utilities/ReceiveNear';
 import { SendNear } from '@/components/wallet-utilities/SendNear';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const WalletUtilitiesPage: NextPageWithLayout = () => {
   const router = useRouter();
   const selectedTab = (router.query.tab as string) || 'send';
-  const signedAccountId = useContext(NearContext);
-  const { requestAuthentication } = useSignInRedirect();
+  const { wallet, signedAccountId } = useContext(NearContext);
 
   return (
     <Section grow="available" style={{ background: 'var(--sand3)' }}>
@@ -72,7 +70,7 @@ const WalletUtilitiesPage: NextPageWithLayout = () => {
           ) : (
             <Card>
               <Text>Please sign in to use wallet utilities.</Text>
-              <Button label="Sign In" fill="outline" onClick={() => requestAuthentication()} />
+              <Button label="Sign In" fill="outline" onClick={() => wallet?.signIn()} />
             </Card>
           )}
         </Flex>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c2e5b046e..0daaaca18 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,6 +3,7 @@
 :root {
   --gateway-page-container-padding-y: 2rem;
   --gateway-page-container-padding-x: 1rem;
+  scrollbar-gutter: stable;
 }
 
 p,
@@ -76,3 +77,23 @@ w3m-modal {
     bottom: 10px;
   }
 }
+
+/* wallet selector */
+.modal-right {
+  display: none;
+}
+
+.modal-left, .modal-left-title {
+  border-right: 0 !important;
+  width: 100% !important;
+}
+
+.nws-modal {
+  max-width: 500px !important;
+}
+
+@media (max-width: 576px) {
+  .nws-modal, .modal-left {
+    max-height: 280px !important;
+  }
+}
\ No newline at end of file