diff --git a/packages/nextjs/app/_components/BuildersCheckInCount.tsx b/packages/nextjs/app/_components/BuildersCheckInCount.tsx
index c24def5..ba5cfcb 100644
--- a/packages/nextjs/app/_components/BuildersCheckInCount.tsx
+++ b/packages/nextjs/app/_components/BuildersCheckInCount.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import React from "react";
-import { displayTxResult } from "../debug/_components/contract";
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { CounterDisplay } from "./CounterDisplay";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 const CONTRACT_NAME = "BatchRegistry";
@@ -19,18 +18,7 @@ function BuildersCheckInCount() {
     functionName: FUNCTION_NAME,
   });
 
-  return (
-    <div className="text-lg flex gap-2 justify-center items-center">
-      <span className="font-bold">Checked in builders count:</span>
-      {isLoading || (!error && !counter) ? (
-        <ArrowPathIcon className="size-5 animate-spin" />
-      ) : error ? (
-        <span className="text-error">Error!</span>
-      ) : (
-        <span>{displayTxResult(counter)}</span>
-      )}
-    </div>
-  );
+  return <CounterDisplay data={counter} isLoading={isLoading} error={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..f0a8b44
--- /dev/null
+++ b/packages/nextjs/app/_components/CounterDisplay.tsx
@@ -0,0 +1,25 @@
+import { displayTxResult } from "../debug/_components/contract";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+
+export async function CounterDisplay({
+  data: counter,
+  isLoading,
+  error,
+}: {
+  data?: bigint;
+  isLoading: boolean;
+  error: Error | null;
+}) {
+  return (
+    <div className="text-lg flex gap-2 justify-center items-center">
+      <span className="font-bold">Checked in builders count:</span>
+      {isLoading || (!error && !counter) ? (
+        <ArrowPathIcon className="size-5 animate-spin" />
+      ) : error ? (
+        <span className="text-error">Error!</span>
+      ) : (
+        <span>{displayTxResult(counter)}</span>
+      )}
+    </div>
+  );
+}