diff --git a/src/app/page.tsx b/src/app/page.tsx
index aee5b72..c1261cf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { AboutUs } from "@/components/home/sections/about-us";
+import { Activities } from "@/components/home/sections/activities";
 import { Hero } from "@/components/home/sections/hero";
 import { Members } from "@/components/home/sections/members";
 import { HeroUIProvider } from "@heroui/react";
@@ -11,7 +11,7 @@ import Contributors from "@/components/home/sections/contributors";
 
 const navLinks = [
   { key: "home", label: "Inicio", href: "#home" },
-  { key: "about us", label: "Sobre Nosotros", href: "#about-us" },
+  { key: "activities", label: "Actividades", href: "#activities" },
   { key: "members", label: "Miembros", href: "#members" },
   { key: "league", label: "La Liga", href: "/league" },
 ];
@@ -25,7 +25,7 @@ export default function HomePage() {
         <CursorWrapper>
           <MainNavbar navLinks={navLinks} />
           <Hero />
-          <AboutUs />
+          <Activities />
           <Members />
           <Contributors />
           <Footer />
diff --git a/src/components/home/bento-grid.tsx b/src/components/home/bento-grid.tsx
deleted file mode 100644
index f7eea46..0000000
--- a/src/components/home/bento-grid.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-import { cn } from "@/utils/cn";
-
-export const BentoGrid = ({
-  className,
-  children,
-}: {
-  className?: string;
-  children?: React.ReactNode;
-}) => {
-  return (
-    <div
-      className={cn(
-        "grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const BentoGridItem = ({
-  className,
-  title,
-  description,
-  header,
-  icon,
-}: {
-  className?: string;
-  title?: string | React.ReactNode;
-  description?: string | React.ReactNode;
-  header?: React.ReactNode;
-  icon?: React.ReactNode;
-}) => {
-  return (
-    <div
-      className={cn(
-        "row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
-        className,
-      )}
-    >
-      {header}
-      <div className="group-hover/bento:translate-x-2 transition duration-200">
-        {icon}
-        <div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
-          {title}
-        </div>
-        <div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
-          {description}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/home/pre-exams-content.tsx b/src/components/home/pre-exams-content.tsx
new file mode 100644
index 0000000..5c25d9b
--- /dev/null
+++ b/src/components/home/pre-exams-content.tsx
@@ -0,0 +1,215 @@
+interface PreExam {
+  id: string;
+  title: string;
+  description: string;
+  dates: string[];
+  materials: {
+    name: string;
+    url: string;
+    type: 'pdf' | 'ppt' | 'doc' | 'link';
+  }[];
+  topics: string[];
+}
+
+const preExams: PreExam[] = [
+  {
+    id: "1",
+    title: "Taller: Introducción a la Programación",
+    description: "Conceptos fundamentales de programación y lógica computacional.",
+    dates: ["23 de Agosto, 2023", "8 de Noviembre, 2023", "4 de Marzo, 2025", "7 de Abril, 2025", "19 de Mayo, 2025"],
+    materials: [
+      {
+        name: "Slides - Parcial No. 1",
+        url: "https://drive.google.com/file/d/1gWnlsfQTYN-qMi2M9cEa5l2Qz2W6dsdv/view?usp=drive_link",
+        type: "ppt"
+      },
+      {
+        name: "Simulacro - Parcial No. 2",
+        url: "https://drive.google.com/file/d/150yucdufPKI1WpLxzlGUFbTf4tMgzDcX/view?usp=drive_link",
+        type: "pdf"
+      },
+      {
+        name: "Simulacro - Parcial No. 3",
+        url: "https://drive.google.com/file/d/1euu3OwXiu4OtuOYg4N4A9fZDv-IAkui2/view?usp=drive_link",
+        type: "pdf"
+      }
+    ],
+    topics: ["Variables", "Estructuras de control", "Funciones", "Arrays", "C++"]
+  },
+  {
+    id: "2",
+    title: "Taller: Programación Avanzada",
+    description: "Técnicas avanzadas de programación e introducción al paradigma orientado a objetos.",
+    dates: ["8 de Noviembre, 2023", "20 de Marzo, 2025", "19 de Mayo, 2025"],
+    materials: [
+      {
+        name: "Simulacro - Parcial No. 1",
+        url: "https://drive.google.com/file/d/1sHX0NrQoqPfqF0VriHFbTZArsQ84DGYz/view?usp=drive_link",
+        type: "pdf"
+      },
+      {
+        name: "Slides - Parcial No. 2",
+        url: "https://drive.google.com/file/d/1tkwQnNmzPcSGHb58dqekBJBxaq_7sLm3/view?usp=drive_link",
+        type: "ppt"
+      },
+      {
+        name: "Simulacro - Parcial No. 2",
+        url: "https://drive.google.com/file/d/1oywoalikehnSqVLAYtni-kxqndmZFktM/view?usp=drive_link",
+        type: "pdf"
+      },
+      {
+        name: "Slides - Parcial No. 3",
+        url: "https://drive.google.com/file/d/1fdLJsQBw3hNAATq3Z65aj6MM_R7vg0QY/view?usp=drive_link",
+        type: "ppt"
+      }
+    ],
+    topics: ["POO", "Apuntadores", "Manejo de errores", "Java", "C++"]
+  },
+  {
+    id: "3",
+    title: "Taller: Estructuras de Datos",
+    description: "Implementación y uso de estructuras de datos fundamentales para resolver problemas complejos.",
+    dates: ["29 de Febrero, 2025", "9 de Abril, 2025", "29 de Mayo, 2025"],
+    materials: [
+      {
+        name: "Simulacro - Parcial No. 2",
+        url: "https://drive.google.com/file/d/1p9_xnDmhrYLXkz-1jybUHx_rgb-dnOMo/view?usp=drive_link",
+        type: "pdf"
+      },
+      {
+        name: "Solución Simulacro - Parcial No. 2",
+        url: "https://drive.google.com/file/d/1Bs1gWolsEWe0zTA4Ecpf3bnHYhfiyUB2/view?usp=drive_link",
+        type: "pdf"
+      },
+      {
+        name: "Simulacro (presencial) - Parcial No. 3",
+        url: "https://drive.google.com/file/d/1gqrUUhCenLDZxbGtxcQ7iheBy5I4BaIg/view?usp=drive_linkk",
+        type: "pdf"
+      },
+      {
+        name: "Simulacro (virtual) - Parcial No. 3",
+        url: "https://drive.google.com/file/d/1H3fIQTNZgWYw0DVlFCs-2gOzXJ5yDYdn/view?usp=drive_link",
+        type: "pdf"
+      },
+    ],
+    topics: ["STL", "Árboles", "Grafos", "C++"]
+  }
+];
+
+export function PreExamsContent() {
+  return (
+    <div className="max-w-7xl mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg">
+      <div className="space-y-8">
+        {preExams.map((preExam) => (
+          <div key={preExam.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+            {/* Header */}
+            <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
+                {preExam.title}
+              </h3>
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-gray-600 dark:text-gray-400 text-sm">📅 Fechas:</span>
+                {preExam.dates.map((date, index) => (
+                  <span
+                    key={index}
+                    className="px-2 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded-md"
+                  >
+                    {date}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="p-6">
+              <p className="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
+                {preExam.description}
+              </p>
+
+              {/* Topics */}
+              <div className="mb-6">
+                <h4 className="text-lg text-gray-900 dark:text-white mb-3">
+                  🎯 Temas Cubiertos
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                  {preExam.topics.map((topic, index) => (
+                    <span
+                      key={index}
+                      className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium"
+                    >
+                      {topic}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              {/* Materials */}
+              <div>
+                <h4 className="text-lg text-gray-900 dark:text-white mb-3">
+                  📁 Material Utilizado
+                </h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                  {preExam.materials.map((material, index) => (
+                    <a
+                      key={index}
+                      href={material.url}
+                      target="_blank"
+                      className="flex items-center p-3 no-underline bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 group min-w-0"
+                    >
+                      <div className="flex-shrink-0 mr-3">
+                        {material.type === 'pdf' && (
+                          <svg className="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+                          </svg>
+                        )}
+                        {material.type === 'ppt' && (
+                          <svg className="w-6 h-6 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+                          </svg>
+                        )}
+                        {material.type === 'doc' && (
+                          <svg className="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+                          </svg>
+                        )}
+                        {material.type === 'link' && (
+                          <svg className="w-6 h-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5a2 2 0 112.828 2.828l-1.5 1.5a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l1.5-1.5a4 4 0 00-5.656-5.656l-3 3a4 4 0 00-.586 5.414z" clipRule="evenodd" />
+                          </svg>
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0 overflow-hidden">
+                        <p className="text-sm font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 truncate">
+                          {material.name}
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 capitalize truncate">
+                          {material.type}
+                        </p>
+                      </div>
+                      <svg className="w-4 h-4 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Call to Action */}
+      <div className="mt-8 text-center">
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          ¿Te interesa participar en nuestros próximos preparciales?
+        </p>
+        <a
+          href="https://www.instagram.com/acmjaveriana"
+          target="_blank"
+          className="no-underline bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white hover:text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200">
+          📝 Inscribirse en Próximos Talleres
+        </a>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/sections/about-us.tsx b/src/components/home/sections/about-us.tsx
deleted file mode 100644
index 0dd8a1d..0000000
--- a/src/components/home/sections/about-us.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import { Carousel, Card } from "@/components/home/apple-cards-carousel";
-import { FocusCards } from "../focus-cards";
-
-export function AboutUs() {
-  const cards = carrousel_items.map((card, index) => (
-    <Card key={card.src} card={card} index={index} />
-  ));
-
-  return (
-    <div id="about-us" className="space-y-8 pl-4 sm:pl-6 lg:pl-8 py-12">
-      <div className="text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-40">
-        <h1 className="dark:text-white">Sobre Nosotros</h1>
-        <p className="text-xl dark:text-white/80">
-          Somos una comunidad apasionada por la tecnología y la innovación,
-          dedicada a impulsar el crecimiento profesional y personal de nuestros
-          miembros a través de la colaboración, el aprendizaje y el liderazgo.
-        </p>
-      </div>
-      <Carousel items={cards} />
-    </div>
-  );
-}
-
-const CPMembersContent = () => {
-  const [cp_members, setCPMembers] = useState([]);
-  const [cp_coaches, setCPCoaches] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetch(
-      "https://codeforces.com/api/user.info?checkHistoricHandles=false&handles=aruiz08;firulo;TalkySafe143;achalogy;Cojuan;Avila_Sa;sandoval95",
-      {
-        cache: "no-store",
-      },
-    )
-      .then((response) => response.json())
-      .then((data) => {
-        if (data.status === "OK" && Array.isArray(data.result)) {
-          // Separar los coaches de los miembros
-          const membersData = data.result
-            .filter((user) => user.handle !== "sandoval95")
-            .sort((a, b) => b.rating - a.rating)
-            .map((user) => ({
-              title: `${user.handle} - (Rating: ${user.rating})`,
-              src: user.titlePhoto,
-            }));
-
-          const coachData = data.result
-            .filter((user) => user.handle === "sandoval95")
-            .map((user) => ({
-              title: `${user.handle} - Coach`,
-              src: user.titlePhoto,
-            }));
-
-          setCPMembers(membersData);
-          setCPCoaches(coachData);
-        }
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.error("Error fetching data:", error);
-        setLoading(false);
-      });
-  }, []);
-
-  if (loading) return <p>Loading...</p>;
-
-  return (
-    <>
-      <p className="dark:text-[--azul-niebla]">
-        Somos un grupo apasionado por competir y desctacarnos cada día más
-      </p>
-      <br />
-      <FocusCards cards={cp_members} />
-      <p className="text-3xl text-center my-10 font-semibold dark:text-[--azul-niebla]">
-        Nuestro Coach
-      </p>
-      <FocusCards cards={cp_coaches} />
-    </>
-  );
-};
-
-const carrousel_items = [
-  {
-    category: "Programación Competitiva",
-    title: "¡Conoce a nuestro grupo de programación competitiva!",
-    src: "https://drive.google.com/uc?export=view&id=1RW9BeAFChl4J9darhpCqwl1NEvrNi_jJ",
-    content: <CPMembersContent />,
-  },
-  {
-    category: "Productivity",
-    title: "Enhance your productivity.",
-    src: "https://images.unsplash.com/photo-1531554694128-c4c6665f59c2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    content: <></>,
-  },
-  {
-    category: "Product",
-    title: "Launching the new Apple Vision Pro.",
-    src: "https://images.unsplash.com/photo-1713869791518-a770879e60dc?q=80&w=2333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    content: <></>,
-  },
-
-  {
-    category: "Product",
-    title: "Maps for your iPhone 15 Pro Max.",
-    src: "https://images.unsplash.com/photo-1599202860130-f600f4948364?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    content: <></>,
-  },
-  {
-    category: "iOS",
-    title: "Photography just got better.",
-    src: "https://images.unsplash.com/photo-1602081957921-9137a5d6eaee?q=80&w=2793&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    content: <></>,
-  },
-  {
-    category: "Hiring",
-    title: "Hiring for a Staff Software Engineer",
-    src: "https://images.unsplash.com/photo-1511984804822-e16ba72f5848?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    content: <></>,
-  },
-];
diff --git a/src/components/home/sections/activities.tsx b/src/components/home/sections/activities.tsx
index b13d7d7..b6030fe 100644
--- a/src/components/home/sections/activities.tsx
+++ b/src/components/home/sections/activities.tsx
@@ -1,359 +1,105 @@
 "use client";
-import { cn } from "@/utils/cn";
-import React from "react";
-import { BentoGrid, BentoGridItem } from "../bento-grid";
-import {
-  IconBoxAlignRightFilled,
-  IconClipboardCopy,
-  IconFileBroken,
-  IconSignature,
-  IconTableColumn,
-} from "@tabler/icons-react";
-import { motion } from "framer-motion";
-import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import { Carousel, Card } from "@/components/home/apple-cards-carousel";
+import { FocusCards } from "../focus-cards";
+import { PreExamsContent } from "../pre-exams-content";
 
 export function Activities() {
+  const cards = carrousel_items.map((card, index) => (
+    <Card key={card.src} card={card} index={index} />
+  ));
+
   return (
-    <div id="activities" className="bg-white dark:bg-black py-10 lg:py-20">
-      <h2 className="text-center max-w-7xl pl-4 mx-auto text-xl md:text-5xl font-bold text-neutral-800 dark:text-neutral-200 font-sans">
-        Activities
-      </h2>
-      <BentoGrid className="py-10 lg:py-20 max-w-4xl mx-auto md:auto-rows-[20rem]">
-        {items.map((item, i) => (
-          <BentoGridItem
-            key={i}
-            title={item.title}
-            description={item.description}
-            header={item.header}
-            className={cn("[&>p:text-lg]", item.className)}
-            icon={item.icon}
-          />
-        ))}
-      </BentoGrid>
+    <div id="activities" className="space-y-8 pl-4 sm:pl-6 lg:pl-8 py-12">
+      <div className="text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-40">
+        <h1 className="dark:text-white">Nuestras Actividades</h1>
+        <p className="text-xl dark:text-white/80">
+          En nuestra comunidad organizamos actividades como talleres prácticos, competencias de programación
+          y proyectos colaborativos. Nuestro objetivo es aprender juntos, mejorar nuestras habilidades y
+          disfrutar resolviendo retos tecnológicos en equipo.
+        </p>
+      </div>
+      <Carousel items={cards} />
     </div>
   );
 }
 
-const SkeletonOne = () => {
-  const variants = {
-    initial: {
-      x: 0,
-    },
-    animate: {
-      x: 10,
-      rotate: 5,
-      transition: {
-        duration: 0.2,
-      },
-    },
-  };
-  const variantsSecond = {
-    initial: {
-      x: 0,
-    },
-    animate: {
-      x: -10,
-      rotate: -5,
-      transition: {
-        duration: 0.2,
-      },
-    },
-  };
+const CPMembersContent = () => {
+  const [cp_members, setCPMembers] = useState([]);
+  const [cp_coaches, setCPCoaches] = useState([]);
+  const [loading, setLoading] = useState(true);
 
-  return (
-    <motion.div
-      initial="initial"
-      whileHover="animate"
-      className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col space-y-2"
-    >
-      <motion.div
-        variants={variants}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2  items-center space-x-2 bg-white dark:bg-black"
-      >
-        <div className="h-6 w-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex-shrink-0" />
-        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-900" />
-      </motion.div>
-      <motion.div
-        variants={variantsSecond}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center space-x-2 w-3/4 ml-auto bg-white dark:bg-black"
-      >
-        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-900" />
-        <div className="h-6 w-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex-shrink-0" />
-      </motion.div>
-      <motion.div
-        variants={variants}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center space-x-2 bg-white dark:bg-black"
-      >
-        <div className="h-6 w-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex-shrink-0" />
-        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-900" />
-      </motion.div>
-    </motion.div>
-  );
-};
-const SkeletonTwo = () => {
-  const variants = {
-    initial: {
-      width: 0,
-    },
-    animate: {
-      width: "100%",
-      transition: {
-        duration: 0.2,
+  useEffect(() => {
+    fetch(
+      "https://codeforces.com/api/user.info?checkHistoricHandles=false&handles=aruiz08;firulo;TalkySafe143;achalogy;Cojuan;Avila_Sa;sandoval95",
+      {
+        cache: "no-store",
       },
-    },
-    hover: {
-      width: ["0%", "100%"],
-      transition: {
-        duration: 2,
-      },
-    },
-  };
-  const arr = new Array(6).fill(0);
-  return (
-    <motion.div
-      initial="initial"
-      animate="animate"
-      whileHover="hover"
-      className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col space-y-2"
-    >
-      {arr.map((_, i) => (
-        <motion.div
-          key={"skelenton-two" + i}
-          variants={variants}
-          style={{
-            maxWidth: 0.5 * (100 - 40) + 40 + "%",
-          }}
-          className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2  items-center space-x-2 bg-neutral-100 dark:bg-black w-full h-4"
-        ></motion.div>
-      ))}
-    </motion.div>
-  );
-};
-const SkeletonThree = () => {
-  const variants = {
-    initial: {
-      backgroundPosition: "0 50%",
-    },
-    animate: {
-      backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
-    },
-  };
-  return (
-    <motion.div
-      initial="initial"
-      animate="animate"
-      variants={variants}
-      transition={{
-        duration: 5,
-        repeat: Infinity,
-        repeatType: "reverse",
-      }}
-      className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] rounded-lg bg-dot-black/[0.2] flex-col space-y-2"
-      style={{
-        background:
-          "linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)",
-        backgroundSize: "400% 400%",
-      }}
-    >
-      <motion.div className="h-full w-full rounded-lg"></motion.div>
-    </motion.div>
-  );
-};
-const SkeletonFour = () => {
-  const first = {
-    initial: {
-      x: 20,
-      rotate: -5,
-    },
-    hover: {
-      x: 0,
-      rotate: 0,
-    },
-  };
-  const second = {
-    initial: {
-      x: -20,
-      rotate: 5,
-    },
-    hover: {
-      x: 0,
-      rotate: 0,
-    },
-  };
-  return (
-    <motion.div
-      initial="initial"
-      animate="animate"
-      whileHover="hover"
-      className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-row space-x-2"
-    >
-      <motion.div
-        variants={first}
-        className="h-full w-1/3 rounded-2xl bg-white p-4 dark:bg-black dark:border-white/[0.1] border border-neutral-200 flex flex-col items-center justify-center"
-      >
-        <Image
-          src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
-          alt="avatar"
-          height="100"
-          width="100"
-          className="rounded-full h-10 w-10"
-        />
-        <p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
-          Just code in Vanilla Javascript
-        </p>
-        <p className="border border-red-500 bg-red-100 dark:bg-red-900/20 text-red-600 text-xs rounded-full px-2 py-0.5 mt-4">
-          Delusional
-        </p>
-      </motion.div>
-      <motion.div className="h-full relative z-20 w-1/3 rounded-2xl bg-white p-4 dark:bg-black dark:border-white/[0.1] border border-neutral-200 flex flex-col items-center justify-center">
-        <Image
-          src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
-          alt="avatar"
-          height="100"
-          width="100"
-          className="rounded-full h-10 w-10"
-        />
-        <p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
-          Tailwind CSS is cool, you know
-        </p>
-        <p className="border border-green-500 bg-green-100 dark:bg-green-900/20 text-green-600 text-xs rounded-full px-2 py-0.5 mt-4">
-          Sensible
-        </p>
-      </motion.div>
-      <motion.div
-        variants={second}
-        className="h-full w-1/3 rounded-2xl bg-white p-4 dark:bg-black dark:border-white/[0.1] border border-neutral-200 flex flex-col items-center justify-center"
-      >
-        <Image
-          src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
-          alt="avatar"
-          height="100"
-          width="100"
-          className="rounded-full h-10 w-10"
-        />
-        <p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
-          I love angular, RSC, and Redux.
-        </p>
-        <p className="border border-orange-500 bg-orange-100 dark:bg-orange-900/20 text-orange-600 text-xs rounded-full px-2 py-0.5 mt-4">
-          Helpless
-        </p>
-      </motion.div>
-    </motion.div>
-  );
-};
-const SkeletonFive = () => {
-  const variants = {
-    initial: {
-      x: 0,
-    },
-    animate: {
-      x: 10,
-      rotate: 5,
-      transition: {
-        duration: 0.2,
-      },
-    },
-  };
-  const variantsSecond = {
-    initial: {
-      x: 0,
-    },
-    animate: {
-      x: -10,
-      rotate: -5,
-      transition: {
-        duration: 0.2,
-      },
-    },
-  };
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.status === "OK" && Array.isArray(data.result)) {
+          // Separar los coaches de los miembros
+          const membersData = data.result
+            .filter((user) => user.handle !== "sandoval95")
+            .sort((a, b) => b.rating - a.rating)
+            .map((user) => ({
+              title: `${user.handle} - (Rating: ${user.rating})`,
+              src: user.titlePhoto,
+            }));
+
+          const coachData = data.result
+            .filter((user) => user.handle === "sandoval95")
+            .map((user) => ({
+              title: `${user.handle} - Coach`,
+              src: user.titlePhoto,
+            }));
+
+          setCPMembers(membersData);
+          setCPCoaches(coachData);
+        }
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
 
   return (
-    <motion.div
-      initial="initial"
-      whileHover="animate"
-      className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col space-y-2"
-    >
-      <motion.div
-        variants={variants}
-        className="flex flex-row rounded-2xl border border-neutral-100 dark:border-white/[0.2] p-2  items-start space-x-2 bg-white dark:bg-black"
-      >
-        <Image
-          src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
-          alt="avatar"
-          height="100"
-          width="100"
-          className="rounded-full h-10 w-10"
-        />
-        <p className="text-xs text-neutral-500">
-          There are a lot of cool framerworks out there like React, Angular,
-          Vue, Svelte that can make your life ....
-        </p>
-      </motion.div>
-      <motion.div
-        variants={variantsSecond}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center justify-end space-x-2 w-3/4 ml-auto bg-white dark:bg-black"
-      >
-        <p className="text-xs text-neutral-500">Use PHP.</p>
-        <div className="h-6 w-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex-shrink-0" />
-      </motion.div>
-    </motion.div>
+    <>
+      <p className="dark:text-[--azul-niebla]">
+        Somos un grupo apasionado por competir y desctacarnos cada día más
+      </p>
+      <br />
+      <FocusCards cards={cp_members} />
+      <p className="text-3xl text-center my-10 font-semibold dark:text-[--azul-niebla]">
+        Nuestro Coach
+      </p>
+      <FocusCards cards={cp_coaches} />
+    </>
   );
 };
-const items = [
-  {
-    title: "AI Content Generation",
-    description: (
-      <span className="text-sm">
-        Experience the power of AI in generating unique content.
-      </span>
-    ),
-    header: <SkeletonOne />,
-    className: "md:col-span-1",
-    icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
-  },
-  {
-    title: "Automated Proofreading",
-    description: (
-      <span className="text-sm">
-        Let AI handle the proofreading of your documents.
-      </span>
-    ),
-    header: <SkeletonTwo />,
-    className: "md:col-span-1",
-    icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
-  },
+
+const carrousel_items = [
   {
-    title: "Contextual Suggestions",
-    description: (
-      <span className="text-sm">
-        Get AI-powered suggestions based on your writing context.
-      </span>
-    ),
-    header: <SkeletonThree />,
-    className: "md:col-span-1",
-    icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
+    category: "Programación Competitiva",
+    title: "¡Conoce a nuestro grupo de programación competitiva!",
+    src: "https://drive.google.com/uc?export=view&id=1RW9BeAFChl4J9darhpCqwl1NEvrNi_jJ",
+    content: <CPMembersContent />,
   },
   {
-    title: "Sentiment Analysis",
-    description: (
-      <span className="text-sm">
-        Understand the sentiment of your text with AI analysis.
-      </span>
-    ),
-    header: <SkeletonFour />,
-    className: "md:col-span-2",
-    icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
+    category: "Talleres Pre-Parciales",
+    title: "Refuerza tus conocimientos antes de los parciales con nuestros talleres",
+    src: "https://drive.google.com/uc?export=view&id=1mAWVNMh5wmlaBaciCkSMOV2nQXVYkMAu",
+    content: <PreExamsContent />,
   },
-
   {
-    title: "Text Summarization",
-    description: (
-      <span className="text-sm">
-        Summarize your lengthy documents with AI technology.
-      </span>
-    ),
-    header: <SkeletonFive />,
-    className: "md:col-span-1",
-    icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
+    category: "Cursos y Talleres",
+    title: "Aprende nuevas habilidades con nuestros cursos y talleres",
+    src: "https://drive.google.com/uc?export=view&id=1HH58GMKbAqUc06YbqzhHifatfKGDRpV0",
+    content: <></>,
   },
 ];
diff --git a/src/components/home/ui/table.tsx b/src/components/home/ui/table.tsx
deleted file mode 100644
index 192ba95..0000000
--- a/src/components/home/ui/table.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/utils/cn";
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-));
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-));
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-));
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
-    {...props}
-  />
-));
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className,
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-));
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-TableCaption.displayName = "TableCaption";
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 72980f5..0f6afa6 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -131,18 +131,23 @@ body {
 
 /* Headings - Using BC Liguria for headers */
 h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h2 {
   font-family: var(--font-primary);
-  font-weight: var(--font-bold);
   line-height: var(--line-height-tight);
   color: var(--azul-noche);
   margin-bottom: var(--space-md);
 }
 
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-secondary);
+    line-height: var(--line-height-tight);
+    color: var(--azul-noche);
+    margin-bottom: var(--space-sm);
+}
+
 h1 {
   font-size: var(--font-size-5xl);
   font-weight: var(--font-black);