diff --git a/resources/views/contact/index.blade.php b/resources/views/contact/index.blade.php
index dd7d68c03..049880a52 100644
--- a/resources/views/contact/index.blade.php
+++ b/resources/views/contact/index.blade.php
@@ -8,28 +8,28 @@
             <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-0">Contact Us</h4>
             <nav class="mt-2" aria-label="breadcrumb">
                 <ol class="flex space-x-2 text-sm">
-                    <li><a href="{{ url($site['home_link'] ?? '/') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800">Home</a></li>
-                    <li class="text-gray-500">/</li>
-                    <li class="text-gray-600">Contact</li>
+                    <li><a href="{{ url($site['home_link'] ?? '/') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">Home</a></li>
+                    <li class="text-gray-500 dark:text-gray-400">/</li>
+                    <li class="text-gray-600 dark:text-gray-300">Contact</li>
                 </ol>
             </nav>
         </div>
 
         <div class="px-6 py-8 lg:px-12 lg:py-10">
             @if(isset($msg) && $msg != '')
-                <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
+                <div class="mb-6 p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-lg">
                     <i class="fa fa-check-circle mr-2"></i>{!! $msg !!}
                 </div>
             @endif
 
             @if(session('success'))
-                <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
+                <div class="mb-6 p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-lg">
                     <i class="fa fa-check-circle mr-2"></i>{{ session('success') }}
                 </div>
             @endif
 
             @if($errors->any())
-                <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg">
+                <div class="mb-6 p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded-lg">
                     <i class="fa fa-exclamation-circle mr-2"></i>
                     <ul class="mb-0 list-disc list-inside">
                         @foreach($errors->all() as $error)
@@ -41,7 +41,7 @@
 
             <div class="mb-6">
                 <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Have a question?</h3>
-                <p class="text-gray-600">Don't hesitate to send us a message. Our team will be happy to help you.</p>
+                <p class="text-gray-600 dark:text-gray-400">Don't hesitate to send us a message. Our team will be happy to help you.</p>
             </div>
 
             {!! Form::open(['url' => route('contact-us'), 'method' => 'POST']) !!}
@@ -51,15 +51,15 @@
                     </label>
                     <div class="flex">
                         <span class="inline-flex items-center px-3 bg-gray-50 dark:bg-gray-900 border border-r-0 border-gray-300 dark:border-gray-600 rounded-l-md">
-                            <i class="fas fa-user text-gray-500"></i>
+                            <i class="fas fa-user text-gray-500 dark:text-gray-400"></i>
                         </span>
                         <input id="username" type="text" name="username" value="{{ old('username') }}"
                                placeholder="Your name"
-                               class="flex-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-r-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('username') border-red-500 @enderror"
+                               class="flex-1 block w-full px-4 py-3 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-r-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400 dark:placeholder-gray-500 @error('username') border-red-500 @enderror"
                                required>
                     </div>
                     @error('username')
-                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
+                        <div class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
 
@@ -69,15 +69,15 @@
                     </label>
                     <div class="flex">
                         <span class="inline-flex items-center px-3 bg-gray-50 dark:bg-gray-900 border border-r-0 border-gray-300 dark:border-gray-600 rounded-l-md">
-                            <i class="fas fa-envelope text-gray-500"></i>
+                            <i class="fas fa-envelope text-gray-500 dark:text-gray-400"></i>
                         </span>
                         <input type="email" id="useremail" name="useremail" value="{{ old('useremail') }}"
                                placeholder="Your email address"
-                               class="flex-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-r-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('useremail') border-red-500 @enderror"
+                               class="flex-1 block w-full px-4 py-3 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-r-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400 dark:placeholder-gray-500 @error('useremail') border-red-500 @enderror"
                                required>
                     </div>
                     @error('useremail')
-                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
+                        <div class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
 
@@ -87,15 +87,15 @@
                     </label>
                     <div class="flex">
                         <span class="inline-flex items-start px-3 pt-3 bg-gray-50 dark:bg-gray-900 border border-r-0 border-gray-300 dark:border-gray-600 rounded-tl-md rounded-bl-md">
-                            <i class="fas fa-comment text-gray-500"></i>
+                            <i class="fas fa-comment text-gray-500 dark:text-gray-400"></i>
                         </span>
                         <textarea rows="7" name="comment" id="comment"
                                   placeholder="Your message"
-                                  class="flex-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-r-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('comment') border-red-500 @enderror"
+                                  class="flex-1 block w-full px-4 py-3 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-r-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400 dark:placeholder-gray-500 @error('comment') border-red-500 @enderror"
                                   required>{{ old('comment') }}</textarea>
                     </div>
                     @error('comment')
-                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
+                        <div class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
 
@@ -104,7 +104,7 @@
                         {!! \App\Support\CaptchaHelper::display() !!}
                     </div>
                     @error(\App\Support\CaptchaHelper::getResponseFieldName())
-                        <div class="text-red-500 text-center text-sm mb-6">{{ $message }}</div>
+                        <div class="text-red-500 dark:text-red-400 text-center text-sm mb-6">{{ $message }}</div>
                     @enderror
                 @endif
 
@@ -117,7 +117,7 @@
         </div>
 
         <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4 border-t border-gray-200 dark:border-gray-700 rounded-b-lg text-center">
-            <p class="mb-0 text-gray-600">
+            <p class="mb-0 text-gray-600 dark:text-gray-400">
                 <i class="fas fa-info-circle mr-1"></i>
                 We typically respond to messages within 1-2 business days.
             </p>