diff --git a/apps/pocketbase/pb_data/auxiliary.db b/apps/pocketbase/pb_data/auxiliary.db
index 9879ecb..ad61474 100644
Binary files a/apps/pocketbase/pb_data/auxiliary.db and b/apps/pocketbase/pb_data/auxiliary.db differ
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index e1000e2..c3f1ca3 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
       </main>
       <footer className="bg-white text-black py-8 mt-12">
         <div className="max-w-2xl mx-auto px-4 text-center">
-          <p className="text-gray-600 mb-2">Questions? Get in touch</p>
+          <p className="text-gray-600 mb-2">Get in touch</p>
           <a
             href="mailto:vitrify@asyavee.me"
             className="text-blue-600 hover:text-blue-800 transition-colors font-medium"
diff --git a/apps/web/components/BookingForm.tsx b/apps/web/components/BookingForm.tsx
index 738d227..9eaba99 100644
--- a/apps/web/components/BookingForm.tsx
+++ b/apps/web/components/BookingForm.tsx
@@ -1,16 +1,34 @@
 'use client'
 
-import React, { useState } from 'react';
-import { Calendar, Clock, User, Mail, Users } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import BookingTypeSelector from './BookingTypeSelector';
+import DateSelector from './DateSelector';
+import TimeSlotSelector from './TimeSlotSelector';
+import CustomerDetails from './CustomerDetails';
+import BookingSummary from './BookingSummary';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
 
 const BookingInterface = () => {
   const [selectedDate, setSelectedDate] = useState('');
   const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
   const [selectedBookingType, setSelectedBookingType] = useState('');
-  const [customerName, setCustomerName] = useState('');
-  const [customerEmail, setCustomerEmail] = useState('');
   const [participantsCount, setParticipantsCount] = useState(1);
 
+  const { register, handleSubmit, formState: { errors, isValid }, setValue, trigger } = useForm<FormData>({
+    mode: 'onChange',
+    defaultValues: {
+      customerName: '',
+      customerEmail: '',
+      participantsCount: 1
+    }
+  });
+
   // Mock data - will be replaced with API calls
   const bookingTypes = [
     { id: '1', name: 'wheel_rental', display_name: 'Wheel Rental', requires_payment: false, price_per_person: 0 },
@@ -30,35 +48,44 @@ const BookingInterface = () => {
 
   const selectedBookingTypeData = bookingTypes.find(bt => bt.id === selectedBookingType);
 
-  const handleSubmit = () => {
-    console.log({
-      selectedBookingType,
-      selectedDate,
-      selectedTimeSlot,
-      customerName,
-      customerEmail,
-      participantsCount
-    });
-  };
+  useEffect(() => {
+    setValue('participantsCount', participantsCount);
+    trigger('participantsCount');
+  }, [participantsCount, setValue, trigger]);
 
-  const generateCalendarDays = () => {
-    const today = new Date();
-    const days = [];
+  const onSubmit = (data: FormData) => {
+    const selectedTimeSlotData = timeSlots.find(slot => slot.id === selectedTimeSlot);
     
-    for (let i = 0; i < 14; i++) {
-      const date = new Date(today);
-      date.setDate(today.getDate() + i);
-      days.push({
-        date: date.toISOString().split('T')[0],
-        day: date.getDate(),
-        month: date.toLocaleDateString('en', { month: 'short' }),
-        dayName: date.toLocaleDateString('en', { weekday: 'short' })
-      });
-    }
-    return days;
+    const formData = {
+      bookingTypeId: selectedBookingType,
+      customerName: data.customerName,
+      customerEmail: data.customerEmail,
+      startTime: selectedDate && selectedTimeSlotData 
+        ? `${selectedDate}T${selectedTimeSlotData.start_time}:00`
+        : '',
+      endTime: selectedDate && selectedTimeSlotData 
+        ? `${selectedDate}T${selectedTimeSlotData.end_time}:00`
+        : '',
+      participantsCount: data.participantsCount,
+    };
+    
+    console.log(formData);
   };
 
-  const calendarDays = generateCalendarDays();
+  const handleParticipantsCountChange = (count: number) => {
+    setParticipantsCount(count);
+  };
+
+  const handleBookingTypeChange = (typeId: string) => {
+    setSelectedBookingType(typeId);
+    setSelectedDate('');
+    setSelectedTimeSlot('');
+  };
+
+  const handleDateChange = (date: string) => {
+    setSelectedDate(date);
+    setSelectedTimeSlot('');
+  };
 
   return (
     <div className="min-h-screen bg-gray-50 p-4">
@@ -71,201 +98,53 @@ const BookingInterface = () => {
 
         <div className="space-y-8">
           {/* Booking Type Selection */}
-          <div className="bg-white rounded-xl p-6 shadow-sm">
-            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-              <Calendar className="w-5 h-5" />
-              Select Experience
-            </h2>
-            <div className="grid gap-3">
-              {bookingTypes.map((type) => (
-                <label key={type.id} className="cursor-pointer">
-                  <input
-                    type="radio"
-                    name="bookingType"
-                    value={type.id}
-                    checked={selectedBookingType === type.id}
-                    onChange={(e) => setSelectedBookingType(e.target.value)}
-                    className="sr-only"
-                  />
-                  <div className={`p-4 rounded-lg border-2 transition-all ${
-                    selectedBookingType === type.id 
-                      ? 'border-blue-500 bg-blue-50' 
-                      : 'border-gray-200 hover:border-gray-300'
-                  }`}>
-                    <div className="flex justify-between items-start">
-                      <div>
-                        <h3 className="font-medium text-gray-900">{type.display_name}</h3>
-                        {type.requires_payment && (
-                          <p className="text-sm text-gray-600 mt-1">
-                            ${type.price_per_person} per person
-                          </p>
-                        )}
-                      </div>
-                      {type.requires_payment && (
-                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
-                          Payment Required
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
+          <BookingTypeSelector
+            bookingTypes={bookingTypes}
+            selectedBookingType={selectedBookingType}
+            onBookingTypeChange={handleBookingTypeChange}
+          />
 
           {/* Date Selection */}
           {selectedBookingType && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <Calendar className="w-5 h-5" />
-                Choose Date
-              </h2>
-              <div className="grid grid-cols-7 gap-2 md:gap-3">
-                {calendarDays.map((day) => (
-                  <button
-                    key={day.date}
-                    type="button"
-                    onClick={() => setSelectedDate(day.date)}
-                    className={`p-3 rounded-lg text-center transition-all ${
-                      selectedDate === day.date
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                    }`}
-                  >
-                    <div className="text-xs font-medium">{day.dayName}</div>
-                    <div className="text-sm font-semibold">{day.day}</div>
-                    <div className="text-xs">{day.month}</div>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <DateSelector
+              selectedDate={selectedDate}
+              onDateChange={handleDateChange}
+            />
           )}
 
           {/* Time Slot Selection */}
           {selectedDate && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <Clock className="w-5 h-5" />
-                Available Times
-              </h2>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {timeSlots.map((slot) => (
-                  <button
-                    key={slot.id}
-                    type="button"
-                    disabled={!slot.available}
-                    onClick={() => setSelectedTimeSlot(slot.id)}
-                    className={`p-3 rounded-lg text-center transition-all ${
-                      !slot.available
-                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                        : selectedTimeSlot === slot.id
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                    }`}
-                  >
-                    <div className="font-medium">
-                      {slot.start_time} - {slot.end_time}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <TimeSlotSelector
+              timeSlots={timeSlots}
+              selectedTimeSlot={selectedTimeSlot}
+              onTimeSlotChange={setSelectedTimeSlot}
+            />
           )}
 
           {/* Customer Details */}
           {selectedTimeSlot && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <User className="w-5 h-5" />
-                Your Details
-              </h2>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <CustomerDetails
+                register={register}
+                errors={errors}
+                participantsCount={participantsCount}
+                onParticipantsCountChange={handleParticipantsCountChange}
+              />
               
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Full Name *
-                  </label>
-                  <input
-                    type="text"
-                    value={customerName}
-                    onChange={(e) => setCustomerName(e.target.value)}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Enter your full name"
+              {/* Summary & Submit */}
+              {isValid && (
+                <div className="mt-8">
+                  <BookingSummary
+                    selectedBookingTypeData={selectedBookingTypeData}
+                    selectedDate={selectedDate}
+                    selectedTimeSlot={selectedTimeSlot}
+                    timeSlots={timeSlots}
+                    participantsCount={participantsCount}
+                    onSubmit={handleSubmit(onSubmit)}
                   />
                 </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Email Address *
-                  </label>
-                  <input
-                    type="email"
-                    value={customerEmail}
-                    onChange={(e) => setCustomerEmail(e.target.value)}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Enter your email"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
-                    <Users className="w-4 h-4" />
-                    Number of Participants
-                  </label>
-                  <select
-                    value={participantsCount}
-                    onChange={(e) => setParticipantsCount(parseInt(e.target.value))}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
-                      <option key={num} value={num}>{num} participant{num > 1 ? 's' : ''}</option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Summary & Submit */}
-          {selectedTimeSlot && customerName && customerEmail && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
-              
-              <div className="space-y-3 mb-6">
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Experience:</span>
-                  <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Date:</span>
-                  <span className="font-medium">{selectedDate}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Time:</span>
-                  <span className="font-medium">
-                    {timeSlots.find(s => s.id === selectedTimeSlot)?.start_time} - 
-                    {timeSlots.find(s => s.id === selectedTimeSlot)?.end_time}
-                  </span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Participants:</span>
-                  <span className="font-medium">{participantsCount}</span>
-                </div>
-                {selectedBookingTypeData?.requires_payment && (
-                  <div className="flex justify-between text-lg font-semibold border-t pt-3">
-                    <span>Total:</span>
-                    <span>${selectedBookingTypeData.price_per_person * participantsCount}</span>
-                  </div>
-                )}
-              </div>
-
-              <button
-                onClick={handleSubmit}
-                className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-              >
-                {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
-              </button>
-            </div>
+              )}
+            </form>
           )}
         </div>
       </div>
diff --git a/apps/web/components/BookingSummary.tsx b/apps/web/components/BookingSummary.tsx
new file mode 100644
index 0000000..7ce927a
--- /dev/null
+++ b/apps/web/components/BookingSummary.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+interface BookingType {
+  id: string;
+  name: string;
+  display_name: string;
+  requires_payment: boolean;
+  price_per_person: number;
+}
+
+interface TimeSlot {
+  id: string;
+  start_time: string;
+  end_time: string;
+  available: boolean;
+}
+
+interface BookingSummaryProps {
+  selectedBookingTypeData: BookingType | undefined;
+  selectedDate: string;
+  selectedTimeSlot: string;
+  timeSlots: TimeSlot[];
+  participantsCount: number;
+  onSubmit: () => void;
+}
+
+const BookingSummary: React.FC<BookingSummaryProps> = ({
+  selectedBookingTypeData,
+  selectedDate,
+  selectedTimeSlot,
+  timeSlots,
+  participantsCount,
+  onSubmit,
+}) => {
+  const selectedTimeSlotData = timeSlots.find(s => s.id === selectedTimeSlot);
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
+      
+      <div className="space-y-3 mb-6">
+        <div className="flex justify-between">
+          <span className="text-gray-600">Experience:</span>
+          <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Date:</span>
+          <span className="font-medium">{selectedDate}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Time:</span>
+          <span className="font-medium">
+            {selectedTimeSlotData?.start_time} - {selectedTimeSlotData?.end_time}
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Participants:</span>
+          <span className="font-medium">{participantsCount}</span>
+        </div>
+        {selectedBookingTypeData?.requires_payment && (
+          <div className="flex justify-between text-lg font-semibold border-t pt-3">
+            <span>Total:</span>
+            <span>₾{selectedBookingTypeData.price_per_person * participantsCount}</span>
+          </div>
+        )}
+      </div>
+
+      <button
+        onClick={onSubmit}
+        className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+      >
+        {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
+      </button>
+    </div>
+  );
+};
+
+export default BookingSummary;
\ No newline at end of file
diff --git a/apps/web/components/BookingTypeSelector.tsx b/apps/web/components/BookingTypeSelector.tsx
new file mode 100644
index 0000000..143e9cb
--- /dev/null
+++ b/apps/web/components/BookingTypeSelector.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface BookingType {
+  id: string;
+  name: string;
+  display_name: string;
+  requires_payment: boolean;
+  price_per_person: number;
+}
+
+interface BookingTypeSelectorProps {
+  bookingTypes: BookingType[];
+  selectedBookingType: string;
+  onBookingTypeChange: (typeId: string) => void;
+}
+
+const BookingTypeSelector: React.FC<BookingTypeSelectorProps> = ({
+  bookingTypes,
+  selectedBookingType,
+  onBookingTypeChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Calendar className="w-5 h-5" />
+        Select Experience
+      </h2>
+      <div className="grid gap-3">
+        {bookingTypes.map((type) => (
+          <label key={type.id} className="cursor-pointer">
+            <input
+              type="radio"
+              name="bookingType"
+              value={type.id}
+              checked={selectedBookingType === type.id}
+              onChange={(e) => onBookingTypeChange(e.target.value)}
+              className="sr-only"
+            />
+            <div className={`p-4 rounded-lg border-2 transition-all ${
+              selectedBookingType === type.id 
+                ? 'border-blue-500 bg-blue-50' 
+                : 'border-gray-200 hover:border-gray-300'
+            }`}>
+              <div className="flex justify-between items-start">
+                <div>
+                  <h3 className="font-medium text-gray-900">{type.display_name}</h3>
+                  {type.requires_payment && (
+                    <p className="text-sm text-gray-600 mt-1">
+                      ${type.price_per_person} per person
+                    </p>
+                  )}
+                </div>
+                {type.requires_payment && (
+                  <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
+                    Payment Required
+                  </span>
+                )}
+              </div>
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BookingTypeSelector;
\ No newline at end of file
diff --git a/apps/web/components/CustomerDetails.tsx b/apps/web/components/CustomerDetails.tsx
new file mode 100644
index 0000000..17658a2
--- /dev/null
+++ b/apps/web/components/CustomerDetails.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { User, Users } from 'lucide-react';
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
+
+interface CustomerDetailsProps {
+  register: UseFormRegister<FormData>;
+  errors: FieldErrors<FormData>;
+  participantsCount: number;
+  onParticipantsCountChange: (count: number) => void;
+}
+
+const CustomerDetails: React.FC<CustomerDetailsProps> = ({
+  register,
+  errors,
+  participantsCount,
+  onParticipantsCountChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <User className="w-5 h-5" />
+        Your Details
+      </h2>
+      
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Full Name *
+          </label>
+          <input
+            type="text"
+            {...register('customerName', { 
+              required: 'Full name is required',
+              minLength: { value: 2, message: 'Name must be at least 2 characters' }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerName ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your full name"
+          />
+          {errors.customerName && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerName.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Email Address *
+          </label>
+          <input
+            type="email"
+            {...register('customerEmail', { 
+              required: 'Email address is required',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: 'Please enter a valid email address'
+              }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerEmail ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your email"
+          />
+          {errors.customerEmail && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerEmail.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            Number of Participants
+          </label>
+          <div className="flex items-center justify-center bg-gray-100 rounded-lg p-1 max-w-xs">
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.max(1, participantsCount - 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount <= 1}
+            >
+              <span className="text-xl font-medium">−</span>
+            </button>
+            <div className="flex-1 text-center px-4">
+              <span className="text-xl font-semibold text-gray-900">{participantsCount}</span>
+              <div className="text-xs text-gray-500">participant{participantsCount > 1 ? 's' : ''}</div>
+            </div>
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.min(8, participantsCount + 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount >= 8}
+            >
+              <span className="text-xl font-medium">+</span>
+            </button>
+          </div>
+          <input
+            type="hidden"
+            {...register('participantsCount', { 
+              min: { value: 1, message: 'At least 1 participant required' },
+              max: { value: 8, message: 'Maximum 8 participants allowed' }
+            })}
+            value={participantsCount}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerDetails;
\ No newline at end of file
diff --git a/apps/web/components/DateSelector.tsx b/apps/web/components/DateSelector.tsx
new file mode 100644
index 0000000..9fe386c
--- /dev/null
+++ b/apps/web/components/DateSelector.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface CalendarDay {
+  date: string;
+  day: number;
+  month: string;
+  dayName: string;
+}
+
+interface DateSelectorProps {
+  selectedDate: string;
+  onDateChange: (date: string) => void;
+}
+
+const DateSelector: React.FC<DateSelectorProps> = ({
+  selectedDate,
+  onDateChange,
+}) => {
+  const generateCalendarDays = (): CalendarDay[] => {
+    const today = new Date();
+    const days = [];
+    
+    for (let i = 0; i < 14; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      days.push({
+        date: date.toISOString().split('T')[0],
+        day: date.getDate(),
+        month: date.toLocaleDateString('en', { month: 'short' }),
+        dayName: date.toLocaleDateString('en', { weekday: 'short' })
+      });
+    }
+    return days;
+  };
+
+  const calendarDays = generateCalendarDays();
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Calendar className="w-5 h-5" />
+        Choose Date
+      </h2>
+      <div className="grid grid-cols-7 gap-2 md:gap-3">
+        {calendarDays.map((day) => (
+          <button
+            key={day.date}
+            type="button"
+            onClick={() => onDateChange(day.date)}
+            className={`p-3 rounded-lg text-center transition-all ${
+              selectedDate === day.date
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <div className="text-xs font-medium">{day.dayName}</div>
+            <div className="text-sm font-semibold">{day.day}</div>
+            <div className="text-xs">{day.month}</div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DateSelector;
\ No newline at end of file
diff --git a/apps/web/components/TimeSlotSelector.tsx b/apps/web/components/TimeSlotSelector.tsx
new file mode 100644
index 0000000..52e6475
--- /dev/null
+++ b/apps/web/components/TimeSlotSelector.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Clock } from 'lucide-react';
+
+interface TimeSlot {
+  id: string;
+  start_time: string;
+  end_time: string;
+  available: boolean;
+}
+
+interface TimeSlotSelectorProps {
+  timeSlots: TimeSlot[];
+  selectedTimeSlot: string;
+  onTimeSlotChange: (slotId: string) => void;
+}
+
+const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
+  timeSlots,
+  selectedTimeSlot,
+  onTimeSlotChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Clock className="w-5 h-5" />
+        Available Times
+      </h2>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        {timeSlots.map((slot) => (
+          <button
+            key={slot.id}
+            type="button"
+            disabled={!slot.available}
+            onClick={() => onTimeSlotChange(slot.id)}
+            className={`p-3 rounded-lg text-center transition-all ${
+              !slot.available
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : selectedTimeSlot === slot.id
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <div className="font-medium">
+              {slot.start_time} - {slot.end_time}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TimeSlotSelector;
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index 7b5c546..98cb035 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,6 +19,7 @@
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.62.0",
     "tailwindcss": "^4.1.12"
   },
   "devDependencies": {
diff --git a/apps/web/types/bookings.ts b/apps/web/types/bookings.ts
index 326663b..4b58809 100644
--- a/apps/web/types/bookings.ts
+++ b/apps/web/types/bookings.ts
@@ -1,79 +1,186 @@
-// types/booking.ts
-
-export interface BookingType {
-    id: string;
-    name: string;
-    display_name: string;
-    requires_payment: boolean;
-    default_duration: number; // in minutes
-    description?: string;
-    resources: string; // relation to resources collection
-    created: string;
-    updated: string;
+// Base types for PocketBase records
+export interface BaseRecord {
+  id: string;
+  created: string;
+  updated: string;
 }
 
-export interface Resource {
-    id: string;
-    type: 'wheel' | 'workstation';
-    capacity: number;
-    is_active: boolean;
-    created: string;
-    updated: string;
+// Resource entity
+export interface Resource extends BaseRecord {
+  name: string;
+  type: 'wheel' | 'workstation';
+  capacity: number;
+  is_active: boolean;
 }
 
-export interface TimeSlot {
-    id: string;
-    booking_types: string[]; // relation to booking types
-    start_time: string;
-    end_time: string;
-    is_reccuring: boolean;
-    max_capacity: number;
-    is_active: boolean;
-    recurrence_pattern?:  {
-        type: string;
-        days: number[];
-        end_date: string;
-    };
-    created: string;
-    updated: string;
+// Booking Type entity
+export interface BookingType extends BaseRecord {
+  name: string;
+  display_name: string;
+  description?: string;
+  requires_payment?: boolean;
+  base_duration: number; // minutes, min 30
+  min_duration: number;
+  price_per_person: number;
+  resources: string; // relation to Resource
+  min_capacity: number;
+  max_capacity: number;
+  is_active: boolean;
 }
 
-export interface Booking {
-    id: string;
-    booking_type: string; // relation to booking type
-    customer_name: string;
-    customer_email: string;
-    internal_notes?: string;
-    start_time: string;
-    end_time: string;
-    participants_count: number;
-    status: 'confirmed' | 'cancelled' | 'completed';
-    payment_status: 'not_required' | 'paid' | 'refunded' | 'partially_refunded' | 'pending';
-    payment_required: boolean;
-    cancellation_token: string;
-    created: string;
-    updated: string;
+// Time Slot entity
+export interface TimeSlot extends BaseRecord {
+  booking_types: string[]; // relation to BookingType (many-to-many)
+  start_time: string;
+  end_time: string;
+  is_active: boolean;
+  is_reccuring?: boolean;
+  recurrence_pattern?: RecurrencePattern;
+  max_capacity: number;
 }
 
+// Recurrence pattern structure
+export interface RecurrencePattern {
+  type: 'daily' | 'weekly' | 'monthly';
+  interval: number;
+  days_of_week?: number[]; // 0-6, Sunday = 0
+  end_date?: string;
+  occurrences?: number;
+}
+
+// Booking entity
+export interface Booking extends BaseRecord {
+  booking_type: string; // relation to BookingType
+  customer_name: string;
+  customer_email: string;
+  internal_notes?: string;
+  start_time: string;
+  end_time: string;
+  participants_count: number;
+  status: 'confirmed' | 'cancelled' | 'completed';
+  payment_status: 'not_required' | 'paid' | 'refunded' | 'partially_refunded' | 'pending';
+  payment_required: boolean;
+  cancellation_token: string;
+  use_subscription?: string; // relation to subscription (future feature)
+}
+
+// Frontend form types
 export interface BookingFormData {
-    bookingTypeId: string;
-    customerName: string;
-    customerEmail: string;
-    participantsCount: number;
-    startTime: Date;
-    endTime: Date;
+  bookingTypeId: string;
+  customerName: string;
+  customerEmail: string;
+  startTime: string;
+  endTime: string;
+  participantsCount: number;
+  internalNotes?: string;
 }
 
-// For the booking flow state
-export interface BookingFlowState {
-    step: 'booking-type' | 'date-time' | 'customer-details' | 'confirmation';
-    selectedBookingType?: BookingType;
-    selectedDate?: Date;
-    selectedTimeSlot?: string; // time slot ID or time string
-    customerDetails?: {
-        name: string;
-        email: string;
-        participantsCount: number;
-        notes?: string;
-    };
-}
\ No newline at end of file
+// API response types
+export interface BookingResponse {
+  success: boolean;
+  booking?: Booking;
+  error?: string;
+  cancellationUrl?: string;
+}
+
+export interface AvailabilityResponse {
+  success: boolean;
+  availableSlots?: TimeSlot[];
+  error?: string;
+}
+
+// Expanded types with relations
+export interface BookingWithRelations extends Omit<Booking, 'booking_type'> {
+  expand?: {
+    booking_type?: BookingType;
+  };
+}
+
+export interface BookingTypeWithRelations extends Omit<BookingType, 'resources'> {
+  expand?: {
+    resources?: Resource;
+  };
+}
+
+export interface TimeSlotWithRelations extends Omit<TimeSlot, 'booking_types'> {
+  expand?: {
+    booking_types?: BookingType[];
+  };
+}
+
+// Utility types for API operations
+export interface CreateBookingData {
+  booking_type: string;
+  customer_name: string;
+  customer_email: string;
+  start_time: string;
+  end_time: string;
+  participants_count: number;
+  internal_notes?: string;
+  status: 'confirmed';
+  payment_status: 'not_required' | 'pending';
+  payment_required: boolean;
+}
+
+export interface UpdateBookingData {
+  status?: 'confirmed' | 'cancelled' | 'completed';
+  payment_status?: 'not_required' | 'paid' | 'refunded' | 'partially_refunded' | 'pending';
+  internal_notes?: string;
+}
+
+// Filter and query types
+export interface BookingFilters {
+  status?: string;
+  payment_status?: string;
+  booking_type?: string;
+  date_from?: string;
+  date_to?: string;
+  customer_email?: string;
+}
+
+export interface TimeSlotFilters {
+  booking_type?: string;
+  date_from?: string;
+  date_to?: string;
+  is_active?: boolean;
+}
+
+// Error types
+export interface BookingError {
+  code: string;
+  message: string;
+  field?: string;
+}
+
+// Validation types
+export interface BookingValidation {
+  isValid: boolean;
+  errors: BookingError[];
+}
+
+// Constants
+export const BOOKING_TYPES = {
+  WHEEL_RENTAL: 'wheel_rental',
+  HAND_BUILDING: 'hand_building_coworking',
+  PERSONAL_WORKSHOP: 'personal_workshop',
+  GROUP_WORKSHOP: 'group_workshop',
+} as const;
+
+export const BOOKING_STATUS = {
+  CONFIRMED: 'confirmed',
+  CANCELLED: 'cancelled',
+  COMPLETED: 'completed',
+} as const;
+
+export const PAYMENT_STATUS = {
+  NOT_REQUIRED: 'not_required',
+  PAID: 'paid',
+  REFUNDED: 'refunded',
+  PARTIALLY_REFUNDED: 'partially_refunded',
+  PENDING: 'pending',
+} as const;
+
+export const RESOURCE_TYPES = {
+  WHEEL: 'wheel',
+  WORKSTATION: 'workstation',
+} as const;
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5b15ba..f244ecc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-hook-form:
+        specifier: ^7.62.0
+        version: 7.62.0(react@19.1.0)
       tailwindcss:
         specifier: ^4.1.12
         version: 4.1.12
@@ -1437,6 +1440,12 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-hook-form@7.62.0:
+    resolution: {integrity: sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3063,6 +3072,10 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-hook-form@7.62.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   react-is@16.13.1: {}
 
   react@19.1.0: {}