diff --git a/resources/views/components/custom/language-selector.blade.php b/resources/views/components/custom/language-selector.blade.php
index 9736765..dca724a 100644
--- a/resources/views/components/custom/language-selector.blade.php
+++ b/resources/views/components/custom/language-selector.blade.php
@@ -4,6 +4,24 @@
     $currentLanguage = $languages->firstWhere('code', $currentLang);
 @endphp
 
+<style>
+  @media (max-width: 991.98px) {
+    .language-select .dropdown-menu {
+      background: #2a303b !important;
+      border: 1px solid rgba(255, 255, 255, 0.1) !important;
+      padding: 10px !important;
+      border-radius: 0.4rem !important;
+      box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2) !important;
+      position: absolute !important;
+      z-index: 1050 !important;
+    }
+    .language-select .dropdown-item {
+      color: #ffffff !important;
+      padding: 0.25rem 0.75rem !important;
+    }
+  }
+</style>
+
 <div class="navbar-other !flex !ml-5">
     <ul class="navbar-nav !flex-row !items-center">
       <li class="nav-item dropdown language-select uppercase group">
@@ -14,10 +32,10 @@
             {{ strtoupper($currentLang) }}
           @endif
         </a>
-        <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+        <ul class="dropdown-menu !bg-[#2a303b] lg:!bg-white group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
           @foreach($languages as $language)
             <li class="nav-item">
-              <a class="dropdown-item hover:!text-[#747ed1] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '' }}" 
+              <a class="dropdown-item !text-white lg:!text-[#343f52] hover:!text-[#747ed1] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24] lg:!text-[#e31e24]' : '' }}" 
                  href="{{ route('language.switch', $language->code) }}">
               {{ strtoupper($language->code) }}
               </a>