diff --git a/app/components/LoginRequiredDialog.tsx b/app/components/LoginRequiredDialog.tsx
index 376bb32..d44a717 100644
--- a/app/components/LoginRequiredDialog.tsx
+++ b/app/components/LoginRequiredDialog.tsx
@@ -166,7 +166,7 @@ export function LoginRequiredDialog({
               </div>
               <div className="w-full flex justify-center">
                 <InputOTP
-                  maxLength={4}
+                  maxLength={6}
                   onComplete={(finalValue) => {
                     const convertedValue = convertPersianToEnglish(finalValue);
                     setOtpValue(convertedValue);
@@ -177,17 +177,19 @@ export function LoginRequiredDialog({
                     setOtpValue(convertedValue);
                   }}
                 >
-                  <InputOTPGroup dir="ltr" className="gap-4">
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
+                  <InputOTPGroup dir="ltr" className="gap-1.5 sm:gap-3">
+                    <InputOTPSlot index={0} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={1} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={2} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={3} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={4} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={5} className="!w-9 sm:!w-12" />
                   </InputOTPGroup>
                 </InputOTP>
               </div>
               <div className="gap-3 w-full flex flex-col items-center">
                 <Button
-                  disabled={verifyOtpMutation.isPending || !(otpValue.length === 4)}
+                  disabled={verifyOtpMutation.isPending || !(otpValue.length === 6)}
                   className="w-full"
                   size="xl"
                   variant="dark"