diff --git a/suncityla/app/booking/actions/onSubmitAction.ts b/suncityla/app/booking/actions/onSubmitAction.ts
index 517747b..5f16fc2 100644
--- a/suncityla/app/booking/actions/onSubmitAction.ts
+++ b/suncityla/app/booking/actions/onSubmitAction.ts
@@ -39,7 +39,6 @@ const onSubmitAction = async (prvState: FormState, data: FormData): Promise<Form
         state: parsed.data.state,
         postalCode: parsed.data['postal-code'],
         bookingDate: parsed.data.bookingDate,
-        bookingTime: parsed.data.bookingTime,
       },
     });
   } else {
@@ -51,7 +50,6 @@ const onSubmitAction = async (prvState: FormState, data: FormData): Promise<Form
         state: parsed.data.state,
         postalCode: parsed.data['postal-code'],
         bookingDate: parsed.data.bookingDate,
-        bookingTime: parsed.data.bookingTime,
       },
     });
   }
diff --git a/suncityla/app/booking/components/BookingCard/BookingEntry.tsx b/suncityla/app/booking/components/BookingCard/BookingEntry.tsx
index ad8168a..71084d3 100644
--- a/suncityla/app/booking/components/BookingCard/BookingEntry.tsx
+++ b/suncityla/app/booking/components/BookingCard/BookingEntry.tsx
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { add, format } from 'date-fns';
 import { Booking } from '@prisma/client';
 import {
   Table,
@@ -40,8 +40,11 @@ const BookingEntry = ({ booking }: { booking: Booking }) => {
           <TableRow>
             <TableCell>{booking.firstname}</TableCell>
             <TableCell>{booking.lastname}</TableCell>
-            <TableCell>{format(new Date(booking.bookingDate), 'yyyy-MM-dd')}</TableCell>
-            <TableCell>{booking.bookingTime}</TableCell>
+            <TableCell>{format(new Date(booking.bookingDate), 'EE dd/MM/yy')}</TableCell>
+            <TableCell>{`${format(new Date(booking.bookingDate), 'h:mm a')} - ${format(
+              add(new Date(booking.bookingDate), { hours: 1 }),
+              'h:mm a',
+            )}`}</TableCell>
             <TableCell>{booking.streetAddress}</TableCell>
             <TableCell>{booking.postalCode}</TableCell>
             <TableCell>{booking.state}</TableCell>
diff --git a/suncityla/app/booking/components/BookingForm/BookingForm.tsx b/suncityla/app/booking/components/BookingForm/BookingForm.tsx
index c154264..d5f1228 100644
--- a/suncityla/app/booking/components/BookingForm/BookingForm.tsx
+++ b/suncityla/app/booking/components/BookingForm/BookingForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useActionState, useRef, startTransition, useEffect } from 'react';
+import { useActionState, useRef, startTransition, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -14,7 +14,8 @@ import onSubmitAction from '@/app/booking/actions/onSubmitAction';
 import { bookingFormSchema } from '../../schemas/newBookingForm';
 import { Booking } from '@prisma/client';
 import TimeSelect from '../TimeSelect/TimeSelect';
-import availableTimes from '../TimeSelect/times';
+import createAvailableTimes from '../TimeSelect/times';
+import { set } from 'date-fns';
 
 export type BookingFormData = z.infer<typeof bookingFormSchema>;
 
@@ -34,16 +35,21 @@ export default function BookingForm({ booking }: { booking?: Booking | null }) {
       'street-address': booking?.streetAddress ?? '',
       'postal-code': booking?.postalCode ?? '',
       state: 'LA',
-      bookingDate: booking?.bookingDate.toISOString() ?? new Date().toISOString(),
-      bookingTime: booking?.bookingTime || availableTimes[0].time,
+      bookingDate: booking?.bookingDate.toISOString() || '',
       ...(state.fields ?? {}),
     },
   });
 
+  // Time Stamp
+  const [time, setSelectedTime] = useState<number | undefined>(booking?.bookingDate.getTime());
+  const watchDate = form.watch('bookingDate');
+  const availableTimes = createAvailableTimes(new Date(watchDate));
+
   const formRef = useRef<HTMLFormElement>(null);
 
   const handleClearForm = () => {
     form.reset();
+    setSelectedTime(undefined);
   };
 
   useEffect(() => {
@@ -52,6 +58,16 @@ export default function BookingForm({ booking }: { booking?: Booking | null }) {
     }
   }, [state.bookingRef, isPending, router, state.message]);
 
