diff --git a/resources/js/Pages/Superuser/Permission/Index.vue b/resources/js/Pages/Superuser/Permission/Index.vue
index 4bfc747..e95e465 100644
--- a/resources/js/Pages/Superuser/Permission/Index.vue
+++ b/resources/js/Pages/Superuser/Permission/Index.vue
@@ -126,7 +126,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
           <div class="flex-wrap px-4 pb-2 dark:bg-gray-700 dark:text-gray-100 rounded-b-md">
             <transition-group name="opacity">
-              <div v-for="(permission, i) in permissions.filter(p => p.name?.toLowerCase().includes(search?.trim().toLowerCase()))" :key="i" class="inline-block dark:bg-gray-800 dark:hover:bg-gray-900 transition-all border dark:border-gray-800 rounded-md m-[2px] px-3 py-1">
+              <div v-for="(permission, i) in permissions.filter(p => p.name?.toLowerCase().includes(search?.trim().toLowerCase()))" :key="i" class="inline-block dark:bg-gray-600 dark:hover:bg-gray-700 transition-all border dark:border-gray-700 dark:hover:border-gray-800 rounded-md m-[2px] px-3 py-1">
                 <div class="flex items-center space-x-2 text-sm">
                   <p class="uppercase">{{ permission.name }}</p>
 
@@ -149,7 +149,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         <Card class="dark:bg-gray-700 dark:text-gray-100 border dark:border-gray-700">
           <template #header>
             <div class="flex items-center space-x-2 justify-end dark:bg-gray-800 dark:text-gray-50 p-2">
-              <Icon @click.prevent="close" name="times" class="border border-transparent dark:bg-gray-700 px-2 py-1 rounded-md cursor-pointer transition-all dark:hover:bg-gray-800 dark:hover:border-gray-600" />
+              <Icon @click.prevent="close" name="times" class="border border-transparent dark:bg-gray-700 px-2 py-1 rounded-md cursor-pointer transition-all dark:hover:bg-gray-600 dark:hover:border-gray-600" />
             </div>
           </template>
 
diff --git a/resources/js/Pages/Superuser/Role/Index.vue b/resources/js/Pages/Superuser/Role/Index.vue
index 87691ec..50e83c2 100644
--- a/resources/js/Pages/Superuser/Role/Index.vue
+++ b/resources/js/Pages/Superuser/Role/Index.vue
@@ -137,7 +137,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                 <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td>
                 <td class="px-2 py-1 border dark:border-gray-800">
                   <div class="flex-wrap">
-                    <div v-for="(permission, j) in role.permissions" :key="j" class="inline-block bg-gray-600 rounded-md px-3 py-1 m-[1px] text-sm">
+                    <div v-for="(permission, j) in role.permissions" :key="j" class="inline-block dark:bg-gray-600 dark:hover:bg-gray-700 border dark:border-gray-700 dark:hover:border-gray-800 rounded-md px-3 py-1 m-[1px] text-sm">
                       <div class="flex items-center justify-between space-x-1">
                         <p class="uppercase font-semibold">{{ permission.name }}</p>
 
@@ -172,7 +172,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
   </DashboardLayout>
 
   <transition name="fade">
-    <div v-if="open" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-25 flex items-center justify-center">
+    <div v-if="open" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-40 flex items-center justify-center">
       <form @submit.prevent="submit" class="w-full max-w-xl shadow-xl">
         <Card class="dark:bg-gray-700 dark:text-gray-100">
           <template #header>
@@ -215,7 +215,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
           <template #footer>
             <div class="flex items-center justify-end space-x-2 dark:bg-gray-800 px-2 py-1">
-              <button type="submit" class="bg-green-600 rounded-md px-3 py-1 text-sm">
+              <button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm transition-all">
                 <div class="flex items-center space-x-1">
                   <Icon name="check" />
 
diff --git a/resources/js/Pages/Superuser/User/Index.vue b/resources/js/Pages/Superuser/User/Index.vue
index cbc89eb..66703f0 100644
--- a/resources/js/Pages/Superuser/User/Index.vue
+++ b/resources/js/Pages/Superuser/User/Index.vue
@@ -189,7 +189,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                 </td>
                 <td class="px-2 py-1 border dark:border-gray-800">
                   <div class="flex-wrap">
-                    <div v-for="(role, j) in user.roles" :key="j" class="inline-block bg-gray-600 rounded-md px-3 py-1 m-[1px] text-sm">
+                    <div v-for="(role, j) in user.roles" :key="j" class="inline-block dark:bg-gray-600 dark:hover:bg-gray-700 border dark:border-gray-700 dark:border-gray-800 rounded-md px-3 py-1 m-[1px] text-sm">
                       <div class="flex items-center justify-between space-x-1">
                         <p class="uppercase font-semibold">{{ role.name }}</p>
 
@@ -325,7 +325,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
           <template #footer>
             <div class="flex items-center justify-end space-x-2 dark:bg-gray-800 px-2 py-1">
-              <button type="submit" class="bg-green-600 rounded-md px-3 py-1 text-sm">
+              <button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm transition-all">
                 <div class="flex items-center space-x-1">
                   <Icon name="check" />