diff --git a/apps/web/components/orders/components/contacts-grid.tsx b/apps/web/components/orders/components/contacts-grid.tsx
index ed2b800..1db5425 100644
--- a/apps/web/components/orders/components/contacts-grid.tsx
+++ b/apps/web/components/orders/components/contacts-grid.tsx
@@ -10,11 +10,9 @@ import Image from 'next/image';
 import { use } from 'react';
 
 export function ContactsGrid() {
-  const { customerId: selected, setCustomerId: setSelected, step } = use(OrderContext);
+  const { customerId: selected, setCustomerId: setSelected } = use(OrderContext);
   const { contacts, isLoading } = useCustomerContacts();
 
-  if (step !== 'customer-select') return null;
-
   if (isLoading) return <LoadingSpinner />;
 
   function handleOnSelect(contactId: string) {
diff --git a/apps/web/components/orders/components/datetime-select.tsx b/apps/web/components/orders/components/datetime-select.tsx
index ebcacc8..ac7a18f 100644
--- a/apps/web/components/orders/components/datetime-select.tsx
+++ b/apps/web/components/orders/components/datetime-select.tsx
@@ -11,9 +11,7 @@ type TimeSlotsProps = {
   startTime?: string;
 };
 export function DateSelect() {
-  const { date: selectedDate, setDate, step } = use(OrderContext);
-
-  if (step !== 'datetime-select') return null;
+  const { date: selectedDate, setDate } = use(OrderContext);
 
   return (
     <Calendar
@@ -48,10 +46,6 @@ export function TimeSelect({
   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);
diff --git a/apps/web/components/orders/components/service-select.tsx b/apps/web/components/orders/components/service-select.tsx
index 0e10985..4410799 100644
--- a/apps/web/components/orders/components/service-select.tsx
+++ b/apps/web/components/orders/components/service-select.tsx
@@ -6,11 +6,8 @@ import { cn } from '@repo/ui/lib/utils';
 import { use } from 'react';
 
 export function ServiceSelect() {
-  const { step } = use(OrderContext);
   const { data } = useServicesQuery();
 
-  if (step !== 'service-select') return null;
-
   return data?.data.services.map(
     (service) => service && <ServiceCard key={service.documentId} {...service} />,
   );
diff --git a/apps/web/components/orders/order-form.tsx b/apps/web/components/orders/order-form.tsx
index e90c035..904b295 100644
--- a/apps/web/components/orders/order-form.tsx
+++ b/apps/web/components/orders/order-form.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   BackButton,
   ContactsGrid,
@@ -6,21 +7,35 @@ import {
   SubmitButton,
   TimeSelect,
 } from './components';
-import { OrderContextProvider } from '@/context/order';
+import { OrderContext, OrderContextProvider } from '@/context/order';
+import { withContext } from '@/utils/context';
+import { type JSX, use } from 'react';
+
+const STEP_COMPONENTS: Record<string, JSX.Element> = {
+  'customer-select': <ContactsGrid />,
+  'datetime-select': (
+    <>
+      <DateSelect />
+      <TimeSelect />
+    </>
+  ),
+  'service-select': <ServiceSelect />,
+};
+
+function getStepComponent(step: string) {
+  return STEP_COMPONENTS[step] ?? null;
+}
+
+export const OrderForm = withContext(OrderContextProvider)(function () {
+  const { step } = use(OrderContext);
 
-export function OrderForm() {
   return (
     <div className="space-y-4 [&>*]:px-4">
-      <OrderContextProvider>
-        <ContactsGrid />
-        <ServiceSelect />
-        <DateSelect />
-        <TimeSelect />
-        <div className="space-y-2">
-          <SubmitButton />
-          <BackButton />
-        </div>
-      </OrderContextProvider>
+      {getStepComponent(step)}
+      <div className="space-y-2">
+        <SubmitButton />
+        <BackButton />
+      </div>
     </div>
   );
-}
+});