diff --git a/config/tomato-admin.php b/config/tomato-admin.php
index 1d72ee0..6391933 100644
--- a/config/tomato-admin.php
+++ b/config/tomato-admin.php
@@ -72,5 +72,7 @@
             ],
             "flag" => "🇩🇪"
         ]
-    ]
+    ],
+
+    "global_search" => true,
 ];
diff --git a/publish/Models/User.php b/publish/Models/User.php
index 4e65f32..242871e 100644
--- a/publish/Models/User.php
+++ b/publish/Models/User.php
@@ -2,20 +2,22 @@
 
 namespace App\Models;
 
- use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Laravel\Fortify\TwoFactorAuthenticatable;
 use Laravel\Jetstream\HasProfilePhoto;
 use Laravel\Jetstream\HasTeams;
 use Laravel\Sanctum\HasApiTokens;
- use Spatie\Permission\Traits\HasRoles;
+use Spatie\Permission\Traits\HasRoles;
 
  class User extends Authenticatable
 {
     use HasApiTokens, HasFactory, Notifiable;
     use HasTeams;
     use HasProfilePhoto;
+    use TwoFactorAuthenticatable;
 
     /**
      * The attributes that are mass assignable.
diff --git a/resources/lang/ar.json b/resources/lang/ar.json
new file mode 100644
index 0000000..c7e04b0
--- /dev/null
+++ b/resources/lang/ar.json
@@ -0,0 +1,69 @@
+{
+    "Current Team": "الفريق الحالي",
+    "Manage Team": "إدارة الفريق",
+    "Team Settings": "إعدادات الفريق",
+    "Create New Team": "أضافة فريق",
+    "Switch Teams": "تغيير الفريق الحالي",
+    "Team Name": "اسم الفريق",
+    "The team's name and owner information.": "اسم الفريق ومعلومات المالك.",
+    "Team Owner": "مالك الفريق",
+    "Add Team Member": "أضافة عضو",
+    "Please provide the email address of the person you would like to add to this team.": "يرجى تقديم عنوان البريد الإلكتروني للشخص الذي ترغب في إضافته إلى هذا الفريق.",
+    "Email": "البريد الإلكتروني",
+    "Role" : "الدور",
+    "Administrator": "مدير",
+    "Administrator users can perform any action.": "يمكن لمستخدمي المسؤولين القيام بأي إجراء.",
+    "Editor": "محرر",
+    "Editor users have the ability to read, create, and update.": "يمكن لمستخدمي المحررين قراءة وإنشاء وتحديث.",
+    "Pending Team Invitations": "دعوات الفريق المعلقة",
+    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "تمت دعوة هؤلاء الأشخاص إلى فريقك وتم إرسال رسالة دعوة إلكترونية لهم. يمكنهم الانضمام إلى الفريق عن طريق قبول دعوة البريد الإلكتروني.",
+    "Delete Team": "حذف الفريق",
+    "Permanently delete this team.": "حذف هذا الفريق بشكل دائم.",
+    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "بمجرد حذف الفريق، سيتم حذف جميع الموارد والبيانات الخاصة به بشكل دائم. قبل حذف هذا الفريق، يرجى تنزيل أي بيانات أو معلومات تتعلق بهذا الفريق التي ترغب في الاحتفاظ بها.",
+    "Delete Team": "حذف الفريق",
+    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "هل أنت متأكد أنك تريد حذف هذا الفريق؟ بمجرد حذف الفريق، سيتم حذف جميع الموارد والبيانات الخاصة به بشكل دائم.",
+    "Manage Account": "إدارة الحساب",
+    "API Tokens": "رموز API",
+    "Profile Information": "معلومات الملف الشخصي",
+    "Update your account's profile information and email address.": "تحديث معلومات ملف تعريف حسابك وعنوان بريدك الإلكتروني.",
+    "Photo": "صورة",
+    "Select A New Photo": "اختر صورة جديدة",
+    "Remove Photo": "إزالة الصورة",
+    "Name": "الاسم",
+    "Your email address is unverified." : "عنوان بريدك الإلكتروني غير مؤكد.",
+    "Click here to re-send the verification email." : "انقر هنا لإعادة إرسال رسالة التحقق.",
+    "Save": "حفظ",
+    "Two Factor Authentication": "المصادقة الثنائية",
+    "Add additional security to your account using two factor authentication.": "أضف أمانًا إضافيًا لحسابك باستخدام المصادقة الثنائية.",
+    "You have not enabled two factor authentication.": "لم تقم بتمكين المصادقة الثنائية.",
+    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "عند تمكين المصادقة الثنائية، سيتم طلب رمز مؤمن وعشوائي أثناء المصادقة. يمكنك استرداد هذا الرمز من تطبيق Google Authenticator على هاتفك.",
+    "Enable": "تمكين",
+    "Please confirm your password before continuing": "يرجى تأكيد كلمة المرور الخاصة بك قبل المتابعة",
+    "Finish enabling two factor authentication.": "إنهاء تمكين المصادقة الثنائية.",
+    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "لإنهاء تمكين المصادقة الثنائية، قم بمسح الرمز الشريطي التالي باستخدام تطبيق المصادقة الخاص بهاتفك أو أدخل مفتاح الإعداد وقدم رمز OTP المولد.",
+    "Setup Key": "مفتاح الإعداد",
+    "Code": "الرمز",
+    "Browser Sessions": "جلسات المتصفح",
+    "Manage and log out your active sessions on other browsers and devices.": "إدارة وتسجيل الخروج من جلساتك النشطة على متصفحات وأجهزة أخرى.",
+    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "إذا لزم الأمر، يمكنك تسجيل الخروج من جميع جلسات المتصفح الأخرى عبر جميع أجهزتك. يتم سرد بعض جلساتك الأخيرة أدناه؛ ومع ذلك، قد لا تكون هذه القائمة شاملة. إذا شعرت أن حسابك قد تم تعريضه للخطر، يجب عليك أيضًا تحديث كلمة المرور الخاصة بك.",
+    "This device" : "هذا الجهاز",
+    "Log Out Other Browser Sessions": "تسجيل الخروج من جلسات المتصفح الأخرى",
+    "Password": "كلمة المرور",
+    "Remember me": "تذكرني",
+    "Forgot your password?": "نسيت كلمة المرور؟",
+    "Log in": "تسجيل الدخول",
+    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "نسيت كلمة المرور؟ لا مشكلة. فقط أخبرنا بعنوان بريدك الإلكتروني وسنرسل لك رابط إعادة تعيين كلمة المرور الذي سيتيح لك اختيار واحدة جديدة.",
+    "Email Password Reset Link": "إرسال رابط إعادة تعيين كلمة المرور",
+    "Create API Token": "إنشاء رمز API",
+    "API tokens allow third-party services to authenticate with our application on your behalf.": "تسمح رموز API للخدمات الطرفية بالمصادقة على تطبيقنا نيابة عنك.",
+    "Permissions": "الأذونات",
+    "Create": "إنشاء",
+    "Edit": "تحرير",
+    "Delete": "حذف",
+    "Please copy your new API token. For your security, it won't be shown again.": "يرجى نسخ رمز API الجديد الخاص بك. لأمانك، لن يتم عرضه مرة أخرى.",
+    "Manage API Tokens": "إدارة رموز API",
+    "You may delete any of your existing tokens if they are no longer needed.": "يمكنك حذف أي من الرموز الحالية إذا لم تعد مطلوبة.",
+    "Permissions": "الأذونات",
+    "API Token Permissions": "أذونات رمز API",
+    "A new verification link has been sent to your email address.": "تم إرسال رابط التحقق الجديد إلى عنوان بريدك الإلكتروني."
+}
diff --git a/resources/lang/en.json b/resources/lang/en.json
new file mode 100644
index 0000000..96730a1
--- /dev/null
+++ b/resources/lang/en.json
@@ -0,0 +1,65 @@
+{
+    "Current Team": "Current Team",
+    "Manage Team": "Manage Team",
+    "Team Settings": "Team Settings",
+    "Create New Team": "Create New Team",
+    "Switch Teams": "Switch Teams",
+    "Team Name": "Team Name",
+    "The team's name and owner information.": "The team's name and owner information.",
+    "Team Owner": "Team Owner",
+    "Add Team Member": "Add Team Member",
+    "Please provide the email address of the person you would like to add to this team.": "Please provide the email address of the person you would like to add to this team.",
+    "Email": "Email",
+    "Role" : "Role",
+    "Pending Team Invitations": "Pending Team Invitations",
+    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.",
+    "Delete Team": "Delete Team",
+    "Permanently delete this team.": "Permanently delete this team.",
+    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.",
+    "Delete Team": "Delete Team",
+    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.",
+    "Manage Account": "Manage Account",
+    "API Tokens": "API Tokens",
+    "Profile Information": "Profile Information",
+    "Update your account's profile information and email address.": "Update your account's profile information and email address.",
+    "Photo": "Photo",
+    "Select A New Photo": "Select A New Photo",
+    "Remove Photo": "Remove Photo",
+    "Name": "Name",
+    "Your email address is unverified." : "Your email address is unverified.",
+    "Click here to re-send the verification email." : "Click here to re-send the verification email.",
+    "Save": "Save",
+    "Two Factor Authentication": "Two Factor Authentication",
+    "Add additional security to your account using two factor authentication.": "Add additional security to your account using two factor authentication.",
+    "You have not enabled two factor authentication.": "You have not enabled two factor authentication.",
+    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.",
+    "Enable": "Enable",
+    "Please confirm your password before continuing": "Please confirm your password before continuing",
+    "Finish enabling two factor authentication.": "Finish enabling two factor authentication.",
+    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.",
+    "Setup Key": "Setup Key",
+    "Code": "Code",
+    "Browser Sessions": "Browser Sessions",
+    "Manage and log out your active sessions on other browsers and devices.": "Manage and log out your active sessions on other browsers and devices.",
+    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.",
+    "This device" : "This device",
+    "Log Out Other Browser Sessions": "Log Out Other Browser Sessions",
+    "Password": "Password",
+    "Remember me": "Remember me",
+    "Forgot your password?": "Forgot your password?",
+    "Log in": "Log in",
+    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.",
+    "Email Password Reset Link": "Email Password Reset Link",
+    "Create API Token": "Create API Token",
+    "API tokens allow third-party services to authenticate with our application on your behalf.": "API tokens allow third-party services to authenticate with our application on your behalf.",
+    "Permissions": "Permissions",
+    "Create": "Create",
+    "Edit": "Edit",
+    "Delete": "Delete",
+    "Please copy your new API token. For your security, it won't be shown again.": "Please copy your new API token. For your security, it won't be shown again.",
+    "Manage API Tokens": "Manage API Tokens",
+    "You may delete any of your existing tokens if they are no longer needed.": "You may delete any of your existing tokens if they are no longer needed.",
+    "Permissions": "Permissions",
+    "API Token Permissions": "API Token Permissions",
+    "A new verification link has been sent to your email address.": "A new verification link has been sent to your email address."
+}
diff --git a/resources/views/api/index.blade.php b/resources/views/api/index.blade.php
index c5baed2..931f791 100644
--- a/resources/views/api/index.blade.php
+++ b/resources/views/api/index.blade.php
@@ -5,15 +5,15 @@
 
     <div class="pb-12">
         <div class="mx-auto  space-y-6">
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl" dusk="update-profile-information">
                     <section>
-                        <header>
-                            <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+                        <header class="pb-4">
+                            <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
                                 {{ __('Create API Token') }}
                             </h2>
 
-                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
                                 {{ __('API tokens allow third-party services to authenticate with our application on your behalf.') }}
                             </p>
                         </header>
@@ -21,7 +21,7 @@
                         <x-splade-form :action="route('admin.api-tokens.store')" class="flex flex-col gap-4">
                             <!-- Token Name -->
                             <div class="col-span-6 sm:col-span-4">
-                                <x-splade-input name="name" autofocus label="Name" />
+                                <x-splade-input name="name" autofocus :label="__('Name')" />
                             </div>
 
                             <!-- Token Permissions -->
@@ -29,17 +29,17 @@
                                 <div class="col-span-6">
                                     <x-splade-checkboxes
                                         name="permissions"
-                                        label="Permissions"
+                                        :label="__('Permissions')"
                                         class="grid grid-cols-1 md:grid-cols-2 gap-1"
                                         :options="array_combine($availablePermissions, $availablePermissions)"
                                     />
                                 </div>
                             @endif
 
-                            <p class="text-sm text-gray-600 dark:text-gray-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
+                            <p class="text-sm text-zinc-600 dark:text-zinc-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
 
                             <div class="mt-2">
-                                <x-splade-submit :label="__('Create')" />
+                                <x-tomato-admin-submit spinner :label="__('Create')" />
                             </div>
                         </x-splade-form>
 
@@ -48,15 +48,15 @@ class="grid grid-cols-1 md:grid-cols-2 gap-1"
                 </div>
             </div>
             @if(count($tokens) > 0)
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl" dusk="update-profile-information">
                     <section>
                             <header>
-                                <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+                                <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
                                     {{ __('Manage API Tokens') }}
                                 </h2>
 
-                                <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                                <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
                                     {{ __('You may delete any of your existing tokens if they are no longer needed.') }}
                                 </p>
                             </header>
@@ -70,7 +70,7 @@ class="grid grid-cols-1 md:grid-cols-2 gap-1"
 
                                         <div class="flex items-center ml-2 gap-4">
                                             @if($token['last_used_ago'])
-                                                <div class="text-sm text-gray-400">
+                                                <div class="text-sm text-zinc-400">
                                                     {{ __('Last used') }} {{ $token['last_used_ago'] }}
                                                 </div>
                                             @endif
@@ -79,7 +79,7 @@ class="grid grid-cols-1 md:grid-cols-2 gap-1"
                                                 <Link
                                                     modal
                                                     href="{{ route('admin.api-tokens.edit', $token['id']) }}"
-                                                    class="cursor-pointer ml-6 text-sm text-gray-400 underline"
+                                                    class="cursor-pointer ml-6 text-sm text-zinc-400 underline"
                                                 >
                                                     {{ __('Permissions') }}
                                                 </Link>
@@ -121,7 +121,7 @@ class="cursor-pointer ml-6 text-sm text-gray-400 underline"
 
             <div class="flex flex-col gap-4">
                 <div class="flex justify-between gap-2">
-                    <div class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500 break-all w-full">
+                    <div class="mt-4 bg-zinc-100 px-4 py-2 rounded font-mono text-sm text-zinc-500 break-all w-full">
                         {{ $newToken }}
                     </div>
                     <div class="flex flex-col justify-center items-center mt-4">
diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
index 0c37767..b2bd759 100644
--- a/resources/views/auth/confirm-password.blade.php
+++ b/resources/views/auth/confirm-password.blade.php
@@ -1,6 +1,6 @@
 <x-tomato-admin-guest-layout>
     <x-auth-card>
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-sm text-zinc-600">
             {{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
         </div>
 
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 49de4e3..5cf4c9b 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -14,7 +14,7 @@
 
             <div class="flex items-center justify-between">
                 @if (Route::has('password.request'))
-                    <Link class="underline text-sm text-gray-600 dark:text-gray-300 dark:hover:text-gray-500 hover:text-gray-900" href="{{ route('password.request') }}">
+                    <Link class="underline text-sm text-zinc-600 dark:text-zinc-300 dark:hover:text-zinc-500 hover:text-zinc-900" href="{{ route('password.request') }}">
                         {{ __('Forgot your password?') }}
                     </Link>
                 @endif
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 0fb627d..2f8c96c 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -11,15 +11,15 @@
         @if(\Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
             <x-splade-checkbox name="terms">
                 {!! __('I agree to the :terms_of_service and :privacy_policy', [
-                    'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">'.__('Terms of Service').'</a>',
-                    'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">'.__('Privacy Policy').'</a>',
+                    'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-zinc-800">'.__('Terms of Service').'</a>',
+                    'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-zinc-800">'.__('Privacy Policy').'</a>',
                 ]) !!}
             </x-splade-checkbox>
         @endif
 
 
         <div class="flex items-center justify-between">
-            <Link class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
+            <Link class="underline text-sm text-zinc-600 hover:text-zinc-900" href="{{ route('login') }}">
                 {{ trans('tomato-admin::global.auth.already-registered') }}
             </Link>
 
diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
index dc08ada..201821f 100644
--- a/resources/views/auth/two-factor-challenge.blade.php
+++ b/resources/views/auth/two-factor-challenge.blade.php
@@ -6,7 +6,7 @@
     <x-tomato-auth-session-status class="mb-4" />
     <div class="space-y-8">
         <x-splade-data default="{ recovery: false }">
-            <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+            <div class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
                 <p v-if="!data.recovery">
                     {{ __('Please confirm access to your account by entering the authentication code provided by your authenticator application.') }}
                 </p>
@@ -26,7 +26,7 @@
                 </div>
 
                 <div class="flex items-center justify-end mt-4 gap-4">
-                    <button type="button" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 underline cursor-pointer" @click.prevent="data.recovery = !data.recovery">
+                    <button type="button" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 underline cursor-pointer" @click.prevent="data.recovery = !data.recovery">
                     <span v-show="data.recovery">
                         {{ __('Use a recovery code') }}
                     </span>
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
index b852b45..16c41ac 100644
--- a/resources/views/auth/verify-email.blade.php
+++ b/resources/views/auth/verify-email.blade.php
@@ -5,7 +5,7 @@
 
         <x-tomato-auth-session-status class="mb-4" />
 
-    <div class="mb-4 text-sm text-gray-600">
+    <div class="mb-4 text-sm text-zinc-600">
         {{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
     </div>
 
@@ -23,7 +23,7 @@
         <form method="POST" action="{{ route('logout') }}">
             @csrf
 
-            <button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900">
+            <button type="submit" class="underline text-sm text-zinc-600 hover:text-zinc-900">
                 {{ __('Log Out') }}
             </button>
         </form>
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
index 1e6c68d..3fe8060 100644
--- a/resources/views/components/button.blade.php
+++ b/resources/views/components/button.blade.php
@@ -7,7 +7,7 @@
             'bg-warning-600 hover:bg-warning-500 focus:bg-warning-700 focus:ring-offset-warning-700 text-white border-transparent' => $warning,
             'bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 text-white border-transparent' => $primary,
             'bg-success-600 hover:bg-success-500 focus:bg-success-700 focus:ring-offset-success-700 text-white border-transparent' => $success,
-            'bg-white hover:bg-gray-50 focus:bg-gray-100 focus:ring-offset-gray-95 text-gray-950 ring-gray-950/10 dark:bg-gray-800 dark:text-gray-200' => $secondary,
+            'bg-white hover:bg-zinc-50 focus:bg-zinc-100 focus:ring-offset-zinc-95 text-zinc-950 ring-zinc-950/10  border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200' => $secondary,
             'cursor-pointer transition-colors ease-in-out duration-20'
         ]) }} :method="$method">
         {{$label ?: $slot}}
@@ -41,7 +41,7 @@
         'bg-warning-600 hover:bg-warning-500 focus:bg-warning-700 focus:ring-offset-warning-700 text-white border-transparent' => $warning,
         'bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 text-white border-transparent' => $primary,
         'bg-success-600 hover:bg-success-500 focus:bg-success-700 focus:ring-offset-success-700 text-white border-transparent' => $success,
-        'bg-white hover:bg-gray-50 focus:bg-gray-100 focus:ring-offset-gray-95 text-gray-950 ring-gray-950/10 dark:bg-gray-800 dark:text-gray-200' => $secondary,
+        'bg-white hover:bg-zinc-50 focus:bg-zinc-100 focus:ring-offset-zinc-95 text-zinc-950 ring-zinc-950/10 border-transparent dark:bg-zinc-800 dark:text-zinc-200' => $secondary,
     ]) }}>
         {{$label ?: $slot}}
     </button>
diff --git a/resources/views/components/code.blade.php b/resources/views/components/code.blade.php
index fc02da9..15ff2d4 100644
--- a/resources/views/components/code.blade.php
+++ b/resources/views/components/code.blade.php
@@ -7,7 +7,7 @@
         @includeWhen($label, 'splade::form.label', ['label' => $label])
 
         @if($prepend)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-300 bg-gray-50 text-gray-50 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-300 bg-zinc-50 text-zinc-50 dark:text-white">
                 {!! $prepend !!}
             </span>
         @endif
@@ -15,7 +15,7 @@
 
     <template #append>
         @if($append)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-300 bg-zinc-50 text-zinc-500 dark:text-white">
                     {!! $append !!}
                 </span>
         @endif
diff --git a/resources/views/components/color.blade.php b/resources/views/components/color.blade.php
index 202ca09..c54c98a 100644
--- a/resources/views/components/color.blade.php
+++ b/resources/views/components/color.blade.php
@@ -6,7 +6,7 @@
         @includeWhen($label, 'splade::form.label', ['label' => $label])
 
         @if($prepend)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-300 bg-gray-50 text-gray-50 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-300 bg-zinc-50 text-zinc-50 dark:text-white">
                     {!! $prepend !!}
                 </span>
         @endif
@@ -14,7 +14,7 @@
 
     <template #append>
         @if($append)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-300 bg-zinc-50 text-zinc-500 dark:text-white">
                     {!! $append !!}
                 </span>
         @endif
diff --git a/resources/views/components/container.blade.php b/resources/views/components/container.blade.php
index c50fd85..4102d7f 100644
--- a/resources/views/components/container.blade.php
+++ b/resources/views/components/container.blade.php
@@ -8,7 +8,7 @@
     <x-slot:icon>
         {{ $icon ?? '' }}
     </x-slot:icon>
-    <div class="bg-white border-gray-200 dark:bg-gray-800 p-6 rounded-xl border dark:border-gray-700 mb-6">
+    <div class="bg-white border-zinc-200 dark:bg-zinc-800 p-6 rounded-xl border dark:border-zinc-700 mb-6">
         <x-splade-modal class="font-main">
             <x-slot:title>
                 {{$label}}
diff --git a/resources/views/components/draggable.blade.php b/resources/views/components/draggable.blade.php
index f56dddf..18154df 100644
--- a/resources/views/components/draggable.blade.php
+++ b/resources/views/components/draggable.blade.php
@@ -6,7 +6,7 @@
     :levels="@js($levels)"
 >
     @if($prepend)
-        <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-300 bg-gray-50 text-gray-50 dark:text-white">
+        <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-300 bg-zinc-50 text-zinc-50 dark:text-white">
             {!! $prepend !!}
         </span>
     @endif
@@ -16,7 +16,7 @@
     </template>
 
     @if($append)
-        <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:text-white">
+        <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-300 bg-zinc-50 text-zinc-500 dark:text-white">
             {!! $append !!}
         </span>
     @endif
diff --git a/resources/views/components/dropdown-item.blade.php b/resources/views/components/dropdown-item.blade.php
index 303c5f7..ce3385d 100644
--- a/resources/views/components/dropdown-item.blade.php
+++ b/resources/views/components/dropdown-item.blade.php
@@ -1,12 +1,12 @@
 @if($type === 'button')
     <button {{ $attributes->class([
-            'text-gray-600 dark:text-gray-200 hover:text-black' => $black,
-            'text-gray-600 dark:text-gray-200 hover:text-danger-500' => $danger,
-            'text-gray-600 dark:text-gray-200 hover:text-warning-500' => $warning,
-            'text-gray-600 dark:text-gray-200 hover:text-primary-500' => $primary,
-            'text-gray-600 dark:text-gray-200 hover:text-success-500' => $success,
-            'text-gray-600 dark:text-gray-200 hover:text-gray-500' => $secondary,
-            'whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out'
+            'text-zinc-600 dark:text-zinc-200 hover:text-black' => $black,
+            'text-zinc-600 dark:text-zinc-200 hover:text-danger-500' => $danger,
+            'text-zinc-600 dark:text-zinc-200 hover:text-warning-500' => $warning,
+            'text-zinc-600 dark:text-zinc-200 hover:text-primary-500' => $primary,
+            'text-zinc-600 dark:text-zinc-200 hover:text-success-500' => $success,
+            'text-zinc-600 dark:text-zinc-200 hover:text-zinc-500' => $secondary,
+            'whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out'
         ]) }}>
         <div class="flex justify-start gap-2 ">
             <div class="flex flex-col items-center justify-center">
@@ -19,13 +19,13 @@
     </button>
 @elseif($type === 'link')
         <x-splade-link {{ $attributes }} {{ $attributes->class([
-            'text-gray-600 dark:text-gray-200 hover:text-black' => $black,
-            'text-gray-600 dark:text-gray-200 hover:text-danger-500' => $danger,
-            'text-gray-600 dark:text-gray-200 hover:text-warning-500' => $warning,
-            'text-gray-600 dark:text-gray-200 hover:text-primary-500' => $primary,
-            'text-gray-600 dark:text-gray-200 hover:text-success-500' => $success,
-            'text-gray-600 dark:text-gray-200 hover:text-gray-500' => $secondary,
-        ]) }} class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
+            'text-zinc-600 dark:text-zinc-200 hover:text-black' => $black,
+            'text-zinc-600 dark:text-zinc-200 hover:text-danger-500' => $danger,
+            'text-zinc-600 dark:text-zinc-200 hover:text-warning-500' => $warning,
+            'text-zinc-600 dark:text-zinc-200 hover:text-primary-500' => $primary,
+            'text-zinc-600 dark:text-zinc-200 hover:text-success-500' => $success,
+            'text-zinc-600 dark:text-zinc-200 hover:text-zinc-500' => $secondary,
+        ]) }} class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
             <div class="flex justify-start gap-2">
                 <div class="flex flex-col items-center justify-center">
                     <i class="{{$icon}} text-sm"></i>
@@ -37,13 +37,13 @@
         </x-splade-link>
 @elseif($type === 'copy')
         <x-tomato-admin-copy {{ $attributes }} {{ $attributes->class([
-            'text-gray-600 dark:text-gray-200 hover:text-black' => $black,
-            'text-gray-600 dark:text-gray-200 hover:text-danger-500' => $danger,
-            'text-gray-600 dark:text-gray-200 hover:text-warning-500' => $warning,
-            'text-gray-600 dark:text-gray-200 hover:text-primary-500' => $primary,
-            'text-gray-600 dark:text-gray-200 hover:text-success-500' => $success,
-            'text-gray-600 dark:text-gray-200 hover:text-gray-500' => $secondary,
-        ]) }} class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
+            'text-zinc-600 dark:text-zinc-200 hover:text-black' => $black,
+            'text-zinc-600 dark:text-zinc-200 hover:text-danger-500' => $danger,
+            'text-zinc-600 dark:text-zinc-200 hover:text-warning-500' => $warning,
+            'text-zinc-600 dark:text-zinc-200 hover:text-primary-500' => $primary,
+            'text-zinc-600 dark:text-zinc-200 hover:text-success-500' => $success,
+            'text-zinc-600 dark:text-zinc-200 hover:text-zinc-500' => $secondary,
+        ]) }} class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
             <div class="flex justify-start gap-2">
                 <div class="flex flex-col items-center justify-center">
                     <i class="{{$icon}} text-sm"></i>
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index b1009fb..7818ca4 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -14,7 +14,7 @@
             @endif
         </div>
     </x-slot:trigger>
-    <div class="w-60 mt-2 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 py-1 bg-white dark:bg-gray-700">
+    <div class="w-60 mt-2 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 py-1 bg-white dark:bg-zinc-700">
         {{ $slot }}
     </div>
 </x-splade-component>
diff --git a/resources/views/components/icon.blade.php b/resources/views/components/icon.blade.php
index e0624f9..22417f0 100644
--- a/resources/views/components/icon.blade.php
+++ b/resources/views/components/icon.blade.php
@@ -18,14 +18,14 @@
         @includeWhen($label, 'splade::form.label', ['label' => $label])
 
         @if($prepend)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-200 bg-gray-50 dark:bg-gray-600 text-gray-50 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-200 bg-zinc-50 dark:bg-zinc-600 text-zinc-50 dark:text-white">
                 {!! $prepend !!}
             </span>
         @endif
     </template>
     <template #append>
         @if($append)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-600 text-gray-500 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-200 bg-zinc-50 dark:bg-zinc-600 text-zinc-500 dark:text-white">
                 {!! $append !!}
             </span>
         @endif
diff --git a/resources/views/components/markdown-editor.blade.php b/resources/views/components/markdown-editor.blade.php
index ef09bc6..e89d945 100644
--- a/resources/views/components/markdown-editor.blade.php
+++ b/resources/views/components/markdown-editor.blade.php
@@ -1,5 +1,5 @@
 <label>
-    <span class="block mb-1 text-gray-700 font-sans dark:text-white">{{$label ?? ''}}</span>
+    <span class="block mb-1 text-zinc-700 font-sans dark:text-white">{{$label ?? ''}}</span>
 </label>
 <MdEditor {{ $attributes->only(['v-if', 'v-show', 'class'])->class(['hidden' => $isHidden()]) }}
           v-model="{{ $vueModel() }}" language="en-US" :preview="@js($preview)" :toolbars="[
diff --git a/resources/views/components/menu-group.blade.php b/resources/views/components/menu-group.blade.php
index e1e3231..6b5e923 100644
--- a/resources/views/components/menu-group.blade.php
+++ b/resources/views/components/menu-group.blade.php
@@ -4,19 +4,19 @@
         !data.asideMenuGroup['{{$key}}']"
         v-show="!data.makeMenuMin"
         class="flex items-center justify-between w-full px-6" data-label="{{$label}}">
-    <div class="flex items-center gap-4 text-gray-600 dark:text-gray-300">
+    <div class="flex items-center gap-4 text-zinc-600 dark:text-zinc-300">
         <p class="flex-1 text-xs font-bold tracking-wider uppercase">
             {{$label}}
         </p>
     </div>
 
     <svg v-if="data.asideMenuGroup" v-show="data.asideMenuGroup['{{$key}}']"
-         class="w-3 h-3 text-gray-600 transition-all dark:text-gray-300" xmlns="http://www.w3.org/2000/svg"
+         class="w-3 h-3 text-zinc-600 transition-all dark:text-zinc-300" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
     </svg>
     <svg v-if="data.asideMenuGroup" v-show="!data.asideMenuGroup['{{$key}}']"
-         class="w-3 h-3 text-gray-600 transition-all rotate-180 dark:text-gray-300"
+         class="w-3 h-3 text-zinc-600 transition-all rotate-180 dark:text-zinc-300"
          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
          aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
diff --git a/resources/views/components/menu-item.blade.php b/resources/views/components/menu-item.blade.php
index 5dca482..0e4e01b 100644
--- a/resources/views/components/menu-item.blade.php
+++ b/resources/views/components/menu-item.blade.php
@@ -20,7 +20,7 @@ class="bg-primary-500 text-white flex items-center justify-center w-full gap-3 p
     @else
         <x-splade-link
             href="{{url($url)}}"
-            class="hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700 flex items-center justify-center w-full gap-3 px-3 py-2 font-medium transition rounded-lg">
+            class="hover:bg-zinc-500/5 focus:bg-zinc-500/5 dark:text-zinc-300 dark:hover:bg-zinc-700 flex items-center justify-center w-full gap-3 px-3 py-2 font-medium transition rounded-lg">
 
             <i class="w-5 h-5 shrink-0 {{$icon}}" style="font-size: 20px"></i>
 
diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php
index f4841b5..df082a6 100644
--- a/resources/views/components/pagination.blade.php
+++ b/resources/views/components/pagination.blade.php
@@ -2,21 +2,21 @@
     <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
         <div class="flex justify-between flex-1 sm:hidden">
             @if ($paginator->onFirstPage())
-                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-200 cursor-default leading-5 rounded-md">
+                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-zinc-500 bg-white border border-zinc-200 cursor-default leading-5 rounded-md">
                     {!! __('pagination.previous') !!}
                 </span>
             @else
-                <x-splade-link href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                <x-splade-link href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-zinc-700 bg-white border border-zinc-200 leading-5 rounded-md hover:text-zinc-500 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 active:text-zinc-700 transition ease-in-out duration-150">
                     {!! __('pagination.previous') !!}
                 </x-splade-link>
             @endif
 
             @if ($paginator->hasMorePages())
-                <x-splade-link href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-200 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                <x-splade-link href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-zinc-700 bg-white border border-zinc-200 leading-5 rounded-md hover:text-zinc-500 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 active:text-zinc-700 transition ease-in-out duration-150">
                     {!! __('pagination.next') !!}
                 </x-splade-link>
             @else
-                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-200 cursor-default leading-5 rounded-md">
+                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-zinc-500 bg-white border border-zinc-200 cursor-default leading-5 rounded-md">
                     {!! __('pagination.next') !!}
                 </span>
             @endif
@@ -24,7 +24,7 @@
 
         <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
             <div>
-                <p class="text-sm text-gray-700 dark:text-gray-200 leading-5">
+                <p class="text-sm text-zinc-700 dark:text-zinc-200 leading-5">
                     {!! __('Showing') !!}
                     @if ($paginator->firstItem())
                         <span class="font-medium">{{ $paginator->firstItem() }}</span>
@@ -45,13 +45,13 @@
                     @if ($paginator->onFirstPage())
                         <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
                                 @if(app()->getLocale() === 'ar')
-                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 border-r border-t border-b border-gray-200 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-700 border-r border-t border-b border-zinc-200 cursor-default rounded-r-md leading-5" aria-hidden="true">
                                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                         </svg>
                                     </span>
                                 @else
-                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 border border-gray-200 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-700 border border-zinc-200 cursor-default rounded-l-md leading-5" aria-hidden="true">
 
                                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
@@ -61,13 +61,13 @@
                         </span>
                     @else
                         @if(app()->getLocale() === 'ar')
-                            <x-splade-link href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 border-r border-t border-b border-gray-200 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                            <x-splade-link href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-900 dark:text-zinc-200 dark:border-zinc-700 border-r border-t border-b border-zinc-200 rounded-r-md leading-5 hover:text-zinc-400 focus:z-10 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 active:text-zinc-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
                                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                 </svg>
                             </x-splade-link>
                         @else
-                            <x-splade-link href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 border border-gray-200 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                            <x-splade-link href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-900 dark:text-zinc-200 dark:border-zinc-700 border border-zinc-200 rounded-l-md leading-5 hover:text-zinc-400 focus:z-10 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 active:text-zinc-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
                                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                 </svg>
@@ -80,7 +80,7 @@
                         {{-- "Three Dots" Separator --}}
                         @if (is_string($element))
                             <span aria-disabled="true">
-                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-900 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 border border-gray-200 cursor-default leading-5">{{ $element }}</span>
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-zinc-900 bg-white dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 cursor-default leading-5">{{ $element }}</span>
                             </span>
                         @endif
 
@@ -89,10 +89,10 @@
                             @foreach ($element as $page => $url)
                                 @if ($page == $paginator->currentPage())
                                     <span aria-current="page">
-                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200 border border-gray-200 cursor-default leading-5">{{ $page }}</span>
+                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 cursor-default leading-5">{{ $page }}</span>
                                     </span>
                                 @else
-                                    <x-splade-link href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-400 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 border border-gray-200 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 dark:active:bg-gray-700 active:text-gray-700 active:dark:text-gray-400 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                    <x-splade-link href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-zinc-400 bg-white dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 leading-5 hover:text-zinc-500 focus:z-10 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 dark:active:bg-zinc-700 active:text-zinc-700 active:dark:text-zinc-400 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
                                         {{ $page }}
                                     </x-splade-link>
                                 @endif
@@ -104,13 +104,13 @@
                     @if ($paginator->hasMorePages())
 
                         @if(app()->getLocale() === 'ar')
-                            <x-splade-link href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200 border border-gray-200 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 dark:active:bg-gray-400 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                            <x-splade-link href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 rounded-l-md leading-5 hover:text-zinc-400 focus:z-10 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 active:text-zinc-500 dark:active:bg-zinc-400 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
                                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                 </svg>
                             </x-splade-link>
                         @else
-                            <x-splade-link href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200 border border-gray-200 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                            <x-splade-link href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 rounded-r-md leading-5 hover:text-zinc-400 focus:z-10 focus:outline-none focus:ring ring-zinc-300 focus:border-blue-300 active:bg-zinc-100 active:text-zinc-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
                                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                 </svg>
@@ -119,7 +119,7 @@
                     @else
                         @if(app()->getLocale() === 'ar')
                             <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
-                                <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 border border-gray-200 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 cursor-default rounded-l-md leading-5" aria-hidden="true">
                                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                     </svg>
@@ -127,7 +127,7 @@
                             </span>
                         @else
                             <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
-                                <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 border border-gray-200 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-zinc-500 bg-white dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 border border-zinc-200 cursor-default rounded-r-md leading-5" aria-hidden="true">
                                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                     </svg>
diff --git a/resources/views/components/profile-dropdown.blade.php b/resources/views/components/profile-dropdown.blade.php
index 116fbaa..35f9d9b 100644
--- a/resources/views/components/profile-dropdown.blade.php
+++ b/resources/views/components/profile-dropdown.blade.php
@@ -1,4 +1,4 @@
-<div class="flex justify-start gap-4 ml-4 rtl:mr-4">
+<div class="flex justify-start ltr:ml-4 rtl:mr-0 mt-1">
     <div class="flex flex-col justify-center items-center">
         <x-tomato-admin-dropdown id="profile-dropdown">
             <x-slot:button>
@@ -7,13 +7,13 @@
                         $grav_url = auth()->user()->profile_photo_url;
                     @endphp
                         <!-- Profile -->
-                    <div class="w-10 h-10 rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900" style="background-image: url('{{$grav_url}}')">
+                    <div class="w-8 h-8 rounded-full bg-zinc-200 bg-cover bg-center dark:bg-zinc-900" style="background-image: url('{{$grav_url}}')">
                     </div>
                 </div>
             </x-slot:button>
 
             <!-- Team Management -->
-            <div class="block px-4 py-2 text-xs text-gray-400">
+            <div class="block px-4 py-2 text-xs text-zinc-400">
                 {{ __('Manage Account') }}
             </div>
 
@@ -22,7 +22,7 @@
             @if(\Laravel\Jetstream\Jetstream::hasApiFeatures())
                 <x-tomato-admin-dropdown-item type="link" icon="bx bxs-lock" :href="route('admin.api-tokens.index')" :label="__('API Tokens')" />
             @endif
-            <div class="border-t border-gray-200 dark:border-gray-600" />
+            <div class="border-t border-zinc-200 dark:border-zinc-600" />
             <x-tomato-admin-dropdown-item danger type="link" method="POST" icon="bx bx-log-out" :href="route('logout')"  :label="trans('tomato-admin::global.logout')"/>
         </x-tomato-admin-dropdown>
     </div>
diff --git a/resources/views/components/relations-group.blade.php b/resources/views/components/relations-group.blade.php
index 0d1e7d8..4a90357 100644
--- a/resources/views/components/relations-group.blade.php
+++ b/resources/views/components/relations-group.blade.php
@@ -2,19 +2,19 @@
     <x-splade-data default="{tab: '{{array_keys($relations)[0]}}'}" :remember="array_keys($relations)[0]" local-storage>
         <div class="flex justify-center my-4">
             <nav
-                class="filament-tabs flex overflow-x-auto items-center p-2 gap-2 rtl:space-x-reverse text-sm text-gray-600 bg-gray-500/5 rounded-xl dark:bg-gray-500/20">
+                class="filament-tabs flex overflow-x-auto items-center p-2 gap-2 rtl:space-x-reverse text-sm text-zinc-600 bg-zinc-500/5 rounded-xl dark:bg-zinc-500/20">
 
                 @foreach($relations as $relation=>$label)
                     <x-splade-link :href="url()->current() . '?relation=' . $relation" @click.prevent="data.tab = '{{$relation}}'"
                             aria-selected="" role="tab" type="button"
                             v-bind:class="{'whitespace-nowrap  bg-white dark:bg-primary-600 dark:text-white text-primary-600': data.tab ==='{{$relation}}'}"
-                            class="flex whitespace-nowrap rounded-lg  items-center h-8 px-5 font-medium hover:text-black-900 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-inset dark:text-white dark:bg-gray-800">
+                            class="flex whitespace-nowrap rounded-lg  items-center h-8 px-5 font-medium hover:text-black-900 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-inset dark:text-white dark:bg-zinc-800">
                         {{$label}}
                     </x-splade-link>
                 @endforeach
             </nav>
         </div>
-        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 my-4">
+        <div class="bg-white dark:bg-zinc-800 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 my-4">
             {{$slot}}
         </div>
     </x-splade-data>
diff --git a/resources/views/components/repeater.blade.php b/resources/views/components/repeater.blade.php
index 53fbc49..73b7925 100644
--- a/resources/views/components/repeater.blade.php
+++ b/resources/views/components/repeater.blade.php
@@ -5,25 +5,25 @@
 >
     <template #default="repeater">
         <div class="block">
-            <div class=" border border-gray-300 p-4 rounded-lg">
+            <div class=" border border-zinc-300 p-4 rounded-lg">
                 @if($prepend)
-                    <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-300 bg-gray-50 text-gray-50 dark:text-white">
+                    <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-300 bg-zinc-50 text-zinc-50 dark:text-white">
                     {!! $prepend !!}
                 </span>
                 @endif
                 <div>
                     <div
-                        class="mb-4 relative bg-white border border-gray-300 shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-600"
+                        class="mb-4 relative bg-white border border-zinc-300 shadow-sm rounded-xl dark:bg-zinc-800 dark:border-zinc-600"
                         v-for="(item, key) in repeater.main"
                         :key="key"
                     >
-                        <header class="flex items-center h-10 overflow-hidden border-b bg-gray-50 rounded-t-xl dark:bg-gray-800 dark:border-gray-700">
-                            <p class="flex-none px-4 text-xs font-medium text-gray-600 truncate dark:text-gray-400">
+                        <header class="flex items-center h-10 overflow-hidden border-b bg-zinc-50 rounded-t-xl dark:bg-zinc-800 dark:border-zinc-700">
+                            <p class="flex-none px-4 text-xs font-medium text-zinc-600 truncate dark:text-zinc-400">
                                 @includeWhen($label, 'splade::form.label', ['label' => $label])
                             </p>
                             <div class="flex-1"></div>
                             @if($type !== 'schema' && !$disabled)
-                                <ul class="flex divide-x rtl:divide-x-reverse dark:divide-gray-700">
+                                <ul class="flex divide-x rtl:divide-x-reverse dark:divide-zinc-700">
                                     <li>
                                         <button
                                             @click.prevent="repeater.removeItem(item)"
@@ -54,7 +54,7 @@ class="flex items-center justify-center flex-none w-10 h-10 transition text-dang
                                     disabled
                                 @endif
                                 @click.prevent="repeater.addItem()"
-                                class="disabled:bg-gray-600 disabled:hover:bg-gray-500  filament-button inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2rem] px-3 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700"
+                                class="disabled:bg-zinc-600 disabled:hover:bg-zinc-500  filament-button inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2rem] px-3 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700"
                             >
                                 Add New {{$label}}
                             </button>
@@ -62,7 +62,7 @@ class="disabled:bg-gray-600 disabled:hover:bg-gray-500  filament-button inline-f
                     </div>
                 @endif
                 @if($append)
-                    <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:text-white">
+                    <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-300 bg-zinc-50 text-zinc-500 dark:text-white">
                         {!! $append !!}
                     </span>
                 @endif
diff --git a/resources/views/components/rich.blade.php b/resources/views/components/rich.blade.php
index 6db7fce..9f1ced0 100644
--- a/resources/views/components/rich.blade.php
+++ b/resources/views/components/rich.blade.php
@@ -6,7 +6,7 @@
         @includeWhen($label, 'splade::form.label', ['label' => $label])
 
         @if($prepend)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-300 bg-gray-50 text-gray-50 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-300 bg-zinc-50 text-zinc-50 dark:text-white">
                     {!! $prepend !!}
                 </span>
         @endif
@@ -14,7 +14,7 @@
 
     <template #append>
         @if($append)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-300 bg-zinc-50 text-zinc-500 dark:text-white">
                     {!! $append !!}
                 </span>
         @endif
diff --git a/resources/views/components/row.blade.php b/resources/views/components/row.blade.php
index 73e0577..8b6fe55 100644
--- a/resources/views/components/row.blade.php
+++ b/resources/views/components/row.blade.php
@@ -3,7 +3,7 @@
         @if($inline)
             <div class="flex items-center justify-between gap-x-3">
                 <dt class="inline-flex items-center gap-x-3">
-                <span class="text-sm font-medium leading-6 text-gray-950 dark:text-white">
+                <span class="text-sm font-medium leading-6 text-zinc-950 dark:text-white">
                     {{$label}}
                 </span>
                 </dt>
@@ -11,7 +11,7 @@
         @else
             <div class="flex items-center justify-between gap-x-3">
                 <dt class="inline-flex items-center gap-x-3">
-                <span class="text-sm font-medium leading-6 text-gray-950 dark:text-white">
+                <span class="text-sm font-medium leading-6 text-zinc-950 dark:text-white">
                     {{$label}}
                 </span>
                 </dt>
@@ -24,13 +24,13 @@
         <div class="flex fi-in-text">
             @if($href)
             <a class="min-w-0 flex-1" href="{{$href}}" target="_blank">
-                <div class="inline-flex items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white underline" >
+                <div class="inline-flex items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white underline" >
                     {!! $value !!}
                 </div>
             </a>
             @else
                 <div class="min-w-0 flex-1">
-                    <div class="inline-flex items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white" >
+                    <div class="inline-flex items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white" >
                         {!! $value !!}
                     </div>
                 </div>
@@ -93,7 +93,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'date')
                 <div class="flex fi-in-text">
                     <div class="min-w-0 flex-10">
-                        <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white  text-primary-600" >
+                        <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white  text-primary-600" >
                             <div class="flex flex-col item-center justifiy-center">
                                 <i class="bx bx-calendar"></i>
                             </div>
@@ -106,7 +106,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'datetime')
                 <div class="flex fi-in-text">
                     <div class="min-w-0 flex-10">
-                        <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white  text-primary-600" >
+                        <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white  text-primary-600" >
                             <div class="flex flex-col item-center justifiy-center">
                                 <i class="bx bx-calender"></i>
                             </div>
@@ -119,7 +119,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'time')
             <div class="flex fi-in-text">
                 <div class="min-w-0 flex-10">
-                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white  text-primary-600" >
+                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white  text-primary-600" >
                         <div class="flex flex-col item-center justifiy-center">
                             <i class="bx bx-time"></i>
                         </div>
@@ -132,7 +132,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'number')
             <div class="flex fi-in-text">
                 <div class="min-w-0 flex-1">
-                    <div class="inline-flex items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white" >
+                    <div class="inline-flex items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white" >
                        {{ number_format($value, 2) }}
                     </div>
                 </div>
@@ -146,7 +146,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'icon')
             <div class="flex fi-in-text">
                 <div class="min-w-0 flex-1">
-                    <div class="inline-flex items-center gap-1.5 leading-6 text-gray-950 dark:text-white" >
+                    <div class="inline-flex items-center gap-1.5 leading-6 text-zinc-950 dark:text-white" >
                         <i class="{{$value}}"></i>
                     </div>
                 </div>
@@ -154,7 +154,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'tel')
             <a href="tel:{{$value}}" target="_blank" class="flex fi-in-text">
                 <div class="min-w-0 flex-10">
-                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white  text-primary-600" >
+                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white  text-primary-600" >
                         <div class="flex flex-col item-center justifiy-center">
                             <i class="bx bx-phone"></i>
                         </div>
@@ -167,7 +167,7 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'email')
             <a href="mailto:{{$value}}" target="_blank" class="flex fi-in-text">
                 <div class="min-w-0 flex-10">
-                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white  text-primary-600" >
+                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white  text-primary-600" >
                         <div class="flex flex-col item-center justifiy-center">
                             <i class="bx bx-envelope"></i>
                         </div>
@@ -180,13 +180,13 @@ class="bg-primary-100 whitespace-nowrap inline-flex items-center gap-2 justify-c
         @elseif($type === 'bool')
             <div class="flex fi-in-text">
                 <div class="min-w-0 flex-10">
-                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-gray-950 dark:text-white" >
+                    <div class="flex justifiy-start items-center gap-1.5 text-sm leading-6 text-zinc-950 dark:text-white" >
                         @if($value === true)
                             <div class="w-4 h-4 bg-success-500 rounded-full">
 
                             </div>
                         @else
-                            <div class="w-4 h-4 bg-gray-500 rounded-full">
+                            <div class="w-4 h-4 bg-zinc-500 rounded-full">
 
                             </div>
                         @endif
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
index e0624f9..22417f0 100644
--- a/resources/views/components/select.blade.php
+++ b/resources/views/components/select.blade.php
@@ -18,14 +18,14 @@
         @includeWhen($label, 'splade::form.label', ['label' => $label])
 
         @if($prepend)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-200 bg-gray-50 dark:bg-gray-600 text-gray-50 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-200 bg-zinc-50 dark:bg-zinc-600 text-zinc-50 dark:text-white">
                 {!! $prepend !!}
             </span>
         @endif
     </template>
     <template #append>
         @if($append)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-600 text-gray-500 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-200 bg-zinc-50 dark:bg-zinc-600 text-zinc-500 dark:text-white">
                 {!! $append !!}
             </span>
         @endif
diff --git a/resources/views/components/submit.blade.php b/resources/views/components/submit.blade.php
index eb97bf1..922260d 100644
--- a/resources/views/components/submit.blade.php
+++ b/resources/views/components/submit.blade.php
@@ -17,7 +17,7 @@
         'bg-warning-600 hover:bg-warning-500 focus:bg-warning-700 focus:ring-offset-warning-700 text-white border-transparent' => $warning,
         'bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 text-white border-transparent' => $primary,
         'bg-success-600 hover:bg-success-500 focus:bg-success-700 focus:ring-offset-success-700 text-white border-transparent' => $success,
-        'bg-white hover:bg-gray-50 focus:bg-gray-100 focus:ring-offset-gray-95 text-gray-950 ring-gray-950/10' => $secondary,
+        'bg-white hover:bg-zinc-50 focus:bg-zinc-100 focus:ring-offset-zinc-95 text-zinc-950 ring-zinc-950/10' => $secondary,
 ])}}>
         @if(trim($slot))
             {{ $slot }}
@@ -25,7 +25,7 @@
             <div class="flex flex-row items-center justify-center">
                 <svg
                         v-if="@js($spinner) && form.processing"
-                        class="animate-spin mr-3 h-5 w-5 @if($secondary) text-gray-700 @else text-white @endif" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        class="animate-spin mr-3 h-5 w-5 @if($secondary) text-zinc-700 @else text-white @endif" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 >
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
diff --git a/resources/views/components/table-action.blade.php b/resources/views/components/table-action.blade.php
index 94a28bc..d67b943 100644
--- a/resources/views/components/table-action.blade.php
+++ b/resources/views/components/table-action.blade.php
@@ -2,11 +2,11 @@
 @if($type === 'link')
         <x-splade-link  {{ $attributes->class([
         'text-left w-full px-4 py-2 text-sm  font-normal',
-        'text-danger-700 dark:text-white dark:hover:bg-danger-600 hover:bg-gray-50 hover:text-danger-900' => $danger,
-        'text-warning-700 dark:text-white dark:hover:bg-warning-600 hover:bg-gray-50 hover:text-warning-900' => $warning,
-        'text-primary-700 dark:text-white dark:hover:bg-primary-600 hover:bg-gray-50 hover:text-primary-900' => $primary,
-        'text-success-700 dark:text-white dark:hover:bg-success-600 hover:bg-gray-50 hover:text-success-900' => $success,
-        'text-gray-700 dark:text-white dark:hover:bg-gray-600 hover:bg-gray-50 hover:text-gray-900' => $secondary,
+        'text-danger-700 dark:text-white dark:hover:bg-danger-600 hover:bg-zinc-50 hover:text-danger-900' => $danger,
+        'text-warning-700 dark:text-white dark:hover:bg-warning-600 hover:bg-zinc-50 hover:text-warning-900' => $warning,
+        'text-primary-700 dark:text-white dark:hover:bg-primary-600 hover:bg-zinc-50 hover:text-primary-900' => $primary,
+        'text-success-700 dark:text-white dark:hover:bg-success-600 hover:bg-zinc-50 hover:text-success-900' => $success,
+        'text-zinc-700 dark:text-white dark:hover:bg-zinc-600 hover:bg-zinc-50 hover:text-zinc-900' => $secondary,
     ]) }} :method="$method">
         <div class="flex justify-start gap-2">
             @if($icon)
@@ -22,11 +22,11 @@
 @else
     <button  {{ $attributes->class([
         'text-left w-full px-4 py-2 text-sm  font-normal',
-        'text-danger-700 dark:text-white dark:hover:bg-danger-600 hover:bg-gray-50 hover:text-danger-900' => $danger,
-        'text-warning-700 dark:text-white dark:hover:bg-warning-600 hover:bg-gray-50 hover:text-warning-900' => $warning,
-        'text-primary-700 dark:text-white dark:hover:bg-primary-600 hover:bg-gray-50 hover:text-primary-900' => $primary,
-        'text-success-700 dark:text-white dark:hover:bg-success-600 hover:bg-gray-50 hover:text-success-900' => $success,
-        'text-gray-700 dark:text-white dark:hover:bg-gray-600 hover:bg-gray-50 hover:text-gray-900' => $secondary,
+        'text-danger-700 dark:text-white dark:hover:bg-danger-600 hover:bg-zinc-50 hover:text-danger-900' => $danger,
+        'text-warning-700 dark:text-white dark:hover:bg-warning-600 hover:bg-zinc-50 hover:text-warning-900' => $warning,
+        'text-primary-700 dark:text-white dark:hover:bg-primary-600 hover:bg-zinc-50 hover:text-primary-900' => $primary,
+        'text-success-700 dark:text-white dark:hover:bg-success-600 hover:bg-zinc-50 hover:text-success-900' => $success,
+        'text-zinc-700 dark:text-white dark:hover:bg-zinc-600 hover:bg-zinc-50 hover:text-zinc-900' => $secondary,
     ]) }}>
         <div class="flex justify-start gap-2">
             @if($icon)
diff --git a/resources/views/components/tel.blade.php b/resources/views/components/tel.blade.php
index 7d7bedc..6b35d54 100644
--- a/resources/views/components/tel.blade.php
+++ b/resources/views/components/tel.blade.php
@@ -6,7 +6,7 @@
         @includeWhen($label, 'splade::form.label', ['label' => $label])
 
         @if($prepend)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-gray-300 bg-gray-50 text-gray-50 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnablePrepend) }" class="inline-flex items-center px-3 rounded-l-md border border-t-0 border-b-0 border-l-0 border-zinc-300 bg-zinc-50 text-zinc-50 dark:text-white">
                     {!! $prepend !!}
                 </span>
         @endif
@@ -14,7 +14,7 @@
 
     <template #append>
         @if($append)
-            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-gray-300 bg-gray-50 text-gray-500 dark:text-white">
+            <span :class="{ 'opacity-50': inputScope.disabled && @json(!$alwaysEnableAppend) }" class="inline-flex items-center px-3 rounded-r-md border border-t-0 border-b-0 border-r-0 border-zinc-300 bg-zinc-50 text-zinc-500 dark:text-white">
                     {!! $append !!}
                 </span>
         @endif
diff --git a/resources/views/components/widget.blade.php b/resources/views/components/widget.blade.php
index 0addae2..96278c5 100644
--- a/resources/views/components/widget.blade.php
+++ b/resources/views/components/widget.blade.php
@@ -1,12 +1,12 @@
 <div  {{$attributes->class([
-    "relative rounded-xl bg-white p-6 shadow-sm border border-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:ring-white/10"
+    "relative rounded-xl bg-white p-6 shadow-sm border border-zinc-100 dark:border-zinc-800 dark:bg-zinc-900 dark:ring-white/10"
 ])}} >
     <div class="flex justify-between gap-4">
         <div>
             <div class="flex items-center gap-x-2">
-                <span class="text-sm font-medium text-gray-500 dark:text-gray-400"> {{$title}} </span>
+                <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400"> {{$title}} </span>
             </div>
-            <div class="text-3xl font-semibold tracking-tight text-gray-950 dark:text-white">
+            <div class="text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">
                 @if(\Illuminate\Support\Str::contains('${response.data}', $counter))
                     <div v-if="response.data">
                         @{{ response.data }}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d064f49..f31d3ae 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -15,7 +15,7 @@
     local-storage
 >
 
-<div class="filament-body bg-gray-50 text-gray-950 dark:text-white dark:bg-black font-main" @load="data.dark" id="appBody">
+<div class="filament-body bg-zinc-50 text-zinc-950 dark:text-white dark:bg-black font-main" @load="data.dark" id="appBody">
     <div class="filament-app-layout flex w-full min-h-screen overflow-v-clip">
 
         <x-tomato-admin-aside />
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 60f4dd6..a706e02 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -1,6 +1,6 @@
-<div class="flex items-center justify-center min-h-screen py-12 text-gray-900 bg-gray-100 filament-login-page dark:bg-gray-900 dark:text-white">
+<div class="flex items-center justify-center min-h-screen py-12 text-zinc-900 bg-zinc-100 filament-login-page dark:bg-zinc-900 dark:text-white">
     <div class="w-screen max-w-md px-6 -mt-16 space-y-8 md:mt-0 md:px-2">
-        <div class="relative p-8 space-y-4 border border-gray-200 shadow-2xl bg-white/50 backdrop-blur-xl rounded-2xl dark:bg-gray-900/50 dark:border-gray-700">
+        <div class="relative p-8 space-y-4 border border-zinc-200 shadow-2xl bg-white/50 backdrop-blur-xl rounded-2xl dark:bg-zinc-900/50 dark:border-zinc-700">
             <div class="flex justify-center w-full">
                 @if(count(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getLogoSection()))
                     @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getLogoSection() as $item)
diff --git a/resources/views/layouts/includes/aside.blade.php b/resources/views/layouts/includes/aside.blade.php
index 341f0d5..0a348f9 100644
--- a/resources/views/layouts/includes/aside.blade.php
+++ b/resources/views/layouts/includes/aside.blade.php
@@ -31,9 +31,9 @@ class="
                     overflow-hidden
                     shadow-2xl
                     transition-all
-                    bg-gray-800
+                    bg-zinc-800
                     lg:z-0
-                    dark:bg-gray-800
+                    dark:bg-zinc-800
                     filament-sidebar-open
                     translate-x-0
                     max-w-[20em]
@@ -42,11 +42,11 @@ class="
 
     <header
             class="
-                bg-gray-900
+                bg-zinc-900
                 filament-sidebar-header
                 h-[4rem]
                 shrink-0
-                px-6 flex items-center dark:border-gray-700"
+                px-6 flex items-center dark:border-zinc-700"
     >
         @if(count(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getLogoSection()))
             @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getLogoSection() as $item)
@@ -65,6 +65,103 @@ class="block w-fulls font-bold"
         @endif
     </header>
 
+
+    <!-- Search -->
+    @if(config('tomato-admin.global_search'))
+    <div v-show="!data.makeMenuMin" class="my-4 px-6" v-show="!data.makeMenuMin">
+        <div class="relative">
+            <div class="filament-global-search-input">
+                <label for="globalSearchInput" class="sr-only">
+                    {{trans('tomato-admin::global.search')}}
+                </label>
+
+                <div class="relative group max-w-md">
+                <span class="absolute inset-y-0 left-0 flex items-center justify-center w-10 h-10 text-zinc-500 pointer-events-none group-focus-within:text-primary-500 dark:text-zinc-400">
+                    <svg  class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                    <svg v-if="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-5 h-5">
+                        <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"></path>
+                        <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
+                    </svg>
+                </span>
+                    <x-splade-form :default="[
+                    'filter' => [
+                        'global' => request()->get('filter')['global'] ?? null
+                    ]
+                ]"  method="GET" action="{{config('tomato-admin.global_search_route') ?: url()->current()}}">
+                        <input  id="globalSearchInput" v-model="form.filter['global']" placeholder="{{trans('tomato-admin::global.search')}}" type="search" autocomplete="off" class="block w-full h-10 pl-10 bg-zinc-400/10 text-zinc-100 placeholder-zinc-200 border-transparent transition duration-75 rounded-lg focus:bg-zinc-800 focus:placeholder-zinc-600 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:bg-zinc-700 dark:text-zinc-200 dark:placeholder-zinc-600">
+                    </x-splade-form>
+                </div>
+            </div>
+        </div>
+    </div>
+    @endif
+    @if(\Laravel\Jetstream\Jetstream::hasTeamFeatures())
+        <div v-show="!data.makeMenuMin" class="my-2 border-t border-zinc-700"></div>
+        <div v-show="!data.makeMenuMin" class="flex flex-col justify-center items-center">
+            <x-tomato-admin-dropdown id="team-dropdown">
+                <x-slot:button>
+                    <div class="flex justify-start gap-4 w-full mx-4" v-show="!data.makeMenuMin">
+                        <div>
+                            <div class="w-14 h-14 rounded-lg bg-gray-200 bg-cover bg-center dark:bg-gray-900" style="background-image: url('https://ui-avatars.com/api/?name={{auth()->user()->currentTeam ? auth()->user()->currentTeam->name : __('No Team')}}')">
+                            </div>
+                        </div>
+                        <div class="flex flex-col items-center justify-center">
+                            <div class="flex flex-col justify-start items-start">
+                                <p class="text-white text-zinc-400">{{ __('Current Team') }}</p>
+                                <h6 class="text-lg text-white font-medium">
+                                    @if(auth()->user()->currentTeam)
+                                        {{ auth()->user()->currentTeam?->name }}
+                                    @else
+                                        {{ __('No Team')}}
+                                    @endif
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                </x-slot:button>
+
+                @if(auth()->user()->currentTeam)
+                    <!-- Team Management -->
+                    <div class="block px-4 py-2 text-xs text-zinc-400">
+                        {{ __('Manage Team') }}
+                    </div>
+
+
+                    <!-- Team Settings -->
+                    <x-tomato-admin-dropdown-item type="link" icon="bx bxs-cog" :href="route('admin.teams.show', auth()->user()->currentTeam)" :label="__('Team Settings')" />
+                    @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
+                        <x-tomato-admin-dropdown-item type="link" icon="bx bxs-plus-circle" :href="route('admin.teams.create')" :label="__('Create New Team')" />
+                    @endcan
+                    <div class="border-t border-zinc-200 dark:border-zinc-600" />
+                    <!-- Team Switcher -->
+                    <div class="block px-4 py-2 text-xs text-zinc-400">
+                        {{ __('Switch Teams') }}
+                    </div>
+
+                    @foreach(auth()->user()->allTeams() as $team)
+                        <x-splade-form method="PUT" :action="route('admin.current-team.update')" :default="['team_id' => $team->getKey()]">
+                            <x-tomato-admin-dropdown-item type="button" :icon="$team->is(auth()->user()->currentTeam) ? 'bx bxs-check-circle' : 'bx bx-check-circle'" :label="$team->name" />
+                        </x-splade-form>
+                    @endforeach
+                @else
+                    <!-- Team Management -->
+                    <div class="block px-4 py-2 text-xs text-zinc-400">
+                        {{ __('Manage Team') }}
+                    </div>
+
+                    @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
+                        <x-tomato-admin-dropdown-item type="link" icon="bx bxs-plus-circle" :href="route('admin.teams.create')" :label="__('Create New Team')" />
+                    @endcan
+                @endif
+
+            </x-tomato-admin-dropdown>
+        </div>
+    @endif
+    <div v-show="!data.makeMenuMin" class="my-2 border-t border-zinc-700"></div>
+
+
     <nav class="pb-6 overflow-y-auto filament-sidebar-nav" @preserveScroll('sidebar')>
         <div>
             @include('tomato-admin::layouts.includes.menu')
diff --git a/resources/views/layouts/includes/footer.blade.php b/resources/views/layouts/includes/footer.blade.php
index 2d5e9a6..d95f901 100644
--- a/resources/views/layouts/includes/footer.blade.php
+++ b/resources/views/layouts/includes/footer.blade.php
@@ -1,4 +1,4 @@
-<footer class="bg-white dark:bg-gray-800 dark:border-gray-700 p-4 border-t border-gray-200 flex flex-col  items-center justify-center">
+<footer class="bg-white dark:bg-zinc-800 dark:border-zinc-700 p-4 border-t border-zinc-200 flex flex-col  items-center justify-center">
     @if(count(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getFooter()))
 
     @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getFooter() as $item)
@@ -16,7 +16,7 @@
             Have a Bug? Please contact  <a href="https://discord.gg/VZc8nBJ3ZU" target="_blank" class="text-primary-500 hover:text-primary-600">Support</a>
         </span>
     </div>
-    <div class="ml-4 text-center text-xs text-gray-500 sm:text-right sm:ml-0">
+    <div class="ml-4 text-center text-xs text-zinc-500 sm:text-right sm:ml-0">
         Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
     </div>
 
diff --git a/resources/views/layouts/includes/menu.blade.php b/resources/views/layouts/includes/menu.blade.php
index 531210d..17032f9 100644
--- a/resources/views/layouts/includes/menu.blade.php
+++ b/resources/views/layouts/includes/menu.blade.php
@@ -1,62 +1,18 @@
 @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getSidebarTop() as $item)
     @include($item)
 @endforeach
-<!-- Search -->
-<div class="my-4 px-6" v-show="!data.makeMenuMin">
-    <div class="relative">
-        <div class="filament-global-search-input">
-            <label for="globalSearchInput" class="sr-only">
-                {{trans('tomato-admin::global.search')}}
-            </label>
 
-            <div class="relative group max-w-md">
-                <span class="absolute inset-y-0 left-0 flex items-center justify-center w-10 h-10 text-gray-500 pointer-events-none group-focus-within:text-primary-500 dark:text-gray-400">
-                    <svg  class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                    </svg>
-                    <svg v-if="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-5 h-5">
-                        <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"></path>
-                        <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
-                    </svg>
-                </span>
-                <x-splade-form :default="[
-                    'filter' => [
-                        'global' => request()->get('filter')['global'] ?? null
-                    ]
-                ]"  method="GET" action="{{config('tomato-admin.global_search_route') ?: url()->current()}}">
-                    <input  id="globalSearchInput" v-model="form.filter['global']" placeholder="{{trans('tomato-admin::global.search')}}" type="search" autocomplete="off" class="block w-full h-10 pl-10 bg-gray-400/10 text-gray-100 placeholder-gray-200 border-transparent transition duration-75 rounded-lg focus:bg-gray-800 focus:placeholder-gray-600 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-600">
-                </x-splade-form>
-            </div>
-        </div>
-    </div>
-</div>
-<div v-show="!data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
-<x-splade-link href="{{route('admin.profile.edit')}}" class="px-4 py-3 flex justify-start gap-4" v-show="!data.makeMenuMin">
-    @php
-        $grav_url = auth()->user()->profile_photo_url;
-    @endphp
+<div class="overflow-y-auto">
     <div>
-        <div class="w-14 h-14 rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900" style="background-image: url('{{$grav_url}}')">
-        </div>
-    </div>
-    <div class="flex flex-col items-center justify-center">
-        <div>
-            <h6 class="text-lg text-white font-bold">{{auth('web')->user()->name}}</h6>
-            <p class="text-sm text-gray-300">{{auth('web')->user()->email}}</p>
-        </div>
-    </div>
-</x-splade-link>
-<div v-show="!data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
-<div>
-    <div class="text-sm">
-        <div>
-            <Link
-                href="{{ route('admin') }}"
-                class="
+        <div class="text-sm">
+            <div>
+                <Link
+                    href="{{ route('admin') }}"
+                    class="
                 @if(request()->routeIs('admin'))
                     text-white font-bold
                 @else
-                    text-gray-400 hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
+                    text-zinc-400 hover:bg-zinc-500/5 focus:bg-zinc-500/5 dark:text-zinc-300 dark:hover:bg-zinc-700
                 @endif
                     flex items-center justify-center w-full py-3 font-medium transition" :class="{'gap-3 px-4': !data.makeMenuMin}">
 
@@ -75,94 +31,93 @@ class="
                         {{ trans("tomato-admin::global.dashboard") }}
                     </span>
                 </div>
-            </Link>
+                </Link>
+            </div>
         </div>
+        <div v-show="data.makeMenuMin" class="my-2 border-t border-zinc-700"></div>
     </div>
-    <div v-show="data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
-</div>
-
-<div>
-    @if(config('tomato-admin.menu_provider'))
-        {!! config('tomato-admin.menu_provider')::render() !!}
-    @elseif(config('tomato-admin.menu_file'))
-        @include(config('tomato-admin.menu_file'))
-    @else
-        @php $counter = 0; @endphp
-        @foreach($menus as $key=>$menu)
-            @if(isset($menu['menu']) ? count($menu['menu']) === 1 : count($menu) === 1)
-                @php $item = isset($menu['menu']) ? $menu['menu'][0] : $menu[0]; @endphp
-                <div class="filament-sidebar-item"  title="{{$item->label}}" style="color: {{$item->color}} !important;">
-                    @if($item->target === '_blank')
-                        <a
-                            target="_blank"
-                            href="{{$item->route ? route($item->route) : $item->url}}"
-                            class="
+    <div>
+        @if(config('tomato-admin.menu_provider'))
+            {!! config('tomato-admin.menu_provider')::render() !!}
+        @elseif(config('tomato-admin.menu_file'))
+            @include(config('tomato-admin.menu_file'))
+        @else
+            @php $counter = 0; @endphp
+            @foreach($menus as $key=>$menu)
+                @if(isset($menu['menu']) ? count($menu['menu']) === 1 : count($menu) === 1)
+                    @php $item = isset($menu['menu']) ? $menu['menu'][0] : $menu[0]; @endphp
+                    <div class="filament-sidebar-item"  title="{{$item->label}}" style="color: {{$item->color}} !important;">
+                        @if($item->target === '_blank')
+                            <a
+                                target="_blank"
+                                href="{{$item->route ? route($item->route) : $item->url}}"
+                                class="
                             @if($item->route && request()->routeIs($item->route))
                                 text-white
                             @else
-                                hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
+                                hover:bg-zinc-500/5 focus:bg-zinc-500/5 dark:text-zinc-300 dark:hover:bg-zinc-700
                             @endif
                           flex items-center justify-center w-full gap-3 px-4 py-2 font-medium transition rounded-lg">
 
-                            <div v-if="data.makeMenuMin">
-                                <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                <div v-if="data.makeMenuMin">
+                                    <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                        <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
+                                    </x-tomato-admin-tooltip>
+                                </div>
+                                <div v-else>
                                     <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                                </x-tomato-admin-tooltip>
-                            </div>
-                            <div v-else>
-                                <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                            </div>
+                                </div>
 
-                            <div class="flex flex-1" v-show="!data.makeMenuMin" style="">
+                                <div class="flex flex-1" v-show="!data.makeMenuMin" style="">
                                 <span>
                                     {{ $item->label }}
                                 </span>
-                                @if($item->badge)
-                                    <span
-                                        class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
+                                    @if($item->badge)
+                                        <span
+                                            class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
                                     {{ $item->badge }}
                                 </span>
-                                @endif
-                            </div>
-                        </a>
-                    @else
-                        <Link
-                            href="{{$item->route ? route($item->route) : $item->url}}"
-                            class="
+                                    @endif
+                                </div>
+                            </a>
+                        @else
+                            <Link
+                                href="{{$item->route ? route($item->route) : $item->url}}"
+                                class="
                             @if($item->route && request()->routeIs($item->route))
                                 text-white font-bold
                             @else
-                                text-gray-400 hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
+                                text-zinc-400 hover:bg-zinc-500/5 focus:bg-zinc-500/5 dark:text-zinc-300 dark:hover:bg-zinc-700
                             @endif
                            flex items-center justify-center w-full gap-3  py-3 font-medium transition" :class="{'gap-3 px-4': !data.makeMenuMin}">
 
 
-                        <div v-if="data.makeMenuMin">
-                            <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                            <div v-if="data.makeMenuMin">
+                                <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                    <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
+                                </x-tomato-admin-tooltip>
+                            </div>
+                            <div v-else class="flex flex-col justify-center items-center">
                                 <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                            </x-tomato-admin-tooltip>
-                        </div>
-                        <div v-else>
-                            <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                        </div>
+                            </div>
 
-                        <div class="flex-1 text-xs font-bold" v-show="!data.makeMenuMin" style="">
+                            <div class="flex-1 text-xs font-bold" v-show="!data.makeMenuMin" style="">
                                 <span>
                                     {{ $item->label }}
                                 </span>
-                            @if($item->badge)
-                                <span
-                                    class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
+                                @if($item->badge)
+                                    <span
+                                        class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
                                     {{ $item->badge }}
                                 </span>
-                            @endif
-                        </div>
-                        </Link>
-                    @endif
-                </div>
-                <div v-show="data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
-            @else
-                <button @click.prevent="
+                                @endif
+                            </div>
+                            </Link>
+                        @endif
+                    </div>
+                    <div v-show="data.makeMenuMin" class="my-2 border-t border-zinc-700"></div>
+                @else
+                    <button @click.prevent="
             for(let i in data.asideMenuGroup){
                 if(i !== '{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}'){
                     data.asideMenuGroup[i] = false;
@@ -170,158 +125,129 @@ class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-
             };
             data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}'] =
             !data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}']"
-                        v-show="!data.makeMenuMin"
-                        class="w-full dark:text-gray-300 flex items-center justify-between gap-3 px-4 py-3 font-medium transition"
-                        :class="{
-                        'bg-gray-900 hover:bg-gray-800 text-white': data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}'],
-                        'text-gray-400 hover:bg-gray-500/5 dark:hover:bg-gray-700 focus:bg-gray-500/5': !data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}'],
+                            v-show="!data.makeMenuMin"
+                            class="w-full dark:text-zinc-300 flex items-center justify-between gap-3 px-4 py-3 font-medium transition"
+                            :class="{
+                        'bg-zinc-900 hover:bg-zinc-800 text-white': data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}'],
+                        'text-zinc-400 hover:bg-zinc-500/5 dark:hover:bg-zinc-700 focus:bg-zinc-500/5': !data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}'],
                     }">
-                    <div class="flex items-center gap-4">
-                        <i class="w-5 h-5 shrink-0 bx @if(isset($menu['icon'])) {{$menu['icon']}} @else bxs-category @endif" style="font-size: 20px"></i>
-
-                        <p class="flex-1 text-xs font-bold">
-                            {{ isset($menu['label']) ? $menu['label'] : $key }}
-                        </p>
-                    </div>
+                        <div class="flex items-center gap-4">
+                            <i class="w-5 h-5 shrink-0 bx @if(isset($menu['icon'])) {{$menu['icon']}} @else bxs-category @endif" style="font-size: 20px"></i>
 
-                    <svg v-if="data.asideMenuGroup" v-show="data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}']"
-                         class="w-3 h-3 text-gray-600 transition-all dark:text-gray-300" xmlns="http://www.w3.org/2000/svg"
-                         fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
-                    </svg>
-                    <svg v-if="data.asideMenuGroup" v-show="!data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}']"
-                         class="w-3 h-3 text-gray-600 transition-all rotate-180 dark:text-gray-300"
-                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-                         aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
-                    </svg>
-                </button>
+                            <p class="flex-1 text-xs font-bold">
+                                {{ isset($menu['label']) ? $menu['label'] : $key }}
+                            </p>
+                        </div>
 
-                <div>
-                    <div
-                        v-show="data.asideMenuGroup && data.asideMenuGroup['{{str_replace(' ', '_', isset($menu['key']) ?$menu['key'] : $key)}}'] || data.makeMenuMin" class="text-sm" :class="{'bg-gray-950':!data.makeMenuMin}">
-                        @foreach(isset($menu['menu']) ? $menu['menu'] : $menu as $item)
-                            <div class="filament-sidebar-item"  title="{{$item->label}}" style="color: {{$item->color}} !important;">
-                                @if($item->target === '_blank')
-                                    <a
-                                        target="_blank"
-                                        href="{{$item->route ? route($item->route) : $item->url}}"
-                                        :class="{
+                        <svg v-if="data.asideMenuGroup" v-show="data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}']"
+                             class="w-3 h-3 text-zinc-600 transition-all dark:text-zinc-300" xmlns="http://www.w3.org/2000/svg"
+                             fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                        <svg v-if="data.asideMenuGroup" v-show="!data.asideMenuGroup['{{str_replace(" ", "_", isset($menu['key']) ?$menu['key'] : $key)}}']"
+                             class="w-3 h-3 text-zinc-600 transition-all rotate-180 dark:text-zinc-300"
+                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                             aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </button>
+
+                    <div>
+                        <div
+                            v-show="data.asideMenuGroup && data.asideMenuGroup['{{str_replace(' ', '_', isset($menu['key']) ?$menu['key'] : $key)}}'] || data.makeMenuMin" class="text-sm" :class="{'bg-zinc-950':!data.makeMenuMin}">
+                            @foreach(isset($menu['menu']) ? $menu['menu'] : $menu as $item)
+                                <div class="filament-sidebar-item"  title="{{$item->label}}" style="color: {{$item->color}} !important;">
+                                    @if($item->target === '_blank')
+                                        <a
+                                            target="_blank"
+                                            href="{{$item->route ? route($item->route) : $item->url}}"
+                                            :class="{
                                     'ltr:pl-10 rtl:pr-10': !data.makeMenuMin
                                 }"
-                                        class="
+                                            class="
                             @if($item->route && request()->routeIs($item->route))
                                 text-white font-bold
                             @else
-                                text-gray-400 hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
+                                text-zinc-400 hover:bg-zinc-500/5 focus:bg-zinc-500/5 dark:text-zinc-300 dark:hover:bg-zinc-700
                             @endif
                            flex items-center justify-center w-full gap-3  py-3 font-medium transition">
 
-                                        <div v-if="data.makeMenuMin">
-                                            <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                            <div v-if="data.makeMenuMin">
+                                                <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                                    <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
+                                                </x-tomato-admin-tooltip>
+                                            </div>
+                                            <div v-else class="flex flex-col justify-center items-center">
                                                 <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                                            </x-tomato-admin-tooltip>
-                                        </div>
-                                        <div v-else>
-                                            <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                                        </div>
+                                            </div>
 
-                                        <div class="flex-1 text-xs font-bold" v-show="!data.makeMenuMin" style="">
+                                            <div class="flex-1 text-xs font-bold" v-show="!data.makeMenuMin" style="">
                                 <span>
                                     {{ $item->label }}
                                 </span>
-                                            @if($item->badge)
-                                                <span
-                                                    class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
+                                                @if($item->badge)
+                                                    <span
+                                                        class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
                                     {{ $item->badge }}
                                 </span>
-                                            @endif
-                                        </div>
-                                    </a>
-                                @else
-                                    <Link
-                                        href="{{$item->route ? route($item->route) : $item->url}}"
-                                        :class="{
+                                                @endif
+                                            </div>
+                                        </a>
+                                    @else
+                                        <Link
+                                            href="{{$item->route ? route($item->route) : $item->url}}"
+                                            :class="{
                                     'ltr:pl-10 rtl:pr-10': !data.makeMenuMin
                                 }"
-                                        class="
+                                            class="
                             @if($item->route && request()->routeIs($item->route))
                                 text-white font-bold
                             @else
-                                text-gray-400 hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
+                                text-zinc-400 hover:bg-zinc-500/5 focus:bg-zinc-500/5 dark:text-zinc-300 dark:hover:bg-zinc-700
                             @endif
                            flex items-center justify-center w-full gap-3  py-2 font-medium transition">
 
 
-                                    <div v-if="data.makeMenuMin">
-                                        <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                        <div v-if="data.makeMenuMin">
+                                            <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="$item->label">
+                                                <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
+                                            </x-tomato-admin-tooltip>
+                                        </div>
+                                        <div v-else class="flex flex-col justify-center items-center">
                                             <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                                        </x-tomato-admin-tooltip>
-                                    </div>
-                                    <div v-else>
-                                        <i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>
-                                    </div>
+                                        </div>
 
-                                    <div class="flex-1 text-xs font-bold" v-show="!data.makeMenuMin" style="">
+                                        <div class="flex-1 text-xs font-bold" v-show="!data.makeMenuMin" style="">
                                 <span>
                                     {{ $item->label }}
                                 </span>
-                                        @if($item->badge)
-                                            <span
-                                                class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
+                                            @if($item->badge)
+                                                <span
+                                                    class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-primary-700 bg-primary-500/10 dark:text-primary-500">
                                     {{ $item->badge }}
                                 </span>
-                                        @endif
-                                    </div>
-                                    </Link>
-                                @endif
-                            </div>
-                        @endforeach
+                                            @endif
+                                        </div>
+                                        </Link>
+                                    @endif
+                                </div>
+                            @endforeach
+                        </div>
                     </div>
-                </div>
-                @if($counter !== count($menus)-1)
-                    <div v-show="data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
+                    @if($counter !== count($menus)-1)
+                        <div v-show="data.makeMenuMin" class="my-2 border-t border-zinc-700"></div>
+                    @endif
+                    @php $counter++; @endphp
                 @endif
-                @php $counter++; @endphp
-            @endif
+            @endforeach
+        @endif
+    </div>
+    <div class="flex flex-col justifiy-end">
+        @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getSidebarBottom() as $item)
+            @include($item)
         @endforeach
-    @endif
-</div>
-
-<div class="flex flex-col justifiy-end">
-    <div>
-        <div class="my-2 border-t border-gray-700"></div>
-        <div class="text-sm">
-            <div>
-                <Link
-                    method="POST"
-                    href="{{ route('logout') }}"
-                    class="
-                    text-danger-400 hover:bg-gray-500/5 focus:bg-gray-500/5
-                    flex items-center justify-center w-full py-3 font-medium transition" :class="{'gap-3 px-4': !data.makeMenuMin}">
-
-
-                <div v-if="data.makeMenuMin">
-                    <x-tomato-admin-tooltip :left="app()->getLocale() === 'ar'" :right="app()->getLocale() !== 'ar'" :text="__('Logout')">
-                        <i class="w-5 h-5 shrink-0 bx bx-log-out" style="font-size: 20px"></i>
-                    </x-tomato-admin-tooltip>
-                </div>
-                <div v-else>
-                    <i class="w-5 h-5 shrink-0 bx bx-log-out" style="font-size: 20px"></i>
-                </div>
-
-                <div class="flex flex-1" v-show="!data.makeMenuMin">
-                    <span>
-                        {{ __("Logout") }}
-                    </span>
-                </div>
-                </Link>
-            </div>
-        </div>
     </div>
-    @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getSidebarBottom() as $item)
-        @include($item)
-    @endforeach
 </div>
 
 
+
diff --git a/resources/views/layouts/includes/nav.blade.php b/resources/views/layouts/includes/nav.blade.php
index f252333..946de67 100644
--- a/resources/views/layouts/includes/nav.blade.php
+++ b/resources/views/layouts/includes/nav.blade.php
@@ -9,10 +9,10 @@
                     shrink-0
                     items-center
                     border-b
-                    border-gray-100
+                    border-zinc-100
                     bg-white
-                    dark:bg-gray-800
-                    dark:border-gray-700
+                    dark:bg-zinc-800
+                    dark:border-zinc-900
                 ">
     <div class="flex items-center w-full px-2 sm:px-4 md:px-6 lg:px-8">
         <!-- hide button -->
@@ -26,29 +26,28 @@ class="
                             w-10
                             h-10
                             transition
-                            text-primary-500
+                            text-zinc-900
                             rounded-full
-                            hover:bg-gray-500/5
+                            hover:bg-zinc-500/5
                             focus:bg-primary-500/10
                             focus:outline-none
                             lg:z-10
                             lg:hover:bg-white
                             lg:focus:bg-white
-                            lg:hover:text-gray-600
-                            lg:focus:text-gray-600
+                            lg:hover:text-zinc-600
+                            lg:focus:text-zinc-600
                             lg:-ml-[44px]
                             lg:w-6
                             lg:h-6
-                            lg:text-gray-500
+                            lg:text-zinc-500
                             lg:bg-white
                             lg:shadow
-                            lg:dark:bg-gray-900
-                            lg:dark:hover:text-gray-400
-                            lg:dark:focus:text-gray-400
+                            lg:dark:bg-zinc-900
+                            lg:dark:hover:text-zinc-400
+                            lg:dark:focus:text-zinc-400
                             lg:mr-4
                             rtl:lg:ml-4
                             rtl:lg:-mr-[44px]
-
                         "
 
         >
@@ -83,67 +82,6 @@ class="
             <i class="bx bx-fullscreen" id="fullScreen"></i>
         </button>
 
-        @if(\Laravel\Jetstream\Jetstream::hasTeamFeatures())
-            <div class="flex flex-col justify-center items-center mx-4">
-                <x-tomato-admin-dropdown id="team-dropdown">
-                    <x-slot:button>
-                    <span class="inline-flex rounded-md">
-                        <button type="button" class="flex gap-2 items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-700 active:bg-gray-50 dark:active:bg-gray-700 transition ease-in-out duration-150">
-                            <div>
-                                @if(auth()->user()->currentTeam)
-                                    {{ auth()->user()->currentTeam?->name }}
-                                @else
-                                    {{ __('No Team')}}
-                                @endif
-                            </div>
-
-                            <div>
-                                <svg class="ml-2 rtl:mr-2 rtl:-ml-0.5 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
-                            </svg>
-                            </div>
-                        </button>
-                    </span>
-                    </x-slot:button>
-
-                    @if(auth()->user()->currentTeam)
-                        <!-- Team Management -->
-                        <div class="block px-4 py-2 text-xs text-gray-400">
-                            {{ __('Manage Team') }}
-                        </div>
-
-
-                        <!-- Team Settings -->
-                        <x-tomato-admin-dropdown-item type="link" icon="bx bxs-cog" :href="route('admin.teams.show', auth()->user()->currentTeam)" :label="__('Team Settings')" />
-                        @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
-                            <x-tomato-admin-dropdown-item type="link" icon="bx bxs-plus-circle" :href="route('admin.teams.create')" :label="__('Create New Team')" />
-                        @endcan
-                        <div class="border-t border-gray-200 dark:border-gray-600" />
-                        <!-- Team Switcher -->
-                        <div class="block px-4 py-2 text-xs text-gray-400">
-                            {{ __('Switch Teams') }}
-                        </div>
-
-                        @foreach(auth()->user()->allTeams() as $team)
-                            <x-splade-form method="PUT" :action="route('admin.current-team.update')" :default="['team_id' => $team->getKey()]">
-                                <x-tomato-admin-dropdown-item type="button" :icon="$team->is(auth()->user()->currentTeam) ? 'bx bxs-check-circle' : 'bx bx-check-circle'" :label="$team->name" />
-                            </x-splade-form>
-                        @endforeach
-                    @else
-                        <!-- Team Management -->
-                        <div class="block px-4 py-2 text-xs text-gray-400">
-                            {{ __('Manage Team') }}
-                        </div>
-
-                        @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
-                            <x-tomato-admin-dropdown-item type="link" icon="bx bxs-plus-circle" :href="route('admin.teams.create')" :label="__('Create New Team')" />
-                        @endcan
-                    @endif
-
-                </x-tomato-admin-dropdown>
-            </div>
-        @endif
-
         <div class="flex items-center justify-between flex-1">
 
             <!-- breadcrumbs -->
@@ -167,7 +105,7 @@ class="
                     <div
                         title="filament::layout.database_notifications"
                         type="button"
-                        class="filament-icon-button flex items-center justify-center rounded-full relative hover:bg-gray-500/5 focus:outline-none text-primary-500 focus:bg-primary-500/10 dark:hover:bg-gray-300/5 w-10 h-10 ml-4 -mr-1">
+                        class="text-center border border-zinc-100 dark:border-zinc-700 filament-icon-button flex items-center justify-center rounded-full relative hover:bg-zinc-500/5 focus:outline-none text-primary-500 focus:bg-primary-500/10 dark:hover:bg-zinc-300/5 w-8 h-8 ml-4 -mr-1">
                             <span class="sr-only">
 
                             </span>
@@ -175,13 +113,13 @@ class="filament-icon-button flex items-center justify-center rounded-full relati
                         @php $langs = collect(config('tomato-admin.langs')) @endphp
                         <x-tomato-admin-dropdown>
                             <x-slot:button>
-                                <div>
+                                <div class="text-center flex flex-col item-center justify-center">
                                     {{ isset($langs->where('key', app()->getLocale())->first()['flag']) ? $langs->where('key', app()->getLocale())->first()['flag'] : __('Lang') }}
                                 </div>
                             </x-slot:button>
 
                             @foreach($langs as $lang)
-                                <Link href="{{route('admin.lang', ['lang' => $lang])}}" method="POST"  class="@if($lang['key'] === app()->getLocale())  text-primary-600 dark:text-primary-200 hover:text-gray-500  @else text-gray-600 dark:text-gray-200 hover:text-primary-500 @endif whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
+                                <Link href="{{route('admin.lang', ['lang' => $lang])}}" method="POST"  class="@if($lang['key'] === app()->getLocale())  text-primary-600 dark:text-primary-200 hover:text-zinc-500  @else text-zinc-600 dark:text-zinc-200 hover:text-primary-500 @endif whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
                                 <div class="flex justify-start gap-2">
                                     <div class="flex flex-col items-center justify-center">
                                         {{$lang['flag']}}
@@ -212,13 +150,13 @@ class="filament-icon-button flex items-center justify-center rounded-full relati
                         @click.prevent="data.dark = !data.dark; $splade.refresh()"
                         title="filament::layout.database_notifications"
                         type="button"
-                        class="filament-icon-button flex items-center justify-center rounded-full relative hover:bg-gray-500/5 focus:outline-none text-primary-500 focus:bg-primary-500/10 dark:hover:bg-gray-300/5 w-10 h-10 ml-4 -mr-1">
+                        class="border border-zinc-100 dark:border-zinc-700 filament-icon-button flex items-center justify-center rounded-full relative hover:bg-zinc-500/5 focus:outline-none text-primary-500 focus:bg-primary-500/10 dark:hover:bg-zinc-300/5 w-8 h-8 ml-4 -mr-1">
                             <span class="sr-only">
 
                             </span>
 
-                        <x-heroicon-o-sun v-if="data.dark" class="filament-icon-button-icon w-5 h-5"/>
-                        <x-heroicon-o-moon v-else class="filament-icon-button-icon w-5 h-5"/>
+                        <x-heroicon-o-sun v-if="data.dark" class="filament-icon-button-icon w-4 h-4"/>
+                        <x-heroicon-o-moon v-else class="filament-icon-button-icon w-4 h-4"/>
                     </button>
                 </div>
 
@@ -239,7 +177,7 @@ class="filament-icon-button flex items-center justify-center rounded-full relati
                         <button
                             title="filament::layout.database_notifications"
                             type="button"
-                            class="filament-icon-button flex items-center justify-center rounded-full relative hover:bg-gray-500/5 focus:outline-none text-primary-500 focus:bg-primary-500/10 dark:hover:bg-gray-300/5 w-10 h-10 ml-4 -mr-1">
+                            class="border border-zinc-100 dark:border-zinc-700 filament-icon-button flex items-center justify-center rounded-full relative hover:bg-zinc-500/5 focus:outline-none text-primary-500 focus:bg-primary-500/10 dark:hover:bg-zinc-300/5 w-8 h-8 ml-4 -mr-1">
                             <span class="sr-only">
 
                             </span>
diff --git a/resources/views/pages/dashboard.blade.php b/resources/views/pages/dashboard.blade.php
index 990d9d6..5a9bec7 100644
--- a/resources/views/pages/dashboard.blade.php
+++ b/resources/views/pages/dashboard.blade.php
@@ -21,12 +21,12 @@
             @else
                 @if(!count(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getDashboardTop()))
                     <div class="col-span-1 filament-widget filament-account-widget">
-                    <div class="p-2 space-y-2 bg-white shadow rounded-xl dark:border-gray-600 dark:bg-gray-800">
+                    <div class="p-2 space-y-2 bg-white shadow rounded-xl dark:border-zinc-600 dark:bg-zinc-800">
                         <div class="space-y-2">
                             <div class="px-4 py-2 space-y-4">
                                 <div class="flex items-center h-12 space-v-4 rtl:space-v-reverse">
-                                    <div class="w-10 h-10 mx-4 bg-gray-200 bg-center bg-cover rounded-full dark:bg-gray-900"
-                                         style="background-image: url('https://avatars.dicebear.com/api/initials/{{auth()->user()->name}}.svg')">
+                                    <div class="w-10 h-10 mx-4 bg-zinc-200 bg-center bg-cover rounded-full dark:bg-zinc-900"
+                                         style="background-image: url('{{auth()->user()->profile_photo_url}}')">
                                     </div>
 
                                     <div>
@@ -35,7 +35,7 @@
                                         </h2>
 
                                         <Link href="{{route('logout')}}" method="POST"
-                                              class="text-gray-600 hover:text-primary-500 focus:outline-none focus:underline dark:text-gray-300 dark:hover:text-primary-500">
+                                              class="text-zinc-600 hover:text-primary-500 focus:outline-none focus:underline dark:text-zinc-300 dark:hover:text-primary-500">
                                             {{trans('tomato-admin::global.logout')}}
                                         </Link>
                                     </div>
diff --git a/resources/views/pages/policy.blade.php b/resources/views/pages/policy.blade.php
index a320ac9..fe4e112 100644
--- a/resources/views/pages/policy.blade.php
+++ b/resources/views/pages/policy.blade.php
@@ -1,7 +1,7 @@
 @seoTitle(__('Privacy Policy'))
 
-<div class="font-sans text-gray-900 antialiased">
-    <div class="pt-4 bg-gray-100">
+<div class="font-sans text-zinc-900 antialiased">
+    <div class="pt-4 bg-zinc-100">
         <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
             <div>
                 <x-tomato-application-logo />
@@ -10,4 +10,4 @@
             <x-splade-content class="w-full sm:max-w-2xl mt-6 p-6 bg-white shadow-md overflow-hidden sm:rounded-lg prose" :html="$policy" />
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/pages/terms.blade.php b/resources/views/pages/terms.blade.php
index 57231b3..a406f06 100644
--- a/resources/views/pages/terms.blade.php
+++ b/resources/views/pages/terms.blade.php
@@ -1,7 +1,7 @@
 @seoTitle(__('Terms of Service'))
 
-<div class="font-sans text-gray-900 antialiased">
-    <div class="pt-4 bg-gray-100">
+<div class="font-sans text-zinc-900 antialiased">
+    <div class="pt-4 bg-zinc-100">
         <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
             <div>
                 <x-tomato-application-logo />
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index 51c1220..cce7aad 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -5,34 +5,34 @@
 
     <div class="pb-12">
         <div class="mx-auto  space-y-6">
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl" dusk="update-profile-information">
                     @include('tomato-admin::profile.partials.update-profile-information-form')
                 </div>
             </div>
 
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl" dusk="update-password">
                     @include('tomato-admin::profile.partials.update-password-form')
                 </div>
             </div>
 
             @if(Laravel\Fortify\Features::canManageTwoFactorAuthentication())
-                <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+                <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                     <div class="max-w-xl" dusk="logout-other-browser-sessions-form">
                         @include('tomato-admin::profile.partials.two-factor-authentication-form')
                     </div>
                 </div>
             @endif
 
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl" dusk="logout-other-browser-sessions-form">
                     @include('tomato-admin::profile.partials.logout-other-browser-sessions-form')
                 </div>
             </div>
 
             @if(Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
-                <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+                <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                     <div class="max-w-xl" dusk="delete-user">
                         @include('tomato-admin::profile.partials.delete-user-form')
                     </div>
diff --git a/resources/views/profile/partials/delete-user-form.blade.php b/resources/views/profile/partials/delete-user-form.blade.php
index e7dd912..5d78ee7 100644
--- a/resources/views/profile/partials/delete-user-form.blade.php
+++ b/resources/views/profile/partials/delete-user-form.blade.php
@@ -1,25 +1,25 @@
 <section class="space-y-6">
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ trans('tomato-admin::global.profile.delete-title') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ trans('tomato-admin::global.profile.delete-description') }}
         </p>
     </header>
 
-    <Link href="#confirm-user-deletion" dusk="open-delete-modal" class="inline-flex rounded-md shadow-sm bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 focus:outline-none focus:shadow-outline">
+    <x-tomato-admin-button type="link" href="#confirm-user-deletion" dusk="open-delete-modal" class="inline-flex rounded-md shadow-sm bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 focus:outline-none focus:shadow-outline">
         {{  trans('tomato-admin::global.profile.delete-button') }}
-    </Link>
+    </x-tomato-admin-button>
 
     <x-splade-modal name="confirm-user-deletion">
         <x-splade-form dusk="confirm-user-deletion" method="delete" :action="route('admin.profile.destroy')">
-            <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+            <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
                 {{ trans('tomato-admin::global.profile.delete-model-title') }}
             </h2>
 
-            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
                 {{ trans('tomato-admin::global.profile.delete-model-description') }}
             </p>
 
@@ -27,15 +27,15 @@
                 <x-splade-input id="password" name="password" type="password"  :placeholder="trans('tomato-admin::global.profile.delete-model-password')" />
             </div>
 
-            <div class="mt-6 flex justify-end">
-                <button type="button" @click.prevent="modal.close" class="inline-flex rounded-md shadow-sm border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 font-bold py-2 px-4 focus:outline-none focus:shadow-outline">
+            <div class="mt-6 flex gap-4 justify-end">
+                <x-tomato-admin-button secondary type="button" @click.prevent="modal.close">
                     {{ trans('tomato-admin::global.cancel') }}
-                </button>
+                </x-tomato-admin-button>
 
-                <button dusk="confirm-delete-account" type="submit" class="ml-3 inline-flex rounded-md shadow-sm bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 focus:outline-none focus:shadow-outline">
+                <x-tomato-admin-submit danger spinner dusk="confirm-delete-account">
                     {{ trans('tomato-admin::global.profile.delete-model-button') }}
-                </button>
+                </x-tomato-admin-submit>
             </div>
         </x-splade-form>
-        </x-modal>
+    </x-splade-modal>
 </section>
diff --git a/resources/views/profile/partials/logout-other-browser-sessions-form.blade.php b/resources/views/profile/partials/logout-other-browser-sessions-form.blade.php
index fa34159..a574ef2 100644
--- a/resources/views/profile/partials/logout-other-browser-sessions-form.blade.php
+++ b/resources/views/profile/partials/logout-other-browser-sessions-form.blade.php
@@ -1,10 +1,10 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ __('Browser Sessions') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ __('Manage and log out your active sessions on other browsers and devices.') }}
         </p>
     </header>
@@ -18,7 +18,7 @@
         require-password
         stay
     >
-        <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
+        <div class="max-w-xl text-sm text-zinc-600 dark:text-zinc-400">
             {{ __('If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.') }}
         </div>
 
@@ -29,23 +29,23 @@
                     <div class="flex items-center">
                         <div>
                             @if($session->agent['is_desktop'])
-                                <svg class="w-8 h-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                <svg class="w-8 h-8 text-zinc-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                                 </svg>
                             @else
-                                <svg class="w-8 h-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                <svg class="w-8 h-8 text-zinc-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                                 </svg>
                             @endif
                         </div>
 
                         <div class="ml-3">
-                            <div class="text-sm text-gray-600 dark:text-gray-400">
+                            <div class="text-sm text-zinc-600 dark:text-zinc-400">
                                 {{ $session->agent['platform'] ?: 'Unknown' }} - {{ $session->agent['browser'] ?: 'Unknown' }}
                             </div>
 
                             <div>
-                                <div class="text-xs text-gray-500">
+                                <div class="text-xs text-zinc-500">
                                     {{ $session->ip_address }},
 
                                     @if($session->is_current_device)
@@ -62,9 +62,9 @@
         @endif
 
         <div class="flex items-center mt-5">
-            <x-splade-submit :label="__('Log Out Other Browser Sessions')" />
+            <x-tomato-admin-submit spinner :label="__('Log Out Other Browser Sessions')" />
 
-            <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-300">{{ __('Done.') }}</p>
+            <p v-if="form.recentlySuccessful" class="text-sm text-zinc-600 dark:text-zinc-300">{{ __('Done.') }}</p>
         </div>
     </x-splade-form>
 </section>
diff --git a/resources/views/profile/partials/two-factor-authentication-form.blade.php b/resources/views/profile/partials/two-factor-authentication-form.blade.php
index 9cfdd47..4ded7c9 100644
--- a/resources/views/profile/partials/two-factor-authentication-form.blade.php
+++ b/resources/views/profile/partials/two-factor-authentication-form.blade.php
@@ -1,10 +1,10 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ __('Two Factor Authentication') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ __('Add additional security to your account using two factor authentication.') }}
         </p>
     </header>
@@ -16,7 +16,7 @@
     @endphp
 
 
-    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+    <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">
         @if ($enabled)
             @if ($showingConfirmation)
                 {{ __('Finish enabling two factor authentication.') }}
@@ -28,7 +28,7 @@
         @endif
     </h3>
 
-    <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-400">
+    <div class="mt-3 max-w-xl text-sm text-zinc-600 dark:text-zinc-400">
         <p>
             {{ __('When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone\'s Google Authenticator application.') }}
         </p>
@@ -37,7 +37,7 @@
     <x-splade-data :default="['showingRecoveryCodes' => session('status') === 'recovery-codes-generated']">
         @if ($enabled)
             @if ($showingQrCode)
-                <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
+                <div class="mt-4 max-w-xl text-sm text-zinc-600 dark:text-zinc-400">
                     <p class="font-semibold">
                         @if ($showingConfirmation)
                             {{ __('To finish enabling two factor authentication, scan the following QR code using your phone\'s authenticator application or enter the setup key and provide the generated OTP code.') }}
@@ -51,7 +51,7 @@
                     {!! auth()->user()->twoFactorQrCodeSvg() !!}
                 </div>
 
-                <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
+                <div class="mt-4 max-w-xl text-sm text-zinc-600 dark:text-zinc-400">
                     <p class="font-semibold">
                         {{ __('Setup Key') }}: {{ decrypt(auth()->user()->two_factor_secret) }}
                     </p>
@@ -63,20 +63,20 @@
 
                         <x-splade-teleport to="#confirm-two-factor-authentication">
                             {{-- This submit button requires a click handler because of the teleport. --}}
-                            <x-splade-submit @click="form.submit" :label="__('Confirm')" />
+                            <x-tomato-admin-submit spinner @click="form.submit" :label="__('Confirm')" />
                         </x-splade-teleport>
                     </x-splade-form>
                 @endif
             @endif
 
             <div v-show="data.showingRecoveryCodes">
-                <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
+                <div class="mt-4 max-w-xl text-sm text-zinc-600 dark:text-zinc-400">
                     <p class="font-semibold">
                         {{ __('Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.') }}
                     </p>
                 </div>
 
-                <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 rounded-lg">
+                <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-zinc-100 rounded-lg">
                     @foreach (auth()->user()->recoveryCodes() as $code)
                         <div>{{ $code }}</div>
                     @endforeach
@@ -87,7 +87,7 @@
         <div class="mt-5">
             @if (!$enabled)
                 <x-splade-form action="/admin/user/two-factor-authentication" confirm require-password preserve-scroll>
-                    <x-splade-submit :label="__('Enable')" />
+                    <x-tomato-admin-submit spinner :label="__('Enable')" />
                 </x-splade-form>
             @else
                 <div class="flex gap-4">
@@ -95,21 +95,21 @@
                         <div id="confirm-two-factor-authentication" />
                     @else
                         <x-splade-form v-if="!data.showingRecoveryCodes" action="#" confirm require-password @success="() => data.showingRecoveryCodes = true">
-                            <x-splade-submit secondary :label="__('Show Recovery Codes')" />
+                            <x-tomato-admin-submit spinner secondary :label="__('Show Recovery Codes')" />
                         </x-splade-form>
 
                         <x-splade-form v-if="data.showingRecoveryCodes" action="/admin/user/two-factor-recovery-codes" confirm require-password preserve-scroll>
-                            <x-splade-submit secondary :label="__('Regenerate Recovery Codes')" />
+                            <x-tomato-admin-submit spinner secondary :label="__('Regenerate Recovery Codes')" />
                         </x-splade-form>
                     @endif
 
                     @if ($showingConfirmation)
                         <x-splade-form method="delete" action="/admin/user/two-factor-authentication" confirm require-password-once preserve-scroll>
-                            <x-splade-submit secondary :label="__('Cancel')" />
+                            <x-tomato-admin-submit spinner secondary :label="__('Cancel')" />
                         </x-splade-form>
                     @else
                         <x-splade-form method="delete" action="/admin/user/two-factor-authentication" confirm-danger require-password preserve-scroll>
-                            <x-splade-submit danger :label="__('Disable')" />
+                            <x-tomato-admin-submit spinner danger :label="__('Disable')" />
                         </x-splade-form>
                     @endif
                 </div>
diff --git a/resources/views/profile/partials/update-password-form.blade.php b/resources/views/profile/partials/update-password-form.blade.php
index 40f994d..b30e267 100644
--- a/resources/views/profile/partials/update-password-form.blade.php
+++ b/resources/views/profile/partials/update-password-form.blade.php
@@ -1,10 +1,10 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ trans('tomato-admin::global.profile.password-title') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ trans('tomato-admin::global.profile.password-description') }}
         </p>
     </header>
@@ -15,9 +15,9 @@
         <x-splade-input id="password_confirmation" name="password_confirmation" type="password" :label="trans('tomato-admin::global.profile.password-confirmation')" autocomplete="new-password" />
 
         <div class="flex items-center gap-4">
-            <x-splade-submit :label="trans('tomato-admin::global.save')" />
+            <x-tomato-admin-submit spinner :label="trans('tomato-admin::global.save')" />
 
-            <p class="text-sm text-gray-600 dark:text-gray-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
+            <p class="text-sm text-zinc-600 dark:text-zinc-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
 
         </div>
     </x-splade-form>
diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
index 6efbc96..bcdacc1 100644
--- a/resources/views/profile/partials/update-profile-information-form.blade.php
+++ b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -1,10 +1,10 @@
 <section>
-    <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+    <header class="pb-4">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ __('Profile Information') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{  __('Update your account\'s profile information and email address.') }}
         </p>
     </header>
@@ -20,7 +20,7 @@
             <!-- Profile Photo -->
             @if(Laravel\Jetstream\Jetstream::managesProfilePhotos())
                 <div class="col-span-6 sm:col-span-4">
-                    <span class="block mb-1 text-gray-700 font-sans">{{ __('Photo') }}</span>
+                    <span class="block mb-1 text-zinc-700 font-sans">{{ __('Photo') }}</span>
 
                     <!-- Current Profile Photo -->
                     <div v-show="!form.photo" class="mt-2">
@@ -36,14 +36,14 @@ class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
                     </div>
 
                     <!-- Profile Photo File Input -->
-                    <div class="flex mt-2 space-x-2">
+                    <div class="flex mt-2 gap-2">
                         <x-splade-file name="photo" :show-filename="false">
                             {{ __('Select A New Photo') }}
                         </x-splade-file>
 
                         <x-splade-rehydrate on="profile-information-updated">
                             @if(auth()->user()->profile_photo_path)
-                                <x-splade-link method="delete" :href="route('current-user-photo.destroy')" class="inline-block py-2 px-3 rounded-md border border-gray-300 shadow-sm bg-white hover:bg-gray-100 relative cursor-pointer font-medium text-gray-700 text-sm focus:outline-none focus:ring focus:ring-opacity-50 focus:border-indigo-300 focus:ring-indigo-200">
+                                <x-splade-link method="delete" :href="route('current-user-photo.destroy')" class="inline-block py-2 px-3 rounded-md border border-zinc-300 shadow-sm bg-white hover:bg-zinc-100 relative cursor-pointer font-medium text-zinc-700 text-sm focus:outline-none focus:ring focus:ring-opacity-50 focus:border-indigo-300 focus:ring-indigo-200">
                                     {{ __('Remove Photo') }}
                                 </x-splade-link>
                             @endif
@@ -64,11 +64,11 @@ class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
             </div>
         </div>
         <div class="mt-4">
-            <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-300">
+            <p v-if="form.recentlySuccessful" class="text-sm text-zinc-600 dark:text-zinc-300">
                 {{ trans('tomato-admin::global.saved') }}
             </p>
 
-            <x-splade-submit :label="__('Save')" />
+            <x-tomato-admin-submit spinner :label="__('Save')" />
         </div>
     </x-splade-form>
 
@@ -79,7 +79,7 @@ class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
                 <p v-if="!form.wasSuccessful" class="text-sm mt-2 dark:text-white">
                     {{ __('Your email address is unverified.') }}
 
-                    <button type="submit" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 inline">
+                    <button type="submit" class="underline text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-zinc-800 inline">
                         {{ __('Click here to re-send the verification email.') }}
                     </button>
                 </p>
diff --git a/resources/views/teams/add-team-member.blade.php b/resources/views/teams/add-team-member.blade.php
index d51dcc7..0c93260 100644
--- a/resources/views/teams/add-team-member.blade.php
+++ b/resources/views/teams/add-team-member.blade.php
@@ -1,23 +1,18 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
-            {{ __('Team Name') }}
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
+            {{ __('Add Team Member') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
-            {{ __('The team\'s name and owner information.') }}
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
+            {{ __('Please provide the email address of the person you would like to add to this team.') }}
         </p>
     </header>
 
     <x-splade-form class="grid grid-cols-6 gap-6" :action="route('team-members.store', $team)">
-        <div class="col-span-6">
-            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
-                {{ __('Please provide the email address of the person you would like to add to this team.') }}
-            </div>
-        </div>
 
         <!-- Member Email -->
-        <div class="col-span-6 sm:col-span-4">
+        <div class="col-span-6 sm:col-span-4 mt-4">
             <x-splade-input id="email" name="email" type="email" :label="__('Email')" />
         </div>
 
@@ -25,18 +20,18 @@
         @if(count($availableRoles) > 0)
             <div class="col-span-6 lg:col-span-4">
                 <x-splade-group name="role" :label="__('Role')">
-                    <div class="relative z-0 mt-1 border border-gray-200 rounded-lg cursor-pointer">
+                    <div class="relative z-0 mt-1 border border-zinc-200 dark:border-zinc-700 rounded-lg cursor-pointer">
                         @foreach($availableRoles as $role)
                             <button
                                 type="button"
-                                class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200"
-                                :class="{'border-t border-gray-200 rounded-t-none': @json(!$loop->first), 'rounded-b-none': @json(!$loop->last)}"
+                                class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-1 focus:ring-primary-500"
+                                :class="{'border-t border-zinc-200 dark:border-zinc-700 rounded-t-none': @json(!$loop->first), 'rounded-b-none': @json(!$loop->last)}"
                                 @click='form.role = @json($role->key)'
                             >
                                 <div :class='{"opacity-50": form.role && form.role != @json($role->key)}'>
                                     <!-- Role Name -->
                                     <div class="flex items-center">
-                                        <div class="text-sm text-gray-600" :class='{"font-semibold": form.role == @json($role->key)}'>
+                                        <div class="text-sm dark:text-zinc-100 text-zinc-600" :class='{"font-semibold": form.role == @json($role->key)}'>
                                             {{ $role->name }}
                                         </div>
 
@@ -46,7 +41,7 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
                                     </div>
 
                                     <!-- Role Description -->
-                                    <div class="mt-2 text-xs text-gray-600 text-left">
+                                    <div class="mt-2 text-xs text-zinc-600 dark:text-zinc-200 text-left">
                                         {{ $role->description }}
                                     </div>
                                 </div>
@@ -59,9 +54,9 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
 
 
        <div class="col-span-6">
-           <x-splade-submit :label="__('Save')" />
+           <x-tomato-admin-submit spinner :label="__('Save')" />
 
-           <p class="text-sm text-gray-600 dark:text-gray-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
+           <p class="text-sm text-zinc-600 dark:text-zinc-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
        </div>
     </x-splade-form>
 </section>
diff --git a/resources/views/teams/create.blade.php b/resources/views/teams/create.blade.php
index 088dbe7..7f7bf6a 100644
--- a/resources/views/teams/create.blade.php
+++ b/resources/views/teams/create.blade.php
@@ -5,14 +5,14 @@
 
     <div class="pb-12">
         <div class="mx-auto  space-y-6">
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <section>
                     <header>
-                        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+                        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
                             {{ __('Team Details') }}
                         </h2>
 
-                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
                             {{ __('Create a new team to collaborate with others on projects.') }}
                         </p>
                     </header>
@@ -25,9 +25,9 @@
                                             <div class="flex items-center mt-2">
                                                 <img class="object-cover w-12 h-12 rounded-full" src="{{ auth()->user()->profile_photo_url }}" alt="{{ auth()->user()->name }}">
 
-                                                <div class="ml-4 leading-tight">
-                                                    <div class="text-gray-900 dark:text-white">{{ auth()->user()->name }}</div>
-                                                    <div class="text-gray-700 dark:text-gray-300 text-sm">
+                                                <div class="ltr:ml-4 rtl:mr-4 leading-tight">
+                                                    <div class="text-zinc-900 dark:text-white">{{ auth()->user()->name }}</div>
+                                                    <div class="text-zinc-700 dark:text-zinc-300 text-sm">
                                                         {{ auth()->user()->email }}
                                                     </div>
                                                 </div>
@@ -39,7 +39,7 @@
                                         <x-splade-input id="name" name="name" :label="__('Team Name')" autofocus />
                                     </div>
                                 </div>
-                                <x-splade-submit :label="__('Create')" />
+                                <x-tomato-admin-submit spinner :label="__('Create')" />
                             </x-splade-form>
                         </div>
                     </div>
diff --git a/resources/views/teams/delete-team-form.blade.php b/resources/views/teams/delete-team-form.blade.php
index 4b1b035..f331b0c 100644
--- a/resources/views/teams/delete-team-form.blade.php
+++ b/resources/views/teams/delete-team-form.blade.php
@@ -1,14 +1,14 @@
 <section>
-    <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+    <header class="pb-4">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ __('Delete Team') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ __('Permanently delete this team.') }}
         </p>
     </header>
-    <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
+    <div class="max-w-xl text-sm text-zinc-600 dark:text-zinc-400">
         {{ __('Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.') }}
     </div>
 
@@ -20,7 +20,7 @@
             :confirm-text="__('Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.')"
             :confirm-button="__('Delete Team')"
         >
-            <x-splade-submit :label="__('Delete Team')" />
+            <x-tomato-admin-submit danger spinner :label="__('Delete Team')" />
         </x-splade-form>
     </div>
 
diff --git a/resources/views/teams/manage-team-members.blade.php b/resources/views/teams/manage-team-members.blade.php
index 0f8008d..c0f76ec 100644
--- a/resources/views/teams/manage-team-members.blade.php
+++ b/resources/views/teams/manage-team-members.blade.php
@@ -1,10 +1,10 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{  __('Team Members') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ __('All of the people that are part of this team.') }}
         </p>
     </header>
@@ -20,11 +20,11 @@
                 <div class="flex items-center gap-4">
                     <!-- Manage Team Member Role -->
                     @if($permissions['canAddTeamMembers'] && !empty($availablePermissions))
-                        <Link modal href="{{ route('admin.team-members.edit', [$team, $user]) }}" class="ml-2 text-sm text-gray-400 underline">
+                        <Link modal href="{{ route('admin.team-members.edit', [$team, $user]) }}" class="ml-2 text-sm text-zinc-400 underline">
                             {{ collect($availableRoles)->firstWhere('key', $user->membership->role)?->name }}
                         </Link>
                     @elseif(!empty($availablePermissions))
-                        <div class="ml-2 text-sm text-gray-400">
+                        <div class="ml-2 text-sm text-zinc-400">
                             {{ collect($availableRoles)->firstWhere('key', $user->membership->role)?->name }}
                         </div>
                     @endif
diff --git a/resources/views/teams/member-role-form.blade.php b/resources/views/teams/member-role-form.blade.php
index a450874..e0016ab 100644
--- a/resources/views/teams/member-role-form.blade.php
+++ b/resources/views/teams/member-role-form.blade.php
@@ -10,18 +10,18 @@
             </x-slot>
 
             <x-slot:content>
-                <div class="relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer">
+                <div class="relative z-0 mt-1 border border-zinc-200 dark:border-zinc-700 rounded-lg cursor-pointer">
                     @foreach($availableRoles as $role)
                         <button
                             type="button"
                             class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600"
-                            :class="{'border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none': @json(!$loop->first), 'rounded-b-none': @json(!$loop->last)}"
+                            :class="{'border-t border-zinc-200 dark:border-zinc-700 focus:border-none rounded-t-none': @json(!$loop->first), 'rounded-b-none': @json(!$loop->last)}"
                             @click='form.role = @json($role->key)'
                         >
                             <div :class='{"opacity-50": form.role && form.role != @json($role->key)}'>
                                 <!-- Role Name -->
                                 <div class="flex items-center">
-                                    <div class="text-sm text-gray-600 dark:text-gray-400" :class='{"font-semibold": form.role == @json($role->key)}'>
+                                    <div class="text-sm text-zinc-600 dark:text-zinc-400" :class='{"font-semibold": form.role == @json($role->key)}'>
                                         {{ $role->name }}
                                     </div>
 
@@ -31,7 +31,7 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
                                 </div>
 
                                 <!-- Role Description -->
-                                <div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
+                                <div class="mt-2 text-xs text-zinc-600 dark:text-zinc-400">
                                     {{ $role->description }}
                                 </div>
                             </div>
@@ -41,7 +41,7 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
             </x-slot>
 
             <x-slot:footer>
-                <button type="button" class="text-sm text-gray-700" @click="modal.close">
+                <button type="button" class="text-sm text-zinc-700" @click="modal.close">
                     Cancel
                 </button>
 
@@ -49,4 +49,4 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
             </x-slot>
         </x-dialog-modal>
     </x-splade-form>
-</x-splade-modal>
\ No newline at end of file
+</x-splade-modal>
diff --git a/resources/views/teams/show.blade.php b/resources/views/teams/show.blade.php
index 052b6c8..a7ed436 100644
--- a/resources/views/teams/show.blade.php
+++ b/resources/views/teams/show.blade.php
@@ -4,8 +4,8 @@
     </x-slot:header>
 
     <div class="pb-12">
-        <div class="mx-auto  space-y-6">
-            <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+        <div class="mx-auto flex flex-col gap-6">
+            <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl" dusk="update-profile-information">
                     @include('tomato-admin::teams.update-team-name-form')
                 </div>
@@ -13,7 +13,7 @@
 
 
             @if($permissions['canAddTeamMembers'])
-                <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+                <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                     <div class="max-w-xl" dusk="add-team-member">
                         @include('tomato-admin::teams.add-team-member')
                     </div>
@@ -21,7 +21,7 @@
             @endif
 
             @if($permissions['canAddTeamMembers'] && $team->teamInvitations->isNotEmpty())
-                <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+                <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                     <div class="max-w-xl" dusk="team-member-invitations">
                         @include('tomato-admin::teams.team-member-invitations')
                     </div>
@@ -29,7 +29,7 @@
             @endif
 
             @if($team->users->isNotEmpty())
-                <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+                <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                     <div class="max-w-xl" dusk="manage-team-members">
                         @include('tomato-admin::teams.manage-team-members')
                     </div>
@@ -37,7 +37,7 @@
             @endif
 
             @if($permissions['canDeleteTeam'] && !$team->personal_team)
-                <div class="dark:bg-gray-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+                <div class="dark:bg-zinc-800 dark:text-white p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                     <div class="max-w-xl" dusk="delete-team-form">
                         @include('tomato-admin::teams.delete-team-form')
                     </div>
diff --git a/resources/views/teams/team-member-invitations.blade.php b/resources/views/teams/team-member-invitations.blade.php
index d7b5782..7b391f1 100644
--- a/resources/views/teams/team-member-invitations.blade.php
+++ b/resources/views/teams/team-member-invitations.blade.php
@@ -1,10 +1,10 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ __('Pending Team Invitations') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ __('These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.') }}
         </p>
     </header>
@@ -13,7 +13,7 @@
         <div class="my-4">
             @foreach($team->teamInvitations as $invitation)
                 <div class="flex items-center justify-between">
-                    <div class="text-gray-600 dark:text-gray-400">
+                    <div class="text-zinc-600 dark:text-zinc-400">
                         {{ $invitation->email }}
                     </div>
 
@@ -24,7 +24,7 @@
                                 method="delete"
                                 :action="route('team-invitations.destroy', $invitation)"
                             >
-                                <button type="submit" class="cursor-pointer ml-6 text-sm text-red-500 focus:outline-none">
+                                <button type="submit" class="cursor-pointer ltr:ml-6 rtl:mr-6 text-sm text-red-500 focus:outline-none">
                                     {{ __('Cancel') }}
                                 </button>
                             </x-splade-form>
diff --git a/resources/views/teams/team-member-role-form.blade.php b/resources/views/teams/team-member-role-form.blade.php
index 62e044a..5a3a2ce 100644
--- a/resources/views/teams/team-member-role-form.blade.php
+++ b/resources/views/teams/team-member-role-form.blade.php
@@ -5,18 +5,18 @@
     <x-splade-form class="flex flex-col gap-4" method="put" :action="route('admin.team-members.update', [$team, $user])" :default="['role' => $user->membership->role]">
 
         <x-splade-group name="role">
-            <div class="relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer">
+            <div class="relative z-0 mt-1 border border-zinc-200 dark:border-zinc-700 rounded-lg cursor-pointer">
                 @foreach($availableRoles as $role)
                     <button
                         type="button"
                         class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600"
-                        :class="{'border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none': @json(!$loop->first), 'rounded-b-none': @json(!$loop->last)}"
+                        :class="{'border-t border-zinc-200 dark:border-zinc-700 focus:border-none rounded-t-none': @json(!$loop->first), 'rounded-b-none': @json(!$loop->last)}"
                         @click='form.role = @json($role->key)'
                     >
                         <div :class='{"opacity-50": form.role && form.role != @json($role->key)}'>
                             <!-- Role Name -->
                             <div class="flex items-center">
-                                <div class="text-sm text-gray-600 dark:text-gray-400" :class='{"font-semibold": form.role == @json($role->key)}'>
+                                <div class="text-sm text-zinc-600 dark:text-zinc-400" :class='{"font-semibold": form.role == @json($role->key)}'>
                                     {{ $role->name }}
                                 </div>
 
@@ -26,7 +26,7 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
                             </div>
 
                             <!-- Role Description -->
-                            <div class="mt-2 text-xs text-gray-600 dark:text-gray-400 text-left">
+                            <div class="mt-2 text-xs text-zinc-600 dark:text-zinc-400 text-left">
                                 {{ $role->description }}
                             </div>
                         </div>
@@ -36,6 +36,6 @@ class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline
         </x-splade-group>
 
         <x-splade-button type="button" secondary :label="__('Cancel')" @click="modal.close" />
-        <x-splade-submit :label="__('Save')" />
+        <x-tomato-admin-submit spinner :label="__('Save')" />
     </x-splade-form>
 </x-splade-modal>
diff --git a/resources/views/teams/update-team-name-form.blade.php b/resources/views/teams/update-team-name-form.blade.php
index a0b3e32..8759e80 100644
--- a/resources/views/teams/update-team-name-form.blade.php
+++ b/resources/views/teams/update-team-name-form.blade.php
@@ -1,10 +1,10 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        <h2 class="text-lg font-medium text-zinc-900 dark:text-white">
             {{ __('Team Name') }}
         </h2>
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
             {{ __('The team\'s name and owner information.') }}
         </p>
     </header>
@@ -12,14 +12,14 @@
     <x-splade-form class="grid grid-cols-6 gap-6" method="put" :action="route('teams.update', $team)" :default="$team" stay @success="$splade.emit('refresh-navigation-menu')">
 
         <!-- Team Owner Information -->
-        <div class="col-span-6">
+        <div class="col-span-6 mt-4">
             <x-splade-group :label="__('Team Owner')">
                 <div class="flex items-center mt-2">
                     <img class="w-12 h-12 rounded-full object-cover" src="{{ $team->owner?->profile_photo_url }}" :alt="@js($team->owner?->name)">
 
-                    <div class="ml-4 leading-tight">
-                        <div class="text-gray-900 dark:text-white" v-text="@js($team->owner?->name)" />
-                        <div class="text-gray-700 dark:text-gray-300 text-sm">
+                    <div class="ltr:ml-4 rtl:mr-4 leading-tight">
+                        <div class="text-zinc-900 dark:text-white" v-text="@js($team->owner?->name)" />
+                        <div class="text-zinc-700 dark:text-zinc-300 text-sm">
                             {{ $team->owner?->email }}
                         </div>
                     </div>
@@ -35,9 +35,9 @@
 
         <div class="col-span-6">
             @if($permissions['canUpdateTeam'])
-                <x-splade-submit :label="__('Save')" />
+                <x-tomato-admin-submit spinner :label="__('Save')" />
 
-                <p class="text-sm text-gray-600 dark:text-gray-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
+                <p class="text-sm text-zinc-600 dark:text-zinc-300" v-if="form.recentlySuccessful">{{ trans('tomato-admin::global.saved') }}</p>
             @endif
         </div>
     </x-splade-form>
diff --git a/src/Http/Controllers/TeamController.php b/src/Http/Controllers/TeamController.php
index d8ab6e2..e0362cf 100644
--- a/src/Http/Controllers/TeamController.php
+++ b/src/Http/Controllers/TeamController.php
@@ -104,6 +104,11 @@ public function destroy(Request $request, $teamId)
 
         $deleter->delete($team);
 
+        if($request->user()->ownedTeams()->count() > 0) {
+            $team = $request->user()->ownedTeams()->first();
+            $request->user()->switchTeam($team);
+        }
+
         return $this->redirectPath($deleter);
     }
 }