diff --git a/lib/main.dart b/lib/main.dart
index 51e255c14385f0cda5df6be4dbaf3cd3124c6858..81f04fab264849bc4e5c5eec61867fe7eea77e99 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -13,6 +13,8 @@ import 'dart:convert';
 import 'package:weather_icons/weather_icons.dart';
 import 'config/config.dart';
 import 'package:latlong/latlong.dart' as latlng;
+import 'widgets/calendar.dart';
+import 'package:syncfusion_flutter_datepicker/datepicker.dart';
 
 void main() => runApp(MyApp());
 
@@ -77,6 +79,7 @@ class _MyHomePageState extends State<MyHomePage> {
   bool _isDateChosen = false;
   bool _showAdditionalButtons = false;
   List<String> _selectedOptions = [];
+  PickerDateRange? _selectedRange;
   var _dateRangeArray = [];
   var _availableDatesForTrip = [];
 
@@ -477,6 +480,27 @@ class _MyHomePageState extends State<MyHomePage> {
     });
   }
 
+  String displayDate() {
+    if (_selectedRange == null) {
+      return '';
+    } else {
+      final DateTime startDate = _selectedRange!.startDate!;
+      final DateTime endDate = _selectedRange!.endDate!;
+      return '${DateFormat('dd/MMM').format(startDate)} - ${DateFormat('dd/MMM').format(endDate)}';
+    }
+  }
+
+  void _navigateToPickerScreen() async {
+    final selectedRange = await Navigator.push(
+      context,
+      MaterialPageRoute(builder: (context) => DateRangePickerScreen()),
+    );
+    setState(() {
+      _selectedRange = selectedRange;
+    });
+  }
+
+
 // ----------Section For Filter Functions, Calendar, Weather------------
 // Pick date
   _rangeDatePicker(BuildContext ctx) async {
@@ -530,13 +554,6 @@ class _MyHomePageState extends State<MyHomePage> {
     return formatted;
   }
 
-  String displayDate() {
-    if (_isDateChosen) {
-      return "${convertDateFormat(_dateRange.start)} - ${convertDateFormat(_dateRange.end)}";
-    }
-    return '';
-  }
-
   // Expand buttons
   void _toggleAdditionalButtons() {
     setState(() {
@@ -938,7 +955,7 @@ class _MyHomePageState extends State<MyHomePage> {
                                             radius: 20,
                                             child: IconButton(
                                               onPressed: () {
-                                                _rangeDatePicker(context);
+                                                _navigateToPickerScreen();
                                                 // Do something when the first additional button is pressed
                                               },
                                               icon: Icon(Icons.calendar_month),
diff --git a/lib/widgets/calendar.dart b/lib/widgets/calendar.dart
new file mode 100644
index 0000000000000000000000000000000000000000..ab732367770af549e748320ba2971d414c0fe371
--- /dev/null
+++ b/lib/widgets/calendar.dart
@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:syncfusion_flutter_datepicker/datepicker.dart';
+import 'package:intl/intl.dart';
+
+class DateRangePickerScreen extends StatefulWidget {
+  const DateRangePickerScreen({Key? key}) : super(key: key);
+
+  @override
+  _DateRangePickerScreenState createState() => _DateRangePickerScreenState();
+}
+
+class _DateRangePickerScreenState extends State<DateRangePickerScreen> {
+  final DateRangePickerController _controller = DateRangePickerController();
+  late DateTime _minDate;
+  late DateTime _maxDate;
+  bool _isDateChosen = false;
+  PickerDateRange? _selectedRange;
+
+  @override
+  void initState() {
+    _minDate = DateTime.now();
+    _maxDate = _minDate.add(Duration(days: 6));
+    super.initState();
+  }
+
+  void _SelectionChanged(DateRangePickerSelectionChangedArgs args) {
+    setState(() {
+      _selectedRange = args.value!;
+      _isDateChosen = true;
+    });
+  }
+
+  String _formatSelectedDateRange(PickerDateRange? range) {
+    if (range == null || range.startDate == null || range.endDate == null) {
+      return 'Select a date range';
+    }
+    final startDate = DateFormat('MMMM d').format(range.startDate!);
+    final endDate = DateFormat('MMMM d').format(range.endDate!);
+    return '$startDate - $endDate';
+  }
+
+  void _onSubmitSelectedRange() {
+    if (_selectedRange != null) {
+      _controller.selectedRange = _selectedRange!;
+      Navigator.pop(context, _selectedRange);
+    }
+  }
+
+  void _onCancelSelectedRange() {
+    setState(() {
+      _controller.selectedRange = null;
+      _selectedRange = null;
+      _isDateChosen = false;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        toolbarHeight: 80,
+        title: Text(_formatSelectedDateRange(_selectedRange)),
+        backgroundColor: Color.fromRGBO(9, 89, 95, 1),
+        
+        
+      ),
+      body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1),
+        controller: _controller,
+        onSelectionChanged: _SelectionChanged,
+        selectionMode: DateRangePickerSelectionMode.range,
+        navigationMode: DateRangePickerNavigationMode.scroll,
+        navigationDirection: DateRangePickerNavigationDirection.vertical,
+        minDate: _minDate,
+        maxDate: _maxDate,
+        showActionButtons: true,
+        onSubmit: (Object? value) => _onSubmitSelectedRange(),
+        onCancel: () => _onCancelSelectedRange(),
+        rangeSelectionColor: Color.fromRGBO(126, 159, 160, 1),
+        startRangeSelectionColor: Color.fromRGBO(9, 89, 95, 1),
+        endRangeSelectionColor: Color.fromRGBO(9, 89, 95, 1),
+        todayHighlightColor: Color.fromRGBO(9, 89, 95, 1),
+        selectionColor: Color.fromRGBO(9, 89, 95, 1),
+        monthCellStyle: DateRangePickerMonthCellStyle(todayTextStyle: const TextStyle(color: Color.fromRGBO(9, 89, 95, 1))),
+        
+      ),
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
index 773397f32c4b60ac236861ca6495ad3e1d93ea5a..0cca599e432a680777745917d095ef6ab8c1c54c 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -533,6 +533,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
+  syncfusion_flutter_core:
+    dependency: transitive
+    description:
+      name: syncfusion_flutter_core
+      sha256: "5ade7463887e45e91df497a071fe3a77c0cebfad81304d47fc1e1b5e886df19f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "21.1.38"
+  syncfusion_flutter_datepicker:
+    dependency: "direct main"
+    description:
+      name: syncfusion_flutter_datepicker
+      sha256: d863c56dd2a4fcef70b973456da696516a16087b27c3393b901dbae52fda66db
+      url: "https://pub.dev"
+    source: hosted
+    version: "21.1.38"
   term_glyph:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 082bf5a0ac010d73c5670102a9a80ef4331f840e..049aef50c5e080e6735c61bda11147045cbe57ca 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -50,6 +50,7 @@ dependencies:
   geolocator: ^9.0.2
   geocoder: ^0.2.1
   bottom_bar_with_sheet: ^2.4.0
+  syncfusion_flutter_datepicker: ^21.1.38
 
 dev_dependencies:
   flutter_test: