diff --git a/resources/js/Pages/Superuser/Menu/Nested.vue b/resources/js/Pages/Superuser/Menu/Nested.vue
index d43b70e..0cb0434 100644
--- a/resources/js/Pages/Superuser/Menu/Nested.vue
+++ b/resources/js/Pages/Superuser/Menu/Nested.vue
@@ -19,7 +19,7 @@ const { menus, edit, destroy } = defineProps({
     item-key="name">
     <template #item="{ element }">
       <div class="flex flex-col space-y-1">
-        <div class="flex items-center space-x-2 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2">
+        <div class="flex items-center space-x-2 bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2 transition-all">
           <div class="flex items-center space-x-2 w-full">
             <Icon :name="element.icon" />
             <p class="uppercase">{{ element.name }}</p>