diff --git a/package-lock.json b/package-lock.json
index 5614eae9..f1c15463 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,13 +12,15 @@
         "@react-google-maps/api": "^2.20.3",
         "@supabase/ssr": "^0.5.1",
         "@supabase/supabase-js": "^2.46.1",
+        "@tanstack/react-query": "^5.59.19",
         "deck.gl": "^9.0.34",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.454.0",
         "maplibre-gl": "^4.7.1",
         "next": "15.0.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "sonner": "^1.7.0"
       },
       "devDependencies": {
         "@types/node": "^22.8.7",
@@ -1291,6 +1293,32 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.20.tgz",
+      "integrity": "sha512-e8vw0lf7KwfGe1if4uPFhvZRWULqHjFcz3K8AebtieXvnMOz5FSzlZe3mTLlPuUBcydCnBRqYs2YJ5ys68wwLg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.20.tgz",
+      "integrity": "sha512-Zly0egsK0tFdfSbh5/mapSa+Zfc3Et0Zkar7Wo5sQkFzWyB3p3uZWOHR2wrlAEEV2L953eLuDBtbgFvMYiLvUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.59.20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@turf/boolean-clockwise": {
       "version": "5.1.5",
       "license": "MIT",
@@ -6021,6 +6049,16 @@
       "version": "0.6.1",
       "license": "MIT"
     },
+    "node_modules/sonner": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.0.tgz",
+      "integrity": "sha512-W6dH7m5MujEPyug3lpI2l3TC3Pp1+LTgK0Efg+IHDrBbtEjyCmCHHo6yfNBOsf1tFZ6zf+jceWwB38baC8yO9g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/sortablejs": {
       "version": "1.15.3",
       "license": "MIT",
@@ -6988,6 +7026,111 @@
       "version": "0.1.5",
       "license": "MIT",
       "optional": true
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.2.tgz",
+      "integrity": "sha512-KUpBVxIbjzFiUZhiLIpJiBoelqzQtVZbdNNsehhUn36e2YzKHphnK8eTUW1s/4aPy5kH/UTid8IuVbaOpedhpw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.2.tgz",
+      "integrity": "sha512-9J7TPEcHNAZvwxXRzOtiUvwtTD+fmuY0l7RErf8Yyc7kMpE47MIQakl+3jecmkhOoIyi/Rp+ddq7j4wG6JDskQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.2.tgz",
+      "integrity": "sha512-BjH4ZSzJIoTTZRh6rG+a/Ry4SW0HlizcPorqNBixBWc3wtQtj4Sn9FnRZe22QqrPnzoaW0ctvSz4FaH4eGKMww==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.2.tgz",
+      "integrity": "sha512-i3U2TcHgo26sIhcwX/Rshz6avM6nizrZPvrDVDY1bXcLH1ndjbO8zuC7RoHp0NSK7wjJMPYzm7NYL1ksSKFreA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.2.tgz",
+      "integrity": "sha512-AMfZfSVOIR8fa+TXlAooByEF4OB00wqnms1sJ1v+iu8ivwvtPvnkwdzzFMpsK5jA2S9oNeeQ04egIWVb4QWmtQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.2.tgz",
+      "integrity": "sha512-JkXysDT0/hEY47O+Hvs8PbZAeiCQVxKfGtr4GUpNAhlG2E0Mkjibuo8ryGD29Qb5a3IOnKYNoZlh/MyKd2Nbww==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.2.tgz",
+      "integrity": "sha512-foaUL0NqJY/dX0Pi/UcZm5zsmSk5MtP/gxx3xOPyREkMFN+CTjctPfu3QaqrQHinaKdPnMWPJDKt4VjDfTBe/Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 219112dc..51a26afc 100644
--- a/package.json
+++ b/package.json
@@ -15,13 +15,15 @@
     "@react-google-maps/api": "^2.20.3",
     "@supabase/ssr": "^0.5.1",
     "@supabase/supabase-js": "^2.46.1",
+    "@tanstack/react-query": "^5.59.19",
     "deck.gl": "^9.0.34",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.454.0",
     "maplibre-gl": "^4.7.1",
     "next": "15.0.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sonner": "^1.7.0"
   },
   "devDependencies": {
     "@types/node": "^22.8.7",
@@ -32,9 +34,9 @@
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
     "prettier": "3.3.3",
+    "supabase": "^1.215.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.6.3",
-    "supabase": "^1.215.0"
+    "typescript": "^5.6.3"
   },
   "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
 }
diff --git a/src/app/auth/page.js b/src/app/auth/page.js
index 8d286b37..5397547f 100644
--- a/src/app/auth/page.js
+++ b/src/app/auth/page.js
@@ -18,7 +18,7 @@ export default function AuthPage() {
   });
 
   return (
-    <section className="m-16">
+    <section className="mx-6 lg:m-16">
       <Login onSuccessCallback={() => (window.location.href = '/')} />
     </section>
   );
diff --git a/src/app/layout.js b/src/app/layout.tsx
similarity index 50%
rename from src/app/layout.js
rename to src/app/layout.tsx
index ff84eee2..3513c0bf 100644
--- a/src/app/layout.js
+++ b/src/app/layout.tsx
@@ -2,19 +2,18 @@ import './globals.css';
 import 'leaflet/dist/leaflet.css';
 import EmergencyLayout from '@/components/layout/EmergencyLayout';
 import { EmergencyProvider } from '@/context/EmergencyProvider';
-import { TownsProvider } from '../context/TownProvider';
+import { TownsProvider } from '@/context/TownProvider';
 import { createClient } from '@/lib/supabase/server';
-import { SessionProvider } from '../context/SessionProvider';
+import { SessionProvider } from '@/context/SessionProvider';
+import { townsService } from '@/lib/service';
+import { Toaster } from 'sonner';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@/context/QueryClientProvider';
 
 export const metadata = {
   title: 'Ajuda Dana - Sistema de Coordinación',
   description: 'Sistema de coordinación para emergencias en la Comunidad Valenciana',
 };
