diff --git a/packages/reactive_month_picker_dialog/CHANGELOG.md b/packages/reactive_month_picker_dialog/CHANGELOG.md
index 539288bd..d5140909 100644
--- a/packages/reactive_month_picker_dialog/CHANGELOG.md
+++ b/packages/reactive_month_picker_dialog/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [4.0.0]
+
+* month_picker_dialog: ^6.2.3
+* update example app
+
 ## [3.0.1]
 
 * Support `reactive_forms: 18.x`
diff --git a/packages/reactive_month_picker_dialog/example/.metadata b/packages/reactive_month_picker_dialog/example/.metadata
index 526e166a..5d9f7ee9 100644
--- a/packages/reactive_month_picker_dialog/example/.metadata
+++ b/packages/reactive_month_picker_dialog/example/.metadata
@@ -4,7 +4,27 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: 60bd88df915880d23877bfc1602e8ddcf4c4dd2a
-  channel: stable
+  revision: "b25305a8832cfc6ba632a7f87ad455e319dccce8"
+  channel: "stable"
 
 project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: b25305a8832cfc6ba632a7f87ad455e319dccce8
+      base_revision: b25305a8832cfc6ba632a7f87ad455e319dccce8
+    - platform: web
+      create_revision: b25305a8832cfc6ba632a7f87ad455e319dccce8
+      base_revision: b25305a8832cfc6ba632a7f87ad455e319dccce8
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'
diff --git a/packages/reactive_month_picker_dialog/example/analysis_options.yaml b/packages/reactive_month_picker_dialog/example/analysis_options.yaml
new file mode 100644
index 00000000..0d290213
--- /dev/null
+++ b/packages/reactive_month_picker_dialog/example/analysis_options.yaml
@@ -0,0 +1,28 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at https://dart.dev/lints.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
diff --git a/packages/reactive_month_picker_dialog/example/pubspec.yaml b/packages/reactive_month_picker_dialog/example/pubspec.yaml
index 4b181e2d..d3bfe9d0 100644
--- a/packages/reactive_month_picker_dialog/example/pubspec.yaml
+++ b/packages/reactive_month_picker_dialog/example/pubspec.yaml
@@ -23,13 +23,13 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  reactive_forms: 16.0.1
+  reactive_forms: ^18.0.0
   reactive_month_picker_dialog:
     path: ../
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.5
+  cupertino_icons: ^1.0.8
 
 dev_dependencies:
   flutter_test:
diff --git a/packages/reactive_month_picker_dialog/example/web/icons/Icon-maskable-192.png b/packages/reactive_month_picker_dialog/example/web/icons/Icon-maskable-192.png
new file mode 100644
index 00000000..eb9b4d76
Binary files /dev/null and b/packages/reactive_month_picker_dialog/example/web/icons/Icon-maskable-192.png differ
diff --git a/packages/reactive_month_picker_dialog/example/web/icons/Icon-maskable-512.png b/packages/reactive_month_picker_dialog/example/web/icons/Icon-maskable-512.png
new file mode 100644
index 00000000..d69c5669
Binary files /dev/null and b/packages/reactive_month_picker_dialog/example/web/icons/Icon-maskable-512.png differ
diff --git a/packages/reactive_month_picker_dialog/example/web/index.html b/packages/reactive_month_picker_dialog/example/web/index.html
index 1460b5e9..046fe11b 100644
--- a/packages/reactive_month_picker_dialog/example/web/index.html
+++ b/packages/reactive_month_picker_dialog/example/web/index.html
@@ -8,38 +8,31 @@
     The path provided below has to start and end with a slash "/" in order for
     it to work correctly.
 
-    Fore more details:
+    For more details:
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
   -->
-  <base href="/">
+  <base href="$FLUTTER_BASE_HREF">
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="A new Flutter project.">
 
   <!-- iOS meta tags & icons -->
-  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="example">
+  <meta name="apple-mobile-web-app-title" content="reactive_month_picker_dialog_example">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>example</title>
+  <title>reactive_month_picker_dialog_example</title>
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
-  <!-- This script installs service_worker.js to provide PWA functionality to
-       application. For more information, see:
-       https://developers.google.com/web/fundamentals/primers/service-workers -->
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('flutter-first-frame', function () {
-        navigator.serviceWorker.register('flutter_service_worker.js');
-      });
-    }
-  </script>
-  <script src="main.dart.js" type="application/javascript"></script>
+  <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>
diff --git a/packages/reactive_month_picker_dialog/example/web/manifest.json b/packages/reactive_month_picker_dialog/example/web/manifest.json
index 8c012917..764621f0 100644
--- a/packages/reactive_month_picker_dialog/example/web/manifest.json
+++ b/packages/reactive_month_picker_dialog/example/web/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name": "example",
-    "short_name": "example",
+    "name": "reactive_month_picker_dialog_example",
+    "short_name": "reactive_month_picker_dialog_example",
     "start_url": ".",
     "display": "standalone",
     "background_color": "#0175C2",
