diff --git a/packages/ui/src/components/AdapterLoader.tsx b/packages/ui/src/components/AdapterLoader.tsx
index 119170e45..d81603129 100644
--- a/packages/ui/src/components/AdapterLoader.tsx
+++ b/packages/ui/src/components/AdapterLoader.tsx
@@ -34,15 +34,15 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
   }, [modalStatus, onClose]);
 
   return modalStatus !== MODAL_STATUS.INITIALIZED ? (
-    <div className="w3ajs-modal-loader w3a-modal__loader h-full">
+    <div className="w3ajs-modal-loader w3a-modal__loader w3a--h-full">
       <div className="w3a-modal__loader-content">
         <div className="w3a-modal__loader-info">
           {modalStatus === MODAL_STATUS.CONNECTING && (
             <>
               <div className="w3a-modal__loader-bridge">
                 <div className="w3a-modal__loader-app-logo">
-                  <img src={appLogo} className="block dark:hidden h-10 w-10" alt="" />
-                  <img src={appLogo} className="hidden dark:block h-10 w-10" alt="" />
+                  <img src={appLogo} className="w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10" alt="" />
+                  <img src={appLogo} className="w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10" alt="" />
                 </div>
                 <div className="w3a-modal__connector">
                   <div className="w3a-modal__connector-beat">
@@ -62,9 +62,9 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
             </>
           )}
           {modalStatus === ADAPTER_STATUS.CONNECTED && (
-            <div className="flex flex-col items-center">
+            <div className="w3a--flex w3a--flex-col w3a--items-center">
               <Icon iconName="connected" />
-              <div className="w3ajs-modal-loader__message w3a-spinner-message mt-4">{message}</div>
+              <div className="w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4">{message}</div>
             </div>
           )}
           {modalStatus === ADAPTER_STATUS.ERRORED && (
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 15052789e..fed526149 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -25,7 +25,7 @@ function Button(props: ButtonProps) {
       disabled={disabled}
       // eslint-disable-next-line react/button-has-type
       type={type}
-      className={`t-btn t-btn-${variant} rounded-full ${sizeClass} ${className}`}
+      className={`t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`}
       onClick={onClick}
       title={title}
       style={style}
diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/styles.css
index e68aea957..e45536336 100644
--- a/packages/ui/src/components/Button/styles.css
+++ b/packages/ui/src/components/Button/styles.css
@@ -1,47 +1,42 @@
 #w3a-modal button.t-btn,
 a.t-btn {
-  @apply flex
-    items-center
-    justify-center
-    ease-linear
-    transition-all
-    duration-150;
+  @apply w3a--flex w3a--items-center w3a--justify-center w3a--ease-linear w3a--transition-all w3a--duration-150;
 }
 
 #w3a-modal button.t-btn:not(.t-btn-text),
 a.t-btn:not(.t-btn-text) {
-  @apply disabled:bg-app-gray-300
-    disabled:border-0
-    disabled:hover:bg-app-gray-300
-    disabled:hover:border-app-gray-300
-    disabled:hover:text-app-gray-400
-    disabled:active:bg-app-gray-300
-    disabled:active:ring-offset-0
-    disabled:active:outline-0
-    disabled:active:ring-0
-    disabled:text-app-gray-400
-    dark:disabled:bg-app-gray-700
-    dark:disabled:text-app-gray-600;
+  @apply disabled:w3a--bg-app-gray-300
+    disabled:w3a--border-0
+    disabled:hover:w3a--bg-app-gray-300
+    disabled:hover:w3a--border-app-gray-300
+    disabled:hover:w3a--text-app-gray-400
+    disabled:active:w3a--bg-app-gray-300
+    disabled:active:w3a--ring-offset-0
+    disabled:active:w3a--outline-0
+    disabled:active:w3a--ring-0
+    disabled:w3a--text-app-gray-400
+    dark:disabled:w3a--bg-app-gray-700
+    dark:disabled:w3a--text-app-gray-600;
 }
 #w3a-modal .size-xs {
   height: 32px;
-  @apply px-3 py-2 text-xs;
+  @apply w3a--px-3 w3a--py-2 w3a--text-xs;
 }
 #w3a-modal .size-sm {
   height: 36px;
-  @apply px-3 py-2 text-sm;
+  @apply w3a--px-3 w3a--py-2 w3a--text-sm;
 }
 #w3a-modal .size-md {
   height: 42px;
-  @apply px-5 py-2.5 text-sm;
+  @apply w3a--px-5 w3a--py-2.5 w3a--text-sm;
 }
 #w3a-modal .size-lg {
   height: 48px;
-  @apply px-5 py-3 text-base;
+  @apply w3a--px-5 w3a--py-3 w3a--text-base;
 }
 #w3a-modal .size-xl {
   height: 52px;
-  @apply px-4 py-3.5 text-base;
+  @apply w3a--px-4 w3a--py-3.5 w3a--text-base;
 }
 /* #w3a-modal .icon {
   @apply rounded-full;
@@ -75,90 +70,90 @@ a.t-btn:not(.t-btn-text) {
   width: 100%;
 } */
 #w3a-modal .t-btn.t-btn-primary {
-  @apply outline-none
-    bg-app-primary-600
-    text-app-onPrimary
-    hover:bg-app-primary-700
-    active:bg-app-primary-600
-    active:outline
-    active:outline-offset-1
-    active:outline-1
-    active:outline-app-primary-600
-    focus-visible:outline
-    focus-visible:outline-offset-1
-    focus-visible:outline-1
-    focus-visible:outline-app-primary-600
+  @apply w3a--outline-none
+    w3a--bg-app-primary-600
+    w3a--text-app-onPrimary
+    hover:w3a--bg-app-primary-700
+    active:w3a--bg-app-primary-600
+    active:w3a--outline
+    active:w3a--outline-offset-1
+    active:w3a--outline-1
+    active:w3a--outline-app-primary-600
+    focus-visible:w3a--outline
+    focus-visible:w3a--outline-offset-1
+    focus-visible:w3a--outline-1
+    focus-visible:w3a--outline-app-primary-600
 
-    dark:bg-app-primary-500
-    dark:hover:bg-app-primary-400
-    dark:active:bg-app-primary-500
-    dark:active:outline-app-primary-500
-    dark:focus-visible:outline-app-primary-500;
+    dark:w3a--bg-app-primary-500
+    dark:hover:w3a--bg-app-primary-400
+    dark:active:w3a--bg-app-primary-500
+    dark:active:w3a--outline-app-primary-500
+    dark:focus-visible:w3a--outline-app-primary-500;
 }
 #w3a-modal .t-btn.t-btn-secondary {
-  @apply outline-none
-    bg-transparent
-    text-app-gray-600
-    border
-    border-app-gray-500
-    hover:bg-app-gray-200
-    active:bg-transparent
-    active:border-app-primary-600
-    active:ring-1
-    active:ring-app-primary-600
-    focus-visible:border-app-primary-600
-    focus-visible:bg-transparent
-    focus-visible:ring-1
-    focus-visible:ring-app-primary-600
+  @apply w3a--outline-none
+    w3a--bg-transparent
+    w3a--text-app-gray-600
+    w3a--border
+    w3a--border-app-gray-500
+    hover:w3a--bg-app-gray-200
+    active:w3a--bg-transparent
+    active:w3a--border-app-primary-600
+    active:w3a--ring-1
+    active:w3a--ring-app-primary-600
+    focus-visible:w3a--border-app-primary-600
+    focus-visible:w3a--bg-transparent
+    focus-visible:w3a--ring-1
+    focus-visible:w3a--ring-app-primary-600
 
-    dark:text-app-white
-    dark:border-app-gray-300
-    dark:hover:bg-app-gray-700
-    dark:active:bg-transparent
-    dark:active:border-app-primary-500
-    dark:active:ring-app-primary-500
-    dark:focus-visible:border-app-primary-500
-    dark:focus-visible:bg-transparent
-    dark:focus-visible:ring-app-primary-500;
+    dark:w3a--text-app-white
+    dark:w3a--border-app-gray-300
+    dark:hover:w3a--bg-app-gray-700
+    dark:active:w3a--bg-transparent
+    dark:active:w3a--border-app-primary-500
+    dark:active:w3a--ring-app-primary-500
+    dark:focus-visible:w3a--border-app-primary-500
+    dark:focus-visible:w3a--bg-transparent
+    dark:focus-visible:w3a--ring-app-primary-500;
 }
 #w3a-modal .t-btn.t-btn-tertiary {
-  @apply bg-app-gray-200
-    text-app-gray-800
-    hover:bg-app-gray-300
-    active:bg-app-gray-200
-    active:ring-2
-    active:ring-app-primary-600
-    focus-visible:ring-2
-    focus-visible:ring-app-primary-600
+  @apply w3a--bg-app-gray-200
+    w3a--text-app-gray-800
+    hover:w3a--bg-app-gray-300
+    active:w3a--bg-app-gray-200
+    active:w3a--ring-2
+    active:w3a--ring-app-primary-600
+    focus-visible:w3a--ring-2
+    focus-visible:w3a--ring-app-primary-600
 