+  useEffect(() => {
+    if (time) {
+      const newDateWithTime = new Date(watchDate);
+      const hours = new Date(time).getHours();
+      newDateWithTime.setHours(hours);
+      form.setValue('bookingDate', newDateWithTime.toISOString());
+      return;
+    }
+  }, [watchDate, time, form]);
+
   return (
     <div className="w-96 border p-4 bg-slate-100 rounded-md">
       <LoadingModal show={isPending} />
@@ -78,13 +94,21 @@ export default function BookingForm({ booking }: { booking?: Booking | null }) {
           <BookingFormField placeholder="Address" name="street-address" />
           <BookingFormField placeholder="Postcode" name="postal-code" />
           <BookingFormField placeholder="State" name="state" disabled />
-          <DateTimePickerForm />
-          <TimeSelect />
+          <DateTimePickerForm onChange={() => setSelectedTime(undefined)} />
+          {watchDate && (
+            <TimeSelect
+              selectedTime={time}
+              availableTimes={availableTimes}
+              onTimeSelect={setSelectedTime}
+            />
+          )}
           <div className="flex gap-1 justify-end mt-4">
-            <Button onClick={handleClearForm} variant="outline">
-              Clear
-            </Button>
-            <Button type="submit" disabled={form.formState.isSubmitting}>
+            {!booking?.id && (
+              <Button onClick={handleClearForm} variant="outline">
+                Clear
+              </Button>
+            )}
+            <Button type="submit" disabled={form.formState.isSubmitting || !time}>
               Submit
             </Button>
           </div>
diff --git a/suncityla/app/booking/components/TimeDatePicker/TimeDatePicker.tsx b/suncityla/app/booking/components/TimeDatePicker/TimeDatePicker.tsx
index 4505cd7..462aff7 100644
--- a/suncityla/app/booking/components/TimeDatePicker/TimeDatePicker.tsx
+++ b/suncityla/app/booking/components/TimeDatePicker/TimeDatePicker.tsx
@@ -1,25 +1,21 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { useState } from 'react';
+import { format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormMessage,
-} from "@/components/ui/form";
+} from '@/components/ui/form';
 
-export function DateTimePickerForm() {
+export function DateTimePickerForm({ onChange }: { onChange: () => void }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -34,16 +30,12 @@ export function DateTimePickerForm() {
                   onClick={() => setOpen(true)}
                   variant="outline"
                   className={cn(
-                    "w-full justify-start font-normal",
-                    !field.value && "text-muted-foreground"
+                    'w-full justify-start font-normal',
+                    !field.value && 'text-muted-foreground',
                   )}
                 >
                   <CalendarIcon className="mr-2 h-4 w-4" />
-                  {field.value ? (
-                    format(field.value, "PPP")
-                  ) : (
-                    <span>Pick a date</span>
-                  )}
+                  {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
                 </Button>
               </PopoverTrigger>
             </FormControl>
@@ -54,17 +46,12 @@ export function DateTimePickerForm() {
                 onSelect={(date) => {
                   field.onChange(date?.toISOString());
                   setOpen(false);
+                  onChange();
                 }}
-                initialFocus
               />
             </PopoverContent>
           </Popover>
-          <input
-            type="hidden"
-            {...field}
-            name={field.name}
-            value={field.value}
-          />
+          <input type="hidden" {...field} name={field.name} value={field.value} />
           <FormDescription />
           <FormMessage />
         </FormItem>
diff --git a/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx b/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx
index 0a66f23..7a41e70 100644
--- a/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx
+++ b/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {
@@ -9,34 +11,47 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import availableTimes from './times';
 import { FormField, FormItem } from '@/components/ui/form';
+import { format } from 'date-fns';
 
-export function TimeSelect() {
+export function TimeSelect({
+  availableTimes,
+  selectedTime,
+  onTimeSelect,
+}: {
+  availableTimes: { from: number; to: number }[];
+  selectedTime?: number;
+  onTimeSelect: (time: number) => void;
+}) {
   return (
     <FormField
-      name="bookingTime"
-      render={({ field }) => (
-        <FormItem>
-          <Select {...field} onValueChange={field.onChange}>
-            <SelectTrigger className="w-[180px] bg-white">
-              <SelectValue placeholder="Select a time" />
-            </SelectTrigger>
-            <div className="bg-white">
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Times</SelectLabel>
-                  {availableTimes.map(({ time }) => (
-                    <SelectItem key={time} value={time}>
-                      {time}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </div>
-          </Select>
-        </FormItem>
-      )}
+      name=""
+      render={() => {
+        return (
+          <FormItem>
+            <Select
+              onValueChange={(time) => onTimeSelect(Number(time))}
+              value={selectedTime?.toString()}
+            >
+              <SelectTrigger className="w-[180px] bg-white">
+                <SelectValue placeholder="Select a time" />
+              </SelectTrigger>
+              <div className="bg-white">
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Times</SelectLabel>
+                    {availableTimes.map(({ from, to }, i) => (
+                      <SelectItem className="cursor-pointer" key={i} value={from.toString()}>
+                        {format(from, 'h:mm a')} - {format(to, 'h:mm a')}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </div>
+            </Select>
+          </FormItem>
+        );
+      }}
     />
   );
 }
diff --git a/suncityla/app/booking/components/TimeSelect/times.ts b/suncityla/app/booking/components/TimeSelect/times.ts
index 213e835..fcf93d5 100644
--- a/suncityla/app/booking/components/TimeSelect/times.ts
+++ b/suncityla/app/booking/components/TimeSelect/times.ts
@@ -1,18 +1,12 @@
-const availableTimes = [
-  { time: '8:00 - 9:00 AM' },
-  { time: '9:00 - 10:00 AM' },
-  { time: '10:00 - 11:00 AM' },
-  { time: '11:00 - 12:00 PM' },
-  { time: '12:00 - 1:00 PM' },
-  { time: '1:00 - 2:00 PM' },
-  { time: '2:00 - 3:00 PM' },
-  { time: '3:00 - 4:00 PM' },
-  { time: '4:00 - 5:00 PM' },
-  { time: '5:00 - 6:00 PM' },
-  { time: '6:00 - 7:00 PM' },
-  { time: '7:00 - 8:00 PM' },
-  { time: '8:00 - 9:00 PM' },
-  { time: '9:00 - 10:00 PM' },
-];
+const createAvailableTimes = (date: Date) => {
+  const availableTimes = [];
+  for (let i = 8; i < 20; i++) {
+    availableTimes.push({
+      from: date.setHours(i, 0, 0, 0),
+      to: date.setHours(i + 1, 0, 0, 0),
+    });
+  }
+  return availableTimes;
+};
 
-export default availableTimes;
+export default createAvailableTimes;
diff --git a/suncityla/app/booking/schemas/newBookingForm.ts b/suncityla/app/booking/schemas/newBookingForm.ts
index 2d33740..e8610a8 100644
--- a/suncityla/app/booking/schemas/newBookingForm.ts
+++ b/suncityla/app/booking/schemas/newBookingForm.ts
@@ -31,6 +31,5 @@ export const bookingFormSchema = z.object({
       message: 'Booking date must be in the future.',
     },
   ),
-  bookingTime: z.string(),
   bookingId: z.string().optional(),
 });
diff --git a/suncityla/components/ui/calendar.tsx b/suncityla/components/ui/calendar.tsx
index d465dc8..037ce79 100644
--- a/suncityla/components/ui/calendar.tsx
+++ b/suncityla/components/ui/calendar.tsx
@@ -1,67 +1,60 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
 
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn('p-3', className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
         cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md',
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+          buttonVariants({ variant: 'ghost' }),
+          'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
         ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
+        day_range_start: 'day-range-start',
+        day_range_end: 'day-range-end',
         day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
         day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+          'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
         Chevron(props) {
-          if (props.orientation === "left") {
+          if (props.orientation === 'left') {
             return <ChevronLeft className="h-4 w-4" {...props} />;
           }
           return <ChevronRight className="h-4 w-4" {...props} />;
@@ -71,6 +64,6 @@ function Calendar({
     />
   );
 }
-Calendar.displayName = "Calendar";
+Calendar.displayName = 'Calendar';
 
 export { Calendar };
diff --git a/suncityla/prisma/migrations/20241206173508_remove_bookingtime_column/migration.sql b/suncityla/prisma/migrations/20241206173508_remove_bookingtime_column/migration.sql
new file mode 100644
index 0000000..f0d702d
--- /dev/null
+++ b/suncityla/prisma/migrations/20241206173508_remove_bookingtime_column/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `bookingTime` on the `Booking` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Booking" DROP COLUMN "bookingTime";
diff --git a/suncityla/prisma/schema.prisma b/suncityla/prisma/schema.prisma
index 0d2f795..0f1eb63 100644
--- a/suncityla/prisma/schema.prisma
+++ b/suncityla/prisma/schema.prisma
@@ -95,7 +95,6 @@ model Booking {
   postalCode    String
   state         String
   bookingDate   DateTime
-  bookingTime   String?
   status        BookingStatus @default(PENDING)
 }