diff --git a/resources/views/admin/roles/add.blade.php b/resources/views/admin/roles/add.blade.php
index 6f78271fe..30cf225ae 100644
--- a/resources/views/admin/roles/add.blade.php
+++ b/resources/views/admin/roles/add.blade.php
@@ -4,8 +4,8 @@
 <div class="container mx-auto px-4 py-6">
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
         <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h1 class="text-2xl font-semibold text-gray-800">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                 <i class="fa fa-user-shield mr-2"></i>{{ $title }}
             </h1>
         </div>
@@ -25,7 +25,7 @@
                            id="name"
                            name="name"
                            required
-                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -38,7 +38,7 @@
                                id="apirequests"
                                name="apirequests"
                                value="0"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
 
                     <!-- Download Requests -->
@@ -50,7 +50,7 @@
                                id="downloadrequests"
                                name="downloadrequests"
                                value="0"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
 
                     <!-- Default Invites -->
@@ -62,7 +62,7 @@
                                id="defaultinvites"
                                name="defaultinvites"
                                value="0"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
 
                     <!-- Rate Limit -->
@@ -74,7 +74,7 @@
                                id="rate_limit"
                                name="rate_limit"
                                value="60"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
 
                     <!-- Donation -->
@@ -87,7 +87,7 @@
                                name="donation"
                                value="0"
                                step="0.01"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
 
                     <!-- Add Years -->
@@ -99,7 +99,7 @@
                                id="addyears"
                                name="addyears"
                                value="0"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
                 </div>
 
@@ -115,7 +115,7 @@
                                    name="canpreview"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="canpreview" class="ml-2 text-sm text-gray-700">Can Preview</label>
+                            <label for="canpreview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Can Preview</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -123,7 +123,7 @@
                                    name="hideads"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="hideads" class="ml-2 text-sm text-gray-700">Hide Ads</label>
+                            <label for="hideads" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Hide Ads</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -131,7 +131,7 @@
                                    name="editrelease"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="editrelease" class="ml-2 text-sm text-gray-700">Edit Release</label>
+                            <label for="editrelease" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Edit Release</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -139,7 +139,7 @@
                                    name="viewconsole"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewconsole" class="ml-2 text-sm text-gray-700">View Console</label>
+                            <label for="viewconsole" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View Console</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -147,7 +147,7 @@
                                    name="viewmovies"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewmovies" class="ml-2 text-sm text-gray-700">View Movies</label>
+                            <label for="viewmovies" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View Movies</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -155,7 +155,7 @@
                                    name="viewaudio"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewaudio" class="ml-2 text-sm text-gray-700">View Audio</label>
+                            <label for="viewaudio" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View Audio</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -163,7 +163,7 @@
                                    name="viewpc"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewpc" class="ml-2 text-sm text-gray-700">View PC</label>
+                            <label for="viewpc" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View PC</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -171,7 +171,7 @@
                                    name="viewtv"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewtv" class="ml-2 text-sm text-gray-700">View TV</label>
+                            <label for="viewtv" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View TV</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -179,7 +179,7 @@
                                    name="viewadult"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewadult" class="ml-2 text-sm text-gray-700">View Adult</label>
+                            <label for="viewadult" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View Adult</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -187,7 +187,7 @@
                                    name="viewbooks"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewbooks" class="ml-2 text-sm text-gray-700">View Books</label>
+                            <label for="viewbooks" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View Books</label>
                         </div>
                         <div class="flex items-center">
                             <input type="checkbox"
@@ -195,17 +195,17 @@
                                    name="viewother"
                                    value="1"
                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                            <label for="viewother" class="ml-2 text-sm text-gray-700">View Other</label>
+                            <label for="viewother" class="ml-2 text-sm text-gray-700 dark:text-gray-300">View Other</label>
                         </div>
                     </div>
                 </div>
 
                 <!-- Action Buttons -->
-                <div class="flex gap-3 pt-4 border-t border-gray-200">
-                    <button type="submit" class="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700">
+                <div class="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <button type="submit" class="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600">
                         <i class="fa fa-save mr-2"></i>Create Role
                     </button>
-                    <a href="{{ url('admin/role-list') }}" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300">
+                    <a href="{{ url('admin/role-list') }}" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600">
                         <i class="fa fa-times mr-2"></i>Cancel
                     </a>
                 </div>