diff --git a/lib/features/email_recovery/presentation/controller/input_field_focus_manager.dart b/lib/features/email_recovery/presentation/controller/input_field_focus_manager.dart
index 70cb056bb..342819084 100644
--- a/lib/features/email_recovery/presentation/controller/input_field_focus_manager.dart
+++ b/lib/features/email_recovery/presentation/controller/input_field_focus_manager.dart
@@ -1,22 +1,16 @@
 import 'package:flutter/material.dart';
 
 class InputFieldFocusManager {
-  late FocusNode deletionDateFieldFocusNode;
-  late FocusNode receptionDateFieldFocusNode;
   late FocusNode subjectFieldFocusNode;
   late FocusNode recipientsFieldFocusNode;
   late FocusNode senderFieldFocusNode;
   late FocusNode attachmentCheckboxFocusNode;
-  late FocusNode createButtonFocusNode;
 
   InputFieldFocusManager() {
-    deletionDateFieldFocusNode = FocusNode();
-    receptionDateFieldFocusNode = FocusNode();
     subjectFieldFocusNode = FocusNode();
     recipientsFieldFocusNode = FocusNode();
     senderFieldFocusNode = FocusNode();
-    attachmentCheckboxFocusNode = FocusNode(skipTraversal: true);
-    createButtonFocusNode = FocusNode();
+    attachmentCheckboxFocusNode = FocusNode();
   }
 
   factory InputFieldFocusManager.initial() {
@@ -24,12 +18,9 @@ class InputFieldFocusManager {
   }
 
   void dispose() {
-    deletionDateFieldFocusNode.dispose();
-    receptionDateFieldFocusNode.dispose();
     subjectFieldFocusNode.dispose();
     recipientsFieldFocusNode.dispose();
     senderFieldFocusNode.dispose();
     attachmentCheckboxFocusNode.dispose();
-    createButtonFocusNode.dispose();
   }
 }
\ No newline at end of file
diff --git a/lib/features/email_recovery/presentation/email_recovery_controller.dart b/lib/features/email_recovery/presentation/email_recovery_controller.dart
index 7593d6d1c..e7c4f92c8 100644
--- a/lib/features/email_recovery/presentation/email_recovery_controller.dart
+++ b/lib/features/email_recovery/presentation/email_recovery_controller.dart
@@ -1,11 +1,104 @@
 import 'package:core/presentation/utils/keyboard_utils.dart';
 import 'package:flutter/widgets.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
+import 'package:tmail_ui_user/features/base/mixin/date_range_picker_mixin.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/controller/input_field_focus_manager.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
-class EmailRecoveryController extends BaseController {
+class EmailRecoveryController extends BaseController with DateRangePickerMixin {
+
+  final deletionDateFieldSelected = EmailRecoveryTimeType.last1Year.obs;
+  final receptionDateFieldSelected = EmailRecoveryTimeType.allTime.obs;
+  final startDeletionDate = Rxn<DateTime>();
+  final endDeletionDate = Rxn<DateTime>();
+  final startReceptionDate = Rxn<DateTime>();
+  final endReceptionDate = Rxn<DateTime>();
+  final focusManager = InputFieldFocusManager.initial();
+
+  List<EmailAddress> listRecipients = <EmailAddress>[];
+  List<EmailAddress> listSenders = <EmailAddress>[];
+
   EmailRecoveryController();
 
+  void onSelectDeletionDateRange(BuildContext context) {
+    showMultipleViewDateRangePicker(
+      context,
+      startDeletionDate.value,
+      endDeletionDate.value,
+      onCallbackAction: (startDate, endDate) {
+        _updateDateRangeTime(
+          EmailRecoveryField.deletionDate,
+          EmailRecoveryTimeType.customRange,
+          startDate: startDate,
+          endDate: endDate,
+        );
+      }
+    );
+  }
+
+  void onSelectReceptionDateRange(BuildContext context) {
+    showMultipleViewDateRangePicker(
+      context,
+      startReceptionDate.value,
+      endReceptionDate.value,
+      onCallbackAction: (startDate, endDate) {
+        _updateDateRangeTime(
+          EmailRecoveryField.receptionDate,
+          EmailRecoveryTimeType.customRange,
+          startDate: startDate,
+          endDate: endDate,
+        );
+      }
+    );
+  }
+
+  void _updateDateRangeTime(
+    EmailRecoveryField field,
+    EmailRecoveryTimeType recoveryTimeType,
+    {
+      DateTime? startDate,
+      DateTime? endDate,
+    }
+  ) {
+    if (field == EmailRecoveryField.deletionDate) {
+      deletionDateFieldSelected.value = recoveryTimeType;
+      startDeletionDate.value = startDate;
+      endDeletionDate.value = endDate;
+    } else {
+      receptionDateFieldSelected.value = recoveryTimeType;
+      startReceptionDate.value = startDate;
+      endReceptionDate.value = endDate;
+    }
+  }
+
+  void onDeletionDateTypeSelected(BuildContext context, EmailRecoveryTimeType type) {
+    if (type == EmailRecoveryTimeType.customRange) {
+      onSelectDeletionDateRange(context);
+    } else {
+      _updateDateRangeTime(
+        EmailRecoveryField.deletionDate,
+        type,
+        startDate: type.toLatestUTCDate()?.value,
+        endDate: DateTime.now(),
+      );
+    }
+  }
+
+  void onReceptionDateTypeSelected(BuildContext context, EmailRecoveryTimeType type) {
+    if (type == EmailRecoveryTimeType.customRange) {
+      onSelectReceptionDateRange(context);
+    } else {
+      _updateDateRangeTime(
+        EmailRecoveryField.receptionDate,
+        type,
+      );
+    }
+  }
+
   void closeView(BuildContext context) {
     KeyboardUtils.hideKeyboard(context);
     popBack();
diff --git a/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart b/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart
index 0457b033b..6a17ed47e 100644
--- a/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart
+++ b/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart
@@ -12,9 +12,9 @@ class DateSelectionDropdownButtonStyles {
 
   static const Offset dropdownOffset = Offset(0.0, -8.0);
 
-  static const EdgeInsetsGeometry padding = EdgeInsets.only(
-    left: 12,
-    right: 10
+  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(
+    start: 12,
+    end: 10
   );
 
   static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(10));
diff --git a/lib/features/email_recovery/presentation/widgets/email_recovery_form/email_recovery_form_desktop_builder.dart b/lib/features/email_recovery/presentation/widgets/email_recovery_form/email_recovery_form_desktop_builder.dart
index a4c21b8e1..25fe72afb 100644
--- a/lib/features/email_recovery/presentation/widgets/email_recovery_form/email_recovery_form_desktop_builder.dart
+++ b/lib/features/email_recovery/presentation/widgets/email_recovery_form/email_recovery_form_desktop_builder.dart
@@ -34,32 +34,30 @@ class EmailRecoveryFormDesktopBuilder extends GetWidget<EmailRecoveryController>
                 physics: const ClampingScrollPhysics(),
                 child: Padding(
                   padding: EmailRecoveryFormStyles.inputAreaPadding,
-                  child: FocusTraversalGroup(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Obx(() => DateSelectionFieldWebWidget(
-                          field: EmailRecoveryField.deletionDate,
-                          imagePaths: controller.imagePaths,
-                          responsiveUtils: controller.responsiveUtils,
-                          startDate: controller.startDeletionDate.value,
-                          endDate: controller.endDeletionDate.value,
-                          recoveryTimeSelected: controller.deletionDateFieldSelected.value,
-                          onTapCalendar: () => controller.onSelectDeletionDateRange(context),
-                          onRecoveryTimeSelected: (type) => controller.onDeletionDateTypeSelected(context, type),
-                        )),
-                        Obx(() => DateSelectionFieldWebWidget(
-                          field: EmailRecoveryField.receptionDate,
-                          imagePaths: controller.imagePaths,
-                          responsiveUtils: controller.responsiveUtils,
-                          startDate: controller.startReceptionDate.value,
-                          endDate: controller.endReceptionDate.value,
-                          recoveryTimeSelected: controller.receptionDateFieldSelected.value,
-                          onTapCalendar: () => controller.onSelectReceptionDateRange(context),
-                          onRecoveryTimeSelected: (type) => controller.onReceptionDateTypeSelected(context, type),
-                        )),
-                      ],
-                    ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Obx(() => DateSelectionFieldWebWidget(
+                        field: EmailRecoveryField.deletionDate,
+                        imagePaths: controller.imagePaths,
+                        responsiveUtils: controller.responsiveUtils,
+                        startDate: controller.startDeletionDate.value,
+                        endDate: controller.endDeletionDate.value,
+                        recoveryTimeSelected: controller.deletionDateFieldSelected.value,
+                        onTapCalendar: () => controller.onSelectDeletionDateRange(context),
+                        onRecoveryTimeSelected: (type) => controller.onDeletionDateTypeSelected(context, type),
+                      )),
+                      Obx(() => DateSelectionFieldWebWidget(
+                        field: EmailRecoveryField.receptionDate,
+                        imagePaths: controller.imagePaths,
+                        responsiveUtils: controller.responsiveUtils,
+                        startDate: controller.startReceptionDate.value,
+                        endDate: controller.endReceptionDate.value,
+                        recoveryTimeSelected: controller.receptionDateFieldSelected.value,
+                        onTapCalendar: () => controller.onSelectReceptionDateRange(context),
+                        onRecoveryTimeSelected: (type) => controller.onReceptionDateTypeSelected(context, type),
+                      )),
+                    ],
                   ),
                 ),
               )