diff --git a/src/components/calendar/DateRange/DateRange.module.scss b/src/components/calendar/DateRange/DateRange.module.scss
index 05bcc37..991949e 100644
--- a/src/components/calendar/DateRange/DateRange.module.scss
+++ b/src/components/calendar/DateRange/DateRange.module.scss
@@ -3,10 +3,10 @@
 
 .DateRange {
   &__Container {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     gap: 0;
-    align-items: flex-start;
   }
 
   &__DayWrapper {
diff --git a/src/components/calendar/DateRange/index.tsx b/src/components/calendar/DateRange/index.tsx
index 5e31c10..68844d9 100644
--- a/src/components/calendar/DateRange/index.tsx
+++ b/src/components/calendar/DateRange/index.tsx
@@ -32,11 +32,13 @@ export const DateRange: React.FC<DateRangeProps> = ({
   const startDate = startOfDay(from);
   const endDate = startOfDay(to);
   
-  // If included is false, we exclude the start and end dates
+  // If included is false, we exclude the start and end dates from display
   const days = included 
     ? eachDayOfInterval({ start: startDate, end: endDate })
     : eachDayOfInterval({ start: startDate, end: endDate }).slice(1, -1);
   
+  // The selection range always uses the original start/end dates
+  // This ensures proper visual continuity when included=false
   const dateRange = selected ? {
     startDate,
     endDate,