diff --git a/src/components/Translatathon/TranslationHubCallout.tsx b/src/components/Translatathon/TranslationHubCallout.tsx
index db77f6b32ed..ed8f4561c44 100644
--- a/src/components/Translatathon/TranslationHubCallout.tsx
+++ b/src/components/Translatathon/TranslationHubCallout.tsx
@@ -1,21 +1,14 @@
-import { Center, Flex } from "@chakra-ui/react"
+import { TwImage } from "@/components/Image"
+import { Center, Flex } from "@/components/ui/flex"
 
-import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
+import { ButtonLink } from "../ui/buttons/Button"
 
 import WalkingImage from "@/public/images/translatathon/walking.png"
 
 export const TranslationHubCallout = ({ children }) => {
   return (
-    <Flex
-      w="full"
-      align="stretch"
-      bg="background.highlight"
-      direction={{ base: "column", lg: "row" }}
-      p={8}
-      gap={8}
-    >
-      <Flex w="full" direction="column">
+    <Flex className="w-full flex-col items-stretch gap-8 bg-background-highlight p-8 lg:flex-row">
+      <Flex className="w-full flex-col">
         {children}
         <Flex>
           <ButtonLink href="/contributing/translation-program/translatathon/translatathon-hubs">
@@ -23,12 +16,12 @@ export const TranslationHubCallout = ({ children }) => {
           </ButtonLink>
         </Flex>
       </Flex>
-      <Center w="full">
-        <Image
+      <Center className="w-full">
+        <TwImage
           src={WalkingImage}
           alt=""
-          maxW={265}
           style={{ objectFit: "contain" }}
+          className="max-w-[265px]"
         />
       </Center>
     </Flex>