diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index c2bf84de6f4..c1ac6236c65 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -5,13 +5,11 @@ import { MdChevronRight } from "react-icons/md"
 
 import { ChildOnlyProp } from "@/lib/types"
 import { DeveloperDocsLink } from "@/lib/interfaces"
-
-import { BaseLink, LinkProps } from "@/components/Link"
+import { BaseLink, LinkProps } from "./ui/Link"
+import { HStack } from "./ui/flex"
 
 import docLinks from "../data/developer-docs-links.yaml"
 
-import { HStack } from "./ui/flex"
-
 export const dropdownIconContainerVariant = {
   open: {
     rotate: 90,
@@ -44,12 +42,7 @@ const LinkContainer = ({ children }: ChildOnlyProp) => {
 const SideNavLink = ({ children, ...props }: LinkProps) => {
   return (
     <BaseLink
-      w="full"
-      textDecoration="none"
-      color="text"
-      fontWeight="normal"
-      _hover={{ textDecoration: "none", color: "primary.base" }}
-      _active={{ color: "primary.base" }}
+      className="w-full font-normal text-body no-underline hover:text-primary"
       {...props}
     >
       {children}