diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
index 8ca16a0e7..384223427 100644
--- a/packages/ui/src/components/Modal.tsx
+++ b/packages/ui/src/components/Modal.tsx
@@ -140,13 +140,14 @@ export default function Modal(props: ModalProps) {
   const isExternalPrimary = modalState.socialLoginsConfig?.uiConfig?.primaryButton === "externalLogin";
 
   const externalWalletButton = (
-    <div className="w3ajs-external-wallet w3a-group">
+    <div className="w3ajs-external-wallet w3a-group w3a--w-full">
       <div className="w3a-external-toggle w3ajs-external-toggle">
         {/* <div className="w3a-group__title">{t("modal.external.title")}</div> */}
         <Button
           variant={isExternalPrimary ? "primary" : "tertiary"}
           type="button"
-          className="w-full w3ajs-external-toggle__button"
+          className="w3a--w-full w3ajs-external-toggle__button"
+          style={{ width: "100%" }}
           onClick={() => {
             setModalState((prevState) => {
               return {
diff --git a/packages/ui/src/css/web3auth.css b/packages/ui/src/css/web3auth.css
index e4c7ab0aa..4b917e7d7 100644
--- a/packages/ui/src/css/web3auth.css
+++ b/packages/ui/src/css/web3auth.css
@@ -347,7 +347,7 @@
 }
 
 #w3a-modal .w3a-external-toggle {
-  @apply w3a--block;
+  @apply w3a--block !w3a--w-full;
 }
 
 #w3a-modal .w3a-external-toggle.w3a-external-toggle--hidden {