diff --git a/apps/web/components/orders/components/datetime-select/components/date-select.tsx b/apps/web/components/orders/components/datetime-select/components/date-select.tsx
new file mode 100644
index 0000000..e483aa7
--- /dev/null
+++ b/apps/web/components/orders/components/datetime-select/components/date-select.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { OrderContext } from '@/context/order';
+import { Calendar } from '@repo/ui/components/ui/calendar';
+import dayjs from 'dayjs';
+import { use } from 'react';
+
+export function DateSelect() {
+  const { date: selectedDate, setDate } = use(OrderContext);
+
+  return (
+    <Calendar
+      className="bg-background"
+      disabled={(date) => {
+        return dayjs().isAfter(dayjs(date), 'day');
+      }}
+      mode="single"
+      onSelect={(date) => {
+        if (date) setDate(date);
+      }}
+      selected={selectedDate}
+    />
+  );
+}
diff --git a/apps/web/components/orders/components/datetime-select.tsx b/apps/web/components/orders/components/datetime-select/components/time-select.tsx
similarity index 77%
rename from apps/web/components/orders/components/datetime-select.tsx
rename to apps/web/components/orders/components/datetime-select/components/time-select.tsx
index ac7a18f..a27028f 100644
--- a/apps/web/components/orders/components/datetime-select.tsx
+++ b/apps/web/components/orders/components/datetime-select/components/time-select.tsx
@@ -1,33 +1,12 @@
 'use client';
-import { OrderContext } from '@/context/order';
 import { Button } from '@repo/ui/components/ui/button';
-import { Calendar } from '@repo/ui/components/ui/calendar';
 import dayjs, { type Dayjs } from 'dayjs';
-import { use } from 'react';
 
 type TimeSlotsProps = {
   endTime?: string;
   interval?: number;
   startTime?: string;
 };
-export function DateSelect() {
-  const { date: selectedDate, setDate } = use(OrderContext);
-
-  return (
-    <Calendar
-      className="bg-background"
-      disabled={(date) => {
-        return dayjs().isAfter(dayjs(date), 'day');
-      }}
-      mode="single"
-      onSelect={(date) => {
-        if (date) setDate(date);
-      }}
-      selected={selectedDate}
-    />
-  );
-}
-
 const generateTimeSlots = (start: string, end: string, interval: number): Dayjs[] => {
   const times: Dayjs[] = [];
   let currentTime = dayjs(start, 'HH:mm');
diff --git a/apps/web/components/orders/components/datetime-select/index.tsx b/apps/web/components/orders/components/datetime-select/index.tsx
new file mode 100644
index 0000000..b14110a
--- /dev/null
+++ b/apps/web/components/orders/components/datetime-select/index.tsx
@@ -0,0 +1,11 @@
+import { DateSelect } from './components/date-select';
+import { TimeSelect } from './components/time-select';
+
+export function DateTimeSelect() {
+  return (
+    <div className="space-y-4">
+      <DateSelect />
+      <TimeSelect />
+    </div>
+  );
+}
diff --git a/apps/web/components/orders/order-form.tsx b/apps/web/components/orders/order-form.tsx
index 5e03b4c..68add5e 100644
--- a/apps/web/components/orders/order-form.tsx
+++ b/apps/web/components/orders/order-form.tsx
@@ -2,11 +2,10 @@
 import {
   BackButton,
   ClientsGrid,
-  DateSelect,
+  DateTimeSelect,
   MastersGrid,
   ServiceSelect,
   SubmitButton,
-  TimeSelect,
 } from './components';
 import { OrderContext, OrderContextProvider } from '@/context/order';
 import { withContext } from '@/utils/context';
@@ -14,12 +13,7 @@ import { type JSX, use } from 'react';
 
 const STEP_COMPONENTS: Record<string, JSX.Element> = {
   'client-select': <ClientsGrid />,
-  'datetime-select': (
-    <>
-      <DateSelect />
-      <TimeSelect />
-    </>
-  ),
+  'datetime-select': <DateTimeSelect />,
   'master-select': <MastersGrid />,
   'service-select': <ServiceSelect />,
 };