@@ -18,6 +18,18 @@
             "src": "icons/Icon-512.png",
             "sizes": "512x512",
             "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
         }
     ]
 }
diff --git a/packages/reactive_month_picker_dialog/lib/reactive_month_picker_dialog.dart b/packages/reactive_month_picker_dialog/lib/reactive_month_picker_dialog.dart
index b0939433..ffb793c8 100644
--- a/packages/reactive_month_picker_dialog/lib/reactive_month_picker_dialog.dart
+++ b/packages/reactive_month_picker_dialog/lib/reactive_month_picker_dialog.dart
@@ -12,13 +12,13 @@ import 'package:reactive_forms/reactive_forms.dart';
 /// that is bound to [ReactiveMonthPickerDialog].
 
 /// This is a convenience widget that wraps the function
-/// [showDatePicker] and [showTimePicker] in a [ReactiveMonthPickerDialog].
+/// [showMonthPicker] in a [ReactiveMonthPickerDialog].
 ///
 /// The [formControlName] is required to bind this [ReactiveMonthPickerDialog]
 /// to a [FormControl].
 ///
-/// For documentation about the various parameters, see the [showDatePicker]
-/// and [showTimePicker] function parameters.
+/// For documentation about the various parameters, see the [showMonthPicker]
+/// function parameters.
 ///
 /// ## Example:
 ///
