diff --git a/src/components/ChainSelector.tsx b/src/components/ChainSelector.tsx
new file mode 100644
index 0000000..07525e9
--- /dev/null
+++ b/src/components/ChainSelector.tsx
@@ -0,0 +1,80 @@
+import { Dropdown } from "@brillionfi/quill-core";
+import { SUPPORTED_CHAINS } from "@brillionfi/wallet-infra-sdk/dist/models";
+
+export const ChainSelector = () => {
+  /* const handleChainChange = (id: SUPPORTED_CHAIN_IDS) => {
+    handleChangeChainId(id, {
+      onSuccess: (data) => {
+        if (!!notification?.show) {
+          const chainName = getChainById(
+            data?.chainId ?? DEFAULT_CHAIN.id,
+          ).name;
+          notification.show({
+            severity: "success",
+            summary: tCommon("success"),
+            detail: t("notifications.success", { chainName }),
+          });
+        }
+        if (onChange) onChange(data?.chainId);
+      },
+      onError: () => {
+        if (!!notification?.show) {
+          notification.show({
+            severity: "error",
+            summary: tCommon("error"),
+            detail: t("notifications.error"),
+          });
+        }
+      },
+    });
+    setSelectedChain(id);
+  };
+
+  const chainOptionTemplate = (id: SUPPORTED_CHAIN_IDS) => {
+    const icon = getChainIcon(id);
+    const { name } = getChainById(id);
+    const iconSize = size === "normal" ? "h-4 w-4" : "";
+    const iconSizeLarge = size !== "normal" ? size : undefined;
+    return (
+      <div className="flex h-full items-center gap-4">
+        <Icon
+          localIcon={icon}
+          type="svg"
+          size={iconSizeLarge}
+          className={iconSize}
+        />
+        <span>{name}</span>
+      </div>
+    );
+  };
+
+  const finalSizeClassName = useMemo(() => {
+    switch (size) {
+      case "normal":
+        return "h-10";
+      case "large":
+        return "h-16";
+      case "xlarge":
+        return "h-20";
+      default:
+        return "h-10";
+    }
+  }, [size]);
+
+  const finalFullWidthClassName = useMemo(() => {
+    return fullWidth ? "w-full" : "w-full md:w-60";
+  }, [fullWidth]);
+
+  const finalChainSelectorClassName = useMemo(() => {
+    return twMerge([finalSizeClassName, finalFullWidthClassName]);
+  }, [finalSizeClassName, finalFullWidthClassName]); */
+
+  return (
+    <Dropdown
+      value={SUPPORTED_CHAINS.ETHEREUM}
+      options={SUPPORTED_CHAINS}
+      placeholder={t("placeholder")}
+      autoOptionFocus
+    />
+  );
+};
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index 2f04639..345b595 100644
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -1,17 +1,25 @@
-import { AuthProvider } from "@brillionfi/wallet-infra-sdk";
-import { useUser } from "hooks";
-import { LoginMethods, TLoginOptions } from "interfaces";
-import GoogleLogo from "@/components/icons/google-logo";
-import TwitterLogo from "@/components/icons/twitter-logo";
+import { useState } from "react";
 import DiscordLogo from "@/components/icons/discord-logo";
+import EmailLogo from "@/components/icons/email-logo";
+import GoogleLogo from "@/components/icons/google-logo";
 import MetamaskLogo from "@/components/icons/metamask-logo";
+import TwitterLogo from "@/components/icons/twitter-logo";
 import WalletConnectLogo from "@/components/icons/walletconnect-logo";
-import EmailLogo from "@/components/icons/email-logo";
-import { useState } from "react";
-import QRCodeModal from "@walletconnect/qrcode-modal"; 
 import { defaultStyles, TCustomProps } from "@/components/LoginFormStyles";
+import { AuthProvider } from "@brillionfi/wallet-infra-sdk";
+import QRCodeModal from "@walletconnect/qrcode-modal";
+import { useUser } from "hooks";
+import { LoginMethods, TLoginOptions } from "interfaces";
 
