diff --git a/lib/widgets/duration_picker.dart b/lib/widgets/duration_picker.dart
index a82b6d5..b8d8567 100644
--- a/lib/widgets/duration_picker.dart
+++ b/lib/widgets/duration_picker.dart
@@ -1,9 +1,16 @@
 import 'package:flutter/material.dart';
 
 class DurationPicker extends StatefulWidget {
-  const DurationPicker({super.key, required this.onChangedCallback});
+  const DurationPicker({
+    super.key,
+    required this.onChangedCallback,
+    required this.width,
+    required this.height,
+  });
 
   final void Function(Duration duration) onChangedCallback;
+  final double width;
+  final double height;
 
   @override
   State<DurationPicker> createState() => _DurationPickerState();
@@ -14,12 +21,13 @@ class _DurationPickerState extends State<DurationPicker> {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      width: 400,
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Row(
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SizedBox(
+          width: widget.width,
+          height: widget.height / 4,
+          child: Row(
             mainAxisSize: MainAxisSize.max,
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.end,
@@ -47,66 +55,161 @@ class _DurationPickerState extends State<DurationPicker> {
               ),
             ],
           ),
-          Padding(padding: EdgeInsets.only(top: 10)),
-          Expanded(
-            child: GridView.count(
-              crossAxisSpacing: 10,
-              mainAxisSpacing: 10,
-              crossAxisCount: 3,
-              physics: NeverScrollableScrollPhysics(),
-              children: [
-                ElevatedButton(
+        ),
+        Padding(padding: EdgeInsets.only(top: 10)),
+        Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(7),
                   child: _getTextWidget('7'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(8),
                   child: _getTextWidget('8'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(9),
                   child: _getTextWidget('9'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+          ],
+        ),
+        Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(4),
                   child: _getTextWidget('4'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(5),
                   child: _getTextWidget('5'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(6),
                   child: _getTextWidget('6'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+          ],
+        ),
+        Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(1),
                   child: _getTextWidget('1'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(2),
                   child: _getTextWidget('2'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(3),
                   child: _getTextWidget('3'),
                 ),
-                Padding(padding: EdgeInsets.all(0)),
-                ElevatedButton(
+              ),
+            ),
+          ],
+        ),
+        Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(padding: EdgeInsets.all(0)),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: () => _addTime(0),
                   child: _getTextWidget('0'),
                 ),
-                ElevatedButton(
+              ),
+            ),
+            SizedBox(
+              width: widget.width / 3,
+              height: widget.height / 4,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                child: ElevatedButton(
                   style: _buttonTheme,
                   onPressed: _removeTime,
                   child: Icon(
@@ -114,11 +217,81 @@ class _DurationPickerState extends State<DurationPicker> {
                     size: 24,
                   ),
                 ),
-              ],
+              ),
             ),
-          ),
-        ],
-      ),
+          ],
+        ),
+        // Expanded(
+        //   child: GridView.count(
+        //     crossAxisSpacing: 10,
+        //     mainAxisSpacing: 10,
+        //     crossAxisCount: 3,
+        //     shrinkWrap: true,
+        //     physics: NeverScrollableScrollPhysics(),
+        //     children: [
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(7),
+        //         child: _getTextWidget('7'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(8),
+        //         child: _getTextWidget('8'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(9),
+        //         child: _getTextWidget('9'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(4),
+        //         child: _getTextWidget('4'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(5),
+        //         child: _getTextWidget('5'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(6),
+        //         child: _getTextWidget('6'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(1),
+        //         child: _getTextWidget('1'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(2),
+        //         child: _getTextWidget('2'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(3),
+        //         child: _getTextWidget('3'),
+        //       ),
+        //       Padding(padding: EdgeInsets.all(0)),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: () => _addTime(0),
+        //         child: _getTextWidget('0'),
+        //       ),
+        //       ElevatedButton(
+        //         style: _buttonTheme,
+        //         onPressed: _removeTime,
+        //         child: Icon(
+        //           Icons.backspace,
+        //           size: 24,
+        //         ),
+        //       ),
+        //     ],
+        //   ),
+        // ),
+      ],
     );
   }