my-app/src/components/BookingModal.jsx

@@ -3,6 +3,7 @@ import { Button, Dialog, Heading, Modal } from 'react-aria-components';
 import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
 import Dropdown from './Dropdown';
 import { useBookingContext } from '../context/BookingContext';
+import { useSettingsContext } from '../context/SettingsContext';
 import styles from './TimeCard.module.css';
 
 export function BookingModal({ 
@@ -13,9 +14,11 @@ export function BookingModal({
 	className 
 }) {
 	const booking = useBookingContext();
+	const { getCurrentUser } = useSettingsContext();
 	
-	// Initialize with pre-selected booking length if available
-	const initialLength = booking.selectedBookingLength > 0 ? booking.selectedBookingLength : null;
+	// Initialize with pre-selected booking length if available, or auto-select if only 30 min available
+	const initialLength = booking.selectedBookingLength > 0 ? booking.selectedBookingLength : 
+		(hoursAvailable === 1 ? 1 : null); // Auto-select 30 min if that's all that's available
 	const [selectedLength, setSelectedLength] = useState(null);
 	const [calculatedEndTime, setCalculatedEndTime] = useState(startTimeIndex);
 	const hasInitialized = useRef(false);
@@ -126,7 +129,15 @@ export function BookingModal({
 
 					<div className={styles.sectionWithTitle}>
 						<label>Deltagare</label>
-						<p>{booking.participants.length > 0 ? booking.participants.map(p => p.name).join(", ") : "Inga deltagare"}</p>
+						<p>
+							{(() => {
+								const currentUser = getCurrentUser();
+								console.log('Current user in modal:', currentUser);
+								const allParticipants = [currentUser, ...booking.participants.filter(p => p.id !== currentUser.id)];
+								console.log('All participants:', allParticipants);
+								return allParticipants.map(p => p.name).join(", ");
+							})()}
+						</p>
 					</div>
 					<div className={styles.modalFooter}>
 						<Button className={styles.cancelButton} slot="close">

my-app/src/components/TimeCard.jsx

@@ -33,7 +33,10 @@ export default function TimeCard({
 
   
   function formatSlotIndex(index) {
-    const hour = Math.floor(index / 2) + 8;
+    let hour = Math.floor(index / 2) + 8;
+    if (hour < 10) {
+      hour = `0${hour}`;
+    }
     const minute = index % 2 === 0 ? "00" : "30";
     return `${hour}:${minute}`;
   }

my-app/src/components/TimeCard.module.css

@@ -24,6 +24,7 @@
 }
 
 .startTime {
+    width: fit-content;
     font-weight: 600;
     font-size: 1.3rem;
 }
@@ -145,7 +146,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    flex: 1;
 }
 
 .startTime label, .endTime label {

my-app/src/context/SettingsContext.jsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { today, getLocalTimeZone, CalendarDate } from '@internationalized/date';
+import { USER } from '../constants/bookingConstants';
 
 const SettingsContext = createContext();
 
@@ -19,9 +20,20 @@ export const SettingsProvider = ({ children }) => {
 			try {
 				const parsed = JSON.parse(saved);
 				return {
+					// Set defaults first
+					mockToday: null,
+					bookingRangeDays: 14,
+					roomAvailabilityChance: 0.7,
+					numberOfRooms: 5,
+					earliestTimeSlot: 0,
+					latestTimeSlot: 22,
+					currentUserName: USER.name,
+					// Then override with saved values
 					...parsed,
 					// Convert date strings back to DateValue objects
 					mockToday: parsed.mockToday ? new Date(parsed.mockToday) : null,
+					// Ensure currentUserName has a fallback
+					currentUserName: parsed.currentUserName || USER.name,
 				};
 			} catch (e) {
 				console.warn('Failed to parse saved settings:', e);
@@ -41,6 +53,8 @@ export const SettingsProvider = ({ children }) => {
 			earliestTimeSlot: 0, // 8:00
 			// Latest booking time
 			latestTimeSlot: 22, // 19:00 (last slot ending at 19:30)
+			// Current user settings
+			currentUserName: USER.name,
 		};
 	});
 
@@ -80,16 +94,30 @@ export const SettingsProvider = ({ children }) => {
 			numberOfRooms: 5,
 			earliestTimeSlot: 0,
 			latestTimeSlot: 22,
+			currentUserName: USER.name,
 		});
 		localStorage.removeItem('calendarSettings');
 	};
 
+	// Get current user as participant object
+	const getCurrentUser = () => {
+		console.log('Settings currentUserName:', settings.currentUserName);
+		console.log('USER.name:', USER.name);
+		return {
+			id: USER.id,
+			name: settings.currentUserName,
+			username: USER.username,
+			email: USER.email
+		};
+	};
+
 	return (
 		<SettingsContext.Provider value={{
 			settings,
 			updateSettings,
 			resetSettings,
 			getEffectiveToday,
+			getCurrentUser,
 		}}>
 			{children}
 		</SettingsContext.Provider>

my-app/src/helpers.jsx

@@ -4,9 +4,13 @@ export function getTimeFromIndex(timeIndex) {
 	const totalHalfHoursFromStart = timeIndex;
 	const totalMinutes = 8 * 60 + totalHalfHoursFromStart * 30; // 8:00 as base
 
-	const hours = Math.floor(totalMinutes / 60);
+	let hours = Math.floor(totalMinutes / 60);
 	const minutes = totalMinutes % 60;
 
+	if (hours < 10) {
+		hours = `0${hours}`;
+	}
+
 	return `${hours}:${minutes === 0 ? '00' : '30'}`;
 }
 

my-app/src/pages/BookingSettings.jsx

@@ -42,6 +42,27 @@ export function BookingSettings() {
 			</div>
 
 			<div className={styles.content}>
+				<div className={styles.section}>
+					<h2>User Settings</h2>
+					
+					<div className={styles.setting}>
+						<label htmlFor="userName">
+							<strong>Your Name</strong>
+							<span className={styles.description}>
+								Your name as it appears in bookings and participant lists
+							</span>
+						</label>
+						<input
+							id="userName"
+							type="text"
+							value={settings.currentUserName}
+							onChange={(e) => updateSettings({ currentUserName: e.target.value })}
+							className={styles.textInput}
+							placeholder="Enter your name"
+						/>
+					</div>
+				</div>
+
 				<div className={styles.section}>
 					<h2>Date Settings</h2>
 					

my-app/src/pages/BookingSettings.module.css

@@ -78,7 +78,7 @@
 	align-items: center;
 }
 
-.dateInput, .numberInput, .select {
+.dateInput, .numberInput, .select, .textInput {
 	padding: 0.75rem;
 	border: 1px solid #d1d5db;
 	border-radius: 6px;
@@ -87,7 +87,7 @@
 	background: white;
 }
 
-.dateInput:focus, .numberInput:focus, .select:focus {
+.dateInput:focus, .numberInput:focus, .select:focus, .textInput:focus {
 	outline: none;
 	border-color: #2563eb;
 	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
@@ -105,6 +105,10 @@
 	width: 150px;
 }
 
+.textInput {
+	width: 250px;
+}
+
 .clearButton {
 	padding: 0.5rem 1rem;
 	background: #f3f4f6;