-export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethods: LoginMethods[], redirectUrl: string, customProps?: TCustomProps}) => {
+export const LoginForm = ({
+  loginMethods,
+  redirectUrl,
+  customProps,
+}: {
+  loginMethods: LoginMethods[];
+  redirectUrl: string;
+  customProps?: TCustomProps;
+}) => {
   const { login } = useUser();
 
   const [showEmail, setShowEmail] = useState<boolean>(false);
@@ -32,7 +40,7 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
     },
     {
       label: LoginMethods.Discord,
-      icon: <TwitterLogo />,
+      icon: <DiscordLogo />,
       disabled: false,
       onClick: async () => {
         const url = await login(AuthProvider.DISCORD, redirectUrl);
@@ -43,7 +51,7 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
     },
     {
       label: LoginMethods.Twitter,
-      icon: <DiscordLogo />,
+      icon: <TwitterLogo />,
       disabled: false,
       onClick: async () => {
         const url = await login(AuthProvider.TWITTER, redirectUrl);
@@ -69,8 +77,8 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
       disabled: false,
       onClick: async () => {
         const url = await login(AuthProvider.WALLET_CONNECT, redirectUrl);
-        if(!url) return;
-  
+        if (!url) return;
+
         QRCodeModal.open(url, () => {});
       },
     },
@@ -89,7 +97,7 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
       },
     },
   ];
-  if(showEmail) {
+  if (showEmail) {
     options.push({
       label: LoginMethods.Email,
       html: (
@@ -121,17 +129,17 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
             }}
           >
             <input
-              autoComplete={'off'}
+              autoComplete={"off"}
               type="text"
               onChange={(e) => setEmail(e.target.value)}
               id="email"
-              placeholder='Email'
+              placeholder="Email"
               value={email}
               style={{
-                minHeight: '45px',
-                borderRadius: '5px',
-                background: 'black',
-                padding: '8px',
+                minHeight: "45px",
+                borderRadius: "5px",
+                background: "black",
+                padding: "8px",
               }}
             />
             <button
@@ -140,10 +148,9 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
                 if (url) {
                   window.location.href = url;
                 }
-              }
-            }
+              }}
               style={{
-                margin: 'auto',
+                margin: "auto",
                 background: "#444444",
                 borderRadius: "5px",
                 padding: "8px",
@@ -153,45 +160,60 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
             </button>
           </section>
         </div>
-      )
+      ),
     });
   }
 
-  const methods = options.filter(option=> loginMethods.includes(option.label))
+  const methods = options.filter((option) =>
+    loginMethods.includes(option.label),
+  );
 
