diff --git a/apps/web/components/orders/components/datetime-select.tsx b/apps/web/components/orders/components/datetime-select.tsx
index 8a40a2e..ebcacc8 100644
--- a/apps/web/components/orders/components/datetime-select.tsx
+++ b/apps/web/components/orders/components/datetime-select.tsx
@@ -6,30 +6,27 @@ import dayjs, { type Dayjs } from 'dayjs';
 import { use } from 'react';
 
 type TimeSlotsProps = {
-  endTime: string;
+  endTime?: string;
   interval?: number;
-  startTime: string;
+  startTime?: string;
 };
-export function DateTimeSelect() {
-  const { step } = use(OrderContext);
+export function DateSelect() {
+  const { date: selectedDate, setDate, step } = use(OrderContext);
 
   if (step !== 'datetime-select') return null;
 
   return (
-    <div className="space-y-4">
-      <Calendar
-        className="bg-background"
-        disabled={(date) => {
-          return dayjs().isAfter(dayjs(date), 'day');
-        }}
-        mode="single"
-        // onSelect={(date) => {
-        //   if (date) setSelectedDate(date);
-        // }}
-        // selected={selectedDate}
-      />
-      <TimeSlots endTime="2025-03-10T20:00:00" interval={30} startTime="2025-03-10T09:00:00" />
-    </div>
+    <Calendar
+      className="bg-background"
+      disabled={(date) => {
+        return dayjs().isAfter(dayjs(date), 'day');
+      }}
+      mode="single"
+      onSelect={(date) => {
+        if (date) setDate(date);
+      }}
+      selected={selectedDate}
+    />
   );
 }
 
@@ -46,7 +43,15 @@ const generateTimeSlots = (start: string, end: string, interval: number): Dayjs[
   return times;
 };
 
-function TimeSlots({ endTime, interval = 30, startTime }: Readonly<TimeSlotsProps>) {
+export function TimeSelect({
+  endTime = '2025-03-10T20:00:00',
+  interval = 30,
+  startTime = '2025-03-10T09:00:00',
+}: Readonly<TimeSlotsProps>) {
+  const { step } = use(OrderContext);
+
+  if (step !== 'datetime-select') return null;
+
   const timeSlots = generateTimeSlots(startTime, endTime, interval);
 
   const morning = timeSlots.filter((time) => time.hour() < 12);
@@ -63,6 +68,8 @@ function TimeSlots({ endTime, interval = 30, startTime }: Readonly<TimeSlotsProp
 }
 
 function TimeSlotsButtons({ times, title }: Readonly<{ times: Dayjs[]; title: string }>) {
+  if (!times.length) return null;
+
   return (
     <div className="space-y-2">
       <h2 className="text-lg font-semibold">{title}</h2>
diff --git a/apps/web/components/orders/order-form.tsx b/apps/web/components/orders/order-form.tsx
index dda91cd..8129b06 100644
--- a/apps/web/components/orders/order-form.tsx
+++ b/apps/web/components/orders/order-form.tsx
@@ -1,9 +1,10 @@
 import {
   BackButton,
   ContactsGrid,
-  DateTimeSelect,
+  DateSelect,
   ServiceSelect,
   SubmitButton,
+  TimeSelect,
 } from './components';
 import { OrderContextProvider } from '@/context/order';
 
@@ -13,7 +14,8 @@ export function OrderForm() {
       <OrderContextProvider>
         <ContactsGrid />
         <ServiceSelect />
-        <DateTimeSelect />
+        <DateSelect />
+        <TimeSelect />
         <div className="space-y-2">
           <SubmitButton />
           <BackButton />
diff --git a/apps/web/context/order.tsx b/apps/web/context/order.tsx
index 3fead74..65409b0 100644
--- a/apps/web/context/order.tsx
+++ b/apps/web/context/order.tsx
@@ -5,13 +5,17 @@ type Action = { payload: Steps; type: 'SET_STEP' } | { type: 'NEXT_STEP' } | { t
 
 type ContextType = {
   customerId: null | string;
+  date: Date;
   nextStep: () => void;
   prevStep: () => void;
   serviceId: null | string;
   setCustomerId: (customerId: string) => void;
+  setDate: (date: Date) => void;
   setServiceId: (serviceId: string) => void;
   setStep: (step: Steps) => void;
+  setTime: (time: string) => void;
   step: Steps;
+  time: null | string;
 };
 
 type State = { step: Steps };
@@ -67,11 +71,29 @@ export function OrderContextProvider({ children }: Readonly<PropsWithChildren>)
   const { entityId: customerId, setEntityId: setCustomerId } = useEntityState();
   const { entityId: serviceId, setEntityId: setServiceId } = useEntityState();
 
+  const [date, setDate] = useState<Date>(new Date());
+  const [time, setTime] = useState<null | string>(null);
+
   const { nextStep, prevStep, setStep, step } = useStep();
 
   const value = useMemo(
     () => ({
       customerId,
+      date,
+      nextStep,
+      prevStep,
+      serviceId,
+      setCustomerId,
+      setDate,
+      setServiceId,
+      setStep,
+      setTime,
+      step,
+      time,
+    }),
+    [
+      customerId,
+      date,
       nextStep,
       prevStep,
       serviceId,
@@ -79,8 +101,8 @@ export function OrderContextProvider({ children }: Readonly<PropsWithChildren>)
       setServiceId,
       setStep,
       step,
-    }),
-    [customerId, nextStep, prevStep, serviceId, setCustomerId, setServiceId, setStep, step],
+      time,
+    ],
   );
 
   return <OrderContext.Provider value={value}>{children}</OrderContext.Provider>;