diff --git a/src/lib/components/organisms/Navbar/Navbar.stories.tsx b/src/lib/components/organisms/Navbar/Navbar.stories.tsx
index 5837dae..75f627f 100644
--- a/src/lib/components/organisms/Navbar/Navbar.stories.tsx
+++ b/src/lib/components/organisms/Navbar/Navbar.stories.tsx
@@ -89,7 +89,7 @@ WithCTA.args = {
         <Navbar.Link href="/navbars" active>
           Home
         </Navbar.Link>
-        <Navbar.Group label="Services" href="/testus" withUnderlineEffect>
+        <Navbar.Group label="Services" withUnderlineEffect>
           <Navbar.Link href="/navbars1" withUnderlineEffect>
             Construction
           </Navbar.Link>
@@ -131,12 +131,12 @@ WithNavbarDropdown.args = {
           Home
         </Navbar.Link>
 
-        <Navbar.Group label="Services" href="/" withUnderlineEffect>
+        <Navbar.Group label="Services" withUnderlineEffect>
           <Navbar.Expansion groupName="Services" groupLink="/" withUnderlineEffect>
             {buildExpansionAsChildren(EXPANSION_ITEMS)}
           </Navbar.Expansion>
         </Navbar.Group>
-        <Navbar.Group label="Services" href="/" withUnderlineEffect>
+        <Navbar.Group label="Services" withUnderlineEffect>
           <Navbar.Expansion>{buildExpansionAsChildren(EXPANSION_ITEMS, true)}</Navbar.Expansion>
         </Navbar.Group>
         <Navbar.Group label="Services" withUnderlineEffect>
diff --git a/src/lib/components/organisms/Navbar/Navbar.theme.tsx b/src/lib/components/organisms/Navbar/Navbar.theme.tsx
index 7186aec..0d7d024 100644
--- a/src/lib/components/organisms/Navbar/Navbar.theme.tsx
+++ b/src/lib/components/organisms/Navbar/Navbar.theme.tsx
@@ -26,40 +26,40 @@ export type NavBarTheme = {
     };
     container: {
       base: string;
-      opened: string;
+      closed: string;
     };
   };
 };
 
 export const NAV_BAR_THEME: NavBarTheme = {
-  base: 'border-gray-200 flex min-h-[65px] z-10',
-  innerBase: 'mx-auto flex items-center justify-between gap-5',
-  brand: 'flex items-center',
+  base: '',
+  innerBase: '',
+  brand: '',
   fixedTransparentStyle: '',
-  background: 'bg-primary-500',
+  background: '',
   collapse: {
-    base: 'w-full md:block h-full',
-    list: 'mt-4 flex flex-col md:mt-0 md:flex-row items-center w-full md:justify-end md:gap-10 gap-0 h-full'
+    base: '',
+    list: ''
   },
   link: {
-    base: 'block pr-4 pl-3 md:p-0 md:py-0 py-2 mx-auto',
-    active: 'bg-primary-700 text-white md:bg-transparent md:text-primary-700',
-    disabled: 'text-gray-400 hover:cursor-not-allowed',
-    underline: 'h-[2px] rounded-lg bg-secondary-200 transition-all duration-500'
+    base: '',
+    active: '',
+    disabled: '',
+    underline: ''
   },
   toggle: {
-    base: 'inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200:bg-gray-700:ring-gray-600 md:hidden',
-    icon: 'h-6 w-6 shrink-0'
+    base: '',
+    icon: ''
   },
   group: {
-    base: 'gap-1 items-center justify-center md:justify-start',
+    base: '',
     icon: {
-      base: 'transition duration-500 ease-in-out absolute -left-2 md:relative md:left-0',
-      opened: '-rotate-180 md:rotate-180'
+      base: '',
+      opened: ''
     },
     container: {
-      base: 'md:px-5 md:py-2.5 md:fixed w-full md:rounded-t-none rounded-t-md rounded-b-md bg-slate-100 md:items-start items-center flex flex-col left-0 transition duration-300 ease-in-out overflow-hidden top-0 md:-z-10',
-      opened: 'md:-translate-y-full md:scale-y-0 opacity-0 md:h-fit h-0'
+      base: '',
+      closed: ''
     }
   }
 };
