diff --git a/resources/views/components/slideover/index.blade.php b/resources/views/components/slideover/index.blade.php
index b1420e07..d86e477d 100644
--- a/resources/views/components/slideover/index.blade.php
+++ b/resources/views/components/slideover/index.blade.php
@@ -30,7 +30,7 @@
         <input @checked($open) id="{{ $id }}" class="peer hidden" v-on:change="toggleScroll($event.target.checked)" type="checkbox">
         <label
             for="{{ $closeId }}"
-            class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
+            class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-overlay opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
         ></label>
     @else
         <input @checked($open) id="{{ $id }}" class="peer hidden" type="checkbox">
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 80942a39..64168380 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -22,7 +22,7 @@ class="relative w-full"
 >
     <x-rapidez::reactive-base slot-scope="autocompleteScope">
         <div
-            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
+            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-overlay opacity-0 transition duration-500"
             :class="autocompleteScope.overlay ? 'pointer-events-auto opacity-100 prevent-scroll' : 'opacity-0 pointer-events-none '"
         ></div>
         <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': autocompleteScope.overlay }" />
diff --git a/tailwind.config.js b/tailwind.config.js
index f2fb57c1..e934207d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -58,6 +58,7 @@ export default {
                     DEFAULT: color('--background', colors.slate[100]),
                     muted: color('--background-muted', colors.slate[50]),
                 },
+                overlay: color('--overlay', 'rgba(0, 0, 0, 0.4)'),
             },
             zIndex: {
                 'header': '100',