diff --git a/client/web/src/routes/Main/Navbar/CustomNavItem.tsx b/client/web/src/routes/Main/Navbar/CustomNavItem.tsx
index bf54782a..3d8204a6 100644
--- a/client/web/src/routes/Main/Navbar/CustomNavItem.tsx
+++ b/client/web/src/routes/Main/Navbar/CustomNavItem.tsx
@@ -16,11 +16,14 @@ export const NavbarCustomNavItem: React.FC<{
     <NavbarNavItem
       key={panelInfo.name}
       name={panelInfo.label}
-      className={clsx({ 'bg-gray-700': withBg })}
+      className={clsx('text-3xl  cursor-pointer', {
+        'bg-gray-700 text-white': withBg,
+        'text-gray-600 dark:text-white': !withBg,
+      })}
       to={`/main/custom/${panelInfo.name}`}
       data-testid={`navbar-custom-${panelInfo.name}`}
     >
-      <Icon className="text-3xl text-white" icon={panelInfo.icon} />
+      <Icon icon={panelInfo.icon} />
     </NavbarNavItem>
   );
 });
diff --git a/client/web/src/routes/Main/Navbar/NavItem.tsx b/client/web/src/routes/Main/Navbar/NavItem.tsx
index ec6edc5a..c3d645ed 100644
--- a/client/web/src/routes/Main/Navbar/NavItem.tsx
+++ b/client/web/src/routes/Main/Navbar/NavItem.tsx
@@ -65,6 +65,7 @@ export const NavbarNavItem: React.FC<
           />
         </div>
       )}
+
       {inner}
 
       <div className="absolute right-0 bottom-0">