diff --git a/src/src/app/components/trips/trips.component.ts b/src/src/app/components/trips/trips.component.ts
index 3989062..e689a8e 100644
--- a/src/src/app/components/trips/trips.component.ts
+++ b/src/src/app/components/trips/trips.component.ts
@@ -11,8 +11,7 @@ import { DatePipe } from '@angular/common';
 import { DialogModule } from 'primeng/dialog';
 
 interface TripBaseWithDates extends TripBase {
-  from?: Date;
-  to?: Date;
+  daterange?: Date[];
 }
 
 @Component({
@@ -81,8 +80,8 @@ export class TripsComponent implements OnInit {
           next: (new_trip: TripBase) => {
             let dayCount = 0;
 
-            if (trip.from && trip.to) {
-              const obs$ = this.generateDaysLabel(trip.from!, trip.to!).map((label) =>
+            if (trip.daterange && trip.daterange.length === 2) {
+              const obs$ = this.generateDaysLabel(trip.daterange).map((label) =>
                 this.apiService.postTripDay({ id: -1, label: label, items: [] }, new_trip.id),
               );
               dayCount = obs$.length;
@@ -107,7 +106,9 @@ export class TripsComponent implements OnInit {
     });
   }
 
-  generateDaysLabel(from: Date, to: Date): string[] {
+  generateDaysLabel(daterange: Date[]): string[] {
+    const from = daterange[0];
+    const to = daterange[1];
     const labels: string[] = [];
     const sameMonth = from.getFullYear() === to.getFullYear() && from.getMonth() === to.getMonth();
 
diff --git a/src/src/app/modals/trip-create-modal/trip-create-modal.component.html b/src/src/app/modals/trip-create-modal/trip-create-modal.component.html
index 0cb0338..dd31ff7 100644
--- a/src/src/app/modals/trip-create-modal/trip-create-modal.component.html
+++ b/src/src/app/modals/trip-create-modal/trip-create-modal.component.html
@@ -10,15 +10,10 @@
   </p-floatlabel>
 
   @if (tripForm.get("id")?.value === -1) {
-  <div class="grid md:col-span-4 grid-cols-2 gap-2">
+  <div class="md:col-span-full">
     <p-floatlabel variant="in">
-      <p-datepicker id="from" formControlName="from" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
-      <label for="from">From</label>
-    </p-floatlabel>
-
-    <p-floatlabel variant="in">
-      <p-datepicker id="to" formControlName="to" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
-      <label for="to">To</label>
+      <p-datepicker id="daterange" formControlName="daterange" [iconDisplay]="'input'" [showIcon]="true" selectionMode="range" appendTo="body" fluid />
+      <label for="daterange">Date Range</label>
     </p-floatlabel>
   </div>
   }
@@ -61,4 +56,4 @@
 <div class="mt-4 text-right">
   <p-button (click)="closeDialog()" [disabled]="!tripForm.dirty || !tripForm.valid">{{ tripForm.get("id")?.value
     !== -1 ? "Update" : "Create" }}</p-button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts b/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts
index 623ce41..1eacd57 100644
--- a/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts
+++ b/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts
@@ -33,8 +33,7 @@ export class TripCreateModalComponent {
       image: '',
       currency: null,
       image_id: null,
-      from: null,
-      to: null,
+      daterange: null,
     });
 
     const patchValue = this.config.data?.trip;