@@ -28,7 +28,7 @@ import 'package:reactive_forms/reactive_forms.dart';
 /// )
 /// ```
 class ReactiveMonthPickerDialog extends ReactiveFormField<DateTime, String> {
-  /// Creates a [ReactiveMonthPickerDialog] that wraps the function [showDatePicker].
+  /// Creates a [ReactiveMonthPickerDialog] that wraps the function [showMonthPicker].
   ///
   /// Can optionally provide a [formControl] to bind this widget to a control.
   ///
@@ -38,59 +38,37 @@ class ReactiveMonthPickerDialog extends ReactiveFormField<DateTime, String> {
   /// Must provide one of the arguments [formControl] or a [formControlName],
   /// but not both at the same time.
   ///
-  /// The parameter [transitionBuilder] is the equivalent of [builder]
-  /// parameter in the [showTimePicker].
-  ///
-  /// For documentation about the various parameters, see the [showTimePicker]
+  /// For documentation about the various parameters, see the [showMonthPicker]
   /// function parameters.
-  ReactiveMonthPickerDialog(
-      {super.key,
-      super.formControlName,
-      super.formControl,
-      super.validationMessages,
-      ControlValueAccessor<DateTime, String>? valueAccessor,
-      super.showErrors,
+  ReactiveMonthPickerDialog({
+    super.key,
+    super.formControlName,
+    super.formControl,
+    super.validationMessages,
+    ControlValueAccessor<DateTime, String>? valueAccessor,
+    super.showErrors,
 
-      ////////////////////////////////////////////////////////////////////////////
-      InputDecoration? decoration,
-      bool showClearIcon = true,
-      Widget clearIcon = const Icon(Icons.clear),
-      TextStyle? style,
-      DateTime? firstDate,
-      DateTime? lastDate,
-      Locale? locale,
-      bool Function(DateTime)? selectableMonthPredicate,
-      bool capitalizeFirstLetter = true,
-      Color? headerColor,
-      Color? headerTextColor,
-      Color? selectedMonthBackgroundColor,
-      Color? backgroundColor,
-      Color? selectedMonthTextColor,
-      Color? unselectedMonthTextColor,
-      Color? currentMonthTextColor,
-      Widget? confirmText,
-      Widget? cancelText,
-      double? customHeight,
-      double customWidth = 320,
-      bool yearFirst = false,
-      bool dismissible = false,
-      double roundedCornersRadius = 0,
-      bool forceSelectedDate = false,
-      ButtonStyle? Function(DateTime)? monthStylePredicate,
-      ButtonStyle? Function(int)? yearStylePredicate,
-      double selectedMonthPadding = 0,
-      int animationMilliseconds = 450,
-      bool hideHeaderRow = false,
-      double? textScaleFactor,
-      double? arrowSize,
-      bool forcePortrait = false,
-      Widget? customDivider,
-      bool blockScrolling = true,
-      BorderSide dialogBorderSide = BorderSide.none})
-      : super(
+    ////////////////////////////////////////////////////////////////////////////
+    InputDecoration? decoration,
+    bool showClearIcon = true,
+    Widget clearIcon = const Icon(Icons.clear),
+    TextStyle? style,
+    DateTime? firstDate,
+    DateTime? lastDate,
+    Locale? locale,
+    bool Function(DateTime)? selectableMonthPredicate,
+    bool Function(int)? selectableYearPredicate,
+    ButtonStyle? Function(DateTime)? monthStylePredicate,
+    ButtonStyle? Function(int)? yearStylePredicate,
+    Widget? headerTitle,
+    bool onlyYear = false,
+    MonthPickerDialogSettings monthPickerDialogSettings =
+        defaultMonthPickerDialogSettings,
+  }) : super(
           valueAccessor: valueAccessor ??
               DateTimeValueAccessor(
-                dateTimeFormat: DateFormat('yyyy/MM'),
+                dateTimeFormat:
+                    onlyYear ? DateFormat.y() : DateFormat('yyyy/MM'),
               ),
           builder: (field) {
             Widget? suffixIcon = decoration?.suffixIcon;
@@ -127,35 +105,13 @@ class ReactiveMonthPickerDialog extends ReactiveFormField<DateTime, String> {
                     ),
                     firstDate: firstDate ?? DateTime(1900),
                     lastDate: effectiveLastDate,
-                    locale: locale,
                     selectableMonthPredicate: selectableMonthPredicate,
-                    capitalizeFirstLetter: capitalizeFirstLetter,
-                    headerColor: headerColor,
-                    headerTextColor: headerTextColor,
-                    selectedMonthBackgroundColor: selectedMonthBackgroundColor,
-                    selectedMonthTextColor: selectedMonthTextColor,
-                    unselectedMonthTextColor: unselectedMonthTextColor,
-                    confirmWidget: confirmText,
-                    cancelWidget: cancelText,
-                    customHeight: customHeight,
-                    customWidth: customWidth,
-                    yearFirst: yearFirst,
-                    dismissible: dismissible,
-                    roundedCornersRadius: roundedCornersRadius,
-                    forceSelectedDate: forceSelectedDate,
-                    backgroundColor: backgroundColor,
+                    selectableYearPredicate: selectableYearPredicate,
                     monthStylePredicate: monthStylePredicate,
                     yearStylePredicate: yearStylePredicate,
-                    currentMonthTextColor: currentMonthTextColor,
-                    selectedMonthPadding: selectedMonthPadding,
-                    animationMilliseconds: animationMilliseconds,
-                    hideHeaderRow: hideHeaderRow,
-                    textScaleFactor: textScaleFactor,
-                    arrowSize: arrowSize,
-                    forcePortrait: forcePortrait,
-                    customDivider: customDivider,
-                    blockScrolling: blockScrolling,
-                    dialogBorderSide: dialogBorderSide,
+                    headerTitle: headerTitle,
+                    monthPickerDialogSettings: monthPickerDialogSettings,
+                    onlyYear: onlyYear,
                   );
 
                   field.didChange(
diff --git a/packages/reactive_month_picker_dialog/pubspec.yaml b/packages/reactive_month_picker_dialog/pubspec.yaml
index 83a5bd75..a0211c6e 100644
--- a/packages/reactive_month_picker_dialog/pubspec.yaml
+++ b/packages/reactive_month_picker_dialog/pubspec.yaml
@@ -1,6 +1,6 @@
 name: reactive_month_picker_dialog
 description: Wrapper around month_picker_dialog to use with reactive_forms.
-version: 3.0.1
+version: 4.0.0
 repository: https://github.com/artflutter/reactive_forms_widgets/tree/master/packages/reactive_month_picker_dialog
 issue_tracker: https://github.com/artflutter/reactive_forms_widgets/issues
 
@@ -11,7 +11,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  month_picker_dialog: ^3.0.0
+  month_picker_dialog: ^6.2.3
   reactive_forms: ">=16.0.0 <19.0.0"
   intl: ">=0.18.0 <1.0.0"