diff --git a/src/app/solicitud/page.js b/src/app/solicitud/page.js
deleted file mode 100644
index 861953ab..00000000
--- a/src/app/solicitud/page.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ArrowLeft } from 'lucide-react';
-import Link from 'next/link';
-
-export default function Solicitud() {
-  return (
-    <div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
-      <div className="flex justify-start">
-        <Link
-          className="flex flex-row items-center px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
-          href="/casos-activos/solicitudes"
-        >
-          <ArrowLeft className="w-4 h-4 mr-2" />
-          Volver
-        </Link>
-      </div>
-      <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-        <p className="text-red-700">No se encontró la solicitud.</p>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/solicitud/[id]/page.js b/src/app/solicitudes/[id]/page.tsx
similarity index 70%
rename from src/app/solicitud/[id]/page.js
rename to src/app/solicitudes/[id]/page.tsx
index 328b35f2..72bd429f 100644
--- a/src/app/solicitud/[id]/page.js
+++ b/src/app/solicitudes/[id]/page.tsx
@@ -1,37 +1,33 @@
 'use client';
-import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
-import { supabase } from '@/lib/supabase/client';
 import { ArrowLeft } from 'lucide-react';
 import SolicitudCard from '@/components/SolicitudCard';
 import { useTowns } from '@/context/TownProvider';
+import { useQuery } from '@tanstack/react-query';
+import { HelpRequestData } from '@/types/Requests';
+import { helpRequestService } from '@/lib/service';
 
 export default function CasoDetalle() {
   const params = useParams();
   const { id } = params;
-  const [caso, setCaso] = useState(null);
   const towns = useTowns();
-  const [loading, setLoading] = useState(true);
-  useEffect(() => {
-    async function fetchCaso() {
-      const { data, error } = await supabase.from('help_requests').select('*').eq('id', id).single();
-      if (error) {
-        console.error('Error fetching caso:', error);
-      } else {
-        setCaso(data);
-      }
-      setLoading(false);
-    }
-    fetchCaso();
-  }, [id]);
-  if (loading) {
+  const {
+    data: request,
+    isLoading,
+    error,
+  } = useQuery<HelpRequestData>({
+    queryKey: ['help_requests', { id: id }],
+    queryFn: () => helpRequestService.getOne(Number(id)),
+  });
+
+  if (isLoading) {
     return (
       <div className="flex justify-center items-center min-h-screen">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
       </div>
     );
   }
-  if (!caso) {
+  if (error || request === undefined) {
     return (
       <div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
         <div className="flex justify-start">
@@ -60,7 +56,7 @@ export default function CasoDetalle() {
           Volver
         </button>
       </div>
-      <SolicitudCard key={caso.id} caso={caso} towns={towns} showLink={false} showEdit={true} />
+      <SolicitudCard caso={request} towns={towns} showLink={false} showEdit={true} />
     </div>
   );
 }