diff --git a/app/page.tsx b/app/page.tsx
index 09d7126..1ea75f6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Link from "next/link";
+import Image from "next/image";
 import LandingNavbar from "@/app/(landing)/_components/Navbar";
 import LandingFooter from "@/app/(landing)/_components/Footer";
 import { Button } from "@/components/ui/button";
@@ -23,11 +24,22 @@ import {
 function HeroSection() {
   return (
     <section className="relative h-screen flex flex-col items-center justify-center overflow-hidden px-6 text-center">
+      <Image
+        src="https://res.cloudinary.com/deh81ozjh/image/upload/v1781315541/Panoramica2_floikl.png"
+        alt=""
+        fill
+        priority
+        className="object-cover object-center"
+        aria-hidden="true"
+      />
+
+      <div className="absolute inset-0 bg-white/35 dark:bg-black/70 transition-colors duration-300" />
+
       <div className="absolute -top-24 -left-24 w-[400px] h-[400px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute -bottom-20 -right-20 w-[350px] h-[350px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute top-1/2 right-[15%] w-[250px] h-[250px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
 
-      <div className="relative z-10 flex flex-col items-center gap-6 max-w-2xl">
+      <div className="relative z-10 flex flex-col items-center gap-6 max-w-2xl rounded-3xl bg-background/60 backdrop-blur-md px-6 py-10 sm:px-12 sm:py-14">
         <h1 className="font-medium leading-[1.1] tracking-[-0.02em] text-[clamp(40px,8vw,80px)]">
           <span className="text-foreground">Donde nacen</span>
           <br />
@@ -71,28 +83,18 @@ function AboutSection() {
             Somos un estudio independiente en Ecatepec enfocado en música electrónica, producción y
             formación de artistas. Cada proyecto recibe atención personalizada.
           </p>
-          <div className="flex items-start gap-4 sm:gap-8 mt-2">
-            {(
-              [
-                ["5+", "Años de experiencia"],
-                ["200+", "Proyectos grabados"],
-                ["50+", "Artistas formados"],
-              ] as const
-            ).map(([num, label]) => (
-              <div key={label}>
-                <p className="text-[32px] font-medium text-foreground leading-none mb-1">{num}</p>
-                <p className="text-[12px] text-muted-foreground">{label}</p>
-              </div>
-            ))}
-          </div>
         </div>
 
         <Card className="py-0 gap-0">
-          <CardContent className="p-0 flex items-center justify-center" style={{ aspectRatio: "4/3" }}>
-            <div className="flex flex-col items-center gap-2 text-muted-foreground">
-              <ImageIcon size={32} />
-              <span className="text-[13px]">Foto del estudio</span>
-            </div>
+          <CardContent className="p-0 overflow-hidden" style={{ aspectRatio: "4/3" }}>
+            <Image
+              src="https://res.cloudinary.com/deh81ozjh/image/upload/v1781315539/Frontal1_ufulj4.png"
+              alt="Sala de producción del estudio"
+              width={800}
+              height={600}
+              className="w-full h-full object-cover"
+              priority
+            />
           </CardContent>
         </Card>
       </div>
diff --git a/next.config.ts b/next.config.ts
index 6431daf..3aa9c79 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -27,6 +27,14 @@ const nextConfig: NextConfig = {
   turbopack: {
     root: __dirname,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+      },
+    ],
+  },
   async headers() {
     return [
       {