diff --git a/app/not-connected/page.tsx b/app/not-connected/page.tsx
index 17ed5086..6d69c43a 100644
--- a/app/not-connected/page.tsx
+++ b/app/not-connected/page.tsx
@@ -1,28 +1,40 @@
 "use client";
 
-import { useAccount } from "@starknet-react/core";
-import React, { useEffect, useState } from "react";
+import { useAccount, useConnect } from "@starknet-react/core";
+import React, { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import Wallets from "@components/UI/wallets";
 import ErrorScreen from "@components/UI/screens/errorScreen";
+import { useStarknetkitConnectModal } from "starknetkit";
+import { availableConnectors } from "@app/provider";
 
 export default function Page() {
   const { address } = useAccount();
+  const { connectAsync } = useConnect();
   const { push } = useRouter();
-  const [hasWallet, setHasWallet] = useState<boolean>(true);
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: availableConnectors,
+  });
 
   useEffect(() => {
     if (address) push(`/${address}`);
   }, [address]);
 
+  const connectWallet = async () => {
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      return;
+    }
+    await connectAsync({ connector });
+    localStorage.setItem("SQ-connectedWallet", connector.id);
+  };
+
   return (
     <>
       <ErrorScreen
         errorMessage="You're not connected !"
         buttonText="Connect wallet"
-        onClick={() => setHasWallet(true)}
+        onClick={connectWallet}
       />
-      <Wallets closeWallet={() => setHasWallet(false)} hasWallet={hasWallet} />
     </>
   );
 }
diff --git a/app/provider.tsx b/app/provider.tsx
index dc7c3843..144c5ce4 100644
--- a/app/provider.tsx
+++ b/app/provider.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React from "react";
+import { InjectedConnector } from "starknetkit/injected";
 import { WebWalletConnector } from "starknetkit/webwallet";
+import { ArgentMobileConnector } from "starknetkit/argentMobile";
 import { Chain, goerli, mainnet } from "@starknet-react/chains";
 import {
   Connector,
   StarknetConfig,
-  argent,
-  braavos,
   jsonRpcProvider,
 } from "@starknet-react/core";
 import { StarknetIdJsProvider } from "@context/StarknetIdJsProvider";
@@ -15,6 +15,18 @@ import { ThemeProvider, createTheme } from "@mui/material";
 import { QuestsContextProvider } from "@context/QuestsProvider";
 import { getCurrentNetwork } from "@utils/network";
 
+export const availableConnectors = [
+  new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
+  new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
+  new WebWalletConnector({
+    url:
+      getCurrentNetwork() === "TESTNET"
+        ? "https://web.hydrogen.argent47.net"
+        : "https://web.argent.xyz/",
+  }),
+  new ArgentMobileConnector(),
+];
+
 export function Providers({ children }: { children: React.ReactNode }) {
   const network = getCurrentNetwork();
   const chains = [network === "TESTNET" ? goerli : mainnet];
@@ -24,20 +36,6 @@ export function Providers({ children }: { children: React.ReactNode }) {
     }),
   });
 
