diff --git a/src/components/MainArticle.tsx b/src/components/MainArticle.tsx
index 3ce72e677d4..cbe807d47a8 100644
--- a/src/components/MainArticle.tsx
+++ b/src/components/MainArticle.tsx
@@ -1,9 +1,16 @@
-import { Box, type BoxProps } from "@chakra-ui/react"
+import { cn } from "@/lib/utils/cn"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-const MainArticle = (props: BoxProps) => (
-  <Box as="article" id={MAIN_CONTENT_ID} scrollMarginTop={24} {...props} />
+const MainArticle = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <article
+    id={MAIN_CONTENT_ID}
+    className={cn("scroll-mt-24", className)}
+    {...props}
+  />
 )
 
 export default MainArticle
diff --git a/src/pages/developers/learning-tools.tsx b/src/pages/developers/learning-tools.tsx
index 4df27c84044..2020e03a2aa 100644
--- a/src/pages/developers/learning-tools.tsx
+++ b/src/pages/developers/learning-tools.tsx
@@ -424,7 +424,7 @@ const LearningToolsPage = () => {
           "page-developers-learning-tools:page-learning-tools-meta-desc"
         )}
       />
-      <MainArticle w="full">
+      <MainArticle className="w-full">
         <Box w="full">
           <Header>
             <H1>