-    dark:bg-app-gray-500
-    dark:text-app-white
-    dark:hover:bg-app-gray-400
-    dark:active:bg-app-gray-500
-    dark:active:ring-app-primary-500
-    dark:focus-visible:ring-app-primary-500;
+    dark:w3a--bg-app-gray-500
+    dark:w3a--text-app-white
+    dark:hover:w3a--bg-app-gray-400
+    dark:active:w3a--bg-app-gray-500
+    dark:active:w3a--ring-app-primary-500
+    dark:focus-visible:w3a--ring-app-primary-500;
 }
 #w3a-modal .t-btn.t-btn-text {
-  @apply text-app-primary-600
-    hover:text-app-primary-800
-    hover:underline
-    active:text-app-primary-600
-    active:ring-2
-    active:ring-app-primary-600
-    focus-visible:ring-2
-    focus-visible:ring-app-primary-600
-    disabled:text-app-gray-400
-    disabled:no-underline
+  @apply w3a--text-app-primary-600
+    hover:w3a--text-app-primary-800
+    hover:w3a--underline
+    active:w3a--text-app-primary-600
+    active:w3a--ring-2
+    active:w3a--ring-app-primary-600
+    focus-visible:w3a--ring-2
+    focus-visible:w3a--ring-app-primary-600
+    disabled:w3a--text-app-gray-400
+    disabled:w3a--no-underline
 
-    dark:text-app-primary-500
-    dark:hover:text-app-primary-400
-    dark:disabled:text-app-gray-600;
+    dark:w3a--text-app-primary-500
+    dark:hover:w3a--text-app-primary-400
+    dark:disabled:w3a--text-app-gray-600;
 }
 /* #w3a-modal .t-btn .t-icon {
   color: inherit;
 } */
 #w3a-modal .btn-link {
-  @apply no-underline;
+  @apply w3a--no-underline;
 }
 #w3a-modal button.t-btn:hover > .hover-icon {
   display: block;
diff --git a/packages/ui/src/components/ExternalWallet/ExternalWalletButton.tsx b/packages/ui/src/components/ExternalWallet/ExternalWalletButton.tsx
index 94785b921..1de0c1dde 100644
--- a/packages/ui/src/components/ExternalWallet/ExternalWalletButton.tsx
+++ b/packages/ui/src/components/ExternalWallet/ExternalWalletButton.tsx
@@ -19,10 +19,10 @@ export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
       variant="tertiary"
       type="button"
       onClick={() => handleWalletClick(button)}
-      className="w-full rounded-xl size-xl flex !justify-between items-center wallet-btn"
+      className="w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn"
       title={button.name}
     >
-      <div className="flex items-center">
+      <div className="w3a--flex w3a--items-center">
         <Image
           imageId={`login-${button.name}`}
           hoverImageId={`login-${button.name}`}
@@ -32,10 +32,10 @@ export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
           isButton
           extension={button.imgExtension}
         />
-        <p className="ml-2 text-left text-sm">{button.displayName}</p>
+        <p className="w3a--ml-2 w3a--text-left w3a--text-sm">{button.displayName}</p>
       </div>
       {button.hasInjectedWallet && (
-        <span className="inline-flex items-center rounded-lg px-2 py-1 text-xs font-medium bg-app-primary-100 text-app-primary-800">
+        <span className="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800">
           {t("modal.external.installed")}
         </span>
       )}
