diff --git a/src/components/SocialIconLink/index.tsx b/src/components/SocialIconLink/index.tsx
index 9425ed3f..cea7b0d1 100644
--- a/src/components/SocialIconLink/index.tsx
+++ b/src/components/SocialIconLink/index.tsx
@@ -27,7 +27,7 @@ export default function SocialIconLink({
   return (
     <Link
       href={href}
-      className="flex items-center gap-3 text-gray-900 dark:text-gray-50 hover:text-gray-500 hover:dark:text-gray-500"
+      className="flex items-center gap-3 text-gray-900 hover:text-brand-700 dark:text-gray-50 dark:hover:text-brand-500"
       aria-label={label}
     >
       <svg
@@ -38,7 +38,10 @@ export default function SocialIconLink({
       >
         <path fill="currentColor" d={iconMap[name]} />
       </svg>
-      <span className={clsx("inline-flex xl:hidden", hiddenLabel && "hidden")} aria-hidden>
+      <span
+        className={clsx("inline-flex xl:hidden", hiddenLabel && "hidden")}
+        aria-hidden
+      >
         {label}
       </span>
     </Link>
diff --git a/src/theme/Logo/index.tsx b/src/theme/Logo/index.tsx
index 8b254c90..88977d88 100644
--- a/src/theme/Logo/index.tsx
+++ b/src/theme/Logo/index.tsx
@@ -9,7 +9,7 @@ export default function Logo() {
   return (
     <Link
       to={logoLink}
-      className="text-gray-900 dark:text-gray-50"
+      className="text-gray-900 hover:text-brand-700 dark:text-gray-50 dark:hover:text-brand-500"
       aria-label="Go to homepage"
     >
       <LogoSvg aria-hidden className="h-12 mb-3" />
diff --git a/src/theme/Navbar/MobileSidebar/index.tsx b/src/theme/Navbar/MobileSidebar/index.tsx
index 0ffaac72..d25cf534 100644
--- a/src/theme/Navbar/MobileSidebar/index.tsx
+++ b/src/theme/Navbar/MobileSidebar/index.tsx
@@ -16,7 +16,7 @@ function CloseButton() {
     <button
       type="button"
       aria-label="Close navigation bar"
-      className="absolute top-6 right-6 p-4 text-gray-900 dark:text-gray-50"
+      className="absolute top-6 right-6 p-4 text-gray-900 hover:text-brand-700 dark:text-gray-50 dark:hover:text-brand-500 transition-colors"
       onClick={() => mobileSidebar.toggle()}
     >
       <IconClose />
diff --git a/src/theme/NavbarItem/DefaultNavbarItem.tsx b/src/theme/NavbarItem/DefaultNavbarItem.tsx
index ea7fe06e..9749e58b 100644
--- a/src/theme/NavbarItem/DefaultNavbarItem.tsx
+++ b/src/theme/NavbarItem/DefaultNavbarItem.tsx
@@ -14,7 +14,7 @@ function DefaultNavbarItemDesktop({
   const element = (
     <NavbarNavLink
       className={clsx(
-        "font-bold text-gray-900 dark:text-gray-50 hover:text-gray-900 hover:dark:text-gray-50",
+        "font-bold text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500",
         className
       )}
       isDropdownLink={isDropdownItem}
@@ -33,7 +33,7 @@ function DefaultNavbarItemMobile({
   return (
     <NavbarNavLink
       className={clsx(
-        "font-bold text-gray-900 dark:text-gray-50 hover:text-gray-900 hover:dark:text-gray-50",
+        "font-bold text-gray-900 dark:text-gray-50 hover:text-gray-900 dark:hover:text-brand-500",
         className
       )}
       {...props}
diff --git a/src/theme/NavbarItem/DropdownNavbarItem.tsx b/src/theme/NavbarItem/DropdownNavbarItem.tsx
index 096ffa99..c2fb43a6 100644
--- a/src/theme/NavbarItem/DropdownNavbarItem.tsx
+++ b/src/theme/NavbarItem/DropdownNavbarItem.tsx
@@ -32,7 +32,7 @@ function DropdownNavbarItemDesktop({
         role="button"
         href={props.to ? undefined : "#"}
         className={clsx(
-          "peer flex items-center font-bold text-gray-900 dark:text-gray-50 group-hover:text-gray-900 group-hover:dark:text-gray-50 group-hover:underline",
+          "peer flex items-center font-bold text-gray-900 dark:text-gray-50 group-hover:text-brand-700 dark:group-hover:text-brand-500 group-hover:underline",
           className
         )}
         {...props}
@@ -82,7 +82,10 @@ function DropdownNavbarItemMobile({
     <>
       <NavbarNavLink
         role="button"
-        className={clsx("font-bold text-gray-900 dark:text-gray-50", className)}
+        className={clsx(
+          "font-bold text-gray-900 hover:text-brand-700 dark:text-gray-50 dark:hover:text-brand-500",
+          className
+        )}
         {...props}
       >
         {props.children ?? props.label}