diff --git a/packages/nextjs/app/_components/BuildersCheckInCount.tsx b/packages/nextjs/app/_components/BuildersCheckInCount.tsx
new file mode 100644
index 0000000..b971df9
--- /dev/null
+++ b/packages/nextjs/app/_components/BuildersCheckInCount.tsx
@@ -0,0 +1,41 @@
+import { CounterDisplay } from "./CounterDisplay";
+import { createPublicClient, getContract, http } from "viem";
+import { optimism } from "viem/chains";
+
+const CONTRACT_ADR = "0x72ccAbE6620fa94eC69569d17f18a3914BEFBFD6";
+const FUNCTION_NAME = "checkedInCounter";
+
+// Defining the ABI for just the function we need
+const BatchRegistryABI = [
+  {
+    name: FUNCTION_NAME,
+    type: "function",
+    stateMutability: "view",
+    inputs: [],
+    outputs: [{ type: "uint256" }],
+  },
+] as const;
+
+async function BuildersCheckInCount() {
+  try {
+    // A Client in the context of viem is similar to an Ethers.js Provider.
+    const publicClient = createPublicClient({
+      chain: optimism,
+      transport: http(),
+    });
+
+    const contract = getContract({
+      address: CONTRACT_ADR,
+      abi: BatchRegistryABI,
+      client: publicClient,
+    });
+
+    const counter = await contract.read.checkedInCounter();
+
+    return <CounterDisplay data={counter} error={null} />;
+  } catch (error) {
+    return <CounterDisplay data={undefined} error={error instanceof Error ? error : new Error("Unknown error")} />;
+  }
+}
+
+export default BuildersCheckInCount;
diff --git a/packages/nextjs/app/_components/CounterDisplay.tsx b/packages/nextjs/app/_components/CounterDisplay.tsx
new file mode 100644
index 0000000..2d5c84a
--- /dev/null
+++ b/packages/nextjs/app/_components/CounterDisplay.tsx
@@ -0,0 +1,11 @@
+export async function CounterDisplay({ data: counter, error }: { data?: bigint; error: Error | null }) {
+  return (
+    <div className="text-lg flex gap-2 justify-center items-center">
+      <span className="font-bold">Checked in builders count:</span>
+
+      {error && <span className="text-error">Error!</span>}
+
+      {counter && <span>{counter.toString()}</span>}
+    </div>
+  );
+}
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index bfbd5ae..0ea8fcb 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,6 +1,5 @@
-"use client";
-
 import Link from "next/link";
+import BuildersCheckInCount from "./_components/BuildersCheckInCount";
 import type { NextPage } from "next";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
@@ -14,10 +13,7 @@ const Home: NextPage = () => {
             <span className="block text-4xl font-bold">Batch 12</span>
           </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>
-          </p>
+          <BuildersCheckInCount />
         </div>
 
         <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">