diff --git a/packages/ui/src/components/ExternalWallet/ExternalWalletConnect.tsx b/packages/ui/src/components/ExternalWallet/ExternalWalletConnect.tsx
index 257c18099..6bf9caf5f 100644
--- a/packages/ui/src/components/ExternalWallet/ExternalWalletConnect.tsx
+++ b/packages/ui/src/components/ExternalWallet/ExternalWalletConnect.tsx
@@ -51,11 +51,11 @@ export default function ExternalWalletConnect(props: ExternalWalletConnectProps)
 
           {/* Install links */}
           {connectButton.hasInstallLinks && (
-            <div className="flex flex-row items-center justify-between gap-2 bg-app-gray-50 dark:bg-app-gray-700 text-app-gray-900 dark:text-app-white px-3 py-2 rounded-xl">
-              <span className="text-sm truncate flex-grow-0">
+            <div className="w3a--flex w3a--flex-row w3a--items-center w3a--justify-between w3a--gap-2 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--px-3 w3a--py-2 w3a--rounded-xl">
+              <span className="w3a--text-sm w3a--truncate w3a--flex-grow-0">
                 {t("modal.external.dont-have")} <span>{connectButton.displayName}</span>?
               </span>
-              <Button type="button" variant="secondary" size="xs" className="flex-grow-1 flex-shrink-0" onClick={showWalletDownload}>
+              <Button type="button" variant="secondary" size="xs" className="w3a--flex-grow-1 w3a--flex-shrink-0" onClick={showWalletDownload}>
                 {t("modal.external.get-wallet")}
               </Button>
             </div>
diff --git a/packages/ui/src/components/ExternalWallet/ExternalWalletHeader.tsx b/packages/ui/src/components/ExternalWallet/ExternalWalletHeader.tsx
index b50862528..a2bf09699 100644
--- a/packages/ui/src/components/ExternalWallet/ExternalWalletHeader.tsx
+++ b/packages/ui/src/components/ExternalWallet/ExternalWalletHeader.tsx
@@ -11,16 +11,16 @@ export default function ExternalWalletHeader(props: ExternalWalletHeaderProps) {
   const { title, goBack, closeModal, disableBackButton } = props;
 
   return (
-    <div className="flex flex-row justify-center items-center gap-1">
-      <div className="flex flex-grow-1 flex-shrink-0 items-center justify-start mr-auto">
+    <div className="w3a--flex w3a--flex-row w3a--justify-center w3a--items-center w3a--gap-1">
+      <div className="w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-start w3a--mr-auto">
         {!disableBackButton && (
           <button type="button" className="w3a-external-back w3ajs-external-back" onClick={goBack}>
             <Icon iconName="arrow-left-light" darkIconName="arrow-left-dark" width="16" height="16" />
           </button>
         )}
       </div>
-      <div className="w3a-header__title flex-grow-0 flex-shrink truncate mr-6">{title}</div>
-      <div className="flex flex-grow-1 flex-shrink-0 items-center justify-end ml-auto">
+      <div className="w3a-header__title w3a--flex-grow-0 w3a--flex-shrink w3a--truncate w3a--mr-6">{title}</div>
+      <div className="w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-end w3a--ml-auto">
         <button type="button" onClick={closeModal} className="w3a-header__button_wallet w3ajs-close-btn">
           <Icon iconName="x-light" darkIconName="x-dark" />
         </button>
diff --git a/packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx b/packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx
index 3d7e593ad..9a99a4df5 100644
--- a/packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx
+++ b/packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx
@@ -85,9 +85,13 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       const logoLight = `${os}-light`;
       const logoDark = `${os}-dark`;
       acc.push(
-        <li key={os} className="w-full">
+        <li key={os} className="w3a--w-full">
           <a href={appUrl} rel="noopener noreferrer" target="_blank">
-            <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
+            <Button
+              type="button"
+              variant="tertiary"
+              className="w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn"
+            >
               <Image
                 imageId={logoLight}
                 darkImageId={logoDark}
@@ -97,7 +101,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
                 width="28"
                 isButton
               />
-              <span className="text-sm font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
+              <span className="w3a--text-sm w3a--font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
             </Button>
           </a>
         </li>
@@ -118,7 +122,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
     const installLink = browserExtensionUrl ? (
       <li key={deviceDetails.browser}>
         <a href={browserExtensionUrl} rel="noopener noreferrer" target="_blank">
-          <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
+          <Button type="button" variant="tertiary" className="w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn">
             <Image
               imageId={deviceDetails.browser}
               darkImageId={deviceDetails.browser}
@@ -128,7 +132,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
               width="30"
               isButton
             />
-            <span className="text-sm font-medium">
+            <span className="w3a--text-sm w3a--font-medium">
               {t("modal.external.install-browser-extension", { browser: getBrowserName(deviceDetails.browser) })}
             </span>
           </Button>
@@ -144,7 +148,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       <ExternalWalletHeader title={`${t("modal.external.get")} ${connectButton.displayName}`} goBack={goBack} closeModal={closeModal} />
 
       {/* Wallet image */}
-      <div className="flex justify-center my-6">
+      <div className="w3a--flex w3a--justify-center w3a--my-6">
         <Image
           imageId={`login-${connectButton.name}`}
           hoverImageId={`login-${connectButton.name}`}
@@ -157,7 +161,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       </div>
 
       {/* Download links */}
-      <ul className="flex flex-col gap-3">{deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}</ul>
+      <ul className="w3a--flex w3a--flex-col w3a--gap-3">{deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}</ul>
     </div>
   );
 }
diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx
index a01732968..a31b31234 100644
--- a/packages/ui/src/components/ExternalWallets.tsx
+++ b/packages/ui/src/components/ExternalWallets.tsx
@@ -230,9 +230,9 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
 
               {/* Search */}
               {totalExternalWallets > 15 && (
-                <div className="py-4">
+                <div className="w3a--py-4">
                   <input
-                    className="w-full w3a-text-field"
+                    className="w3a--w-full w3a-text-field"
                     name="passwordless-input"
                     required
                     value={walletSearch}
@@ -250,11 +250,11 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
 
               {/* Wallet List */}
               {externalButtons.length === 0 ? (
-                <div className="w-full text-center text-app-gray-400 dark:text-app-gray-500 py-6 flex justify-center items-center">
+                <div className="w3a--w-full w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500 w3a--py-6 w3a--flex w3a--justify-center w3a--items-center">
                   {t("modal.external.no-wallets-found")}
                 </div>
               ) : (
-                <div className={`w3a-adapter-list-container ${totalExternalWallets < 15 ? "py-4" : ""}`}>
+                <div className={`w3a-adapter-list-container ${totalExternalWallets < 15 ? "w3a--py-4" : ""}`}>
                   <ul className="w3a-adapter-list w3ajs-wallet-adapters">
                     {externalButtons.map((button) => {
                       return (
@@ -265,7 +265,7 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
                               <a
                                 href={button.href ? formatIOSMobile({ uri: walletConnectUri, link: button.href }) : walletConnectUri}
                                 target="_blank"
-                                className="w-full"
+                                className="w3a--w-full"
                                 rel="noreferrer noopener"
                               >
                                 <ExternalWalletButton button={button} handleWalletClick={handleWalletClick} />
@@ -277,9 +277,11 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
                       );
                     })}
                     {totalExternalWallets > 10 && !walletSearch && (
-                      <li className="flex flex-col items-center justify-center gap-y-0.5 my-4 w-full mx-auto w3a-adapter-item--full">
-                        <p className="text-xs text-app-gray-500 dark:text-app-gray-400">{t("modal.external.search-text")}</p>
-                        <p className="text-xs font-medium text-app-gray-900 dark:text-app-white">{t("modal.external.search-subtext")}</p>
+                      <li className="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-0.5 w3a--my-4 w3a--w-full w3a--mx-auto w3a-adapter-item--full">
+                        <p className="w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400">{t("modal.external.search-text")}</p>
+                        <p className="w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">
+                          {t("modal.external.search-subtext")}
+                        </p>
                       </li>
                     )}
                   </ul>
diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
index 4e76a8ac5..6eb68d429 100644
--- a/packages/ui/src/components/Header.tsx
+++ b/packages/ui/src/components/Header.tsx
@@ -1,7 +1,6 @@
-import { memo, useContext } from "react";
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
-import { ThemedContext } from "../context/ThemeContext";
 import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from "../interfaces";
 import i18n from "../localeImport";
 import Icon from "./Icon";
@@ -13,7 +12,6 @@ interface HeaderProps {
 }
 
 function Header(props: HeaderProps) {
-  const { isDark } = useContext(ThemedContext);
   const { onClose, appLogo, appName } = props;
 
   const [t] = useTranslation(undefined, { i18n });
@@ -34,15 +32,17 @@ function Header(props: HeaderProps) {
           <div className="w3a-header__title">{t("modal.header-title")}</div>
           <div className="w3a-header__subtitle">
             {subtitle}
-            <div className="relative flex flex-col items-center group cursor-pointer">
-              <Icon iconName={`information-circle${isDark ? "-light" : ""}`} />
-              <div className="absolute top-4 z-20 flex-col items-center hidden mb-5 group-hover:flex">
-                <div className="w-3 h-3 ml-[3px] -mb-2 rotate-45 bg-app-gray-50 dark:bg-app-gray-600" />
+            <div className="w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--group w3a--cursor-pointer">
+              <Icon iconName="information-circle-light" darkIconName="information-circle" />
+              <div className="w3a--absolute w3a--top-4 w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 group-hover:w3a--flex">
+                <div className="w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600" />
                 <div
-                  className={`relative p-4 w-[270px] -translate-x-16 text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg ${subtitle.length > 34 ? "-ml-[100px]" : ""}`}
+                  className={`w3a--relative w3a--p-4 w3a--w-[270px] w3a--translate-x-[-16px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${subtitle.length > 34 ? "-w3a--ml-[100px]" : ""}`}
                 >
-                  <div className="text-xs font-medium mb-1 text-app-gray-900 dark:text-app-white">{t("modal.header-tooltip-title")}</div>
-                  <div className="text-xs text-app-gray-400">{t("modal.header-tooltip-desc")}</div>
+                  <div className="w3a--text-xs w3a--font-medium w3a--mb-1 w3a--text-app-gray-900 dark:w3a--text-app-white">
+                    {t("modal.header-tooltip-title")}
+                  </div>
+                  <div className="w3a--text-xs w3a--text-app-gray-400">{t("modal.header-tooltip-desc")}</div>
                 </div>
               </div>
             </div>
diff --git a/packages/ui/src/components/Icon.tsx b/packages/ui/src/components/Icon.tsx
index 4554da33b..4aadf9c85 100644
--- a/packages/ui/src/components/Icon.tsx
+++ b/packages/ui/src/components/Icon.tsx
@@ -49,13 +49,13 @@ const icons: Record<string, { image: string }> = {
 
 export default function Icon(props: IconProps) {
   const { iconName, iconTitle = "", height = "auto", width = "auto", darkIconName = "" } = props;
-  const h = height === "auto" ? "h-auto" : `h-[${height}px]`;
-  const w = width === "auto" ? "w-auto" : `w-[${width}px]`;
+  const h = height === "auto" ? "w3a--h-auto" : `w3a--h-[${height}px]`;
+  const w = width === "auto" ? "w3a--w-auto" : `w3a--w-[${width}px]`;
   return (
     <>
       {icons[iconName] && (
         <img
-          className={`${iconTitle ? "cursor-pointer" : ""} dark:hidden block ${h} ${w}`}
+          className={`${iconTitle ? "w3a--cursor-pointer" : ""} dark:w3a--hidden w3a--block ${h} ${w}`}
           height={height}
           width={width}
           src={icons[iconName].image}
@@ -65,7 +65,7 @@ export default function Icon(props: IconProps) {
       )}
       {icons[darkIconName] && (
         <img
-          className={`${iconTitle ? "cursor-pointer" : ""} hidden dark:block ${h} ${w}`}
+          className={`${iconTitle ? "w3a--cursor-pointer" : ""} w3a--hidden dark:w3a--block ${h} ${w}`}
           height={height}
           width={width}
           src={icons[darkIconName].image}
diff --git a/packages/ui/src/components/Image.tsx b/packages/ui/src/components/Image.tsx
index 81b40ce9d..4efcfe9cf 100644
--- a/packages/ui/src/components/Image.tsx
+++ b/packages/ui/src/components/Image.tsx
@@ -37,7 +37,7 @@ export default function Image(props: ImageProps) {
         height={height}
         width={width}
         alt={imageId}
-        className="image-icon object-contain rounded"
+        className="image-icon w3a--object-contain w3a--rounded"
         onError={({ currentTarget }) => {
           if (fallbackImageId) {
             // eslint-disable-next-line no-param-reassign
@@ -53,7 +53,7 @@ export default function Image(props: ImageProps) {
           height={height}
           width={width}
           alt={hoverImageId}
-          className="hover-icon object-contain rounded"
+          className="hover-icon w3a--object-contain w3a--rounded"
         />
       ) : null}
     </>
diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
index 99db59f1e..8ca16a0e7 100644
--- a/packages/ui/src/components/Modal.tsx
+++ b/packages/ui/src/components/Modal.tsx
@@ -190,7 +190,7 @@ export default function Modal(props: ModalProps) {
     modalState.modalVisibilityDelayed && (
       <div id="w3a-modal" className="w3a-modal">
         <div
-          className={`${modalTransitionClasses.join(" ")} ${modalState.status !== MODAL_STATUS.INITIALIZED ? "p-6 pt-7" : ""} ${
+          className={`${modalTransitionClasses.join(" ")} ${modalState.status !== MODAL_STATUS.INITIALIZED ? "w3a--p-6 w3a--pt-7" : ""} ${
             (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility
               ? ""
               : "wallet-adapter-container"
diff --git a/packages/ui/src/components/SelfCustodyViaWeb3Auth.tsx b/packages/ui/src/components/SelfCustodyViaWeb3Auth.tsx
index 24184a345..712d62bef 100644
--- a/packages/ui/src/components/SelfCustodyViaWeb3Auth.tsx
+++ b/packages/ui/src/components/SelfCustodyViaWeb3Auth.tsx
@@ -6,10 +6,20 @@ export default function SelfCustodyViaWeb3Auth() {
   const [t] = useTranslation(undefined, { i18n });
 
   return (
-    <div className="flex items-center gap-2 justify-center">
-      <div className="text-xs text-app-gray-300 dark:text-app-gray-500">{t("modal.footer.message-new")}</div>
-      <img height="16" src="https://images.web3auth.io/web3auth-footer-logo-light.svg" alt="Web3Auth Logo Light" className="h-4 block dark:hidden" />
-      <img height="16" src="https://images.web3auth.io/web3auth-footer-logo-dark.svg" alt="Web3Auth Logo Dark" className="h-4 hidden dark:block" />
+    <div className="w3a--flex w3a--items-center w3a--gap-2 w3a--justify-center">
+      <div className="w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500">{t("modal.footer.message-new")}</div>
+      <img
+        height="16"
+        src="https://images.web3auth.io/web3auth-footer-logo-light.svg"
+        alt="Web3Auth Logo Light"
+        className="w3a--h-4 w3a--block dark:w3a--hidden"
+      />
+      <img
+        height="16"
+        src="https://images.web3auth.io/web3auth-footer-logo-dark.svg"
+        alt="Web3Auth Logo Dark"
+        className="w3a--h-4 w3a--hidden dark:w3a--block"
+      />
     </div>
   );
 }
diff --git a/packages/ui/src/components/SocialLoginPasswordless.tsx b/packages/ui/src/components/SocialLoginPasswordless.tsx
index 9a6eeae70..e23749910 100644
--- a/packages/ui/src/components/SocialLoginPasswordless.tsx
+++ b/packages/ui/src/components/SocialLoginPasswordless.tsx
@@ -1,8 +1,7 @@
 import { LOGIN_PROVIDER } from "@web3auth/auth";
-import { ChangeEvent, FormEvent, useContext, useEffect, useMemo, useState } from "react";
+import { ChangeEvent, FormEvent, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { ThemedContext } from "../context/ThemeContext";
 import i18n from "../localeImport";
 import { getUserCountry, validatePhoneNumber } from "../utils";
 import Button from "./Button";
@@ -17,7 +16,6 @@ interface SocialLoginPasswordlessProps {
 }
 export default function SocialLoginPasswordless(props: SocialLoginPasswordlessProps) {
   const { handleSocialLoginClick, adapter, isPrimaryBtn, isEmailVisible, isSmsVisible } = props;
-  const { isDark } = useContext(ThemedContext);
 
   const [fieldValue, setFieldValue] = useState<string>("");
   const [countryCode, setCountryCode] = useState<string>("");
@@ -90,17 +88,19 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
       <div className="w3a-group__title">
         {t(title)}
         {isSmsVisible && (
-          <div className="relative flex flex-col items-center cursor-pointer group">
-            <Icon iconName={`information-circle${isDark ? "-light" : ""}`} />
-            <div className="absolute z-20 flex-col items-center hidden mb-5 top-4 group-hover:flex">
-              <div className="w-3 h-3 ml-[3px] -mb-2 rotate-45 bg-app-gray-50 dark:bg-app-gray-600" />
+          <div className="w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group">
+            <Icon iconName="information-circle-light" darkIconName="information-circle" />
+            <div className="w3a--absolute w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 w3a--top-4 group-hover:w3a--flex">
+              <div className="w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600" />
               <div
-                className={`relative p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg ${
-                  isSmsVisible && !isEmailVisible ? "left-20" : "left-8"
+                className={`w3a--relative w3a--p-4 w3a--w-[300px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${
+                  isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"
                 }`}
               >
-                <div className="mb-1 text-xs font-medium text-app-gray-900 dark:text-app-white">{t("modal.popup.phone-header")}</div>
-                <div className="text-xs text-app-gray-400">{t("modal.popup.phone-body")}</div>
+                <div className="w3a--mb-1 w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">
+                  {t("modal.popup.phone-header")}
+                </div>
+                <div className="w3a--text-xs w3a--text-app-gray-400">{t("modal.popup.phone-body")}</div>
               </div>
             </div>
           </div>
@@ -108,7 +108,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
       </div>
       <form className="w3ajs-passwordless-form" onSubmit={(e) => handleFormSubmit(e)}>
         <input
-          className="w-full mb-4 w3a-text-field"
+          className="w3a--w-full w3a--mb-4 w3a-text-field"
           name="passwordless-input"
           required
           placeholder={`${t("modal.social.sms-placeholder-text")} ${placeholder}`}
@@ -123,7 +123,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
 
         {isValidInput === false && <div className="w3a-sms-field--error">{t(invalidInputErrorMessage)}</div>}
 
-        <Button variant={isPrimaryBtn ? "primary" : "tertiary"} disabled={fieldValue === ""} className="w-full" type="submit">
+        <Button variant={isPrimaryBtn ? "primary" : "tertiary"} disabled={fieldValue === ""} className="w3a--w-full" type="submit">
           {t("modal.social.passwordless-cta")}
         </Button>
       </form>
diff --git a/packages/ui/src/components/SocialLogins.tsx b/packages/ui/src/components/SocialLogins.tsx
index b538930b2..8b7884f4a 100644
--- a/packages/ui/src/components/SocialLogins.tsx
+++ b/packages/ui/src/components/SocialLogins.tsx
@@ -90,11 +90,14 @@ export default function SocialLogins(props: SocialLoginProps) {
             return null;
           }
 
-          const loginMethodSpan = classNames("w3a-adapter-item", socialLoginsConfig?.uiConfig?.loginGridCol === 2 ? "col-span-3" : "col-span-2");
+          const loginMethodSpan = classNames(
+            "w3a-adapter-item",
+            socialLoginsConfig?.uiConfig?.loginGridCol === 2 ? "w3a--col-span-3" : "w3a--col-span-2"
+          );
 
           if (isMainOption || order === 1) {
             return (
-              <li className="col-span-6 w3a-adapter-item" key={method} style={{ order }}>
+              <li className="w3a--col-span-6 w3a-adapter-item" key={method} style={{ order }}>
                 <Button
                   variant="secondary"
                   onClick={() =>
@@ -103,11 +106,11 @@ export default function SocialLogins(props: SocialLoginProps) {
                       loginParams: { loginProvider: method, name, login_hint: "" },
                     })
                   }
-                  className="w-full"
+                  className="w3a--w-full"
                   title={name}
                 >
                   {providerIcon}
-                  <p className="ml-2">{t("modal.social.continueCustom", { adapter: name })}</p>
+                  <p className="w3a--ml-2">{t("modal.social.continueCustom", { adapter: name })}</p>
                 </Button>
               </li>
             );
@@ -122,7 +125,7 @@ export default function SocialLogins(props: SocialLoginProps) {
                     loginParams: { loginProvider: method, name, login_hint: "" },
                   })
                 }
-                className="w-full"
+                className="w3a--w-full"
                 title={name}
               >
                 {providerIcon}
@@ -133,7 +136,7 @@ export default function SocialLogins(props: SocialLoginProps) {
       </ul>
       <div className="w3a-social__policy">{t("modal.social.policy")}</div>
       {canShowMore && (
-        <div className="text-right">
+        <div className="w3a--text-right">
           <button type="button" className={adapterButtonClass} onClick={expandClickHandler}>
             <span className="w3ajs-button-expand-text">{adapterExpandText}</span>
           </button>
diff --git a/packages/ui/src/components/WalletConnect.tsx b/packages/ui/src/components/WalletConnect.tsx
index 5274550be..f47f6fd53 100644
--- a/packages/ui/src/components/WalletConnect.tsx
+++ b/packages/ui/src/components/WalletConnect.tsx
@@ -47,7 +47,7 @@ function WalletConnect(props: WalletConnectProps) {
         <div className="w3a-wallet-connect__container-desktop">
           {/* <div className="text-app-gray-500 dark:text-app-gray-400 text-xs">{t("modal.external.walletconnect-subtitle")}</div> */}
           <div
-            className="w3ajs-wallet-connect-qr w3a-wallet-connect-qr rounded-md mb-2"
+            className="w3ajs-wallet-connect-qr w3a-wallet-connect-qr w3a--rounded-md w3a--mb-2"
             tabIndex={0}
             role="button"
             onClick={handleCopy}
@@ -56,7 +56,7 @@ function WalletConnect(props: WalletConnectProps) {
             {isCopied && (
               <div className="tooltip">
                 Copied
-                <div className="absolute border-8 border-b-0 border-r-transparent border-t-app-gray-900 border-l-transparent top-[100%] left-[calc(50%_-_8px)]" />
+                <div className="w3a--absolute w3a--border-8 w3a--border-b-0 w3a--border-r-transparent w3a--border-t-app-gray-900 w3a--border-l-transparent w3a--top-[100%] w3a--left-[calc(50%_-_8px)]" />
               </div>
             )}
             <QRCode
diff --git a/packages/ui/src/css/web3auth.css b/packages/ui/src/css/web3auth.css
index 381bf31f5..e4c7ab0aa 100644
--- a/packages/ui/src/css/web3auth.css
+++ b/packages/ui/src/css/web3auth.css
@@ -4,18 +4,21 @@
 @tailwind utilities;
 
 @layer utilities {
+
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
-    @apply appearance-none;
+    @apply w3a--appearance-none;
   }
 }
 
 /* Keyframes for Shake Animation */
 @keyframes shake {
+
   0%,
   100% {
     transform: translateX(0);
   }
+
   10%,
   30%,
   50%,
@@ -23,6 +26,7 @@
   90% {
     transform: translateX(-5px);
   }
+
   20%,
   40%,
   60%,
@@ -33,18 +37,27 @@
 
 @keyframes tilt {
   0% {
-    transform: scale(0.9) rotate(0deg); /* Start slightly scaled down */
-    opacity: 0; /* Start with opacity 0 */
+    transform: scale(0.9) rotate(0deg);
+    /* Start slightly scaled down */
+    opacity: 0;
+    /* Start with opacity 0 */
   }
+
   30% {
-    transform: scale(1.05) rotate(-5deg); /* Tilt to the left */
-    opacity: 1; /* Fade in */
+    transform: scale(1.05) rotate(-5deg);
+    /* Tilt to the left */
+    opacity: 1;
+    /* Fade in */
   }
+
   60% {
-    transform: scale(1.05) rotate(5deg); /* Tilt to the right */
+    transform: scale(1.05) rotate(5deg);
+    /* Tilt to the right */
   }
+
   100% {
-    transform: scale(1) rotate(0deg); /* Settle at the center */
+    transform: scale(1) rotate(0deg);
+    /* Settle at the center */
   }
 }
 
@@ -54,10 +67,12 @@
     transform: scale(0.8) rotate(-5deg);
     opacity: 0;
   }
+
   60% {
     transform: scale(1.05) rotate(2deg);
     opacity: 1;
   }
+
   100% {
     transform: scale(1) rotate(0deg);
   }
@@ -65,38 +80,58 @@
 
 @keyframes bounce {
   0% {
-    transform: scale(0.9) translateY(-50%); /* Start scaled down and above the center */
-    opacity: 0; /* Start invisible */
+    transform: scale(0.9) translateY(-50%);
+    /* Start scaled down and above the center */
+    opacity: 0;
+    /* Start invisible */
   }
+
   30% {
-    transform: scale(1.05) translateY(0); /* Overshoot to larger scale */
-    opacity: 1; /* Fade in */
+    transform: scale(1.05) translateY(0);
+    /* Overshoot to larger scale */
+    opacity: 1;
+    /* Fade in */
   }
+
   50% {
-    transform: scale(0.95) translateY(-10%); /* Bounce up */
+    transform: scale(0.95) translateY(-10%);
+    /* Bounce up */
   }
+
   70% {
-    transform: scale(1.02) translateY(0); /* Bounce down */
+    transform: scale(1.02) translateY(0);
+    /* Bounce down */
   }
+
   85% {
-    transform: scale(0.98) translateY(-5%); /* Slight bounce up */
+    transform: scale(0.98) translateY(-5%);
+    /* Slight bounce up */
   }
+
   100% {
-    transform: scale(1) translateY(0); /* Settle at the center */
+    transform: scale(1) translateY(0);
+    /* Settle at the center */
   }
 }
 
 @keyframes subtleAppear {
   0% {
-    transform: scale(0.9); /* Start slightly scaled down */
-    opacity: 0; /* Start with opacity 0 */
+    transform: scale(0.9);
+    /* Start slightly scaled down */
+    opacity: 0;
+    /* Start with opacity 0 */
   }
+
   60% {
-    transform: scale(1.02); /* Slightly overshoot */
-    opacity: 1; /* Fade in */
+    transform: scale(1.02);
+    /* Slightly overshoot */
+    opacity: 1;
+    /* Fade in */
   }
+
   100% {
-    transform: scale(1); /* Settle at the final size */
+    transform: scale(1);
+    /* Settle at the final size */
   }
 }
 
@@ -120,6 +155,7 @@
   transform: translateX(100%);
   opacity: 0;
 }
+
 .slide-enter-active {
   transform: translateX(0);
   opacity: 1;
@@ -127,10 +163,12 @@
     transform 300ms ease-in-out,
     opacity 300ms ease-in-out;
 }
+
 .slide-exit {
   transform: translateX(0);
   opacity: 1;
 }
+
 .slide-exit-active {
   transform: translateX(-100%);
   opacity: 0;
@@ -140,129 +178,133 @@
 }
 
 .tooltip {
-  @apply absolute bottom-[58%] left-[50%] -translate-x-1/2 -translate-y-1/2 bg-app-gray-900 py-1 px-2 rounded-lg text-app-white text-sm text-center w-max shadow-md;
+  @apply w3a--absolute w3a--bottom-[58%] w3a--left-[50%] -w3a--translate-x-1/2 -w3a--translate-y-1/2 w3a--bg-app-gray-900 w3a--py-1 w3a--px-2 w3a--rounded-lg w3a--text-app-white w3a--text-sm w3a--text-center w3a--w-max w3a--shadow-md;
 }
 
 /* Modal */
 #w3a-modal {
-  @apply box-border fixed inset-0 flex items-center justify-center p-4 font-body;
+  @apply w3a--box-border w3a--fixed w3a--inset-0 w3a--flex w3a--items-center w3a--justify-center w3a--p-4 w3a--font-body;
 }
 
 #w3a-modal.w3a-modal--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 /* Modal Backdrop (optional, for added depth) */
 #w3a-modal::before {
   content: "";
-  @apply fixed inset-0 bg-app-black opacity-0;
+  @apply w3a--fixed w3a--inset-0 w3a--bg-app-black w3a--opacity-0;
   transition: opacity 200ms ease-in-out;
 }
 
 /* Initial Modal Styles */
 #w3a-modal .w3a-modal__inner {
-  @apply flex flex-col w-full max-w-[392px] max-h-[95%] overflow-x-hidden overflow-y-hidden rounded-[32px] opacity-0 relative bg-app-white dark:bg-app-gray-800 shadow-modal border border-app-gray-100 dark:border-app-gray-800;
-  transform: scale(0.8) rotate(-5deg); /* Initial transform with slight rotation */
+  @apply w3a--flex w3a--flex-col w3a--w-full w3a--max-w-[392px] w3a--max-h-[95%] w3a--overflow-x-hidden w3a--overflow-y-hidden w3a--rounded-[32px] w3a--opacity-0 w3a--relative w3a--bg-app-white dark:w3a--bg-app-gray-800 w3a--shadow-modal w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800;
+  transform: scale(0.8) rotate(-5deg);
+  /* Initial transform with slight rotation */
   transition: all 150ms cubic-bezier(0.92, 0, 1, 0.67);
   transform-origin: center center;
 }
 
 /* Active Modal Styles with Subtle Animation */
 #w3a-modal .w3a-modal__inner.w3a-modal__inner--active {
-  @apply opacity-100;
-  animation: subtleAppear 0.5s ease-out forwards; /* Smooth and subtle animation */
+  @apply w3a--opacity-100;
+  animation: subtleAppear 0.5s ease-out forwards;
+  /* Smooth and subtle animation */
   transform-origin: center center;
-  transition: none; /* Disable default transition since animation takes over */
+  transition: none;
+  /* Disable default transition since animation takes over */
 }
 
 /* Active Backdrop */
 #w3a-modal.w3a-modal--active::before {
-  opacity: 0.5; /* Fade in the backdrop */
+  opacity: 0.5;
+  /* Fade in the backdrop */
 }
 
 #w3a-modal .w3a-modal__header {
-  @apply relative px-8 py-2 pt-0;
+  @apply w3a--relative w3a--px-8 w3a--py-2 w3a--pt-0;
 }
 
 #w3a-modal .w3a-modal__content {
-  @apply px-8 py-4 overflow-y-auto;
+  @apply w3a--px-8 w3a--py-4 w3a--overflow-y-auto;
 }
 
 #w3a-modal .w3a-modal__content_external_wallet {
-  @apply px-8 pt-6 overflow-y-auto;
+  @apply w3a--px-8 w3a--pt-6 w3a--overflow-y-auto;
 }
 
 #w3a-modal .w3a-modal__footer {
-  @apply items-center justify-center px-8 py-4 mt-auto text-center;
+  @apply w3a--items-center w3a--justify-center w3a--px-8 w3a--py-4 w3a--mt-auto w3a--text-center;
 }
 
 /* Header */
 #w3a-modal .w3a-header {
-  @apply flex items-center pt-8;
+  @apply w3a--flex w3a--items-center w3a--pt-8;
 }
 
 #w3a-modal .w3a-header__logo {
-  @apply mb-4;
+  @apply w3a--mb-4;
 }
 
 #w3a-modal .w3a-header__logo img {
-  @apply w-10 h-auto;
+  @apply w3a--w-10 w3a--h-auto;
 }
 
 #w3a-modal .w3a-header__title {
-  @apply text-xl font-bold text-app-gray-900 dark:text-app-white;
+  @apply w3a--text-xl w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white;
 }
 
 #w3a-modal div.w3a-header__subtitle {
-  @apply flex items-center text-sm font-normal text-app-gray-500 dark:text-app-gray-400;
+  @apply w3a--flex w3a--items-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-400;
 }
 
 #w3a-modal div.w3a-header__subtitle img {
-  @apply h-[14px] w-[14px] ml-1;
+  @apply w3a--h-[14px] w3a--w-[14px] w3a--ml-1;
 }
 
 #w3a-modal button.w3a-header__button {
-  @apply w-6 h-6 rounded-full flex items-center justify-center hover:bg-app-gray-100 dark:hover:bg-app-gray-700 absolute p-0 border-0 cursor-pointer top-[1.7rem] right-7 focus:outline-app-gray-50 active:outline-app-gray-50 dark:focus:outline dark:focus:outline-1 dark:active:outline dark:active:outline-1 dark:focus:outline-app-gray-400 dark:active:outline-app-gray-400;
+  @apply w3a--w-6 w3a--h-6 w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center hover:w3a--bg-app-gray-100 dark:hover:w3a--bg-app-gray-700 w3a--absolute w3a--p-0 w3a--border-0 w3a--cursor-pointer w3a--top-[1.7rem] w3a--right-7 focus:w3a--outline-app-gray-50 active:w3a--outline-app-gray-50 dark:focus:w3a--outline dark:focus:w3a--outline-1 dark:active:w3a--outline dark:active:w3a--outline-1 dark:focus:w3a--outline-app-gray-400 dark:active:w3a--outline-app-gray-400;
 }
 
 #w3a-modal button.w3a-header__button_wallet {
-  @apply w-6 h-6 rounded-full flex items-center justify-center hover:bg-app-gray-100 dark:hover:bg-app-gray-700 absolute p-0 border-0 cursor-pointer top-[1.6rem] right-7 focus:outline-app-gray-50 active:outline-app-gray-50 dark:focus:outline dark:focus:outline-1 dark:active:outline dark:active:outline-1 dark:focus:outline-app-gray-400 dark:active:outline-app-gray-400;
+  @apply w3a--w-6 w3a--h-6 w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center hover:w3a--bg-app-gray-100 dark:hover:w3a--bg-app-gray-700 w3a--absolute w3a--p-0 w3a--border-0 w3a--cursor-pointer w3a--top-[1.6rem] w3a--right-7 focus:w3a--outline-app-gray-50 active:w3a--outline-app-gray-50 dark:focus:w3a--outline dark:focus:w3a--outline-1 dark:active:w3a--outline dark:active:w3a--outline-1 dark:focus:w3a--outline-app-gray-400 dark:active:w3a--outline-app-gray-400;
 }
 
 /* BODY */
 #w3a-modal div.w3a-social__policy {
-  @apply mt-4 text-xs font-medium text-left text-app-gray-500 dark:text-app-gray-400;
+  @apply w3a--mt-4 w3a--text-xs w3a--font-medium w3a--text-left w3a--text-app-gray-500 dark:w3a--text-app-gray-400;
 }
 
 #w3a-modal .w3a-group {
-  @apply mb-4;
+  @apply w3a--mb-4;
 }
 
 #w3a-modal .w3a-group-loader-height {
-  @apply h-[200px] flex justify-center items-center;
+  @apply w3a--h-[200px] w3a--flex w3a--justify-center w3a--items-center;
 }
 
 #w3a-modal .w3a-group:last-child {
-  @apply mb-0;
+  @apply w3a--mb-0;
 }
 
 #w3a-modal .w3ajs-passwordless div.w3a-group__title {
-  @apply flex items-center;
+  @apply w3a--flex w3a--items-center;
 }
 
 #w3a-modal .w3ajs-passwordless div.w3a-group__title img {
-  @apply h-[14px] w-[14px] ml-1;
+  @apply w3a--h-[14px] w3a--w-[14px] w3a--ml-1;
 }
 
 #w3a-modal .w3a-group.w3a-group--hidden,
 #w3a-modal .w3a-group.w3a-group--social-hidden,
 #w3a-modal .w3a-group.w3a-group--email-hidden,
 #w3a-modal .w3a-group.w3a-group--ext-wallet-hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal div.w3a-group__title {
-  @apply mb-2 text-sm font-medium text-app-gray-900 dark:text-app-white;
+  @apply w3a--mb-2 w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white;
 }
 
 /* Adapter List */
@@ -273,7 +315,7 @@
 }
 
 #w3a-modal ul.w3a-adapter-list {
-  @apply grid grid-cols-6 overflow-y-auto gap-x-2 gap-y-2;
+  @apply w3a--grid w3a--grid-cols-6 w3a--overflow-y-auto w3a--gap-[8px];
   max-height: 500px;
   padding: 1px;
   transition: max-height 0.35s;
@@ -289,102 +331,102 @@
 }
 
 #w3a-modal ul.w3a-adapter-list.w3a-adapter-list--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal li.w3a-adapter-item {
-  @apply list-none;
+  @apply w3a--list-none;
 }
 
 #w3a-modal li.w3a-adapter-item--full {
-  @apply col-span-6;
+  @apply w3a--col-span-6;
 }
 
 #w3a-modal .w3a-adapter-item--hide {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal .w3a-external-toggle {
-  @apply block;
+  @apply w3a--block;
 }
 
 #w3a-modal .w3a-external-toggle.w3a-external-toggle--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal .w3a-external-container {
-  @apply block mb-0;
+  @apply w3a--block w3a--mb-0;
 }
 
 #w3a-modal .w3a-external-container.w3a-external-container--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal .w3a-external-group {
-  @apply flex flex-wrap gap-3 mb-4;
+  @apply w3a--flex w3a--flex-wrap w3a--gap-3 w3a--mb-4;
 }
 
 #w3a-modal .w3a-external-group__left {
-  @apply flex-grow;
+  @apply w3a--flex-grow;
 }
 
 #w3a-modal button.w3a-external-back {
-  @apply w-6 h-6 rounded-full flex items-center justify-center hover:bg-app-gray-100 dark:hover:bg-app-gray-700 p-0 border-0 cursor-pointer bg-none text-app-gray-500 hover:text-app-gray-900 dark:text-app-gray-400 dark:hover:text-app-white focus:outline-app-gray-50 active:outline-app-gray-50 dark:focus:outline dark:focus:outline-1 dark:active:outline dark:active:outline-1 dark:focus:outline-app-gray-400 dark:active:outline-app-gray-400;
+  @apply w3a--w-6 w3a--h-6 w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center hover:w3a--bg-app-gray-100 dark:hover:w3a--bg-app-gray-700 w3a--p-0 w3a--border-0 w3a--cursor-pointer w3a--bg-none w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-400 dark:hover:w3a--text-app-white focus:w3a--outline-app-gray-50 active:w3a--outline-app-gray-50 dark:focus:w3a--outline dark:focus:w3a--outline-1 dark:active:w3a--outline dark:active:w3a--outline-1 dark:focus:w3a--outline-app-gray-400 dark:active:w3a--outline-app-gray-400;
 }
 
 #w3a-modal .w3a-external-back .w3a-group__title {
-  @apply text-app-gray-400 mb-0 ml-[5px];
+  @apply w3a--text-app-gray-400 w3a--mb-0 w3a--ml-[5px];
 }
 
 #w3a-modal .w3a-external-loader {
-  @apply flex justify-center;
+  @apply w3a--flex w3a--justify-center;
 }
 
 #w3a-modal .w3a-wallet-connect {
-  @apply block mb-2.5 text-center;
+  @apply w3a--block w3a--mb-2.5 w3a--text-center;
 }
 
 #w3a-modal .w3a-wallet-connect.w3a-wallet-connect--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal .w3a-wallet-connect__container {
-  @apply bg-app-white dark:bg-app-gray-800 rounded-[10px] text-app-gray-500 dark:text-app-gray-400 text-xxs w-fit mx-auto min-w-[250px] py-2.5;
+  @apply w3a--bg-app-white dark:w3a--bg-app-gray-800 w3a--rounded-[10px] w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-xxs w3a--w-fit w3a--mx-auto w3a--min-w-[250px] w3a--py-2.5;
 }
 
 #w3a-modal .w3a-wallet-connect__container-desktop,
 #w3a-modal .w3a-wallet-connect__container-android {
-  @apply m-auto;
+  @apply w3a--m-auto;
 }
 
 #w3a-modal .w3a-wallet-connect__container-btn-group {
-  @apply flex gap-[18px];
+  @apply w3a--flex w3a--gap-[18px];
 }
 
 #w3a-modal .w3a-wallet-connect__container-ios {
-  @apply flex gap-x-5 gap-y-[30px] p-0 pb-7 box-border flex-wrap;
+  @apply w3a--flex w3a--gap-x-5 w3a--gap-y-[30px] w3a--p-0 w3a--pb-7 w3a--box-border w3a--flex-wrap;
 }
 
-#w3a-modal .w3a-wallet-connect-qr > canvas,
-#w3a-modal .w3a-wallet-connect-qr > svg {
-  @apply m-auto;
+#w3a-modal .w3a-wallet-connect-qr>canvas,
+#w3a-modal .w3a-wallet-connect-qr>svg {
+  @apply w3a--m-auto;
 }
 
 #w3a-modal .w3a-wallet-connect__container-android a {
-  @apply no-underline;
+  @apply w3a--no-underline;
 }
 
-#w3a-modal .w3a-wallet-connect__logo > img {
-  @apply mt-0 mx-auto mb-4 w-[115px];
+#w3a-modal .w3a-wallet-connect__logo>img {
+  @apply w3a--mt-0 w3a--mx-auto w3a--mb-4 w3a--w-[115px];
 }
 
 /* Footer Components */
 #w3a-modal .w3a-footer {
-  @apply flex items-center justify-center text-xs text-app-gray-400;
+  @apply w3a--flex w3a--items-center w3a--justify-center w3a--text-xs w3a--text-app-gray-400;
 }
 
 #w3a-modal .w3a-footer__links a {
-  @apply focus:outline-app-gray-50 active:outline-app-gray-50 dark:focus:outline dark:focus:outline-1 dark:active:outline dark:active:outline-1 dark:focus:outline-app-gray-400 dark:active:outline-app-gray-400;
+  @apply focus:w3a--outline-app-gray-50 active:w3a--outline-app-gray-50 dark:focus:w3a--outline dark:focus:w3a--outline-1 dark:active:w3a--outline dark:active:w3a--outline-1 dark:focus:w3a--outline-app-gray-400 dark:active:w3a--outline-app-gray-400;
 }
 
 #w3a-modal .w3a-footer__links span {
@@ -407,28 +449,28 @@
 
 /* Text Field */
 #w3a-modal .w3a-text-field {
-  @apply py-3 px-6 mt-2 text-sm outline-0 ring-0 border rounded-full placeholder-app-gray-500 dark:placeholder-app-gray-400 bg-app-gray-50 border-app-gray-300 text-app-gray-900 dark:bg-app-gray-600 dark:border-app-gray-500 dark:text-app-white disabled:placeholder-app-gray-400 dark:disabled:placeholder-app-gray-500 disabled:cursor-not-allowed focus:ring-1 focus:ring-app-primary-600 dark:focus:ring-app-primary-500 focus:border-transparent dark:focus:border-transparent;
+  @apply w3a--py-3 w3a--px-6 w3a--mt-2 w3a--text-sm w3a--outline-0 w3a--ring-0 w3a--border w3a--rounded-full w3a--placeholder-app-gray-500 dark:w3a--placeholder-app-gray-400 w3a--bg-app-gray-50 w3a--border-app-gray-300 w3a--text-app-gray-900 dark:w3a--bg-app-gray-600 dark:w3a--border-app-gray-500 dark:w3a--text-app-white disabled:w3a--placeholder-app-gray-400 dark:disabled:w3a--placeholder-app-gray-500 disabled:w3a--cursor-not-allowed focus:w3a--ring-1 focus:w3a--ring-app-primary-600 dark:focus:w3a--ring-app-primary-500 focus:w3a--border-transparent dark:focus:w3a--border-transparent;
 
   line-height: 1.25em;
 }
 
 #w3a-modal .w3a-text-field--country-code {
-  @apply flex justify-between w-full px-4;
+  @apply w3a--flex w3a--justify-between w3a--w-full w3a--px-4;
 }
 
 #w3a-modal .w3a-text-field--number {
-  @apply appearance-none;
+  @apply w3a--appearance-none;
 }
 
 #w3a-modal .w3a-sms-field--error {
-  @apply text-app-red-500 text-sm -mt-2 mb-2 ml-1.5;
+  @apply w3a--text-app-red-500 w3a--text-sm -w3a--mt-2 w3a--mb-2 w3a--ml-1.5;
 }
 
 #w3a-container #w3a-modal input.w3a-text-field:-webkit-autofill,
 #w3a-container #w3a-modal input.w3a-text-field:-webkit-autofill:hover,
 #w3a-container #w3a-modal input.w3a-text-field:-webkit-autofill:focus,
 #w3a-container #w3a-modal input.w3a-text-field:-webkit-autofill:active {
-  @apply shadow-autofill;
+  @apply w3a--shadow-autofill;
   -webkit-text-fill-color: #111928 !important;
 }
 
@@ -436,144 +478,142 @@
 #w3a-container.dark #w3a-modal input.w3a-text-field:-webkit-autofill:hover,
 #w3a-container.dark #w3a-modal input.w3a-text-field:-webkit-autofill:focus,
 #w3a-container.dark #w3a-modal input.w3a-text-field:-webkit-autofill:active {
-  @apply shadow-autofillDark;
+  @apply w3a--shadow-autofillDark;
   -webkit-text-fill-color: #fff !important;
 }
 
 /* Buttons */
 #w3a-modal .w3a-button {
-  @apply rounded-full py-3 px-6 text-base font-medium
+  @apply w3a--rounded-full w3a--py-3 w3a--px-6 w3a--text-base w3a--font-medium
   /* background */
-  bg-app-gray-100 hover:bg-app-gray-300 focus:bg-app-gray-100 disabled:bg-app-gray-50 dark:bg-app-gray-900 dark:focus:bg-app-gray-900 dark:hover:bg-app-gray-800 dark:disabled:bg-[#3B4555]
+  w3a--bg-app-gray-100 hover:w3a--bg-app-gray-300 focus:w3a--bg-app-gray-100 disabled:w3a--bg-app-gray-50 dark:w3a--bg-app-gray-900 dark:focus:w3a--bg-app-gray-900 dark:hover:w3a--bg-app-gray-800 dark:disabled:w3a--bg-[#3B4555]
   /* text */
-  text-app-gray-900 focus:text-app-gray-700 disabled:text-app-gray-300 dark:text-app-white dark:focus:text-app-white dark:disabled:text-app-gray-500
+  w3a--text-app-gray-900 focus:w3a--text-app-gray-700 disabled:w3a--text-app-gray-300 dark:w3a--text-app-white dark:focus:w3a--text-app-white dark:disabled:w3a--text-app-gray-500
   /* outline */
-  focus:outline-app-gray-50 active:outline-app-gray-50 dark:focus:outline dark:focus:outline-1 dark:active:outline dark:active:outline-1 dark:focus:outline-app-gray-400 dark:active:outline-app-gray-400;
+  focus:w3a--outline-app-gray-50 active:w3a--outline-app-gray-50 dark:focus:w3a--outline dark:focus:w3a--outline-1 dark:active:w3a--outline dark:active:w3a--outline-1 dark:focus:w3a--outline-app-gray-400 dark:active:w3a--outline-app-gray-400;
 }
 
 #w3a-modal .w3a-button--primary {
-  @apply bg-app-primary-600 hover:bg-app-primary-800 focus:bg-app-primary-600 dark:bg-app-primary-500 dark:hover:bg-app-primary-800 dark:focus:bg-app-primary-500 disabled:bg-app-primary-200 dark:disabled:bg-app-primary-950 text-app-white focus:text-app-white disabled:text-[#EBF5FF] dark:disabled:text-app-gray-500 focus:outline-app-primary-300 active:outline-app-primary-300;
+  @apply w3a--bg-app-primary-600 hover:w3a--bg-app-primary-800 focus:w3a--bg-app-primary-600 dark:w3a--bg-app-primary-500 dark:hover:w3a--bg-app-primary-800 dark:focus:w3a--bg-app-primary-500 disabled:w3a--bg-app-primary-200 dark:disabled:w3a--bg-app-primary-950 w3a--text-app-white focus:w3a--text-app-white disabled:w3a--text-[#EBF5FF] dark:disabled:w3a--text-app-gray-500 focus:w3a--outline-app-primary-300 active:w3a--outline-app-primary-300;
 }
 
 #w3a-modal .w3a-button--login {
-  @apply inline-flex items-center justify-center h-11;
+  @apply w3a--inline-flex w3a--items-center w3a--justify-center w3a--h-11;
 }
 
-#w3a-modal button.w3a-button--login:hover > .hover-icon {
+#w3a-modal button.w3a-button--login:hover>.hover-icon {
   display: block;
   transition: display 150ms;
   transition-timing-function: cubic-bezier(0, 0.54, 0.63, 0.99);
 }
 
-#w3a-modal button.w3a-button--login:hover > .image-icon {
+#w3a-modal button.w3a-button--login:hover>.image-icon {
   display: none;
   transition: display 150ms;
   transition-timing-function: cubic-bezier(0, 0.54, 0.63, 0.99);
 }
 
 #w3a-modal button.w3a-button-expand {
-  @apply w-auto h-auto mt-4 ml-auto text-sm text-app-primary-600 hover:text-app-primary-800 dark:text-app-primary-500 dark:hover:text-app-primary-400 focus-visible:outline-1 dark:focus-visible:outline-1 focus-visible:outline dark:focus-visible:outline focus-visible:outline-app-gray-50 dark:focus-visible:outline-app-gray-400;
+  @apply w3a--w-auto w3a--h-auto w3a--mt-4 w3a--ml-auto w3a--text-sm w3a--text-app-primary-600 hover:w3a--text-app-primary-800 dark:w3a--text-app-primary-500 dark:hover:w3a--text-app-primary-400 focus-visible:w3a--outline-1 dark:focus-visible:w3a--outline-1 focus-visible:w3a--outline dark:focus-visible:w3a--outline focus-visible:w3a--outline-app-gray-50 dark:focus-visible:w3a--outline-app-gray-400;
 }
 
 /* SMS */
 #w3a-modal .w3a-sms-field__container {
-  @apply grid grid-cols-12 gap-2;
+  @apply w3a--grid w3a--grid-cols-12 w3a--gap-2;
 }
 
 #w3a-modal .w3a-sms-field__code-selected {
-  @apply flex;
+  @apply w3a--flex;
 }
 
 #w3a-modal .w3a-sms-field__code-dropdown {
-  @apply absolute z-10 overflow-y-scroll bg-app-white divide-y divide-app-gray-100 rounded-lg shadow-modal dark:bg-app-gray-700 w-[120px] h-[185px];
+  @apply w3a--absolute w3a--z-10 w3a--overflow-y-scroll w3a--bg-app-white w3a--divide-y w3a--divide-app-gray-100 w3a--rounded-lg w3a--shadow-modal dark:w3a--bg-app-gray-700 w3a--w-[120px] w3a--h-[185px];
   transform: translate(0, -230px);
 }
 
 #w3a-modal .w3a-sms-field__code-dropdown--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal .w3a-sms-field__code-dropdown ul {
-  @apply py-2 text-sm text-app-gray-700 dark:text-app-gray-200;
+  @apply w3a--py-2 w3a--text-sm w3a--text-app-gray-700 dark:w3a--text-app-gray-200;
 }
 
 #w3a-modal .w3a-sms-field__code-dropdown li {
-  @apply p-0 cursor-pointer hover:bg-app-gray-100 dark:hover:bg-app-gray-900 dark:hover:text-app-white;
+  @apply w3a--p-0 w3a--cursor-pointer hover:w3a--bg-app-gray-100 dark:hover:w3a--bg-app-gray-900 dark:hover:w3a--text-app-white;
 }
 
 #w3a-modal .w3a-sms-field__code-dropdown li button {
-  @apply w-full h-full px-4 py-2 text-left;
+  @apply w3a--w-full w3a--h-full w3a--px-4 w3a--py-2 w3a--text-left;
 }
 
 #w3a-modal .w3a-sms-field__code-dropdown li button div {
-  @apply flex items-center;
+  @apply w3a--flex w3a--items-center;
 }
 
 #w3a-modal .w3a-sms-field__code {
-  @apply col-span-5;
+  @apply w3a--col-span-5;
 }
 
 #w3a-modal .w3a-sms-field__number {
-  @apply col-span-7;
+  @apply w3a--col-span-7;
 }
 
 /* SPINNER */
 /* Loader */
 #w3a-modal .w3a-modal__loader {
-  @apply absolute inset-0 z-10 flex justify-center bg-app-white dark:bg-app-gray-800;
+  @apply w3a--absolute w3a--inset-0 w3a--z-10 w3a--flex w3a--justify-center w3a--bg-app-white dark:w3a--bg-app-gray-800;
 }
 
 #w3a-modal .w3a-modal__loader.w3a-modal__loader--hidden {
-  @apply hidden;
+  @apply w3a--hidden;
 }
 
 #w3a-modal .w3a-modal__loader-content {
-  @apply text-center relative flex flex-col;
+  @apply w3a--text-center w3a--relative w3a--flex w3a--flex-col;
 }
 
 #w3a-modal .w3a-modal__loader-info {
-  @apply flex flex-grow flex-col justify-center items-center py-0 px-[30px];
+  @apply w3a--flex w3a--flex-grow w3a--flex-col w3a--justify-center w3a--items-center w3a--py-0 w3a--px-[30px];
 }
 
 #w3a-modal .w3a-spinner-label {
-  @apply text-base font-medium text-app-primary-600 dark:text-app-primary-500 mt-[10px];
+  @apply w3a--text-base w3a--font-medium w3a--text-app-primary-600 dark:w3a--text-app-primary-500 w3a--mt-[10px];
 }
 
 #w3a-modal .w3a-spinner-message {
-  @apply mt-[10px] text-base text-app-gray-500 dark:text-app-white first-letter:capitalize;
+  @apply w3a--mt-[10px] w3a--text-base w3a--text-app-gray-500 dark:w3a--text-app-white first-letter:w3a--capitalize;
 }
 
 #w3a-modal .w3a-spinner-message.w3a-spinner-message--error {
-  @apply text-app-red-500;
+  @apply w3a--text-app-red-500;
 }
 
 #w3a-modal .w3a-spinner-power {
-  @apply mt-auto text-xs text-[#b7b8bd];
+  @apply w3a--mt-auto w3a--text-xs w3a--text-[#b7b8bd];
 }
 
-#w3a-modal .w3a-spinner-power > img {
-  @apply inline w-auto h-8;
+#w3a-modal .w3a-spinner-power>img {
+  @apply w3a--inline w3a--w-auto w3a--h-8;
 }
 
 #w3a-modal .w3a-spinner {
-  @apply relative inline-flex h-[60px] w-[60px];
+  @apply w3a--relative w3a--inline-flex w3a--h-[60px] w3a--w-[60px];
 }
 
 #w3a-modal .w3a-spinner__spinner {
-  @apply absolute animate-spin;
+  @apply w3a--absolute w3a--animate-spin;
   display: inline-block;
   height: 100%;
   width: 100%;
   border-radius: 100vw;
   background-size: 100% 100%;
   background-position: 0px 0px;
-  background-image: conic-gradient(
-    from 0deg at 50% 50%,
-    var(--app-primary-600) 0%,
-    rgb(229, 231, 235, 0.8) 90deg,
-    rgb(229, 231, 235, 0.8) 270deg,
-    var(--app-primary-600) 360deg
-  );
+  background-image: conic-gradient(from 0deg at 50% 50%,
+      var(--app-primary-600) 0%,
+      rgb(229, 231, 235, 0.8) 90deg,
+      rgb(229, 231, 235, 0.8) 270deg,
+      var(--app-primary-600) 360deg);
 
   -webkit-mask:
     radial-gradient(farthest-side, #000 98%, #0000) center/85% 85% no-repeat,
@@ -587,38 +627,36 @@
 }
 
 .dark #w3a-modal .w3a-spinner__spinner {
-  background-image: conic-gradient(
-    from 0deg at 50% 50%,
-    var(--app-primary-500) 0%,
-    rgb(229, 231, 235, 0.2) 90deg,
-    rgb(229, 231, 235, 0.2) 270deg,
-    var(--app-primary-500) 360deg
-  );
+  background-image: conic-gradient(from 0deg at 50% 50%,
+      var(--app-primary-500) 0%,
+      rgb(229, 231, 235, 0.2) 90deg,
+      rgb(229, 231, 235, 0.2) 270deg,
+      var(--app-primary-500) 360deg);
 }
 
 /* Loader Bridge */
 #w3a-modal .w3a-modal__loader-bridge {
-  @apply flex mb-[14px] items-center justify-center;
+  @apply w3a--flex w3a--mb-[14px] w3a--items-center w3a--justify-center;
 }
 
 #w3a-modal .w3a-modal__loader-bridge-message {
-  @apply text-app-gray-500 dark:text-app-white first-letter:capitalize;
+  @apply w3a--text-app-gray-500 dark:w3a--text-app-white first-letter:w3a--capitalize;
 }
 
 #w3a-modal .w3a-modal__loader-app-logo {
-  @apply flex p-2;
+  @apply w3a--flex w3a--p-2;
 }
 
 #w3a-modal .w3a-modal__loader-app-logo img {
-  @apply max-h-12 max-w-12 w-12 h-12 object-contain;
+  @apply w3a--max-h-12 w3a--max-w-12 w3a--w-12 w3a--h-12 w3a--object-contain;
 }
 
 #w3a-modal .w3a-modal__loader-social-logo {
-  @apply w-14 h-14 flex rounded-full items-center justify-center p-1;
+  @apply w3a--w-14 w3a--h-14 w3a--flex w3a--rounded-full w3a--items-center w3a--justify-center w3a--p-1;
 }
 
 #w3a-modal .w3a-modal__loader-social-logo img {
-  @apply max-h-10 max-w-10 w-10 h-10 object-contain;
+  @apply w3a--max-h-10 w3a--max-w-10 w3a--w-10 w3a--h-10 w3a--object-contain;
 }
 
 #w3a-modal .w3a-modal__loader-adapter img {
@@ -646,7 +684,7 @@
   border-radius: 50%;
   background: #808080;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
-  @apply animate-pulse bg-app-gray-200 dark:bg-app-gray-700;
+  @apply w3a--animate-pulse w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700;
 }
 
 .w3a-modal__connector-beat div:nth-child(1) {
@@ -675,19 +713,19 @@
 }
 
 .wallet-btn {
-  @apply !bg-app-gray-100 hover:!bg-app-gray-200 dark:!bg-app-gray-700 dark:hover:bg-app-gray-800;
+  @apply w3a--bg-app-gray-100 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 dark:hover:w3a--bg-app-gray-800;
 }
 
 .wallet-link-btn {
-  @apply dark:!bg-app-gray-700 dark:hover:!bg-app-gray-700 !text-app-gray-900 dark:!text-app-white;
+  @apply dark:w3a--bg-app-gray-700 dark:hover:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white;
 }
 
 .wallet-link-btn img {
-  @apply w-7 h-7;
+  @apply w3a--w-7 w3a--h-7;
 }
 
 .wallet-adapter-container {
-  @apply h-[551px];
+  @apply w3a--h-[551px];
 }
 
 @keyframes beat1 {
@@ -798,4 +836,4 @@
   100% {
     transform: scale(1);
   }
-}
+}
\ No newline at end of file
diff --git a/packages/ui/src/loginModal.tsx b/packages/ui/src/loginModal.tsx
index 89384cbcc..07c1fc76f 100644
--- a/packages/ui/src/loginModal.tsx
+++ b/packages/ui/src/loginModal.tsx
@@ -193,9 +193,9 @@ export class LoginModal extends SafeEventEmitter {
       });
       const container = createWrapper(this.uiConfig.modalZIndex);
       if (darkState.isDark) {
-        container.classList.add("dark");
+        container.classList.add("w3a--dark");
       } else {
-        container.classList.remove("dark");
+        container.classList.remove("w3a--dark");
       }
 
       const root = createRoot(container);
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 290eb6267..63dd8dc30 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -3,6 +3,7 @@ const web3AuthBasePreset = require("@toruslabs/vue-components/web3auth-base-pres
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [web3AuthBasePreset],
+  prefix: "w3a--",
   darkMode: "class",
   content: ["./src/**/*.{html,js,ts,tsx,jsx}"],
   theme: {