-  const connectors = useMemo(
-    () => [
-      braavos(),
-      argent(),
-      new WebWalletConnector({
-        url:
-          network === "TESTNET"
-            ? "https://web.hydrogen.argent47.net"
-            : "https://web.argent.xyz/",
-      }),
-    ],
-    [network]
-  );
-
   const theme = createTheme({
     palette: {
       primary: {
@@ -58,7 +56,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
     <StarknetConfig
       chains={chains}
       provider={provider}
-      connectors={connectors as Connector[]}
+      connectors={availableConnectors as Connector[]}
       autoConnect
     >
       <StarknetIdJsProvider>
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index 43807866..7cdc6303 100644
--- a/components/UI/navbar.tsx
+++ b/components/UI/navbar.tsx
@@ -1,22 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import React, {
-  useState,
-  useEffect,
-  FunctionComponent,
-  useCallback,
-} from "react";
+import React, { useState, useEffect, FunctionComponent } from "react";
 import { AiOutlineMenu } from "react-icons/ai";
 import styles from "@styles/components/navbar.module.css";
 import Button from "./button";
-import {
-  useConnect,
-  useAccount,
-  Connector,
-  useDisconnect,
-} from "@starknet-react/core";
-import Wallets from "./wallets";
+import { useConnect, useAccount, useDisconnect } from "@starknet-react/core";
 import ModalMessage from "./modalMessage";
 import { useDisplayName } from "@hooks/displayName.tsx";
 import { useDomainFromAddress } from "../../hooks/naming";
@@ -33,17 +22,16 @@ import { getPendingBoostClaims } from "@services/apiService";
 import { hexToDecimal } from "@utils/feltService";
 import CloseFilledIcon from "./iconsComponents/icons/closeFilledIcon";
 import { getCurrentNetwork } from "@utils/network";
-import { TOKEN_DECIMAL_MAP } from "@utils/constants";
-import { getTokenName } from "@utils/tokenService";
+import { availableConnectors } from "@app/provider";
+import { useStarknetkitConnectModal } from "starknetkit";
 
 const Navbar: FunctionComponent = () => {
   const currentNetwork = getCurrentNetwork();
   const [nav, setNav] = useState<boolean>(false);
-  const [hasWallet, setHasWallet] = useState<boolean>(false);
   const { address, account } = useAccount();
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isWrongNetwork, setIsWrongNetwork] = useState(false);
-  const { connect, connectors } = useConnect();
+  const { connectAsync } = useConnect();
   const { disconnect } = useDisconnect();
   const domainOrAddressMinified = useDisplayName(address ?? "");
   const domain = useDomainFromAddress(address ?? "").domain;
@@ -66,6 +54,9 @@ const Navbar: FunctionComponent = () => {
       linkText: "",
     },
   ]);
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: availableConnectors,
+  });
 
   const fetchAndUpdateNotifications = async () => {
     if (!address) return;
@@ -91,30 +82,23 @@ const Navbar: FunctionComponent = () => {
     fetchAndUpdateNotifications();
   }, [address]);
 
+  // Autoconnect
   useEffect(() => {
-    // to handle autoconnect starknet-react adds connector id in local storage
-    // if there is no value stored, we show the wallet modal
-    const timeout = setTimeout(() => {
-      if (!address) {
-        if (
-          !localStorage.getItem("lastUsedConnector") &&
-          route !== "/partnership"
-        ) {
-          if (connectors.length > 0) setHasWallet(true);
-        } else {
-          const lastConnectedConnectorId =
-            localStorage.getItem("lastUsedConnector");
-          if (lastConnectedConnectorId === null) return;
-
-          const lastConnectedConnector = connectors.find(
-            (connector) => connector.id === lastConnectedConnectorId
-          );
-          if (lastConnectedConnector === undefined) return;
-          tryConnect(lastConnectedConnector);
-        }
+    const connectToStarknet = async () => {
+      if (
+        !localStorage.getItem("SQ-connectedWallet") &&
+        route !== "/partnership"
+      ) {
+        connectWallet();
+      } else {
+        const connectordId = localStorage.getItem("SQ-connectedWallet");
+        const connector = availableConnectors.find(
+          (item) => item.id === connectordId
+        );
+        await connectAsync({ connector });
       }
-    }, 1000);
-    return () => clearTimeout(timeout);
+    };
+    connectToStarknet();
   }, []);
 
   useEffect(() => {
@@ -133,23 +117,21 @@ const Navbar: FunctionComponent = () => {
     });
   }, [account, network, isConnected]);
 