-  const containerStyle = customProps?.containerStyle ? customProps.containerStyle : defaultStyles.container;
-  const tittleStyle = customProps?.tittleStyle ? customProps.tittleStyle : defaultStyles.tittle;
-  const tittleText = customProps?.tittleText ? customProps.tittleText : "Welcome";
-  const buttonsContainerStyle = customProps?.buttonsContainerStyle ? customProps.buttonsContainerStyle : defaultStyles.buttonsContainer;
-  const buttonStyle = customProps?.buttonStyle ? customProps.buttonStyle : defaultStyles.button;
-  const buttonText = customProps?.buttonText ? customProps.buttonText : "Continue with";
+  const containerStyle = customProps?.containerStyle
+    ? customProps.containerStyle
+    : defaultStyles.container;
+  const tittleStyle = customProps?.tittleStyle
+    ? customProps.tittleStyle
+    : defaultStyles.tittle;
+  const tittleText = customProps?.tittleText
+    ? customProps.tittleText
+    : "Welcome";
+  const buttonsContainerStyle = customProps?.buttonsContainerStyle
+    ? customProps.buttonsContainerStyle
+    : defaultStyles.buttonsContainer;
+  const buttonStyle = customProps?.buttonStyle
+    ? customProps.buttonStyle
+    : defaultStyles.button;
+  const buttonText = customProps?.buttonText
+    ? customProps.buttonText
+    : "Continue with";
 
   return (
     <div style={containerStyle}>
-      <span style={tittleStyle}>
-        {tittleText}
-      </span>
+      <span style={tittleStyle}>{tittleText}</span>
       <section style={buttonsContainerStyle}>
-        {methods.map((option) => (
-          option.html ? option.html :
-          <button
-            key={`login-option-${option.label!.toLocaleLowerCase()}`}
-            id={`login-option-${option.label!.toLocaleLowerCase()}`}
-            className="loginButton"
-            style={{
-              ...buttonStyle,
-              cursor: option.disabled ? "not-allowed" : "pointer",
-            }}
-            disabled={option.disabled}
-            onClick={option.onClick}
-          >
-            {option.icon}
-            <span style={defaultStyles.buttonText}>
-              {buttonText} {option.label}
-            </span>
-          </button>
-        ))}
+        {methods.map((option) =>
+          option.html ? (
+            option.html
+          ) : (
+            <button
+              key={`login-option-${option.label!.toLocaleLowerCase()}`}
+              id={`login-option-${option.label!.toLocaleLowerCase()}`}
+              className="loginButton"
+              style={{
+                ...buttonStyle,
+                cursor: option.disabled ? "not-allowed" : "pointer",
+              }}
+              disabled={option.disabled}
+              onClick={option.onClick}
+            >
+              {option.icon}
+              <span style={defaultStyles.buttonText}>
+                {buttonText} {option.label}
+              </span>
+            </button>
+          ),
+        )}
       </section>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/NetworkSelector.tsx b/src/components/NetworkSelector.tsx
deleted file mode 100644
index e968967..0000000
--- a/src/components/NetworkSelector.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export const NetworkSelector = ({
-  networks,
-  enableTestNetworks,
-}: INetworkSelectorProps) => {
-  return <div></div>;
-};
diff --git a/src/components/index.ts b/src/components/index.ts
index 9986052..c154cbc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,4 +2,4 @@ export * from "./LoginForm";
 export * from "./LoginFormStyles";
 export * from "./BrillionContext";
 export * from "./BrillionProvider";
-export * from "./NetworkSelector";
+export * from "./ChainSelector";
diff --git a/src/interfaces/ChainSelector.ts b/src/interfaces/ChainSelector.ts
new file mode 100644
index 0000000..b9e2491
--- /dev/null
+++ b/src/interfaces/ChainSelector.ts
@@ -0,0 +1,36 @@
+import { SUPPORTED_CHAINS } from "@brillionfi/wallet-infra-sdk/dist/models";
+
+export interface IChainSelectorProps {
+  enableTestNetworks?: boolean;
+  networks?: SUPPORTED_CHAINS[];
+}
+
+export const TEST_NETWORKS = [
+  SUPPORTED_CHAINS.ARBITRUM_TESTNET,
+  SUPPORTED_CHAINS.AVALANCHE_FUJI_TESTNET,
+  SUPPORTED_CHAINS.BASE_SEPOLIA,
+  SUPPORTED_CHAINS.ETHEREUM_SEPOLIA,
+  SUPPORTED_CHAINS.POLYGON_AMOY,
+  SUPPORTED_CHAINS.SOLANA_TESTNET,
+  SUPPORTED_CHAINS.TELOS_TESTNET,
+  SUPPORTED_CHAINS.TRON_TESTNET,
+  SUPPORTED_CHAINS.VANAR_VANGUARD,
+  SUPPORTED_CHAINS.ZILLIQA2_PROTO_TESTNET,
+  SUPPORTED_CHAINS.ZILLIQA_TESTNET,
+];
+
+export const PROD_NETWORKS = [
+  SUPPORTED_CHAINS.ARBITRUM,
+  SUPPORTED_CHAINS.AVALANCHE,
+  SUPPORTED_CHAINS.BASE,
+  SUPPORTED_CHAINS.COSMOS,
+  SUPPORTED_CHAINS.ETHEREUM,
+  SUPPORTED_CHAINS.POLYGON,
+  SUPPORTED_CHAINS.SOLANA,
+  SUPPORTED_CHAINS.TELOS,
+  SUPPORTED_CHAINS.TRON,
+  SUPPORTED_CHAINS.VANAR,
+  SUPPORTED_CHAINS.ZILLIQA,
+];
+
+export const NETWORKS = [...TEST_NETWORKS, ...PROD_NETWORKS];
diff --git a/src/interfaces/NetworkSelector.ts b/src/interfaces/NetworkSelector.ts
deleted file mode 100644
index 7664bca..0000000
--- a/src/interfaces/NetworkSelector.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { SUPPORTED_CHAINS } from "@brillionfi/wallet-infra-sdk/dist/models";
-
-export interface INetworksSelectorProps {
-  enableTestNetworks?: boolean;
-  networks?: SUPPORTED_CHAINS[];
-}
-
-export const NETWORKS = SUPPORTED_CHAINS;