diff --git a/lib/widgets/otp_widget.dart b/lib/widgets/otp_widget.dart
index b69a7041..d211d5d1 100644
--- a/lib/widgets/otp_widget.dart
+++ b/lib/widgets/otp_widget.dart
@@ -165,7 +165,14 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
     }
   }
 
-  double get _width {
+  // Updated: Accept context to access MediaQuery
+  double _width(BuildContext context) {
+    // For tablets, use full screen width
+    if (MediaQuery.of(context).size.shortestSide >= 600) {
+      return MediaQuery.of(context).size.width;
+    }
+
+    // For phones, use original fixed width
     var width = 0.0;
     for (var i = 0; i < widget.maxLength; i++) {
       width += widget.pinBoxWidth;
@@ -198,7 +205,6 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
     return Stack(
       fit: StackFit.loose,
       children: <Widget>[
-        _otpTextInput(),
         _touchPinBoxRow(),
       ],
     );
@@ -223,12 +229,13 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
     );
   }
 
-  Widget _otpTextInput() {
+  // Updated: Accept context for width calculation
+  Widget _otpTextInput(BuildContext context) {
     var transparentBorder = OutlineInputBorder(
       borderSide: BorderSide(color: Colors.transparent, width: 0),
     );
     return Container(
-      width: _width,
+      width: _width(context), // Use dynamic width
       height: widget.pinBoxHeight,
       child: TextField(
         autofocus: !kIsWeb ? widget.autoFocus : false,
@@ -289,40 +296,41 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
 
   Widget _pinBoxRow(BuildContext context) {
     _calculateStrList();
+
+    // Determine if it's a tablet
+    bool isTablet = MediaQuery.of(context).size.shortestSide >= 600;
+    double boxWidth = widget.pinBoxWidth;
+
+    // Calculate dynamic width for tablets
+    if (isTablet) {
+      double screenWidth = MediaQuery.of(context).size.width;
+      double totalMargin = (widget.maxLength - 1) *
+          (widget.pinBoxOuterPadding.left + widget.pinBoxOuterPadding.right);
+      double availableWidth = screenWidth - totalMargin;
+      boxWidth = (availableWidth / widget.maxLength).clamp(100.0, 180.0); // Reasonable limits
+    }
+
     List<Widget> pinCodes = List.generate(widget.maxLength, (int i) {
-      return _buildPinCode(i, context);
+      return _buildPinCode(i, context, boxWidth); // Pass dynamic width
     });
+
     return SingleChildScrollView(
-      // Add this
-      scrollDirection: Axis.horizontal, // For horizontal scrolling
+      scrollDirection: Axis.horizontal,
       child: Row(
         children: pinCodes,
-        mainAxisSize: MainAxisSize.min, // Important when inside a scroll view
-        mainAxisAlignment: MainAxisAlignment.start, // Or another suitable alignment
+        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
       ),
     );
   }
 
-  //
-  // Widget _pinBoxRow(BuildContext context) {
-  //   _calculateStrList();
-  //   List<Widget> pinCodes = List.generate(widget.maxLength, (int i) {
-  //     return _buildPinCode(i, context);
-  //   });
-  //   return Row(
-  //     children: pinCodes,
-  //     mainAxisSize: MainAxisSize.min,
-  //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
-  //   );
-  // }
-
-  Widget _buildPinCode(int i, BuildContext context) {
+  // Updated: Accept dynamic width
+  Widget _buildPinCode(int i, BuildContext context, double boxWidth) {
     final bool isFilled = i < text.length && strList[i].isNotEmpty; // Check both conditions
     final bool isCurrent = i == currentIndex;
     final bool isFocused = hasFocus && isCurrent;
 
-    // Colors based on state
     Color bgColor = Colors.white;
     Color borderColor = Colors.white;
     Color textColor = Colors.black;
@@ -349,9 +357,9 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
       decoration: BoxDecoration(
         color: bgColor,
         border: Border.all(color: borderColor, width: 1),
-        borderRadius: BorderRadius.circular(16), // Rounded edges
+        borderRadius: BorderRadius.circular(16),
       ),
-      width: widget.pinBoxWidth,
+      width: boxWidth, // Use dynamic width
       height: widget.pinBoxHeight,
       child: _animatedTextBox(
         strList[i],
@@ -361,82 +369,8 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
     );
   }
 
-  // Widget _buildPinCode(int i, BuildContext context) {
-  //   Color borderColor;
-  //   Color pinBoxColor = widget.pinBoxColor;
-  //
-  //   if (widget.hasError) {
-  //     borderColor = widget.errorBorderColor;
-  //   } else if (i < text.length) {
-  //     borderColor = widget.textBorderColor;
-  //   } else {
-  //     borderColor = widget.defaultBorderColor;
-  //     pinBoxColor = widget.pinBoxColor;
-  //   }
-  //
-  //   EdgeInsets insets;
-  //   if (i == 0) {
-  //     insets = EdgeInsets.only(
-  //       left: 0,
-  //       top: widget.pinBoxOuterPadding.top,
-  //       right: widget.pinBoxOuterPadding.right,
-  //       bottom: widget.pinBoxOuterPadding.bottom,
-  //     );
-  //   } else if (i == strList.length - 1) {
-  //     insets = EdgeInsets.only(
-  //       left: widget.pinBoxOuterPadding.left,
-  //       top: widget.pinBoxOuterPadding.top,
-  //       right: 0,
-  //       bottom: widget.pinBoxOuterPadding.bottom,
-  //     );
-  //   } else {
-  //     insets = widget.pinBoxOuterPadding;
-  //   }
-  //   return Container(
-  //     key: ValueKey<String>("container$i"),
-  //     alignment: Alignment.center,
-  //     // padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 1.0),
-  //     margin: insets,
-  //     child: _animatedTextBox(strList[i], i),
-  //     decoration: BoxDecoration(
-  //       border: Border.all(
-  //         color: borderColor,
-  //         width: widget.pinBoxBorderWidth,
-  //       ),
-  //       color: pinBoxColor,
-  //       borderRadius: BorderRadius.circular(widget.pinBoxRadius),
-  //     ),
-  //     width: widget.pinBoxWidth,
-  //     height: widget.pinBoxHeight,
-  //   );
-  // }
-
-  // Widget _animatedTextBox(String text, int i) {
-  //   if (widget.pinTextAnimatedSwitcherTransition != null) {
-  //     return AnimatedSwitcher(
-  //       duration: widget.pinTextAnimatedSwitcherDuration,
-  //       transitionBuilder: widget.pinTextAnimatedSwitcherTransition ??
-  //           (Widget child, Animation<double> animation) {
-  //             return child;
-  //           },
-  //       child: Text(
-  //         text,
-  //         key: ValueKey<String>("$text$i"),
-  //         style: widget.pinTextStyle,
-  //       ),
-  //     );
-  //   } else {
-  //     return Text(
-  //       text,
-  //       key: ValueKey<String>("${strList[i]}$i"),
-  //       style: widget.pinTextStyle,
-  //     );
-  //   }
-  // }
-
   Widget _animatedTextBox(String text, int i, Color textColor) {
     final bool isFilled = text.isNotEmpty;
-
     final double fontSize = isFilled ? 50 : 50;
     final FontWeight fontWeight = isFilled ? FontWeight.w600 : FontWeight.normal;
 
@@ -448,8 +382,18 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
           text,
           softWrap: true,
           key: ValueKey<String>("$text$i"),
-          style: widget.pinTextStyle?.copyWith(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily) ??
-              TextStyle(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily,),
+          style: widget.pinTextStyle?.copyWith(
+            color: textColor,
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: context.fontFamily,
+          ) ??
+              TextStyle(
+                color: textColor,
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontFamily: context.fontFamily,
+              ),
         ),
       );
     } else {
@@ -457,8 +401,18 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
         text,
         softWrap: true,
         key: ValueKey<String>("${strList[i]}$i"),
-        style: widget.pinTextStyle?.copyWith(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily) ??
-            TextStyle(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily),
+        style: widget.pinTextStyle?.copyWith(
+          color: textColor,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          fontFamily: context.fontFamily,
+        ) ??
+            TextStyle(
+              color: textColor,
+              fontSize: fontSize,
+              fontWeight: fontWeight,
+              fontFamily: context.fontFamily,
+            ),
       );
     }
   }