diff --git a/front/public/images/embalse-generico.jpg b/front/public/images/embalse-generico.jpg
new file mode 100644
index 0000000..bf684f0
Binary files /dev/null and b/front/public/images/embalse-generico.jpg differ
diff --git a/front/src/app/embalse-provincia/[provincia]/page.tsx b/front/src/app/embalse-provincia/[provincia]/page.tsx
index 4c45bed..0fcf1f9 100644
--- a/front/src/app/embalse-provincia/[provincia]/page.tsx
+++ b/front/src/app/embalse-provincia/[provincia]/page.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { PROVINCIAS } from "@/core/constants";
+import { Card } from "@/common/components/card.component";
 
 interface Props {
   params: Promise<{ provincia: string }>;
@@ -12,13 +13,29 @@ export default async function EmbalseProvinciaListadoPage({ params }: Props) {
     (province) => province.id === provincia,
   )?.name;
 
+  const reservoirs = [
+    { id: "ullibarri-gamboa", name: "Ullibarri-Gamboa" },
+    { id: "zadorra", name: "Zadorra" },
+    { id: "urrúnaga", name: "Urrunaga" },
+    { id: "maroño", name: "Maroño" },
+    { id: "albina", name: "Albina" },
+    { id: "santa-engracia", name: "Santa Engracia" },
+  ];
+
   return (
-    <div className="flex flex-col gap-8">
+    <Card>
       <h2>Embalses de {nombreProvincia}</h2>
 
-      <Link href="/embalse/casasola" className="link-accessible">
-        Embalse de Casasola
-      </Link>
-    </div>
+      {reservoirs.map(({ id, name }) => (
+        <Link key={id} href={`/embalse/${id}`} className="link-accessible">
+          {name}
+        </Link>
+      ))}
+      <img
+        className="mt-4 w-full rounded-xl sm:w-1/2 lg:w-1/3"
+        src="/images/embalse-generico.jpg"
+        alt="Mapa de embalses"
+      />
+    </Card>
   );
 }
diff --git a/front/src/app/embalse-provincia/page.tsx b/front/src/app/embalse-provincia/page.tsx
index 1097faa..5718b21 100644
--- a/front/src/app/embalse-provincia/page.tsx
+++ b/front/src/app/embalse-provincia/page.tsx
@@ -1,9 +1,10 @@
 import Link from "next/link";
 import { PROVINCIAS } from "@/core/constants";
+import { Card } from "@/common/components/card.component";
 
 export default function EmbalsesProvinciaPage() {
   return (
-    <div className="bg-base-100 flex flex-col gap-8 rounded-2xl p-4">
+    <Card>
       <h2>Embalses por provincias</h2>
       <div className="flex flex-col gap-4">
         {PROVINCIAS.map(({ id, name }) => (
@@ -16,6 +17,6 @@ export default function EmbalsesProvinciaPage() {
           </Link>
         ))}
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/front/src/common/components/card.component.tsx b/front/src/common/components/card.component.tsx
new file mode 100644
index 0000000..14e9a9d
--- /dev/null
+++ b/front/src/common/components/card.component.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export const Card: React.FC<Props> = (props: Props) => {
+  const { children } = props;
+  return (
+    <div className="bg-base-100 flex flex-col gap-6 rounded-2xl p-4">
+      {children}
+    </div>
+  );
+};
diff --git a/front/src/common/models/index.ts b/front/src/common/models/index.ts
index a13e258..f3acecf 100644
--- a/front/src/common/models/index.ts
+++ b/front/src/common/models/index.ts
@@ -1 +1,2 @@
 export * from "./lookup.model";
+export * from "./reservoir.model";