diff --git a/src/components/chainButton.tsx b/src/components/chainButton.tsx
index 865ab6d..1d0f107 100644
--- a/src/components/chainButton.tsx
+++ b/src/components/chainButton.tsx
@@ -27,14 +27,20 @@ export default function ChainButton() {
   return (
     <div className="relative">
       <div
-        className="flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[5px] rounded-[10px] bg-white px-[10px] duration-300 hover:shadow-lg"
+        className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px] duration-300 hover:shadow-lg lg:w-fit lg:justify-center"
         onClick={handleToggleSubMenu}
       >
         <Image src={getChainLogoSrc(sourceChain.logo)} width={24} height={24} alt={sourceChain.name} />
-        <span className="block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
+        <p className="lg:hidden">
+          {sourceChain.name.includes("Polkadot") ? sourceChain.name.replace(" AssetHub", "") : sourceChain.name}
+        </p>
+        <span className="lg:ml-unset ml-auto 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-[200px] flex-col gap-[20px] rounded-[10px] bg-white p-[20px]">
+      <div
+        className="absolute left-[-5px] right-[-5px] top-[calc(100%+20px)] overflow-hidden rounded-[10px] shadow-lg duration-500 lg:left-[unset] lg:right-[-21px]"
+        style={{ maxHeight: subMenu ? "3s0vh" : "0" }}
+      >
+        <div className=" flex w-[200px] flex-col gap-[20px] bg-white p-[20px]">
           {sourceChainOptions.map((chain) => (
             <div
               key={chain.name}
@@ -45,11 +51,13 @@ export default function ChainButton() {
               }}
             >
               <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>
+              <p className="flex-shrink-0 whitespace-nowrap text-[14px] leading-[24px] text-[#121619]">
+                {chain.name.includes("Polkadot") ? chain.name.replace(" AssetHub", "") : chain.name}
+              </p>
             </div>
           ))}
         </div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index fbd0975..6d800b2 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -75,11 +75,7 @@ export default function Header() {
             </div>
           </div>
           <div className="flex flex-col items-center gap-[20px] pt-[20px]">
-            <div className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px]">
-              <span className="block h-[24px] w-[24px] bg-[url('/images/icons/assethub-icon.svg')] bg-contain bg-center bg-no-repeat" />
-              <p className="text-[14px] leading-[24px]">Asset Hub</p>
-              <span className="ml-auto block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
-            </div>
+            <ChainButton />
             {!sender ? (
               <WalletButton
                 openModal={() => {