my-app/src/components/BookingDatePicker.jsx

@@ -8,7 +8,6 @@ export function BookingDatePicker() {
 	const booking = useBookingContext();
 	return (
 		<div style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-			<h2>Boka rum</h2>
 			<div>
 				<DatePicker
 					value={booking.selectedDate}

my-app/src/components/BookingLengthField.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Dropdown from './Dropdown';
+import { BOOKING_LENGTHS } from '../constants/bookingConstants';
+import { useBookingContext } from '../context/BookingContext';
+import styles from './BookingFormFields.module.css';
+
+export function BookingLengthField() {
+	const booking = useBookingContext();
+	
+	return (
+		<div>
+			<h3 className={styles.elementHeading}>Längd</h3>
+			<Dropdown
+				options={BOOKING_LENGTHS}
+				value={booking.selectedBookingLength}
+				onChange={(e) => booking.handleLengthChange(Number(e.target.value))}
+				placeholder={{
+					label: "Alla tider",
+					value: 0
+				}}
+				disabledOptions={booking.disabledOptions}
+			/>
+		</div>
+	);
+}

my-app/src/components/BookingTitleField.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DEFAULT_BOOKING_TITLE } from '../constants/bookingConstants';
+import { useBookingContext } from '../context/BookingContext';
+import styles from './BookingFormFields.module.css';
+
+export function BookingTitleField() {
+	const booking = useBookingContext();
+	
+	return (
+		<>
+			<h3 className={styles.elementHeading}>Titel på bokning</h3>
+			<input
+				type="text"
+				value={booking.title}
+				onChange={(event) => booking.setTitle(event.target.value)}
+				placeholder={DEFAULT_BOOKING_TITLE}
+				className={styles.textInput}
+			/>
+		</>
+	);
+}

my-app/src/components/ParticipantsField.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComboBox } from './ComboBox';
+import { PEOPLE } from '../constants/bookingConstants';
+import { useBookingContext } from '../context/BookingContext';
+import styles from './BookingFormFields.module.css';
+
+export function ParticipantsField() {
+	const booking = useBookingContext();
+	
+	return (
+		<>
+			<h3 className={styles.elementHeading}>Deltagare</h3>
+			<ComboBox
+				items={PEOPLE}
+				onSelectionChange={booking.handleParticipantChange}
+				placeholder={"Lägg till deltagare"}
+				value={booking.participant}
+			>
+			</ComboBox>
+			{booking.participants.length > 0 && (
+				<div>
+					{booking.participants.map((participant, index) => (
+						<p key={index}>{participant}</p>
+					))}
+				</div>
+			)}
+		</>
+	);
+}

my-app/src/components/RoomSelectionField.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Dropdown from './Dropdown';
+import { SMALL_GROUP_ROOMS } from '../constants/bookingConstants';
+import { useBookingContext } from '../context/BookingContext';
+import styles from './BookingFormFields.module.css';
+
+export function RoomSelectionField() {
+	const booking = useBookingContext();
+	
+	return (
+		<div>
+			<h3 className={styles.elementHeading}>Rum</h3>
+			<Dropdown
+				options={SMALL_GROUP_ROOMS}
+				onChange={(e) => booking.handleRoomChange(e)}
+				placeholder={{
+					label: "Alla rum",
+					value: "allRooms"
+				}}
+			/>
+		</div>
+	);
+}

my-app/src/pages/NewBooking.jsx

@@ -2,7 +2,10 @@ import React from 'react';
 import styles from './NewBooking.module.css';
 import { TimeCardContainer } from '../components/TimeCardContainer';
 import { BookingDatePicker } from '../components/BookingDatePicker';
-import { BookingFormFields } from '../components/BookingFormFields';
+import { BookingTitleField } from '../components/BookingTitleField';
+import { ParticipantsField } from '../components/ParticipantsField';
+import { RoomSelectionField } from '../components/RoomSelectionField';
+import { BookingLengthField } from '../components/BookingLengthField';
 import { useBookingState } from '../hooks/useBookingState';
 import { BookingProvider } from '../context/BookingContext';
 
@@ -12,18 +15,25 @@ export function NewBooking({ addBooking }) {
 	return (
 		<BookingProvider value={booking}>
 			<div className={styles.pageContainer}>
+				<h2>Boka litet grupprum</h2>
 				<div className={styles.formContainer}>
 					<main style={{ flex: 1 }}>
-						<div>
+						<BookingTitleField />
+						<ParticipantsField />
+						
+						<div className={styles.bookingTimesContainer}>
 							<BookingDatePicker />
-							<BookingFormFields styles={styles} />
-						</div>
-
-						<h3 className={styles.elementHeading} style={{ padding: "0 0.5rem" }}>
-							Lediga tider
-						</h3>
-						<div>
-							<TimeCardContainer />
+							<div style={{ display: "flex", flexDirection: "row", alignItems: "center", gap: "1rem" }}>
+								<RoomSelectionField />
+								<BookingLengthField />
+							</div>
+							
+							<h3 className={styles.elementHeading} style={{ padding: "0 0.5rem" }}>
+								Lediga tider
+							</h3>
+							<div>
+								<TimeCardContainer />
+							</div>
 						</div>
 					</main>
 				</div>

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

@@ -16,6 +16,10 @@
 	font-weight: 529;
 }
 
+.bookingTimesContainer {
+	background-color: red;
+}
+
 
 .modalFooter {
 	width: 100%;