diff --git a/front/src/lib/mongodb.ts b/front/src/lib/mongodb.ts
index fd51aa2..15ecef0 100644
--- a/front/src/lib/mongodb.ts
+++ b/front/src/lib/mongodb.ts
@@ -13,14 +13,16 @@ const globalForMongo = globalThis as typeof globalThis & {
 };
 
 //crea el cliente solo si no existe ya (singleton)
-function getClient(): MongoClient {
+async function  getClient(): Promise<MongoClient> {
     if (!globalForMongo._mongoClient) {
         globalForMongo._mongoClient = new MongoClient(connectionString);
+        await globalForMongo._mongoClient.connect();
     }
 
     return globalForMongo._mongoClient;
 }
 //lo que exportamo devuelve la instancia de Db lista para hacer queries
-export function getDb(): Db {
-    return getClient().db();
+export async function getDb(): Promise<Db> {
+    const client = await getClient();
+    return client.db();
 }
diff --git a/front/src/pods/embalse-search/embalse-search.tsx b/front/src/pods/embalse-search/embalse-search.tsx
index 5b5c7b4..a5717ce 100644
--- a/front/src/pods/embalse-search/embalse-search.tsx
+++ b/front/src/pods/embalse-search/embalse-search.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useCombobox } from "downshift";
+import { useRouter } from "next/navigation";
 import { SearchIcon } from "./components/search-icon";
 import { Embalse, getEmbalsesCollection } from "./api";
 import { EmbalseSearchModel } from "./embalse-search.model";
@@ -12,6 +13,7 @@ const mapEmbalseToSearch = (embalse: Embalse): EmbalseSearchModel => ({
 });
 
 export const EmbalseSearch: React.FC = () => {
+   const router = useRouter();
   const [embalses, setEmbalses] = useState<Embalse[]>([]);
   const [filteredEmbalses, setFilteredEmbalses] = useState<
     EmbalseSearchModel[]
@@ -47,7 +49,8 @@ export const EmbalseSearch: React.FC = () => {
     },
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
-        console.log("Embalse seleccionado: ", selectedItem);
+        //console.log("Embalse seleccionado: ", selectedItem);
+        router.push(`/embalse/${selectedItem.slug}`);
       }
     },
   });
diff --git a/front/src/pods/embalse/embalse.repository.ts b/front/src/pods/embalse/embalse.repository.ts
index 4388027..fbf70aa 100644
--- a/front/src/pods/embalse/embalse.repository.ts
+++ b/front/src/pods/embalse/embalse.repository.ts
@@ -5,7 +5,7 @@ import type { Embalse } from "db-model";
 
 export async function getEmbalseBySlug(slug: string): Promise<Embalse | null> {
     //conecta con BD y trae datos en base al slug
-  const db = getDb();
+  const db = await getDb();
   const doc = await db.collection("embalses").findOne({ slug });
 
   if (!doc) {
diff --git a/package-lock.json b/package-lock.json
index dda2f34..ac12f28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
       "dependencies": {
         "axios": "^1.10.0",
         "cheerio": "^1.1.2",
+        "downshift": "^9.2.0",
         "playwright": "^1.54.2"
       },
       "devDependencies": {
@@ -34,8 +35,9 @@
         "@tailwindcss/postcss": "^4.1.17",
         "d3": "^7.9.0",
         "db-model": "file:../packages/db-model",
+        "downshift": "^9.2.0",
         "mongodb": "^6.12.0",
-        "next": "^15.4.1",
+        "next": "^16.1.6",
         "postcss": "^8.5.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
diff --git a/package.json b/package.json
index 9b70b3f..ffdf4ca 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   "dependencies": {
     "axios": "^1.10.0",
     "cheerio": "^1.1.2",
+    "downshift": "^9.2.0",
     "playwright": "^1.54.2"
   }
 }