diff --git a/src/components/ConnectMetamask.tsx b/src/components/ConnectMetamask.tsx
index d0498e91..3d64b3db 100644
--- a/src/components/ConnectMetamask.tsx
+++ b/src/components/ConnectMetamask.tsx
@@ -15,6 +15,7 @@ import { useGlobalContext } from "../context/Global";
 import { EIP6963ProviderInfo, useWeb3Signer } from "../context/Web3";
 import "../style/web3.scss";
 import { formatError } from "../utils/errors";
+import { cropString, isMobile } from "../utils/helper";
 
 const connect = async (
     notify: (type: string, message: string) => void,
@@ -122,13 +123,21 @@ const ShowAddress = ({
     const { t } = useGlobalContext();
     const { clearSigner } = useWeb3Signer();
 
-    const [text, setText] = createSignal<string>(address());
+    const formatAddress = (addr: string) => {
+        if (isMobile()) {
+            return cropString(addr);
+        }
+
+        return addr;
+    };
+
+    const [text, setText] = createSignal<string>(formatAddress(address()));
 
     return (
         <button
             onClick={() => clearSigner()}
             onMouseEnter={() => setText(t("disconnect_address"))}
-            onMouseLeave={() => setText(address())}
+            onMouseLeave={() => setText(formatAddress(address()))}
             class="btn btn-light">
             {text()}
         </button>
diff --git a/src/context/Web3.tsx b/src/context/Web3.tsx
index 8b830736..fd18a2bf 100644
--- a/src/context/Web3.tsx
+++ b/src/context/Web3.tsx
@@ -69,6 +69,7 @@ const Web3SignerContext = createContext<{
     // TODO: this is | undefined
     signer: Accessor<Signer>;
     clearSigner: () => void;
+
     getEtherSwap: () => EtherSwap;
 }>();