diff --git a/src/components/Roadmap/RoadmapActionCard/index.tsx b/src/components/Roadmap/RoadmapActionCard/index.tsx
index 60275f9b4eb..dedba08c862 100644
--- a/src/components/Roadmap/RoadmapActionCard/index.tsx
+++ b/src/components/Roadmap/RoadmapActionCard/index.tsx
@@ -1,14 +1,8 @@
-import {
-  Center,
-  Flex,
-  Heading,
-  LinkBox,
-  LinkOverlay,
-  Text,
-} from "@chakra-ui/react"
-
 import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
+import { Center, Flex } from "@/components/ui/flex"
+import { LinkBox } from "@/components/ui/link-box"
+import { LinkOverlay } from "@/components/ui/link-box"
 
 import futureProofing from "@/public/images/roadmap/roadmap-future.png"
 import security from "@/public/images/roadmap/roadmap-security.png"
@@ -41,22 +35,15 @@ const RoadmapActionCard = ({
   const imgSrc = images[image] ?? images.futureProofing
 
   return (
-    <LinkBox
-      as={Flex}
-      direction="column"
-      border="1px solid"
-      borderColor="lightBorder"
-    >
-      <Center background="cardGradient" h="260px">
-        <Image src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
+    <LinkBox className="flex flex-col border">
+      <Center className="h-[260px] bg-gradient-main">
+        <TwImage src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
       </Center>
-      <Flex p={6} flex="1" flexDir="column" justify="space-between" gap={4}>
-        <Heading as="h3" size="md">
-          {title}
-        </Heading>
-        <Text flex="1">{description}</Text>
-        <LinkOverlay as={ButtonLink} href={href}>
-          {buttonText}
+      <Flex className="flex-1 flex-col justify-between gap-4 p-6">
+        <h3 className="text-2xl">{title}</h3>
+        <p className="flex-1">{description}</p>
+        <LinkOverlay asChild>
+          <ButtonLink href={href}>{buttonText}</ButtonLink>
         </LinkOverlay>
       </Flex>
     </LinkBox>