diff --git a/packages/nextjs/pages/batches/components/BatchCta.tsx b/packages/nextjs/pages/batches/components/BatchCta.tsx
new file mode 100644
index 0000000..cb0bc24
--- /dev/null
+++ b/packages/nextjs/pages/batches/components/BatchCta.tsx
@@ -0,0 +1,34 @@
+import { formatDate } from "../utils/formatDate";
+import TrackedLink from "~~/components/TrackedLink";
+
+interface BatchCtaProps {
+  openBatchNumber: number | null;
+  openBatchStartDate: number | null;
+}
+
+export const BatchCta = ({ openBatchNumber, openBatchStartDate }: BatchCtaProps) => {
+  return (
+    <div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
+      <div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
+        <div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
+          <h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
+            Batch #{openBatchNumber}
+          </h3>
+          <p className="text-white">
+            Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
+            <strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
+          </p>
+        </div>
+        <div className="flex justify-center lg:justify-end w-full lg:w-auto">
+          <TrackedLink
+            id="apply-next-batch"
+            href="https://speedrunethereum.com/"
+            className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
+          >
+            Go SpeedRunEthereum
+          </TrackedLink>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/nextjs/pages/batches/index.tsx b/packages/nextjs/pages/batches/index.tsx
index ee03b3e..90d5de1 100644
--- a/packages/nextjs/pages/batches/index.tsx
+++ b/packages/nextjs/pages/batches/index.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { BatchCta } from "./components/BatchCta";
+import { formatDate } from "./utils/formatDate";
 import type { GetStaticProps } from "next";
 import { Footer } from "~~/components/Footer";
 import { MetaHeader } from "~~/components/MetaHeader";
@@ -31,14 +33,6 @@ interface PageProps {
   openBatchStartDate: number | null;
 }
 
-const formatDate = (timestamp: number): string => {
-  return new Date(timestamp).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-};
-
 // Custom header for the batches page since the "Go to app" button is different
 const BatchesHeader = () => {
   return (
@@ -151,29 +145,8 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
             </div>
           </div>
 
-          {/* Next Batch CTA - call to action */}
-          <div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
-            <div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
-              <div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
-                <h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
-                  Batch #{openBatchNumber}
-                </h3>
-                <p className="text-white">
-                  Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
-                  <strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
-                </p>
-              </div>
-              <div className="flex justify-center lg:justify-end w-full lg:w-auto">
-                <TrackedLink
-                  id="apply-next-batch"
-                  href="https://speedrunethereum.com/"
-                  className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
-                >
-                  Go SpeedRunEthereum
-                </TrackedLink>
-              </div>
-            </div>
-          </div>
+          {/* Next Batch CTA */}
+          <BatchCta openBatchNumber={openBatchNumber} openBatchStartDate={openBatchStartDate} />
         </div>
       </div>
 
@@ -285,28 +258,7 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
       <div className="bg-[#EDEFFF] pt-16 lg:pt-24 pb-16">
         <div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
           {/* Next Batch CTA */}
-          <div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
-            <div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
-              <div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
-                <h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
-                  Batch #{openBatchNumber}
-                </h3>
-                <p className="text-white">
-                  Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
-                  <strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
-                </p>
-              </div>
-              <div className="flex justify-center lg:justify-end w-full lg:w-auto">
-                <TrackedLink
-                  id="apply-next-batch"
-                  href="https://speedrunethereum.com/"
-                  className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
-                >
-                  Go SpeedRunEthereum
-                </TrackedLink>
-              </div>
-            </div>
-          </div>
+          <BatchCta openBatchNumber={openBatchNumber} openBatchStartDate={openBatchStartDate} />
 
           <div className="flex justify-center items-center mb-8">
             <Image src={"/assets/bg-batches-winners.svg"} alt={"Winners"} width={50} height={50} className="mr-3" />
diff --git a/packages/nextjs/pages/batches/utils/formatDate.ts b/packages/nextjs/pages/batches/utils/formatDate.ts
new file mode 100644
index 0000000..5c798e6
--- /dev/null
+++ b/packages/nextjs/pages/batches/utils/formatDate.ts
@@ -0,0 +1,7 @@
+export const formatDate = (timestamp: number): string => {
+  return new Date(timestamp).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+};