diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx
index 28b6917001bb..9aed1b1590fc 100644
--- a/components/navigation/NavBar.tsx
+++ b/components/navigation/NavBar.tsx
@@ -4,8 +4,11 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import React, { useEffect, useState } from 'react';
 
+import { twMerge } from 'tailwind-merge';
+
 import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
+
 import { SearchButton } from '../AlgoliaSearch';
 import GithubButton from '../buttons/GithubButton';
 import { isMobileDevice } from '../helpers/is-mobile';
@@ -20,6 +23,8 @@ import NavItem from './NavItem';
 import otherItems from './otherItems';
 import ToolsPanel from './ToolsPanel';
 
+
+
 interface NavBarProps {
   className?: string;
   hideLogo?: boolean;
@@ -144,7 +149,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
   }, [asPath]);
 
   return (
-    <div className={`bg-white ${className} z-50`}>
+     <div className={twMerge('bg-white z-50', className)}>
       <div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-2'>
         {!hideLogo && (
           <div className='lg:w-auto lg:flex-1'>