diff --git a/src/lib/components/organisms/Navbar/Navbar.tsx b/src/lib/components/organisms/Navbar/Navbar.tsx
index c5a6793..fc23349 100644
--- a/src/lib/components/organisms/Navbar/Navbar.tsx
+++ b/src/lib/components/organisms/Navbar/Navbar.tsx
@@ -1,8 +1,7 @@
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twJoin, twMerge } from 'tailwind-merge';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import { NavbarContext } from './NavbarContext';
 import { NavbarSticky, useStickyNavbar } from './useFixedNavbar';
@@ -31,21 +30,30 @@ export const Navbar: FC<NavbarComponentProps> = ({ children, menuOpen, fluid = f
     <NavbarContext.Provider value={{ isOpen, setIsOpen }}>
       <nav
         className={twMerge(
-          classNames(theme.base, theme.background, [
-            sticky === 'transparent' && [
-              'fixed flex top-0 left-0 right-0 transition linear delay-150',
-              fixedEffect === NavbarSticky.STICKY_TOP && !isOpen && `bg-transparent ${theme.fixedTransparentStyle}`
-            ],
+          twJoin(
+            twMerge(
+              'border-gray-200 flex min-h-[65px] z-50 w-full absolute',
+              theme.base,
+              'bg-primary-500',
+              theme.background
+            ),
+
+            sticky === 'transparent' &&
+              twJoin(
+                'fixed flex top-0 left-0 right-0 transition linear delay-150',
+                fixedEffect === NavbarSticky.STICKY_TOP && !isOpen && `bg-transparent ${theme.fixedTransparentStyle}`
+              ),
             sticky === 'solid' && 'sticky top-0',
             isOpen && 'h-screen'
-          ])
+          )
         )}
       >
         <div
-          className={classNames('md:flex-nowrap flex-wrap', theme.innerBase, [
-            !fluid && 'container',
-            fluid && 'px-2 sm:px-4'
-          ])}
+          className={twMerge(
+            'md:flex-nowrap flex-wrap mx-auto flex items-center justify-between gap-5',
+            theme.innerBase,
+            twJoin(!fluid && 'container', fluid && 'px-2 sm:px-4')
+          )}
         >
           {children}
         </div>
diff --git a/src/lib/components/organisms/Navbar/NavbarBrand.tsx b/src/lib/components/organisms/Navbar/NavbarBrand.tsx
index de50cd3..50132ca 100644
--- a/src/lib/components/organisms/Navbar/NavbarBrand.tsx
+++ b/src/lib/components/organisms/Navbar/NavbarBrand.tsx
@@ -1,4 +1,5 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { excludeClassName } from '../../../helpers/exclude';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
@@ -23,7 +24,7 @@ export const NavbarBrand: FC<NavbarBrandProps> = ({ children, href, as, ...props
   const LinkComponent = as || 'a';
 
   return (
-    <LinkComponent href={href} className={theme.brand} {...theirProps} onClick={onClick}>
+    <LinkComponent href={href} className={twMerge('flex items-center', theme.brand)} {...theirProps} onClick={onClick}>
       {children}
     </LinkComponent>
   );
diff --git a/src/lib/components/organisms/Navbar/NavbarCollapse.tsx b/src/lib/components/organisms/Navbar/NavbarCollapse.tsx
index 443d1c2..e99c44e 100644
--- a/src/lib/components/organisms/Navbar/NavbarCollapse.tsx
+++ b/src/lib/components/organisms/Navbar/NavbarCollapse.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
 import { excludeClassName } from '../../../helpers/exclude';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
@@ -13,8 +13,19 @@ export const NavbarCollapse: FC<NavbarCollapseProps> = ({ children, ...props }):
   const theirProps = excludeClassName(props);
 
   return (
-    <div className={classNames(theme.base, !isOpen && 'hidden')} data-testid="flowbite-navbar-collapse" {...theirProps}>
-      <ul className={theme.list}>{children}</ul>
+    <div
+      className={twMerge(twMerge('w-full md:block h-full', theme.base), twJoin(!isOpen && 'hidden'))}
+      data-testid="flowbite-navbar-collapse"
+      {...theirProps}
+    >
+      <ul
+        className={twMerge(
+          'mt-4 flex flex-col md:mt-0 md:flex-row items-center w-full md:justify-end md:gap-10 gap-0 h-full',
+          theme.list
+        )}
+      >
+        {children}
+      </ul>
     </div>
   );
 };
diff --git a/src/lib/components/organisms/Navbar/NavbarGroup.tsx b/src/lib/components/organisms/Navbar/NavbarGroup.tsx
index 7cc6f5b..6158dcb 100644
--- a/src/lib/components/organisms/Navbar/NavbarGroup.tsx
+++ b/src/lib/components/organisms/Navbar/NavbarGroup.tsx
@@ -1,14 +1,12 @@
-import cs from 'classnames';
 import type { FC } from 'react';
 import { useState } from 'react';
 import { HiOutlineChevronDown } from 'react-icons/hi';
-import { twMerge } from 'tailwind-merge';
+import { twJoin, twMerge } from 'tailwind-merge';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import { NavbarLink } from './NavbarLink';
 
 export interface NavbarGroupProps {
   label: React.ReactNode;
-  href?: string;
   children?: React.ReactNode;
   arrowIcon?: boolean;
   withUnderlineEffect?: boolean;
@@ -17,7 +15,6 @@ export interface NavbarGroupProps {
 
 export const NavbarGroup: FC<NavbarGroupProps> = ({
   label,
-  href,
   children,
   arrowIcon = true,
   withUnderlineEffect,
@@ -25,13 +22,13 @@ export const NavbarGroup: FC<NavbarGroupProps> = ({
 }) => {
   const theme = useTheme().theme.navbar.group;
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [isGroupOpen, setIsGroupOpen] = useState(false);
   const [leaveTimeout, setLeaveTimeout] = useState<number | NodeJS.Timeout | null>(null);
 
   const Icon = HiOutlineChevronDown;
 
   const toggleGroup = () => {
-    setIsOpen(!isOpen);
+    setIsGroupOpen(!isGroupOpen);
   };
 
   const handleMouseEnter = () => {
@@ -39,13 +36,13 @@ export const NavbarGroup: FC<NavbarGroupProps> = ({
       clearTimeout(leaveTimeout as NodeJS.Timeout);
       setLeaveTimeout(null);
     }
-    setIsOpen(true);
+    setIsGroupOpen(true);
   };
 
   const handleMouseLeave = () => {
     setLeaveTimeout(
       setTimeout(() => {
-        setIsOpen(false);
+        setIsGroupOpen(false);
       }, 100)
     );
   };
@@ -61,25 +58,43 @@ export const NavbarGroup: FC<NavbarGroupProps> = ({
     <li
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      className="flex w-full cursor-pointer flex-col py-2 md:w-fit md:flex-row"
+      className="flex w-full cursor-pointer flex-col md:h-full md:w-fit md:flex-row"
     >
-      <div className="inline-block w-full items-center md:h-full">
-        <div className={twMerge(cs(theme.base, 'flex flex-row-reverse md:flex-row'))}>
+      <div className="inline-block w-full items-center md:flex md:h-full" onClick={toggleGroup}>
+        <div
+          className={twMerge(
+            'gap-1 items-center justify-center md:justify-start flex flex-row-reverse md:flex-row',
+            theme.base
+          )}
+        >
           <span className="relative flex items-center gap-1">
-            <NavbarLink href={href} withUnderlineEffect={!!href && withUnderlineEffect}>
-              {label}
-            </NavbarLink>
+            <NavbarLink withUnderlineEffect={withUnderlineEffect}>{label}</NavbarLink>
             {arrowIcon && (
-              <span className={twMerge(cs(theme.icon.base, isOpen && theme.icon.opened))}>
-                <Icon onClick={toggleGroup} />
+              <span
+                className={twMerge(
+                  twJoin(
+                    'transition duration-500 ease-in-out absolute -left-2 md:relative md:left-0',
+                    theme.icon.base,
+                    isGroupOpen && twMerge('-rotate-180 md:rotate-180', theme.icon.opened)
+                  )
+                )}
+              >
+                <Icon />
               </span>
             )}
           </span>
         </div>
       </div>
-      <div className={twMerge(cs('md:h-0 h-2', !isOpen && 'hidden'))} />
+      <div className={twMerge(twJoin('md:h-0 h-2', !isGroupOpen && 'hidden'))} />
       <div
-        className={twMerge(cs('cursor-default', theme.container.base, !isOpen && theme.container.opened))}
+        id="container"
+        className={twMerge(
+          twJoin(
+            'cursor-default md:px-5 md:py-2.5 md:fixed w-full md:rounded-t-none rounded-t-md rounded-b-md bg-slate-100 md:items-start items-center flex flex-col left-0 transition duration-300 ease-in-out overflow-hidden top-0 md:-z-10',
+            theme.container.base,
+            !isGroupOpen && twMerge('md:-translate-y-[50%] md:scale-y-0 opacity-0 md:h-fit h-0', theme.container.closed)
+          )
+        )}
         style={style}
       >
         {children}
diff --git a/src/lib/components/organisms/Navbar/NavbarLink.tsx b/src/lib/components/organisms/Navbar/NavbarLink.tsx
index 70b9aad..8dc2ddf 100644
--- a/src/lib/components/organisms/Navbar/NavbarLink.tsx
+++ b/src/lib/components/organisms/Navbar/NavbarLink.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import type { FC } from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
 
@@ -36,7 +36,9 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
     if (onClick) {
       onClick(e);
     }
-    setIsOpen(false);
+    if (href) {
+      setIsOpen(false);
+    }
   };
 
   const LinkOrDivComponent = href ? as ?? 'a' : 'div';
@@ -45,14 +47,25 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
       <LinkOrDivComponent
         href={linkAsTo ? undefined : href}
         to={linkAsTo && href ? href : undefined}
-        className={classNames(theme.base, active && theme.active, disabled && theme.disabled)}
+        className={twMerge(
+          twMerge('block pr-4 pl-3 md:p-0 md:py-0 py-2 mx-auto', theme.base),
+          twJoin(
+            active && twMerge('bg-primary-700 text-white md:bg-transparent md:text-primary-700', theme.active),
+            disabled && twMerge('text-gray-400 hover:cursor-not-allowed', theme.disabled)
+          )
+        )}
         {...props}
         onClick={handleOnClick}
       >
         <span className="w-full">
           {children}
           {withUnderlineEffect && (
-            <span className={classNames('absolute bottom-0 left-0 w-0 group-hover:w-full', theme.underline)}></span>
+            <span
+              className={twMerge(
+                'absolute bottom-0 left-0 w-0 group-hover:w-full h-[2px] rounded-lg bg-secondary-200 transition-all duration-500',
+                theme.underline
+              )}
+            ></span>
           )}
         </span>
       </LinkOrDivComponent>
diff --git a/src/lib/components/organisms/Navbar/NavbarToggle.tsx b/src/lib/components/organisms/Navbar/NavbarToggle.tsx
index abdf956..63bb880 100644
--- a/src/lib/components/organisms/Navbar/NavbarToggle.tsx
+++ b/src/lib/components/organisms/Navbar/NavbarToggle.tsx
@@ -1,5 +1,6 @@
 import type { ComponentProps, FC } from 'react';
 import { GoThreeBars } from 'react-icons/go';
+import { twMerge } from 'tailwind-merge';
 import { excludeClassName } from '../../../helpers/exclude';
 import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
@@ -19,9 +20,17 @@ export const NavbarToggle: FC<NavbarToggleProps> = ({ barIcon: BarIcon = GoThree
   const theirProps = excludeClassName(props);
 
   return (
-    <button className={theme.base} data-testid="flowbite-navbar-toggle" onClick={handleClick} {...theirProps}>
+    <button
+      className={twMerge(
+        'inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200:bg-gray-700:ring-gray-600 md:hidden',
+        theme.base
+      )}
+      data-testid="flowbite-navbar-toggle"
+      onClick={handleClick}
+      {...theirProps}
+    >
       <span className="sr-only">Open main menu</span>
-      <BarIcon className={theme.icon} />
+      <BarIcon className={twMerge('h-6 w-6 shrink-0', theme.icon)} />
     </button>
   );
 };