-  const tryConnect = useCallback(
-    async (connector: Connector) => {
-      if (address) return;
-      if (await connector.ready()) {
-        connect({ connector });
-
-        return;
-      }
-    },
-    [address, connectors]
-  );
+  const connectWallet = async () => {
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      return;
+    }
+    await connectAsync({ connector });
+    localStorage.setItem("SQ-connectedWallet", connector.id);
+  };
 
   function disconnectByClick(): void {
     disconnect();
     setIsConnected(false);
     setIsWrongNetwork(false);
     setShowWallet(false);
+    localStorage.removeItem("SQ-connectedWallet");
   }
 
   function handleNav(): void {
@@ -158,7 +140,7 @@ const Navbar: FunctionComponent = () => {
 
   function onTopButtonClick(): void {
     if (!isConnected) {
-      setHasWallet(true);
+      connectWallet();
     } else {
       setShowWallet(true);
     }
@@ -252,7 +234,7 @@ const Navbar: FunctionComponent = () => {
               <WalletButton
                 setShowWallet={setShowWallet}
                 showWallet={showWallet}
-                refreshAndShowWallet={() => setHasWallet(true)}
+                connect={connectWallet}
                 disconnectByClick={disconnectByClick}
               />
             </ul>
@@ -389,10 +371,6 @@ const Navbar: FunctionComponent = () => {
           </div>
         }
       />
-      <Wallets
-        closeWallet={() => setHasWallet(false)}
-        hasWallet={Boolean(hasWallet && !isWrongNetwork)}
-      />
       {showNotifications ? (
         <ModalNotifications
           open={showNotifications}
diff --git a/components/UI/wallets.tsx b/components/UI/wallets.tsx
deleted file mode 100644
index fc441624..00000000
--- a/components/UI/wallets.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import styles from "@styles/components/wallets.module.css";
-import { Connector, useAccount, useConnect } from "@starknet-react/core";
-import Button from "./button";
-import { FunctionComponent, useEffect } from "react";
-import { Modal } from "@mui/material";
-import WalletIcons from "@components/UI/iconsComponents/icons/walletIcons";
-import getDiscoveryWallets from "get-starknet-core";
-import useGetDiscoveryWallets from "@hooks/useGetDiscoveryWallets";
-
-type WalletsProps = {
-  closeWallet: () => void;
-  hasWallet: boolean;
-};
-
-const Wallets: FunctionComponent<WalletsProps> = ({
-  closeWallet,
-  hasWallet,
-}) => {
-  const { connect, connectors } = useConnect();
-  const { account } = useAccount();
-  const downloadLinks = useGetDiscoveryWallets(
-    getDiscoveryWallets.getDiscoveryWallets()
-  );
-
-  useEffect(() => {
-    if (account) {
-      closeWallet();
-    }
-  }, [account, closeWallet]);
-
-  function connectWallet(connector: Connector): void {
-    connect({ connector });
-    closeWallet();
-  }
-
-  return (
-    <Modal
-      disableAutoFocus
-      open={hasWallet}
-      onClose={closeWallet}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-    >
-      <div className={styles.menu}>
-        <button
-          className={styles.menu_close}
-          onClick={() => {
-            closeWallet();
-          }}
-        >
-          <svg viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M6 18L18 6M6 6l12 12"
-            ></path>
-          </svg>
-        </button>
-        <p className={styles.menu_title}>You need a Starknet wallet</p>
-        {connectors.map((connector) => {
-          if (connector.available()) {
-            return (
-              <div className="mt-5 flex justify-center" key={connector.id}>
-                <Button onClick={() => connectWallet(connector)}>
-                  <div className="flex justify-center items-center">
-                    <WalletIcons id={connector.id} />
-                    {connector.id === "braavos" ||
-                    connector.id === "argentX" ||
-                    connector.id === "okxwallet"
-                      ? `Connect ${connector.name}`
-                      : "Login with Email"}
-                  </div>
-                </Button>
-              </div>
-            );
-          } else {
-            if (connector.id === "braavos" || connector.id === "argentX") {
-              return (
-                <div className="mt-5 flex justify-center" key={connector.id}>
-                  <Button
-                    onClick={() =>
-                      window.open(
-                        `${
-                          downloadLinks[
-                            connector.id as keyof typeof downloadLinks
-                          ]
-                        }`
-                      )
-                    }
-                  >
-                    <div className="flex justify-center items-center">
-                      <WalletIcons id={connector.id} />
-                      Install {connector.id}
-                    </div>
-                  </Button>
-                </div>
-              );
-            }
-          }
-        })}
-        <p onClick={() => closeWallet()} className={styles.closeMobile}>
-          Close
-        </p>
-      </div>
-    </Modal>
-  );
-};
-export default Wallets;
diff --git a/components/navbar/walletButton.tsx b/components/navbar/walletButton.tsx
index dd393912..caed3657 100644
--- a/components/navbar/walletButton.tsx
+++ b/components/navbar/walletButton.tsx
@@ -10,7 +10,6 @@ import CopyIcon from "@components/UI/iconsComponents/icons/copyIcon";
 import { Wallet } from "@mui/icons-material";
 import LogoutIcon from "@mui/icons-material/Logout";
 import VerifiedIcon from "@components/UI/iconsComponents/icons/verifiedIcon";
-import ChangeWallet from "@components/UI/changeWallet";
 import ArgentIcon from "@components/UI/iconsComponents/icons/argentIcon";
 import { useNotificationManager } from "@hooks/useNotificationManager";
 import { CircularProgress } from "@mui/material";
@@ -19,14 +18,14 @@ import { getCurrentNetwork } from "@utils/network";
 type WalletButtonProps = {
   setShowWallet: (showWallet: boolean) => void;
   showWallet: boolean;
-  refreshAndShowWallet: () => void;
+  connect: () => void;
   disconnectByClick: () => void;
 };
 
 const WalletButton: FunctionComponent<WalletButtonProps> = ({
   setShowWallet,
   showWallet,
-  refreshAndShowWallet,
+  connect,
   disconnectByClick,
 }) => {
   const currentNetwork = getCurrentNetwork();
@@ -35,7 +34,6 @@ const WalletButton: FunctionComponent<WalletButtonProps> = ({
   const domainOrAddressMinified = useDisplayName(address ?? "");
   const [txLoading, setTxLoading] = useState<number>(0);
   const [copied, setCopied] = useState<boolean>(false);
-  const [changeWallet, setChangeWallet] = useState<boolean>(false);
   const [hovering, setHovering] = useState<boolean>(false);
   const [unfocus, setUnfocus] = useState<boolean>(false);
   const network = currentNetwork === "TESTNET" ? "testnet" : "mainnet";
@@ -81,7 +79,7 @@ const WalletButton: FunctionComponent<WalletButtonProps> = ({
     e.stopPropagation();
     setHovering(false);
     setUnfocus(true);
-    setChangeWallet(true);
+    connect();
   };
 
   const handleOpenWebWallet = () => {
@@ -111,11 +109,7 @@ const WalletButton: FunctionComponent<WalletButtonProps> = ({
         onMouseLeave={() => setHovering(false)}
       >
         <Button
-          onClick={
-            address
-              ? () => setShowWallet(!showWallet)
-              : () => refreshAndShowWallet()
-          }
+          onClick={address ? () => setShowWallet(!showWallet) : () => connect()}
         >
           <>
             <div className="flex items-center justify-between">
@@ -166,10 +160,6 @@ const WalletButton: FunctionComponent<WalletButtonProps> = ({
           </>
         </Button>
       </div>
-      <ChangeWallet
-        closeWallet={() => setChangeWallet(false)}
-        hasWallet={changeWallet}
-      />
     </>
   );
 };
diff --git a/package.json b/package.json
index 30d0c87c..372a07cb 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "@nimiq/style": "^0.8.5",
     "@react-three/drei": "^9.80.3",
     "@react-three/fiber": "^8.13.6",
-    "@starknet-react/chains": "^0.1.0-next.0",
-    "@starknet-react/core": "^2.1.0",
+    "@starknet-react/chains": "^0.1.6",
+    "@starknet-react/core": "^2.2.4",
     "@use-gesture/react": "^10.2.27",
     "@vercel/analytics": "^0.1.5",
     "big.js": "^6.2.1",
@@ -42,7 +42,7 @@
     "react-use": "^17.4.0",
     "starknet": "^5.24.3",
     "starknetid.js": "^1.5.6",
-    "starknetkit": "^1.0.21",
+    "starknetkit": "^1.1.3",
     "three": "^0.155.0",
     "twitter-api-sdk": "^1.2.1"
   },