-const getTowns = async () => {
-  const supabase = await createClient();
-  const { data, error } = await supabase.from('towns').select('id, name');
-  return data;
-};
 
 const getSession = async () => {
   const supabase = await createClient();
@@ -22,18 +21,21 @@ const getSession = async () => {
   return data;
 };
 
-export default async function RootLayout({ children }) {
+export default async function RootLayout({ children }: PropsWithChildren) {
   const session = await getSession();
-  const towns = await getTowns();
+  const towns = await townsService.getTowns();
   return (
     <html lang="es">
       <body suppressHydrationWarning={true}>
+        <Toaster position="bottom-left" richColors />
         <SessionProvider session={session}>
-          <TownsProvider towns={towns}>
-            <EmergencyProvider>
-              <EmergencyLayout>{children}</EmergencyLayout>
-            </EmergencyProvider>
-          </TownsProvider>
+          <QueryClientProvider>
+            <TownsProvider towns={towns}>
+              <EmergencyProvider>
+                <EmergencyLayout>{children}</EmergencyLayout>
+              </EmergencyProvider>
+            </TownsProvider>
+          </QueryClientProvider>
         </SessionProvider>
       </body>
     </html>
diff --git a/src/app/politica-privacidad/page.tsx b/src/app/politica-privacidad/page.tsx
new file mode 100644
index 00000000..b7cf0c76
--- /dev/null
+++ b/src/app/politica-privacidad/page.tsx
@@ -0,0 +1,119 @@
+export default function politicaPrivacidad() {
+  return (
+    <div className="flex flex-col gap-6 [&>article>h2]:text-xl [&>article>h2]:font-semibold [&>article>h2]:mb-2 [&>article>p>a]:text-blue-500 [&>article>ul]:list-disc [&>article>ul]:ml-5">
+      <h1 className="text-center text-4xl font-bold">Politica de privacidad</h1>
+      <article>
+        <h2>1. Datos Personales que Recopilamos</h2>
+        <p>
+          Recopilamos datos personales para facilitar el contacto entre personas que ofrecen ayuda sin ánimo de lucro y
+          aquellas que la necesitan en las zonas afectadas por catástrofes naturales. Los datos recopilados incluyen:
+        </p>
+        <ul>
+          <li>
+            Datos obligatorios: correo electrónico para el registro y ubicación aproximada (barrio o área general).
+          </li>
+          <li>Datos opcionales: número de teléfono y descripción de las necesidades de ayuda.</li>
+        </ul>
+        <p>
+          Nota: No proporciones ningún dato que no esté indicado en el formulario, como nombre completo, DNI o cuentas
+          bancarias.
+        </p>
+      </article>
+      <article>
+        <h2>2. Finalidad y Base Legal del Tratamiento de Datos</h2>
+        <ul>
+          <li>Finalidad: Facilitar la conexión entre personas que ofrecen y requieren ayuda en las áreas afectadas.</li>
+          <li>
+            Base legal: El tratamiento de los datos se basa en el consentimiento expreso del usuario, otorgado al
+            registrarse y rellenar el formulario de solicitud de ayuda.
+          </li>
+        </ul>
+      </article>
+      <article>
+        <h2>3. Consentimiento para la Recopilación y Publicación de Datos</h2>
+        <p>
+          Al registrarse y rellenar el formulario de solicitud de ayuda, el usuario otorga su consentimiento para la
+          recopilación y, cuando lo autorice expresamente, la publicación de su ubicación aproximada en el mapa, número
+          de teléfono y necesidades. Este consentimiento es revocable en cualquier momento.
+        </p>
+        <p>
+          Para revocar el consentimiento de publicación, envía un correo a{' '}
+          <a href="mailto:info@ajudadana.es" title="Enviar correo electrónico a ajudadana">
+            info@ajudadana.es
+          </a>
+          , indicando ELIMINACIÓN DE SOLICITUD DE AYUDA EN EL MAPA, junto con el correo de registro y la ubicación
+          aproximada. Responderemos en un plazo máximo de 30 días.
+        </p>
+      </article>
+      <article>
+        <h2>4. Duración de Conservación de los Datos</h2>
+        <p>
+          Los datos serán utilizados durante la emergencia y hasta un máximo de 6 meses después de la normalización de
+          la situación, momento en el cual serán eliminados y destruidos de forma segura.
+        </p>
+      </article>
+      <article>
+        <h2>5. Derechos de los Usuarios</h2>
+        <p>De acuerdo con el RGPD, los usuarios tienen derecho a:</p>
+        <ul>
+          <li>Acceso: Solicitar una copia de sus datos personales.</li>
+          <li>Rectificación: Modificar información incorrecta.</li>
+          <li>Supresión: Solicitar la eliminación de sus datos en cualquier momento.</li>
+          <li>Oposición y Limitación del Tratamiento: Oponerse al tratamiento o limitar su uso.</li>
+          <li>Portabilidad: Solicitar que sus datos sean transferidos a otra entidad.</li>
+        </ul>
+        <p>
+          Para ejercer estos derechos, envía una solicitud a{' '}
+          <a href="mailto:info@ajudadana.es" title="Enviar correo electrónico a ajudadana">
+            info@ajudadana.es
+          </a>
+          , incluyendo el derecho específico que deseas ejercer. La solicitud se procesará en un plazo de 30 días.
+        </p>
+      </article>
+      <article>
+        <h2>6. Seguridad de los Datos</h2>
+        <p>
+          Implementamos medidas técnicas y organizativas para proteger los datos personales. En caso de una violación de
+          seguridad que pueda afectar los derechos y libertades de los usuarios, notificaremos a la AEPD en un plazo de
+          72 horas y, si procede, a los usuarios afectados.
+        </p>
+      </article>
+      <article>
+        <h2>7. Transferencia de Datos a Terceros</h2>
+        <p>
+          Actualmente, Ayuda Dana no realiza transferencias de datos personales fuera del Espacio Económico Europeo
+          (EEE). Si esto cambia, se informará y solicitará el consentimiento explícito de los usuarios.
+        </p>
+      </article>
+      <article>
+        <h2>8. Privacidad de los Menores</h2>
+        <p>
+          El sitio no está dirigido a menores de 18 años. Si un padre o tutor detecta que un menor ha proporcionado
+          datos personales sin el debido consentimiento, contacta con nosotros en{' '}
+          <a href="mailto:info@ajudadana.es" title="Enviar correo electrónico a ajudadana">
+            info@ajudadana.es
+          </a>{' '}
+          para su eliminación.
+        </p>
+      </article>
+      <article>
+        <h2>9. Modificaciones de la Política de Privacidad</h2>
+        <p>
+          Ayuda Dana se reserva el derecho de modificar esta Política de Privacidad. En caso de cambios sustanciales,
+          notificaremos a los usuarios registrados y solicitaremos nuevamente su consentimiento si los cambios implican
+          un uso ampliado de sus datos.
+        </p>
+      </article>
+      <article>
+        <h2>10. Contacto</h2>
+        <p>
+          Para preguntas sobre nuestra Política de Privacidad o el uso de tus datos, contáctanos en{' '}
+          <a href="mailto:info@ajudadana.es" title="Enviar correo electrónico a ajudadana">
+            info@ajudadana.es
+          </a>
+        </p>
+      </article>
+      <p>Última actualización: 5 de noviembre de 2024</p>
+    </div>
+  );
+}
diff --git a/src/app/punto-recogida/page.js b/src/app/punto-recogida/page.js
index b993a420..e61daec3 100644
--- a/src/app/punto-recogida/page.js
+++ b/src/app/punto-recogida/page.js
@@ -1,13 +1,14 @@
 'use client';
 
-import { useState, useCallback } from 'react';
-import { Package } from 'lucide-react';
+import { useState, useCallback, useEffect } from 'react';
 import { supabase } from '@/lib/supabase/client';
+import { MapPin, Phone, Package, House, Contact, Megaphone } from 'lucide-react';
+import AddressAutocomplete from '@/components/AddressAutocomplete';
 import { isValidPhone } from '@/helpers/utils';
 import { PhoneInput } from '@/components/PhoneInput';
 
-export default function PuntoRecogida() {
-  const [formData, setFormData] = useState({
+export default function PuntosRecogida() {
+  const initialFormData = {
     name: '',
     type: 'permanente',
     location: '',
@@ -17,13 +18,14 @@ export default function PuntoRecogida() {
     accepted_items: [],
     urgent_needs: '',
     status: 'active',
-  });
+  };
 
-  const [status, setStatus] = useState({
-    isSubmitting: false,
-    error: null,
-    success: false,
-  });
+  const [formData, setFormData] = useState(initialFormData);
+  const [showForm, setShowForm] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [collectionPoints, setCollectionPoints] = useState([]);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
 
   const tiposAyuda = ['Alimentos', 'Agua', 'Ropa', 'Mantas', 'Medicamentos', 'Productos de higiene'];
 
@@ -31,18 +33,36 @@ export default function PuntoRecogida() {
     setFormData((formData) => ({ ...formData, contact_phone: phoneNumber }));
   }, []);
 
-  const handleSubmit = async (e) => {
+  useEffect(() => {
+    fetchCollectionPoints();
+  }, []);
+
+  async function fetchCollectionPoints() {
+    try {
+      let { data, error } = await supabase
+        .from('collection_points')
+        .select('*')
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      setCollectionPoints(data || []);
+    } catch (error) {
+      console.error('Error:', error);
+      setError('Error al cargar los puntos de recogida');
+    }
+  }
+
+  async function handleSubmit(e) {
     e.preventDefault();
-    setStatus({ isSubmitting: true, error: null, success: false });
+    setLoading(true);
+    setError(null);
 
     try {
-      // Validar campos requeridos
-      if (!formData.name || !formData.location || !formData.city || !formData.contact_name || !formData.contact_phone) {
-        throw new Error('Por favor, complete todos los campos obligatorios');
-      }
+      const requiredFields = ['name', 'location', 'contact_phone'];
+      const missingFields = requiredFields.filter((field) => !formData[field]);
 
-      if (formData.accepted_items.length === 0) {
-        throw new Error('Seleccione al menos un tipo de ayuda');
+      if (missingFields.length > 0) {
+        throw new Error('Por favor completa todos los campos obligatorios');
       }
 
       if (!isValidPhone(formData.contact_phone)) {
@@ -50,150 +70,261 @@ export default function PuntoRecogida() {
         return;
       }
 
-      // Insertar en Supabase directamente
-      const { error } = await supabase.from('collection_points').insert([formData]);
-
-      if (error) throw error;
-
-      // Limpiar formulario
-      setFormData({
-        name: '',
+      const pointData = {
+        name: formData.name,
         type: 'permanente',
-        location: '',
-        city: '',
-        contact_name: '',
-        contact_phone: '',
-        accepted_items: [],
-        urgent_needs: '',
+        location: formData.location,
+        city: formData.city || null,
+        contact_name: formData.contact_name || null,
+        contact_phone: formData.contact_phone,
+        accepted_items: formData.accepted_items || [],
+        urgent_needs: formData.urgent_needs || null,
         status: 'active',
-      });
+      };
+
+      const { error: insertError } = await supabase.from('collection_points').insert([pointData]);
 
-      setStatus({ isSubmitting: false, error: null, success: true });
-      setTimeout(() => setStatus((prev) => ({ ...prev, success: false })), 5000);
+      if (insertError) throw insertError;
+
+      await fetchCollectionPoints();
+      setSuccess(true);
+      setShowForm(false);
+      setFormData(initialFormData);
+
+      setTimeout(() => setSuccess(false), 3000);
     } catch (error) {
-      console.error('Error:', error);
-      setStatus({
-        isSubmitting: false,
-        error: error.message || 'Error al registrar el punto de recogida',
-        success: false,
-      });
+      console.error('Error al registrar punto de recogida:', error);
+      setError(error.message || 'Error al registrar el punto de recogida');
+    } finally {
+      setLoading(false);
     }
-  };
+  }
 
   return (
-    <div className="space-y-6">
-      {status.error && (
-        <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-          <p className="text-red-700">{status.error}</p>
-        </div>
-      )}
-
-      {status.success && (
-        <div className="bg-green-100 border-l-4 border-green-500 p-4 rounded">
-          <p className="text-green-700">Punto de recogida registrado correctamente</p>
-        </div>
-      )}
-
-      <div className="bg-white rounded-lg shadow-lg p-6">
-        <div className="flex items-center mb-6">
+    <div className="container mx-auto p-4">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
           <Package className="h-6 w-6 text-blue-500 mr-2" />
-          <h1 className="text-2xl font-bold">Registrar Punto de Recogida</h1>
-        </div>
+          Puntos de recogida
+        </h1>
+        <button
+          onClick={() => setShowForm(true)}
+          className="flex items-center gap-2 bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors whitespace-nowrap"
+        >
+          <Package className="h-5 w-5" />
+          Registrar Punto de Recogida
+        </button>
+      </div>
 
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Nombre del centro*</label>
-            <input
-              type="text"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
+      {/* Lista de puntos de recogida */}
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {collectionPoints.length > 0 ? (
+          collectionPoints.map((point) => (
+            <div key={point.id} className="bg-white rounded-lg shadow-lg p-6 border-l-4 border-gray-800">
+              <div className="flex justify-between items-start mb-4">
+                <div>
+                  <h3 className="text-lg font-bold text-blue-600">{point.name}</h3>
+                  <div className="flex items-center text-gray-600 mt-1">
+                    <MapPin className="h-4 w-4 mr-1" />
+                    <span className="text-sm">{point.location}</span>
+                  </div>
+                </div>
+                <span className={`px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap mr-2 bg-purple-300`}>
+                  Referencia: {point.id}
+                </span>
+                <span className="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm font-medium whitespace-nowrap">
+                  {point.status === 'active' ? 'Activo' : 'Inactivo'}
+                </span>
+              </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Dirección completa*</label>
-            <input
-              type="text"
-              value={formData.location}
-              onChange={(e) => setFormData({ ...formData, location: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-            />
+              <div className="space-y-2 text-sm">
+                {point.city && (
+                  <div className="flex items-center gap-2">
+                    <House className="h-4 w-4 text-gray-500" />
+                    <span className="font-semibold">Ciudad:</span> {point.city}
+                  </div>
+                )}
+                {point.contact_name && (
+                  <div className="flex items-center gap-2">
+                    <Contact className="h-4 w-4 text-gray-500" />
+                    <span className="font-semibold">Nombre de contacto:</span> {point.contact_name}
+                  </div>
+                )}
+                {point.accepted_items && (
+                  <div className="flex items-center gap-2">
+                    <Megaphone className="h-4 w-4 text-gray-500" />
+                    <span className="break-words">
+                      <span className="font-semibold">Necesita:</span>{' '}
+                      {Array.isArray(point.accepted_items)
+                        ? point.accepted_items
+                            .map((tipo) => {
+                              return tipo;
+                            })
+                            .join(', ')
+                        : 'Ayuda general'}
+                    </span>
+                  </div>
+                )}
+                {point.contact_phone && (
+                  <div className="flex items-center gap-2">
+                    <Phone className="h-4 w-4 text-gray-500" />
+                    <span className="font-semibold">Teléfono:</span> {point.contact_phone}
+                  </div>
+                )}
+                {point.urgent_needs && (
+                  <div className="mt-2 text-gray-600">
+                    <span className="font-semibold">Necesidades urgentes:</span>
+                    <p className="mt-1">{point.urgent_needs}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="col-span-full bg-gray-50 rounded-lg p-8 text-center">
+            <Package className="h-12 w-12 text-gray-800 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold text-gray-800 mb-2">No hay puntos de recogida registrados</h3>
+            <p className="text-gray-600 mb-4">
+              Sé el primero en registrar un punto de recogida para ayudar con la logística de suministros.
+            </p>
+            <button
+              onClick={() => setShowForm(true)}
+              className="bg-gray-800 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition-colors inline-flex items-center gap-2"
+            >
+              <Package className="h-5 w-5" />
+              Registrar punto
+            </button>
           </div>
+        )}
+      </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Ciudad*</label>
-            <input
-              type="text"
-              value={formData.city}
-              onChange={(e) => setFormData({ ...formData, city: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
+      {/* Modal2 de formulario */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg p-6 max-w-2xl w-full">
+            <h2 className="text-xl font-bold mb-4">Registrar Punto de Recogida</h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Nombre del centro *</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full p-2 border rounded"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Dirección completa *</label>
+                <AddressAutocomplete
+                  onSelect={(address) => {
+                    setFormData((prev) => ({
+                      ...prev,
+                      location: address.fullAddress,
+                      city: address.details.city,
+                      coordinates: address.coordinates
+                        ? {
+                            lat: address.coordinates.lat,
+                            lng: address.coordinates.lon,
+                          }
+                        : null,
+                    }));
+                  }}
+                  placeholder="Buscar dirección..."
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Tipos de ayuda que se aceptan*</label>
+                <div className="grid grid-cols-2 gap-2">
+                  {tiposAyuda.map((tipo) => (
+                    <label
+                      key={tipo}
+                      className={`flex items-center p-3 rounded cursor-pointer ${
+                        formData.accepted_items.includes(tipo)
+                          ? 'bg-blue-100 text-blue-800'
+                          : 'bg-gray-50 hover:bg-gray-100'
+                      }`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={formData.accepted_items.includes(tipo)}
+                        onChange={(e) => {
+                          const newItems = e.target.checked
+                            ? [...formData.accepted_items, tipo]
+                            : formData.accepted_items.filter((item) => item !== tipo);
+                          setFormData({ ...formData, accepted_items: newItems });
+                        }}
+                        className="sr-only"
+                      />
+                      <span>{tipo}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Persona responsable</label>
+                  <input
+                    type="text"
+                    value={formData.contact_name}
+                    onChange={(e) => setFormData({ ...formData, contact_name: e.target.value })}
+                    className="w-full p-2 border rounded"
+                  />
+                </div>
+                <PhoneInput phoneNumber={formData.contact_phone} onChange={handlePhoneChange} required />
+              </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Persona responsable*</label>
-            <input
-              type="text"
-              value={formData.contact_name}
-              onChange={(e) => setFormData({ ...formData, contact_name: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Necesidades urgentes</label>
+                <textarea
+                  value={formData.urgent_needs}
+                  onChange={(e) => setFormData({ ...formData, urgent_needs: e.target.value })}
+                  className="w-full p-2 border rounded"
+                  rows="3"
+                  placeholder="¿Qué se necesita con más urgencia?"
+                />
+              </div>
 
-          <PhoneInput phoneNumber={formData.contact_phone} onChange={handlePhoneChange} required />
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Tipos de ayuda que se aceptan*</label>
-            <div className="grid grid-cols-2 gap-2">
-              {tiposAyuda.map((tipo) => (
-                <label
-                  key={tipo}
-                  className={`flex items-center p-3 rounded cursor-pointer ${
-                    formData.accepted_items.includes(tipo)
-                      ? 'bg-blue-100 text-blue-800'
-                      : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
+              <div className="flex justify-end space-x-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setFormData(initialFormData);
+                  }}
+                  className="px-4 py-2 border rounded hover:bg-gray-100"
                 >
-                  <input
-                    type="checkbox"
-                    checked={formData.accepted_items.includes(tipo)}
-                    onChange={(e) => {
-                      const newItems = e.target.checked
-                        ? [...formData.accepted_items, tipo]
-                        : formData.accepted_items.filter((item) => item !== tipo);
-                      setFormData({ ...formData, accepted_items: newItems });
-                    }}
-                    className="sr-only"
-                  />
-                  <span>{tipo}</span>
-                </label>
-              ))}
-            </div>
+                  Cancelar
+                </button>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400"
+                >
+                  {loading ? 'Registrando...' : 'Registrar punto'}
+                </button>
+              </div>
+            </form>
           </div>
+        </div>
+      )}
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Necesidades urgentes</label>
-            <textarea
-              value={formData.urgent_needs}
-              onChange={(e) => setFormData({ ...formData, urgent_needs: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-              rows="2"
-              placeholder="¿Qué se necesita con más urgencia?"
-            />
+      {/* Mensajes de éxito/error */}
+      {success && (
+        <div className="fixed bottom-4 right-4 bg-green-100 border-l-4 border-green-500 p-4 rounded shadow-lg z-50">
+          <div className="flex items-center">
+            <div className="text-green-700">Punto de recogida registrado correctamente</div>
           </div>
+        </div>
+      )}
 
-          <button
-            type="submit"
-            disabled={status.isSubmitting}
-            className={`w-full ${
-              status.isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'
-            } text-white py-3 px-4 rounded-lg font-semibold`}
-          >
-            {status.isSubmitting ? 'Registrando...' : 'Registrar Punto de Recogida'}
-          </button>
-        </form>
-      </div>
+      {error && (
+        <div className="fixed bottom-4 right-4 bg-red-100 border-l-4 border-red-500 p-4 rounded shadow-lg z-50">
+          <div className="flex items-center">
+            <div className="text-red-700">{error}</div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/puntos-entrega/page.js b/src/app/puntos-entrega/page.js
index 11acbbce..10927da3 100644
--- a/src/app/puntos-entrega/page.js
+++ b/src/app/puntos-entrega/page.js
@@ -64,8 +64,6 @@ export default function PuntosEntrega() {
         throw new Error('Por favor completa todos los campos obligatorios');
       }
 
-      console.log('FormData before submission:', formData); // Debug log
-
       const pointData = {
         name: formData.name,
         location: formData.location,
@@ -82,8 +80,6 @@ export default function PuntosEntrega() {
         status: 'active',
       };
 
-      console.log('PointData for submission:', pointData); // Debug log
-
       const { error: insertError } = await supabase.from('delivery_points').insert([pointData]);
 
       if (insertError) throw insertError;
@@ -230,7 +226,6 @@ export default function PuntosEntrega() {
                 <label className="block text-sm font-medium text-gray-700 mb-1">Dirección exacta *</label>
                 <AddressAutocomplete
                   onSelect={(address) => {
-                    console.log('Address selected:', address); // Debug log
                     setFormData((prev) => ({
                       ...prev,
                       location: address.fullAddress,
diff --git a/src/components/AddressAutocomplete.js b/src/components/AddressAutocomplete.js
index 8917d331..70236609 100644
--- a/src/components/AddressAutocomplete.js
+++ b/src/components/AddressAutocomplete.js
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { MapPin } from 'lucide-react';
 
 export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar dirección...', initialValue = '' }) {
@@ -9,6 +9,7 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
   const [isLoading, setIsLoading] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const wrapperRef = useRef(null);
+  const debounceRef = useRef(null);
 
   useEffect(() => {
     function handleClickOutside(event) {
@@ -20,7 +21,7 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const searchAddress = async (searchQuery) => {
+  const searchAddress = useCallback(async (searchQuery) => {
     if (!searchQuery || searchQuery.length < 3) {
       setSuggestions([]);
       return;
@@ -34,12 +35,10 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
       const data = await response.json();
 
       const formattedSuggestions = data.map((item) => {
-        // Create a readable address line
         const addressParts = [];
         if (item.address?.road) addressParts.push(item.address.road);
         if (item.address?.house_number) addressParts.push(item.address.house_number);
 
-        // Create a readable locality line
         const localityParts = [];
         if (item.address?.postcode) localityParts.push(item.address.postcode);
         if (item.address?.city || item.address?.town || item.address?.village) {
@@ -74,13 +73,12 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
     } finally {
       setIsLoading(false);
     }
-  };
+  }, []);
 
   const handleInputChange = (e) => {
     const value = e.target.value;
     setQuery(value);
 
-    // Cuando el usuario escribe manualmente, enviamos solo el texto
     onSelect({
       fullAddress: value,
       coordinates: null,
@@ -93,18 +91,29 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
       },
     });
 
-    // Solo buscar sugerencias si hay más de 3 caracteres
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
     if (value.length >= 3) {
-      const timeoutId = setTimeout(() => {
+      debounceRef.current = setTimeout(() => {
         searchAddress(value);
-      }, 300);
-      return () => clearTimeout(timeoutId);
+        debounceRef.current = null;
+      }, 500);
     } else {
       setSuggestions([]);
       setShowSuggestions(false);
     }
   };
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+
   const handleSelect = (suggestion) => {
     setQuery(suggestion.full_address);
     setShowSuggestions(false);
diff --git a/src/components/AsignarSolicitudButton.tsx b/src/components/AsignarSolicitudButton.tsx
new file mode 100644
index 00000000..bdda3d70
--- /dev/null
+++ b/src/components/AsignarSolicitudButton.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { useSession } from '@/context/SessionProvider';
+import { HelpRequestAssignmentData, HelpRequestData } from '@/types/Requests';
+import { helpRequestService } from '@/lib/service';
+import { MouseEvent } from 'react';
+import { Spinner } from '@/components/Spinner';
+import Link from 'next/link';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+type AsignarSolicitudButtonProps = {
+  helpRequest: HelpRequestData;
+};
+
+export default function AsignarSolicitudButton({ helpRequest }: AsignarSolicitudButtonProps) {
+  const session = useSession();
+
+  const {
+    data: assignments,
+    isLoading,
+    error,
+  } = useQuery<HelpRequestAssignmentData[]>({
+    queryKey: ['help_request_assignments', { id: helpRequest.id }],
+    queryFn: () => helpRequestService.getAssignments(helpRequest.id),
+  });
+
+  const queryClient = useQueryClient();
+
+  const assignMutation = useMutation({
+    mutationFn: async () => {
+      if (!session.user) return;
+      await helpRequestService.assign({
+        help_request_id: helpRequest.id,
+        user_id: session.user.id,
+        phone_number: session.user.user_metadata.telefono!,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['help_request_assignments'] });
+    },
+    onError: (e) => {
+      console.error('Error al asignarte a la petición de ayuda', e);
+      toast.error('Error al asignarte :(');
+    },
+  });
+
+  const unassignMutation = useMutation({
+    mutationFn: async () => {
+      if (!session.user) return;
+      if (!userAssignment) return;
+      await helpRequestService.unassign(userAssignment.id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['help_request_assignments'] });
+    },
+    onError: (e) => {
+      console.error('Error al asignarte a la petición de ayuda', e);
+      toast.error('Error al asignarte :(');
+    },
+  });
+
+  async function handleSubmit(e: MouseEvent) {
+    e.preventDefault();
+    assignMutation.mutate();
+  }
+  async function handleCancel(e: MouseEvent) {
+    e.preventDefault();
+    unassignMutation.mutate();
+  }
+
+  if (isLoading) return <Spinner />;
+  if (error || assignments === undefined) return <></>;
+
+  const userAssignment = assignments.find((x) => x.user_id === session.user?.id);
+  const userIsAssigned = !!userAssignment;
+
+  if (!session || !session.user)
+    return (
+      <Link href="/auth" className={`rounded-lg text-white py-2 px-4 w-full sm:w-auto text-center bg-green-500`}>
+        Quiero ayudar
+      </Link>
+    );
+
+  return (
+    <>
+      {userIsAssigned ? (
+        <button
+          onClick={handleCancel}
+          className={`rounded-lg text-white py-2 px-4 w-full sm:w-auto text-center bg-red-500`}
+        >
+          Cancelar mi ayuda
+        </button>
+      ) : (
+        <button
+          onClick={handleSubmit}
+          className={`rounded-lg text-white py-2 px-4 w-full sm:w-auto text-center bg-green-500`}
+        >
+          Quiero ayudar
+        </button>
+      )}
+    </>
+  );
+}
diff --git a/src/components/SolicitudCard.js b/src/components/SolicitudCard.tsx
similarity index 78%
rename from src/components/SolicitudCard.js
rename to src/components/SolicitudCard.tsx
index a3b44e9b..12a8bc17 100644
--- a/src/components/SolicitudCard.js
+++ b/src/components/SolicitudCard.tsx
@@ -1,16 +1,38 @@
 import { AlertTriangle, Calendar, MapPin, MapPinned, Megaphone, Phone, Users } from 'lucide-react';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import Link from 'next/link';
-import { useSession } from '../context/SessionProvider';
+import { useSession } from '@/context/SessionProvider';
+import { HelpRequestAdditionalInfo, HelpRequestData } from '@/types/Requests';
+import { Town } from '@/types/Town';
+import AsignarSolicitudButton from '@/components/AsignarSolicitudButton';
+import SolicitudHelpCount from '@/components/SolicitudHelpCount';
+
+type SolicitudCardProps = {
+  caso: HelpRequestData;
+  towns: Town[];
+  isHref?: boolean;
+  button?: SolicitudCardButton;
+  isEdit?: boolean;
+};
+
+type SolicitudCardButton = {
+  text: string;
+  link: string;
+};
 
 export default function SolicitudCard({
   caso,
-  isHref,
+  towns,
+  isHref = true,
   button = { text: 'Ver solicitud', link: '/solicitud/' },
   isEdit = false,
-  towns,
-}) {
+}: SolicitudCardProps) {
   const session = useSession();
+
+  const additionalInfo = caso.additional_info as HelpRequestAdditionalInfo;
+
+  const special_situations = 'special_situations' in additionalInfo ? additionalInfo.special_situations : undefined;
+  const email = 'email' in additionalInfo ? additionalInfo.email : undefined;
   return (
     <>
       <div
@@ -32,6 +54,7 @@ export default function SolicitudCard({
             {caso.name || 'Necesita Ayuda'}
           </h3>
           <div>
+            <SolicitudHelpCount id={caso.id} />
             <span className={`px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap mr-2 bg-purple-300`}>
               Referencia: {caso.id}
             </span>
@@ -55,7 +78,7 @@ export default function SolicitudCard({
               <div className="flex items-start gap-2">
                 <MapPinned className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" />
                 <span className="break-words">
-                  <span className="font-semibold">Pueblo:</span> {towns[caso.town_id - 1].name || ''}
+                  <span className="font-semibold">Pueblo:</span> {towns[caso.town_id - 1]?.name || ''}
                 </span>
               </div>
             )}
@@ -69,9 +92,9 @@ export default function SolicitudCard({
               <Calendar className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" />
               <span className="break-words">
                 <span className="font-semibold">Fecha:</span>{' '}
-                {new Date(caso.created_at).toLocaleDateString() +
+                {new Date(caso.created_at!).toLocaleDateString() +
                   ' ' +
-                  new Date(caso.created_at).toLocaleTimeString([], {
+                  new Date(caso.created_at!).toLocaleTimeString([], {
                     hour: '2-digit',
                     minute: '2-digit',
                   })}
@@ -127,10 +150,10 @@ export default function SolicitudCard({
                 </span>
               </div>
             )}
-            {caso.additional_info?.special_situations && (
+            {special_situations && (
               <div className="mt-2 bg-gray-50 p-3 rounded">
                 <span className="font-semibold block mb-1">Situaciones especiales:</span>
-                <p className="text-gray-700 break-words">{caso.additional_info.special_situations}</p>
+                <p className="text-gray-700 break-words">{special_situations}</p>
               </div>
             )}
             {caso.number_of_people && (
@@ -143,20 +166,16 @@ export default function SolicitudCard({
             )}
           </div>
           <div className="flex flex-col sm:flex-row w-full sm:w-auto justify-end gap-2">
-            {session &&
-              session.user &&
-              session.user.email &&
-              session.user.email === caso.additional_info.email &&
-              !isEdit && (
-                <Link
-                  href={'/solicitudes/editar/' + caso.id}
-                  className={`rounded-lg text-white py-2 px-4 w-full sm:w-auto text-center  ${
-                    caso.urgency === 'alta' ? 'bg-red-500' : caso.urgency === 'media' ? 'bg-yellow-500' : 'bg-green-500'
-                  }`}
-                >
-                  Editar
-                </Link>
-              )}
+            {session && session.user && session.user.email && session.user.email === email && !isEdit && (
+              <Link
+                href={'/solicitudes/editar/' + caso.id}
+                className={`rounded-lg text-white py-2 px-4 w-full sm:w-auto text-center  ${
+                  caso.urgency === 'alta' ? 'bg-red-500' : caso.urgency === 'media' ? 'bg-yellow-500' : 'bg-green-500'
+                }`}
+              >
+                Editar
+              </Link>
+            )}
             {isHref && (
               <Link
                 href={button.link + caso.id}
@@ -167,6 +186,7 @@ export default function SolicitudCard({
                 {button.text}
               </Link>
             )}
+            <AsignarSolicitudButton helpRequest={caso} />
           </div>
         </div>
       </div>
diff --git a/src/components/SolicitudHelpCount.tsx b/src/components/SolicitudHelpCount.tsx
new file mode 100644
index 00000000..cb9846d4
--- /dev/null
+++ b/src/components/SolicitudHelpCount.tsx
@@ -0,0 +1,33 @@
+import { HelpRequestAssignmentData } from '@/types/Requests';
+import { useQuery } from '@tanstack/react-query';
+import { helpRequestService } from '@/lib/service';
+import { Spinner } from '@/components/Spinner';
+
+type SolicitudHelpCountProps = {
+  id: number;
+};
+
+export default function SolicitudHelpCount({ id }: SolicitudHelpCountProps) {
+  const {
+    data: assignments,
+    isLoading,
+    error,
+  } = useQuery<HelpRequestAssignmentData[]>({
+    queryKey: ['help_request_assignments', { id: id }],
+    queryFn: () => helpRequestService.getAssignments(id),
+  });
+
+  if (isLoading) return <Spinner />;
+
+  if (error || assignments === undefined) return <></>;
+
+  const volunteers = assignments.length;
+
+  return (
+    <span
+      className={`px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap mr-2 ${volunteers === 0 ? 'bg-red-300' : 'bg-green-300'}`}
+    >
+      Voluntarios: {volunteers}
+    </span>
+  );
+}
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
new file mode 100644
index 00000000..db435f18
--- /dev/null
+++ b/src/components/Spinner.tsx
@@ -0,0 +1,8 @@
+export function Spinner() {
+  return (
+    <div
+      className={'!border-r-transparent animate-spin rounded-full border-4 w-6 h-6 border-gray-500 p-2'}
+      role="status"
+    />
+  );
+}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index c90cbe48..752170ff 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -112,9 +112,6 @@ export default function Login({ onSuccessCallback }) {
           onBackButtonClicked={() => {
             setIsSignUp(false);
           }}
-          onSuccessCallback={() => {
-            setIsSignUp(false);
-          }}
         />
       )}
     </>
diff --git a/src/components/auth/SignUp.js b/src/components/auth/SignUp.js
index 75026372..5eec2555 100644
--- a/src/components/auth/SignUp.js
+++ b/src/components/auth/SignUp.js
@@ -8,12 +8,13 @@ import { PhoneInput } from '@/components/PhoneInput';
 import { formatPhoneNumber } from '@/helpers/utils';
 import { isValidPhone } from '@/helpers/utils';
 
-export default function SignUp({ onSuccessCallback, onBackButtonClicked }) {
+export default function SignUp({ onBackButtonClicked }) {
   const [formData, setFormData] = useState({
     nombre: '',
     email: '',
     password: '',
     telefono: '',
+    privacyPolicy: '',
   });
   const [status, setStatus] = useState({
     isSubmitting: false,
@@ -71,16 +72,39 @@ export default function SignUp({ onSuccessCallback, onBackButtonClicked }) {
       return;
     }
 
-    const response = await authService.signUp(formData.email, formData.password, formData.nombre, formatedPhoneNumber);
+    // privacy policy
+    if (!formData.privacyPolicy) {
+      setError('Para continuar, debes aceptar la Política de Privacidad.');
+      return;
+    }
+
+    // SEND SIGN-UP REQUEST TO AUTHENTICATION SERVICE
+    const response = await authService.signUp(
+      formData.email,
+      formData.password,
+      formData.nombre,
+      formatedPhoneNumber,
+      formData.privacyPolicy,
+    );
+
     if (response.error) {
-      setError('Ha habido un error inesperado creando el usuario');
+      // SHOW ERROR IF PASSWORD IS WEAK OR USER ALREDY EXISTS
+      if (response.error.code === 'weak_password') {
+        setError('La contraseña debe tener al menos 6 caracteres.');
+      } else if (response.error.code === 'user_already_exists') {
+        setError('Ya existe una cuenta con este correo. Inicia sesión o intenta con otro.');
+      } else {
+        setError('Ocurrió un error. Inténtalo de nuevo.');
+      }
       return;
     }
 
     setStatus({ isSubmitting: false, error: null, success: true });
-    if (typeof onSuccessCallback === 'function') {
-      onSuccessCallback(response.data);
-    }
+
+    // SIGN IN WITH NEW USER CREATED
+    await authService.signIn(formData.email, formData.password);
+    // REDIRECT USER TO HOME PAGE
+    window.location.href = '/';
   };
 
   return (
@@ -137,6 +161,27 @@ export default function SignUp({ onSuccessCallback, onBackButtonClicked }) {
             />
           </div>
         </div>
+
+        {/* Política de privacidad */}
+        <div className="grid gap-4">
+          <div className="flex gap-2 items-start lg:items-center">
+            <input
+              type="checkbox"
+              value={formData.privacyPolicy}
+              onChange={(e) => setFormData({ ...formData, privacyPolicy: e.target.checked })}
+              className="min-w-4 min-h-4 cursor-pointer"
+              id="privacyPolicy"
+              required
+            />
+            <label htmlFor="privacyPolicy" className="text-sm font-medium text-gray-700">
+              He leído y aceptado la{' '}
+              <a href="/politica-privacidad/" className="text-blue-400">
+                política de privacidad
+              </a>{' '}
+              y acepto que «ajudadana.es» recoja y guarde los datos enviados a través de este formulario.
+            </label>
+          </div>
+        </div>
       </div>
 
       {/* Boton */}
diff --git a/src/components/layout/EmergencyLayout.js b/src/components/layout/EmergencyLayout.tsx
similarity index 80%
rename from src/components/layout/EmergencyLayout.js
rename to src/components/layout/EmergencyLayout.tsx
index 7962a634..e23a0bd8 100644
--- a/src/components/layout/EmergencyLayout.js
+++ b/src/components/layout/EmergencyLayout.tsx
@@ -1,12 +1,11 @@
-// components/layout/EmergencyLayout.js
-
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, PropsWithChildren } from 'react';
+// @ts-ignore
 import Sidebar from './Sidebar';
 import Footer from './Footer';
 
-export default function EmergencyLayout({ children }) {
+export default function EmergencyLayout({ children }: PropsWithChildren) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true); // Por defecto abierto
 
   useEffect(() => {
@@ -28,7 +27,7 @@ export default function EmergencyLayout({ children }) {
     <div className="min-h-screen bg-gray-100 flex">
       <Sidebar isOpen={isSidebarOpen} toggle={() => setIsSidebarOpen(!isSidebarOpen)} />
       <div className={`flex flex-col flex-1 transition-margin duration-300 ${isSidebarOpen ? 'md:ml-72' : 'ml-0'}`}>
-        <main className="p-4 flex flex-1  justify-center">
+        <main className="p-4 flex flex-1 justify-center items-center lg:items-start">
           <div className="max-w-7xl w-full">{children}</div>
         </main>
         <Footer />
diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.tsx
similarity index 66%
rename from src/components/layout/Footer.js
rename to src/components/layout/Footer.tsx
index 89fe5cf0..c960d2c8 100644
--- a/src/components/layout/Footer.js
+++ b/src/components/layout/Footer.tsx
@@ -7,9 +7,14 @@ const Footer = () => {
             Web creada por personas voluntarias,{' '}
             <span className="block sm:inline">independiente de cualquier organismo.</span>
           </p>
-          <a className="text-gray-400 text-sm" href="mailto:info@ajudadana.es">
-            info@ajudadana.es
-          </a>
+          <div className="flex gap-4">
+            <a className="text-gray-400 text-sm" href="mailto:info@ajudadana.es">
+              info@ajudadana.es
+            </a>
+            <a className="text-gray-400 text-sm" href="/politica-privacidad/">
+              Política de privacidad
+            </a>
+          </div>
           <p className="text-gray-400 text-xs">© {new Date().getFullYear()} Emergency CV</p>
         </div>
       </div>
diff --git a/src/context/EmergencyProvider.js b/src/context/EmergencyProvider.js
deleted file mode 100644
index d1e9226e..00000000
--- a/src/context/EmergencyProvider.js
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, useState } from 'react';
-
-const EmergencyContext = createContext(undefined);
-
-export const EmergencyProvider = ({ children }) => {
-  const [showModal, setShowModal] = useState(false);
-
-  const toggleModal = (force) => setShowModal((prev) => (force !== undefined ? force : !prev));
-
-  return <EmergencyContext.Provider value={{ showModal, toggleModal }}>{children}</EmergencyContext.Provider>;
-};
-
-export const useModal = () => {
-  const context = useContext(EmergencyContext);
-  if (!context) {
-    throw new Error('useModal must be used within an EmergencyProvider');
-  }
-  return context;
-};
diff --git a/src/context/EmergencyProvider.tsx b/src/context/EmergencyProvider.tsx
new file mode 100644
index 00000000..fcd02baa
--- /dev/null
+++ b/src/context/EmergencyProvider.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import React, { createContext, ReactNode, useContext, useState } from 'react';
+
+const EmergencyContext = createContext<EmergencyCtx>({ showModal: false, toggleModal: () => {} });
+
+type EmergencyCtx = {
+  showModal: boolean;
+  toggleModal: (force: boolean) => void;
+};
+
+type SessionProviderProps = {
+  children: ReactNode;
+};
+
+export const EmergencyProvider: React.FC<SessionProviderProps> = ({ children }) => {
+  const [showModal, setShowModal] = useState(false);
+
+  const toggleModal = (force: boolean) => setShowModal((prev) => (force !== undefined ? force : !prev));
+
+  return <EmergencyContext.Provider value={{ showModal, toggleModal }}>{children}</EmergencyContext.Provider>;
+};
+
+export const useModal = () => {
+  const context = useContext(EmergencyContext);
+  if (!context) {
+    throw new Error('useModal must be used within an EmergencyProvider');
+  }
+  return context;
+};
diff --git a/src/context/QueryClientProvider.tsx b/src/context/QueryClientProvider.tsx
new file mode 100644
index 00000000..d52a1c08
--- /dev/null
+++ b/src/context/QueryClientProvider.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { PropsWithChildren, useState } from 'react';
+import { QueryClient, QueryClientProvider as TanstackQueryClientProvider } from '@tanstack/react-query';
+
+export const QueryClientProvider = ({ children }: PropsWithChildren) => {
+  const [client] = useState(new QueryClient());
+
+  return <TanstackQueryClientProvider client={client}>{children}</TanstackQueryClientProvider>;
+};
diff --git a/src/context/SessionProvider.js b/src/context/SessionProvider.js
deleted file mode 100644
index 561a1f24..00000000
--- a/src/context/SessionProvider.js
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client';
-import { createContext, useContext } from 'react';
-
-const SessionContext = createContext();
-
-export const SessionProvider = ({ children, session }) => {
-  return <SessionContext.Provider value={session}>{children}</SessionContext.Provider>;
-};
-
-export const useSession = () => useContext(SessionContext);
diff --git a/src/context/SessionProvider.tsx b/src/context/SessionProvider.tsx
new file mode 100644
index 00000000..c94f7344
--- /dev/null
+++ b/src/context/SessionProvider.tsx
@@ -0,0 +1,18 @@
+'use client';
+import React, { createContext, ReactNode, useContext } from 'react';
+import { User } from '@supabase/auth-js';
+
+const SessionContext = createContext<UserSession>({ user: null });
+
+type UserSession = { user: User } | { user: null };
+
+type SessionProviderProps = {
+  children: ReactNode;
+  session: UserSession;
+};
+
+export const SessionProvider: React.FC<SessionProviderProps> = ({ children, session }) => {
+  return <SessionContext.Provider value={session}>{children}</SessionContext.Provider>;
+};
+
+export const useSession = () => useContext(SessionContext);
diff --git a/src/context/TownProvider.js b/src/context/TownProvider.js
deleted file mode 100644
index f0b6e6cb..00000000
--- a/src/context/TownProvider.js
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client';
-import { createContext, useContext } from 'react';
-
-const TownsContext = createContext();
-
-export const TownsProvider = ({ children, towns }) => {
-  return <TownsContext.Provider value={towns}>{children}</TownsContext.Provider>;
-};
-
-export const useTowns = () => useContext(TownsContext);
diff --git a/src/context/TownProvider.tsx b/src/context/TownProvider.tsx
new file mode 100644
index 00000000..1e7ede0e
--- /dev/null
+++ b/src/context/TownProvider.tsx
@@ -0,0 +1,16 @@
+'use client';
+import React, { createContext, ReactNode, useContext } from 'react';
+import { Town } from '@/types/Town';
+
+const TownsContext = createContext<Town[]>([]);
+
+type TownsProviderProps = {
+  children: ReactNode;
+  towns: Town[];
+};
+
+export const TownsProvider: React.FC<TownsProviderProps> = ({ children, towns }) => {
+  return <TownsContext.Provider value={towns}>{children}</TownsContext.Provider>;
+};
+
+export const useTowns = () => useContext(TownsContext);
diff --git a/src/helpers/constants.js b/src/helpers/constants.ts
similarity index 88%
rename from src/helpers/constants.js
rename to src/helpers/constants.ts
index 99eee37b..431ddc2f 100644
--- a/src/helpers/constants.js
+++ b/src/helpers/constants.ts
@@ -7,11 +7,12 @@ export const tiposAyudaOptions = {
   medica: 'Asistencia médica',
   psicologico: 'Apoyo psicológico',
   logistico: 'Apoyo logístico',
+  otros: 'Ayuda general',
 };
 
 export const tiposAyudaAcepta = ['Alimentos', 'Ropa', 'Mantas', 'Agua', 'Productos de higiene', 'Medicamentos'];
 
-export const mapToIdAndLabel = (data) => {
+export const mapToIdAndLabel = (data: any) => {
   return Object.keys(data).map((key) => ({
     id: key,
     label: data[key],
diff --git a/src/lib/service.ts b/src/lib/service.ts
index ef45cfda..043ac893 100644
--- a/src/lib/service.ts
+++ b/src/lib/service.ts
@@ -1,5 +1,6 @@
 import { supabase } from './supabase/client';
-import { HelpRequestAssignmentData, HelpRequestData } from '@/types/Requests';
+import { HelpRequestAssignmentInsert, HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
+import { createClient } from '@/lib/supabase/server';
 
 export const helpRequestService = {
   async createRequest(requestData: HelpRequestData) {
@@ -8,7 +9,7 @@ export const helpRequestService = {
     if (error) throw error;
     return data[0];
   },
-  async editRequest(requestData: any, id: any) {
+  async editRequest(requestData: HelpRequestUpdate, id: number) {
     const { data, error } = await supabase.from('help_requests').update(requestData).eq('id', id).select();
     if (error) throw error;
     return data;
@@ -20,12 +21,24 @@ export const helpRequestService = {
     return data;
   },
 
-  async assign(requestData: HelpRequestAssignmentData) {
+  async getAssignments(id: number) {
+    const { data, error } = await supabase.from('help_request_assignments').select('*').eq('help_request_id', id);
+
+    if (error) throw error;
+    return data;
+  },
+
+  async assign(requestData: HelpRequestAssignmentInsert) {
     const { data, error } = await supabase.from('help_request_assignments').insert([requestData]).select();
 
     if (error) throw error;
     return data[0];
   },
+  async unassign(id: number) {
+    const { error } = await supabase.from('help_request_assignments').delete().eq('id', id);
+
+    if (error) throw error;
+  },
 
   async getByType(type: any) {
     const { data, error } = await supabase
@@ -155,6 +168,15 @@ export const mapService = {
   },
 };
 
+export const townsService = {
+  async getTowns() {
+    const supabase = await getSupabaseClient();
+    const { data, error } = await supabase.from('towns').select();
+    if (error) throw error;
+    return data;
+  },
+};
+
 // Add this function to test the connection
 export const testSupabaseConnection = async () => {
   try {
@@ -177,7 +199,7 @@ export const authService = {
   async getSessionUser() {
     return supabase.auth.getUser();
   },
-  async signUp(email: any, password: any, nombre: any, telefono: any) {
+  async signUp(email: any, password: any, nombre: any, telefono: any, privacyPolicy: boolean) {
     return supabase.auth.signUp({
       email,
       password,
@@ -185,6 +207,7 @@ export const authService = {
         data: {
           nombre,
           telefono,
+          privacyPolicy,
         },
       },
     });
@@ -192,10 +215,20 @@ export const authService = {
   async signOut() {
     return supabase.auth.signOut();
   },
-  async signIn(email: any, password: any) {
+  async signIn(email: string, password: string) {
     return supabase.auth.signInWithPassword({ email, password });
   },
   async updateUser(metadata: any) {
     return supabase.auth.updateUser({ ...metadata });
   },
 };
+
+const getSupabaseClient = async () => {
+  if (typeof window === 'undefined') {
+    // Si estamos en el servidor, usa el cliente del servidor
+    return await createClient();
+  } else {
+    // Si estamos en el cliente, usa el cliente del navegador
+    return supabase;
+  }
+};
diff --git a/src/lib/supabase/server.ts b/src/lib/supabase/server.ts
index 75ab4181..5bb64f40 100644
--- a/src/lib/supabase/server.ts
+++ b/src/lib/supabase/server.ts
@@ -1,23 +1,30 @@
-import { createServerClient, type CookieOptions } from '@supabase/ssr';
+'use server';
+
+import { createServerClient } from '@supabase/ssr';
 import { cookies } from 'next/headers';
+import { Database } from '@/types/database';
 
 export async function createClient() {
   const cookieStore = await cookies();
 
-  return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
-    cookies: {
-      getAll() {
-        return cookieStore.getAll();
-      },
-      setAll(cookiesToSet) {
-        try {
-          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
-        } catch {
-          // The `setAll` method was called from a Server Component.
-          // This can be ignored if you have middleware refreshing
-          // user sessions.
-        }
+  return createServerClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
+          } catch {
+            // The `setAll` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
       },
     },
-  });
+  );
 }
diff --git a/src/types/Requests.ts b/src/types/Requests.ts
index 8c52aaff..c875a3af 100644
--- a/src/types/Requests.ts
+++ b/src/types/Requests.ts
@@ -4,7 +4,14 @@ export type HelpRequestType = 'necesita' | 'ofrece';
 export type HelpRequestUrgencyType = 'alta' | 'media' | 'baja';
 export type HelpRequestStatusType = 'pending' | 'in_progress' | 'active';
 export type HelpRequestData = Database['public']['Tables']['help_requests']['Row'];
+export type HelpRequestUpdate = Database['public']['Tables']['help_requests']['Update'];
 export type HelpRequestAssignmentData = Database['public']['Tables']['help_request_assignments']['Row'];
+export type HelpRequestAssignmentInsert = Database['public']['Tables']['help_request_assignments']['Insert'];
+
+export type HelpRequestAdditionalInfo = {
+  special_situations?: string;
+  email?: string;
+};
 
 export type CollectionPointType = 'permanente' | 'temporal';
 export type CollectionPointStatus = 'active' | 'inactive';
diff --git a/src/types/Town.ts b/src/types/Town.ts
new file mode 100644
index 00000000..160382a6
--- /dev/null
+++ b/src/types/Town.ts
@@ -0,0 +1,3 @@
+import { Database } from '@/types/database';
+
+export type Town = Database['public']['Tables']['towns']['Row'];
diff --git a/supabase/migrations/20241106110421_add-missing-policy-help-request-assignments.sql b/supabase/migrations/20241106110421_add-missing-policy-help-request-assignments.sql
new file mode 100644
index 00000000..532177af
--- /dev/null
+++ b/supabase/migrations/20241106110421_add-missing-policy-help-request-assignments.sql
@@ -0,0 +1,9 @@
+CREATE POLICY "authenticated_can_insert_own_records"
+ON public.help_request_assignments
+FOR INSERT
+WITH CHECK ((select auth.uid()) = user_id);
+
+CREATE POLICY "Enable read access for all users"
+ON public.help_request_assignments
+FOR SELECT
+USING (true);
\ No newline at end of file
diff --git a/supabase/seed.sql b/supabase/seed.sql
new file mode 100644
index 00000000..9f1ace76
--- /dev/null
+++ b/supabase/seed.sql
@@ -0,0 +1,33 @@
+INSERT INTO "public"."towns" ("id", "created_at", "name", "people_helping", "help_needed")
+ VALUES ('1', '2024-11-02 17:52:17.645308+00', 'Aldaia', '0', '0'),
+ ('2', '2024-11-02 17:52:17.645308+00', 'Alfafar', '0', '0'),
+ ('3', '2024-11-02 17:52:17.645308+00', 'Albal', '0', '0'),
+ ('4', '2024-11-02 17:52:17.645308+00', 'Alcudia', '0', '0'),
+ ('5', '2024-11-02 17:52:17.645308+00', 'Algemesí', '0', '0'),
+ ('6', '2024-11-02 17:52:17.645308+00', 'Bugarra', '0', '0'),
+ ('7', '2024-11-02 17:52:17.645308+00', 'Catarroja', '0', '0'),
+  ('8', '2024-11-02 17:52:17.645308+00', 'Castelló', '0', '0'),
+  ('9', '2024-11-02 17:52:17.645308+00', 'Cheste', '0', '0'),
+  ('10', '2024-11-02 17:52:17.645308+00', 'Chiva', '0', '0'),
+  ('11', '2024-11-02 17:52:17.645308+00', 'Gestalgar', '0', '0'),
+  ('12', '2024-11-02 17:52:17.645308+00', 'Guadassuar', '0', '0'),
+  ('14', '2024-11-02 17:52:17.645308+00', 'Manuel', '0', '0'),
+  ('15', '2024-11-02 17:52:17.645308+00', 'Massanassa', '0', '0'),
+  ('16', '2024-11-02 17:52:17.645308+00', 'Montserrat', '0', '0'),
+  ('17', '2024-11-02 17:52:17.645308+00', 'Paiporta', '0', '0'),
+  ('18', '2024-11-02 17:52:17.645308+00', 'Pedralba', '0', '0'),
+  ('19', '2024-11-02 17:52:17.645308+00', 'Riba-roja de Túria', '0', '0'),
+  ('20', '2024-11-02 17:52:17.645308+00', 'Sedaví', '0', '0'),
+  ('21', '2024-11-02 17:52:17.645308+00', 'Sot de Chera', '0', '0'),
+   ('22', '2024-11-02 17:52:17.645308+00', 'Torrent', '0', '0'),
+   ('23', '2024-11-02 17:52:17.645308+00', 'Utiel', '0', '0'),
+   ('24', '2024-11-02 17:52:17.645308+00', 'Villar del Arzobispo', '0', '0'),
+   ('25', '2024-11-03 09:34:00.825499+00', 'Alzira', '0', '0'),
+   ('26', '2024-11-03 08:44:02.724841+00', 'Benetusser', '0', '0'),
+   ('27', '2024-11-03 08:44:34.023343+00', 'Turís', '0', '0'),
+   ('28', '2024-11-03 08:47:46.2913+00', 'Picanya', '0', '0'),
+   ('29', '2024-11-03 08:57:38.119705+00', 'La Torre, Valencia', '0', '0'),
+   ('30', '2024-11-03 09:05:24.008619+00', 'Benimaclet', '0', '0'),
+   ('31', '2024-11-03 09:21:27.852067+00', 'Godelleta', '0', '0'),
+   ('32', '2024-11-05 10:38:38.669406+00', 'Llocnou de la Corona', '0', '0'),
+   ('33', '2024-11-05 10:38:52.085488+00', 'Beniparrell', '0', '0');
\ No newline at end of file