diff --git a/src/components/chainButton.tsx b/src/components/chainButton.tsx
index 3e8bff7..aeabfdc 100644
--- a/src/components/chainButton.tsx
+++ b/src/components/chainButton.tsx
@@ -1,8 +1,27 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import data from "../data/data.json";
 import Image from "next/image";
+import { useTransfer } from "@/hooks";
+import { getChainLogoSrc, parseCross } from "@/utils";
+import { Asset, ChainConfig, WalletID } from "@/types";
 
 export default function ChainButton() {
+  const { sourceChain, setSourceChain } = useTransfer();
+  const { defaultSourceChainOptions } = parseCross();
+  const [sourceChainOptions, _setSourceChainOptions] = useState(defaultSourceChainOptions);
+
+  console.log("source chain", sourceChain);
+
+  const sourceChainRef = useRef(sourceChain);
+
+  const _setSourceChain = useCallback(
+    (chain: ChainConfig | undefined) => {
+      setSourceChain((prev) => chain ?? prev);
+      sourceChainRef.current = chain ?? sourceChainRef.current;
+    },
+    [setSourceChain],
+  );
+
   const [subMenu, setSubMenu] = useState<boolean>(false);
   const handleToggleSubMenu = useCallback(() => {
     setSubMenu((prev) => !prev);
@@ -17,13 +36,18 @@ export default function ChainButton() {
         <span className="block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
       </div>
       {subMenu && (
-        <div className="absolute right-[-21px] top-[calc(100%+20px)] flex w-[151px] flex-col gap-[20px] rounded-[10px] bg-white p-[20px]">
-          {data.chains.map((chain) => (
-            <div key={chain.name} className="flex items-center gap-[10px]">
-              <Image src={chain.logo} width={24} height={24} alt={chain.name} />
-              <div className="flex flex-col ">
-                <p className="text-[14px] leading-[24px] text-[#121619]">{chain.name}</p>
-              </div>
+        <div className="absolute right-[-21px] top-[calc(100%+20px)] flex w-[200px] flex-col gap-[20px] rounded-[10px] bg-white p-[20px]">
+          {sourceChainOptions.map((chain) => (
+            <div
+              key={chain.name}
+              className="flex cursor-pointer items-center justify-start gap-[10px]"
+              onClick={() => {
+                _setSourceChain(chain);
+                setSubMenu(false);
+              }}
+            >
+              <Image src={getChainLogoSrc(chain.logo)} width={24} height={24} alt={chain.name} />
+              <p className="flex-shrink-0 whitespace-nowrap text-[14px] leading-[24px] text-[#121619]">{chain.name}</p>
             </div>
           ))}
         </div>