diff --git a/src/app/baseball/page.tsx b/src/app/baseball/page.tsx
index 3efeb96..59a0a78 100644
--- a/src/app/baseball/page.tsx
+++ b/src/app/baseball/page.tsx
@@ -2,14 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function BaseballPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }, { name: "Football", id: "/football" }, { name: "Basketball", id: "/basketball" }, { name: "UFC", id: "/ufc" }, { name: "Hockey", id: "/hockey" }, { name: "Baseball", id: "/baseball" }]} brandName="CHODSSPORTS" />
-      <div className="pt-32 pb-20">
-        <BlogCardOne title="Baseball News & Highlights" animationType="slide-up" textboxLayout="default" blogs={[]} />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }, { name: "Football", id: "/football" }, { name: "Basketball", id: "/basketball" }, { name: "UFC", id: "/ufc" }, { name: "Hockey", id: "/hockey" }, { name: "Baseball", id: "/baseball" }]} />
+      </div>
+      <div id="latest" data-section="latest">
+        <BlogCardThree title="Baseball News & Highlights" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} description="All the latest diamonds action and baseball news." blogs={[]} />
       </div>
     </ThemeProvider>
   );