my-app/src/components/booking/BookingModal.jsx

@@ -23,6 +23,12 @@ export function BookingModal({
 		(hoursAvailable === 1 ? startTimeIndex + 1 : null); // Auto-select 30 min if that's all that's available
 	const [selectedEndTimeIndex, setSelectedEndTimeIndex] = useState(null);
 	const hasInitialized = useRef(false);
+	
+	// Store the original hours available to prevent it from changing when selections are made
+	const originalHoursAvailable = useRef(hoursAvailable);
+	if (originalHoursAvailable.current < hoursAvailable) {
+		originalHoursAvailable.current = hoursAvailable;
+	}
 
 	// Effect to handle initial setup only once when modal opens
 	useEffect(() => {
@@ -38,7 +44,11 @@ export function BookingModal({
 	const endTimeOptions = [];
 	const disabledOptions = {};
 	
-	for (let i = 1; i <= Math.min(hoursAvailable, 8); i++) {
+	// Always show all possible options up to the original available hours, not limited by current selection
+	const maxOptions = Math.min(originalHoursAvailable.current, 8);
+	console.log('hoursAvailable:', hoursAvailable, 'originalHoursAvailable:', originalHoursAvailable.current, 'maxOptions:', maxOptions);
+	
+	for (let i = 1; i <= maxOptions; i++) {
 		const endTimeIndex = startTimeIndex + i;
 		const endTime = getTimeFromIndex(endTimeIndex);
 		const durationLabel = i === 1 ? "30 min" : 
@@ -52,7 +62,7 @@ export function BookingModal({
 		
 		endTimeOptions.push({
 			value: endTimeIndex,
-			label: `${endTime} (${durationLabel})`
+			label: `${endTime} · ${durationLabel}`
 		});
 		
 		disabledOptions[endTimeIndex] = false; // All available options are enabled
@@ -60,16 +70,20 @@ export function BookingModal({
 
 	function handleChange(event) {
 		const endTimeValue = event.target.value === "" ? null : parseInt(event.target.value);
-		console.log(event.target.value);
+		console.log('Selected end time value:', endTimeValue, 'Previous:', selectedEndTimeIndex);
 		setSelectedEndTimeIndex(endTimeValue);
 		
 		if (endTimeValue !== null) {
 			setEndTimeIndex(endTimeValue);
 			booking.setSelectedEndIndex(endTimeValue);
+			// Update the selected booking length in context so it doesn't interfere
+			const newLength = endTimeValue - startTimeIndex;
+			booking.setSelectedBookingLength && booking.setSelectedBookingLength(newLength);
 		} else {
 			// Reset to default state when placeholder is selected
 			setEndTimeIndex(startTimeIndex);
 			booking.setSelectedEndIndex(null);
+			booking.setSelectedBookingLength && booking.setSelectedBookingLength(0);
 		}
 	}
 

my-app/src/components/booking/BookingModal.module.css

@@ -181,20 +181,106 @@
     padding-top: 1.5rem;
 }
 
-.endTimeDropdown {
-    max-width: none;
+/* Custom End Time Dropdown */
+.customEndTimeDropdown {
+    position: relative;
     min-width: fit-content;
 }
 
-.endTimeDropdown .select {
-    font-size: 1rem;
-    font-weight: 400;
-    text-align: left;
-    padding: 0.5rem 2.5rem 0.5rem 1rem;
+.endTimeButton {
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 0.375rem;
+    padding: 0.75rem 2.5rem 0.75rem 1rem;
+    cursor: pointer;
+    font-size: 1.8rem;
+    text-align: center;
+    min-width: 200px;
+    position: relative;
+    transition: all 0.2s ease;
 }
 
-.endTimeDropdown .select:focus {
+.endTimeButton:hover {
+    border-color: var(--color-primary);
+}
+
+.endTimeButton:focus {
     outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px var(--color-primary-light);
+}
+
+.endTimeButton::after {
+    content: '▼';
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.8rem;
+    color: var(--dropdown-chevron-color);
+}
+
+.timeText {
+    font-weight: 700;
+    color: var(--text-primary);
+    font-feature-settings: 'tnum';
+}
+
+.durationText {
+    font-weight: 400;
+    color: var(--text-tertiary);
+    margin-left: 0.5rem;
+}
+
+.placeholderText {
+    font-weight: 400;
+    color: var(--text-secondary);
+    font-size: 1rem;
+}
+
+.endTimeOptionsDropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 0.375rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 4px;
+}
+
+.endTimeOption {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    background: none;
+    border: none;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 0.2s ease;
+}
+
+.endTimeOption:hover {
+    background: var(--bg-secondary);
+}
+
+.optionTime {
+    font-weight: 700;
+    color: var(--text-primary);
+    font-feature-settings: 'tnum';
+    font-size: 1.1rem;
+}
+
+.optionDuration {
+    font-weight: 400;
+    color: var(--text-tertiary);
+    font-size: 0.9rem;
 }
 
 /* Disabled button styles */

my-app/src/components/ui/Dropdown.module.css

@@ -1,8 +1,6 @@
 .dropdownWrapper {
 	position: relative;
 	display: inline-block;
-	width: 100%;
-	max-width: 200px;
 }
 
 .select {

my-app/src/react-aria-starter/src/Dialog.css

@@ -5,10 +5,10 @@
 
 .react-aria-Dialog {
   outline: none;
-  padding: 30px;
   max-height: inherit;
   box-sizing: border-box;
   overflow: auto;
+  padding: 2rem;
 
   .react-aria-Heading[slot=title] {
     line-height: 1em;