diff --git a/space/components/account/auth-forms/email.tsx b/space/components/account/auth-forms/email.tsx
index 946e51916..86e3507b8 100644
--- a/space/components/account/auth-forms/email.tsx
+++ b/space/components/account/auth-forms/email.tsx
@@ -66,9 +66,10 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             autoFocus
           />
           {email.length > 0 && (
-            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
-              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={() => setEmail("")} />
-            </div>
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={() => setEmail("")}
+            />
           )}
         </div>
         {emailError?.email && !isFocused && (
diff --git a/space/components/account/auth-forms/password.tsx b/space/components/account/auth-forms/password.tsx
index 361bd4fc3..5a2f0664e 100644
--- a/space/components/account/auth-forms/password.tsx
+++ b/space/components/account/auth-forms/password.tsx
@@ -117,9 +117,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             disabled
           />
           {passwordFormData.email.length > 0 && (
-            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
-              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={handleEmailClear} />
-            </div>
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
           )}
         </div>
       </div>
diff --git a/space/components/account/auth-forms/unique-code.tsx b/space/components/account/auth-forms/unique-code.tsx
index e3c82bce6..10c7b4f00 100644
--- a/space/components/account/auth-forms/unique-code.tsx
+++ b/space/components/account/auth-forms/unique-code.tsx
@@ -101,9 +101,10 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
-            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
-              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={handleEmailClear} />
-            </div>
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
           )}
         </div>
       </div>
diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index f25bf7512..997e8aa27 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -66,9 +66,10 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             autoFocus
           />
           {email.length > 0 && (
-            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
-              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={() => setEmail("")} />
-            </div>
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={() => setEmail("")}
+            />
           )}
         </div>
         {emailError?.email && !isFocused && (
diff --git a/web/core/components/account/auth-forms/password.tsx b/web/core/components/account/auth-forms/password.tsx
index 6437688e0..7822d9aa4 100644
--- a/web/core/components/account/auth-forms/password.tsx
+++ b/web/core/components/account/auth-forms/password.tsx
@@ -140,9 +140,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             disabled
           />
           {passwordFormData.email.length > 0 && (
-            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
-              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={handleEmailClear} />
-            </div>
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
           )}
         </div>
       </div>
diff --git a/web/core/components/account/auth-forms/unique-code.tsx b/web/core/components/account/auth-forms/unique-code.tsx
index 3c121f3bb..2d17c0ade 100644
--- a/web/core/components/account/auth-forms/unique-code.tsx
+++ b/web/core/components/account/auth-forms/unique-code.tsx
@@ -100,9 +100,10 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
-            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
-              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={handleEmailClear} />
-            </div>
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
           )}
         </div>
       </div>