diff --git a/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_assets/photo_400x400.jpg b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_assets/photo_400x400.jpg
new file mode 100644
index 0000000..7e16284
Binary files /dev/null and b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_assets/photo_400x400.jpg differ
diff --git a/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/AboutMe.tsx b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/AboutMe.tsx
new file mode 100644
index 0000000..e08ed81
--- /dev/null
+++ b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/AboutMe.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Image from "next/image";
+import myPhoto from "../_assets/photo_400x400.jpg";
+
+export const AboutMe = () => {
+  return (
+    <section className="container mx-auto pt-8">
+      <div className="flex flex-col md:flex-row justify-center items-center">
+        <div className="md:flex-shrink-0">
+          <Image src={myPhoto} alt="My Photo" className="h-48 w-48 object-cover md:w-48 rounded-full" />
+        </div>
+        <div className="p-8 pb-0 md:pb-8 space-y-4 max-w-2xl md:ml-8">
+          <h2 className="text-3xl font-bold text-center">About Me</h2>
+          <p>{`I'm a full-stack engineer 🧑‍💻 and love a good game/puzzle 🧩.`}</p>
+          <p>{`My coding expertise spans everything from Front-End dev work (Angular, React, Vue, etc.) to C# to Big Data to Security to DevOps and (most recently) Web 3.`}</p>
+          <p>{`Current focus is on ZKsync, but I'm excited to learn anything/everything about the Ethereum ecosystem 🙌!`}</p>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/CardHover.tsx b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/CardHover.tsx
new file mode 100644
index 0000000..c20b5bc
--- /dev/null
+++ b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/CardHover.tsx
@@ -0,0 +1,63 @@
+import { type IndraIconSkill } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-skills";
+
+type CardProps = {
+  Icon: IndraIconSkill;
+  name: string;
+  description: string;
+  time: string;
+};
+
+const CardContent = ({ Icon, description, name, time }: CardProps) => {
+  return (
+    <div className="grid grid-rows-[auto_1fr_auto] gap-y-2 rounded-lg relative h-full w-full py-6 px-8 z-10">
+      <div className="flex items-center text-sm">
+        <Icon className="h-5 w-5" />
+        <h3 className="ml-2 text-lg font-semibold">{name}</h3>
+      </div>
+      <p className="text-sm">{description}</p>
+      <div className="flex justify-end">
+        <span>{time}</span>
+      </div>
+    </div>
+  );
+};
+
+export const CardHoverEffect1 = (props: CardProps) => {
+  return (
+    <div className="h-full w-full group relative inline-flex items-center justify-center overflow-hidden rounded-md bg-blue-500  font-medium">
+      <span className="absolute h-full w-full  bg-secondary  transition-all duration-300 group-hover:h-0 group-hover:w-0"></span>
+      <CardContent {...props} />
+    </div>
+  );
+};
+
+export const CardHoverEffect2 = (props: CardProps) => {
+  return (
+    <div className="group relative inline-flex h-full w-full items-center justify-center overflow-hidden rounded-md bg-secondary  font-medium text-primary-content">
+      <span className="absolute h-0 w-0 bg-blue-500 transition-all duration-300 group-hover:h-full group-hover:w-full"></span>
+      <CardContent {...props} />
+    </div>
+  );
+};
+
+export const CardHoverEffect3 = (props: CardProps) => {
+  return (
+    <div className="group relative h-full w-full overflow-hidden overflow-x-hidden rounded-md bg-secondary">
+      <span className="absolute inset-0 overflow-hidden rounded-md">
+        <span className="absolute left-0 aspect-square w-full origin-center -translate-x-full rounded-full bg-blue-500 transition-all duration-500 group-hover:-translate-x-0 group-hover:scale-150"></span>
+      </span>
+      <CardContent {...props} />
+    </div>
+  );
+};
+
+export const CardHoverEffect4 = (props: CardProps) => {
+  return (
+    <div className="group relative z-0 h-full w-full overflow-hidden overflow-x-hidden rounded-md bg-secondary">
+      <span className="absolute inset-0 overflow-hidden rounded-md">
+        <span className="absolute left-0 aspect-square w-full origin-center translate-x-full rounded-full bg-blue-500 transition-all duration-500 group-hover:-translate-x-0 group-hover:scale-150"></span>
+      </span>
+      <CardContent {...props} />
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/SocialsSection.tsx b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/SocialsSection.tsx
new file mode 100644
index 0000000..1dcc1a4
--- /dev/null
+++ b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/SocialsSection.tsx
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { IconSocials, socials } from "../_data/socials";
+
+type HoverRevealButtonProps = {
+  Icon: IconSocials;
+  label: string;
+};
+
+const HoverRevealButton = ({ Icon, label }: HoverRevealButtonProps) => {
+  return (
+    <div className="flex items-center gap-2 min-w-full md:min-w-32 text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
+      <Icon className="h-5 w-5" />
+      {label}
+    </div>
+  );
+};
+
+const SocialsSection = () => {
+  return (
+    <section>
+      <h2 className="text-2xl font-semibold mb-2 sr-only">Socials</h2>
+      <ul className="flex gap-4 items-center justify-center flex-col md:flex-row">
+        {socials.map(social => (
+          <li key={social.name} className="w-full md:w-min">
+            <Link
+              aria-label={social.name}
+              className="flex items-center gap-2 opacity-85 hover:opacity-100 w-full px-8 md:px-0"
+              href={social.url}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <HoverRevealButton Icon={social.icon} label={social.username} />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default SocialsSection;
diff --git a/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_data/socials.tsx b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_data/socials.tsx
new file mode 100644
index 0000000..5299e4f
--- /dev/null
+++ b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_data/socials.tsx
@@ -0,0 +1,38 @@
+import { SiGithub, SiTwitter } from "react-icons/si";
+import { SlGlobe } from "react-icons/sl";
+import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+
+export const ETH_ADDRESS = "0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1";
+
+export const socials = [
+  {
+    icon: SlGlobe,
+    name: "Website",
+    label: "Website",
+    url: "https://nvillanueva.com",
+    username: "nvillanueva.com",
+  },
+  {
+    icon: SiGithub,
+    label: "GitHub",
+    name: "GitHub",
+    url: "https://github.com/mexicanace",
+    username: "mexicanace",
+  },
+  {
+    icon: SiTwitter,
+    label: "Twitter",
+    name: "Twitter",
+    url: "twitter.com/mexicanace",
+    username: "@mexicanace",
+  },
+  {
+    name: "BuidlGuidl",
+    url: `https://app.buidlguidl.com/builders/${ETH_ADDRESS}`,
+    label: "BuidlGuidl",
+    icon: BuidlGuidlLogo,
+    username: "BuidlGuidl",
+  },
+] as const;
+
+export type IconSocials = (typeof socials)[number]["icon"];
diff --git a/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/page.tsx b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/page.tsx
new file mode 100644
index 0000000..808ac86
--- /dev/null
+++ b/packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/page.tsx
@@ -0,0 +1,22 @@
+import { AboutMe } from "./_components/AboutMe";
+import SocialsSection from "./_components/SocialsSection";
+import { ETH_ADDRESS } from "./_data/socials";
+import type { NextPage } from "next";
+import { Address } from "~~/components/scaffold-eth";
+
+const BuilderPage: NextPage = () => {
+  return (
+    <main className="container mx-auto px-4 py-8 space-y-8 max-w-5xl">
+      <div className="flex flex-col md:flex-row items-center justify-between">
+        <h1 className="text-4xl font-bold">Nicolas Villanueva</h1>
+        <Address address={ETH_ADDRESS} format="short" />
+      </div>
+
+      <AboutMe />
+
+      <SocialsSection />
+    </main>
+  );
+};
+
+export default BuilderPage;
diff --git a/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/_assets/RolandTheFrank.jpg b/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/_assets/RolandTheFrank.jpg
new file mode 100644
index 0000000..630e7ec
Binary files /dev/null and b/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/_assets/RolandTheFrank.jpg differ
diff --git a/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/page.tsx b/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/page.tsx
index cb66c68..08a55d4 100644
--- a/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/page.tsx
+++ b/packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/page.tsx
@@ -1,15 +1,17 @@
+import Image from "next/image";
+import profileUrl from "./_assets/RolandTheFrank.jpg";
 import { GitHubIcon, LinkedInIcon, TwitterIcon, YouTubeIcon } from "./profileLinks";
 import type { NextPage } from "next";
 import { Address } from "~~/components/scaffold-eth";
 
-const profileUrl = "https://pbs.twimg.com/media/Ey8oK6gXMAUKrEX.jpg";
-
 const RolandTheFrank: NextPage = () => {
   return (
     <div className="flex items-center flex-col flex-grow pt-10">
       <div className="w-96 px-6 py-6  text-center bg-gray-800 rounded-lg lg:mt-0 xl:px-10">
         <div className="space-y-4 xl:space-y-6 pt-8">
-          <img className="mx-auto rounded-full h-36 w-36" src={profileUrl} alt="author avatar" />
+          <div className="mx-auto rounded-full h-36 w-36 overflow-hidden">
+            <Image alt="author avatar" width={144} height={144} src={profileUrl} className="object-cover" />
+          </div>
           <div className="space-y-2">
             <div className="flex justify-center items-center flex-col space-y-3 text-lg font-medium leading-6">
               <h3 className="text-amber-50">
diff --git a/packages/nextjs/app/builders/0xfb8b972b0D1cF9BB242A40F7AEA8E9a1bF89E0E3/page.tsx b/packages/nextjs/app/builders/0xfb8b972b0D1cF9BB242A40F7AEA8E9a1bF89E0E3/page.tsx
index 2602907..8e157d0 100644
--- a/packages/nextjs/app/builders/0xfb8b972b0D1cF9BB242A40F7AEA8E9a1bF89E0E3/page.tsx
+++ b/packages/nextjs/app/builders/0xfb8b972b0D1cF9BB242A40F7AEA8E9a1bF89E0E3/page.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import Image from "next/image";
-import { NextPage } from "next"; 
+import { NextPage } from "next";
 
-const Zeze : NextPage = () => {
+const Zeze: NextPage = () => {
   return (
     <>
       <div className="basis-full md:basis-1/2 flex justify-center items-center h-screen">
@@ -52,4 +52,4 @@ const Zeze : NextPage = () => {
   );
 };
 
-export default Zeze
+export default Zeze;
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 96a9436..347c77c 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import CheckedInCounter from "../components/CheckedInCounter";
 import type { NextPage } from "next";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
@@ -15,8 +16,7 @@ const Home: NextPage = () => {
           </h1>
           <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
           <p className="text-lg flex gap-2 justify-center">
-            <span className="font-bold">Checked in builders count:</span>
-            <span>To Be Implemented</span>
+            <CheckedInCounter />
           </p>
         </div>
 
diff --git a/packages/nextjs/components/CheckedInCounter.tsx b/packages/nextjs/components/CheckedInCounter.tsx
new file mode 100644
index 0000000..dac0fe1
--- /dev/null
+++ b/packages/nextjs/components/CheckedInCounter.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+const CheckInCount = () => {
+  const [feedback, setFeedback] = useState<string>("");
+  const [result, setResult] = useState<string>();
+
+  const {
+    data: checkedIn,
+    isLoading: checkInLoading,
+    error: checkInError,
+  } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
+  useEffect(() => {
+    if (checkInError) {
+      setFeedback("Something went wrong");
+      console.error(checkInError);
+    } else {
+      setResult(checkInLoading ? "..." : String(Number(checkedIn)));
+    }
+  }, [checkInError, checkInLoading, checkedIn]);
+
+  return (
+    <>
+      <span className="font-bold">Checked in builders count: {result}</span>
+      {feedback && <p>{feedback}</p>}
+    </>
+  );
+};
+
+export default CheckInCount;