diff --git a/src/components/Nav/Client/index.tsx b/src/components/Nav/Client/index.tsx
index 137000918fc..c56372cc7fe 100644
--- a/src/components/Nav/Client/index.tsx
+++ b/src/components/Nav/Client/index.tsx
@@ -11,13 +11,14 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
+import { Button } from "../../ui/buttons/Button"
 import { useNavigation } from "../useNavigation"
 import { useThemeToggle } from "../useThemeToggle"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import { useTranslation } from "@/hooks/useTranslation"
 
-const Button = dynamic(
+const LazyButton = dynamic(
   () => import("../../ui/buttons/Button").then((mod) => mod.Button),
   {
     ssr: false,
@@ -126,7 +127,7 @@ const ClientSideNav = () => {
         </SearchProvider>
 
         {desktopScreen && (
-          <Button
+          <LazyButton
             aria-label={themeIconAriaLabel}
             variant="ghost"
             isSecondary
@@ -134,7 +135,7 @@ const ClientSideNav = () => {
             onClick={toggleColorMode}
           >
             <ThemeIcon className="transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500" />
-          </Button>
+          </LazyButton>
         )}
 
         {desktopScreen && (
@@ -156,6 +157,4 @@ const ClientSideNav = () => {
   )
 }
 
-ClientSideNav.displayName = "ClientSideNav"
-
 export default ClientSideNav