diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 33c3a7e..ad759bb 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -11,6 +11,14 @@ Install @zeus Accordion by running the following commands in your Laravel projec
 composer require lara-zeus/accordion
 ```
 
+## theme
+
+add this path to your tailwind config file in the `content` array
+
+```js
+'./vendor/lara-zeus/accordion/resources/views/**/*.blade.php',
+```
+
 ## Usage:
 
 ### use it in your form:
diff --git a/resources/views/components/accordion/item.blade.php b/resources/views/components/accordion/item.blade.php
index 1afa591..20c37c7 100644
--- a/resources/views/components/accordion/item.blade.php
+++ b/resources/views/components/accordion/item.blade.php
@@ -17,13 +17,13 @@ class="fi-accordion-item group"
             class="flex items-center justify-between w-full p-4 text-start select-none"
             :class="{
                 'bg-gray-100 dark:bg-gray-800': activeAccordion == id,
-                'bg-white': activeAccordion != id,
+                'bg-white dark:bg-gray-800/50': activeAccordion != id,
              }"
     >
         <span
             :class="{
                 'text-primary-600': activeAccordion == id ,
-                'text-gray-500': activeAccordion != id
+                'text-white/70': activeAccordion != id
             }"
             class="flex gap-2 font-medium items-center justify-center text-gray-500 group-hover:text-primary-600"
         >