diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js
index dae67f46d..2b7ac97fb 100644
--- a/components/lib/tailwind/Tailwind.js
+++ b/components/lib/tailwind/Tailwind.js
@@ -1832,19 +1832,17 @@ export default {
             class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none']
         }
     },
-
     menubar: {
         root: {
             class: ['p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative']
         },
-        menu: ({ props, context }) => ({
+        menu: ({ props }) => ({
             class: [
                 'm-0 sm:p-0 list-none',
                 'outline-none',
                 'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
                 'flex-col top-full left-0',
                 'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
-
                 { 'hidden ': !props?.mobileActive, 'flex ': props?.mobileActive }
             ]
         }),
@@ -1854,24 +1852,36 @@ export default {
         content: ({ props, context }) => ({
             class: [
                 ' transition-shadow duration-200',
-                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80',
+                '',
                 { 'rounded-md': props.root, '': !props.root },
                 {
                     'text-gray-700 dark:text-white/80': !context.focused && !context.active,
                     'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
                     'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
                     'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
                 }
             ]
         }),
-        action: ({ props, context }) => ({
-            class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
+        action: ({ context }) => ({
+            class: [
+                'select-none',
+                'cursor-pointer flex items-center no-underline overflow-hidden relative',
+                'py-3 px-5 select-none',
+                {
+                    'max-[960px]:pl-9': context.level === 1,
+                    'max-[960px]:pl-14': context.level === 2
+                }
+            ]
         }),
         icon: {
             class: 'mr-2'
         },
         submenuicon: ({ props, context }) => ({
-            class: [{ 'ml-2': props.root, 'ml-auto': !props.root }]
+            class: ['max-[960px]:ml-auto', { 'ml-2': props.root, 'ml-auto': !props.root }]
         }),
         submenu: ({ props, context }) => ({
             class: ['py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }]
@@ -1901,13 +1911,16 @@ export default {
         content: ({ props, context }) => ({
             class: [
                 'transition-shadow duration-200',
-                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', //Hover
                 { 'rounded-md': props.level < 1 && props.horizontal },
                 {
                     'text-gray-700 dark:text-white/80': !context.focused && !context.active,
                     'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
                     'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
                     'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
                 }
             ]
         }),