diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
index 4b602b0..c31419a 100644
--- a/src/pages/home/home.tsx
+++ b/src/pages/home/home.tsx
@@ -1,7 +1,6 @@
-import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { ProgressCard } from '@/pages/home/progress/ProgressCard'
 import { BottomSheetDialog } from '@/components/BottomSheetDialog/BottomSheetDialog'
-import type { Appointment } from '@/components/BottomSheetDialog/types'
 import { DailyTips } from './dailyTips/DailyTips'
 import { CheckIn } from './checkIn/CheckIn'
 import { HomeButtomDesktop, HomeButtomMobile, HomeTopDesktop, HomeTopMobile } from './styles'
@@ -10,17 +9,27 @@ import { SGLTypography } from '@/components/UI/Typography/SGLTypography'
 import { useTranslation } from 'react-i18next'
 import { useIsMobile } from '@/hooks/useIsMobile'
 import { Welcome } from './welcome/Welcome'
+import { apiService } from '@/services/api/api.service'
+import { useState } from 'react'
+import type { Appointment } from '@/components/BottomSheetDialog/types'
 
 export const Home = () => {
-  const [selectedAppointment, setSelectedAppointment] = useState<Appointment | undefined>({
-    appointmentId: '1',
-    patientId: 1622017,
-    time: '10:12:50',
-    date: '2026-05-15',
-    chamber: 'appointment.chamber.hyperbaric',
-    chairNumber: 9,
-    treatmentNumber: 2,
-    status: 'confirmed',
+  const [selectedAppointment, setSelectedAppointment] = useState<boolean>(true)
+
+  const patientID = '1622017'
+  const date = '07-06-2026'
+
+  const { data: appointment } = useQuery({
+    queryKey: ['nextAppointment', patientID, date],
+    queryFn: async () => {
+      const response = await apiService.get<Appointment>('/api/appointment/nextAppointment', {
+        params: {
+          patientID,
+          date,
+        },
+      })
+      return response
+    },
   })
 
   const { t } = useTranslation()
@@ -29,9 +38,9 @@ export const Home = () => {
   return (
     <>
       <BottomSheetDialog
-        appointment={selectedAppointment}
-        isOpen={!!selectedAppointment}
-        onClose={() => setSelectedAppointment(undefined)}
+        appointment={appointment}
+        isOpen={selectedAppointment && !!appointment}
+        onClose={() => setSelectedAppointment(false)}
       />
       <div style={isMobile ? HomeTopMobile : HomeTopDesktop}>
         <Welcome />