diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index c219ee4d7b0..bffe7468bf7 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react"
 import { motion } from "framer-motion"
 import { useTranslation } from "next-i18next"
 import { MdChevronRight } from "react-icons/md"
-import { Box, HStack, Icon } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 import { DeveloperDocsLink } from "@/lib/interfaces"
@@ -11,6 +11,8 @@ import { BaseLink, LinkProps } from "@/components/Link"
 
 import docLinks from "../data/developer-docs-links.yaml"
 
+import { HStack } from "./ui/flex"
+
 export const dropdownIconContainerVariant = {
   open: {
     rotate: 90,
@@ -34,14 +36,7 @@ const innerLinksVariants = {
 
 const LinkContainer = ({ children }: ChildOnlyProp) => {
   return (
-    <HStack
-      w="full"
-      justify="space-between"
-      py={2}
-      pe={4}
-      ps={8}
-      _hover={{ bgColor: "ednBackground" }}
-    >
+    <HStack className="w-full justify-between py-2 pe-4 ps-8 hover:bg-[ednBackground]">
       {children}
     </HStack>
   )
@@ -106,7 +101,7 @@ const NavLink = ({ item, path, isTopLevel }: NavLinkProps) => {
             cursor="pointer"
             display="flex"
           >
-            <Icon as={MdChevronRight} boxSize={6} color="secondary" />
+            <MdChevronRight className="h-6 w-6" color="secondary" />
           </Box>
         </LinkContainer>
         <Box