diff --git a/frontend/components/global/product/Accordion.vue b/frontend/components/global/product/Accordion.vue
index 3736ce4..795d8f1 100644
--- a/frontend/components/global/product/Accordion.vue
+++ b/frontend/components/global/product/Accordion.vue
@@ -1,16 +1,30 @@
+<script lang="ts" setup>
+
+// provide / inject
+
+import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
+
+const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
+
+</script>
+
 <template>
     <div class="w-full flex flex-col">
         <AccordionRoot
             class="w-full last:border-b last:border-slate-200"
-            default-value="item-1"
+            :default-value="'item' + selectedVariant.details[0].detail_category"
             type="single"
             :collapsible="true"
         >
-            <AccordionItem value="item-1" class="overflow-hidden">
+            <AccordionItem
+                v-for="detailItem in selectedVariant.details"
+                :value="'item' + detailItem.detail_category"
+                class="overflow-hidden"
+            >
                 <AccordionHeader
                     class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
                 >
-                    <span class="typo-sub-h-md text-black">مشخصات</span>
+                    <span class="typo-sub-h-md text-black">{{ detailItem.detail_category }}</span>
                     <AccordionTrigger class="group">
                         <Icon
                             name="ci:plus"
@@ -26,97 +40,20 @@
                         class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
                     >
                         <div
-                            v-for="i in 4"
+                            v-for="item in detailItem.detail"
                             class="flex flex-col gap-y-[1.5rem]"
                         >
                             <span
                                 class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
-                                >صفحه نمایش</span
                             >
+                                {{ item.title }}
+                            </span>
                             <ul class="list-disc w-full ps-5">
-                                <li class="text-slate-500 typo-p-md">
-                                    روشنایی :‌3000mn
-                                </li>
-                                <li class="text-slate-500 typo-p-md">
-                                    روشنایی :‌3000mn
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-2" class="overflow-hidden">
-                <AccordionHeader
-                    class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
-                >
-                    <span class="typo-sub-h-md text-black">مشخصات</span>
-                    <AccordionTrigger class="group">
-                        <Icon
-                            name="ci:plus"
-                            size="24"
-                            class="group-data-[state=open]:rotate-45 transition-transform"
-                        />
-                    </AccordionTrigger>
-                </AccordionHeader>
-                <AccordionContent
-                    class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
-                >
-                    <div
-                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
-                    >
-                        <div
-                            v-for="i in 4"
-                            class="flex flex-col gap-y-[1.5rem]"
-                        >
-                            <span
-                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
-                                >صفحه نمایش</span
-                            >
-                            <ul class="list-disc w-full ps-5">
-                                <li class="text-slate-500 typo-p-md">
-                                    روشنایی :‌3000mn
-                                </li>
-                                <li class="text-slate-500 typo-p-md">
-                                    روشنایی :‌3000mn
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-3" class="overflow-hidden">
-                <AccordionHeader
-                    class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
-                >
-                    <span class="typo-sub-h-md text-black">مشخصات</span>
-                    <AccordionTrigger class="group">
-                        <Icon
-                            name="ci:plus"
-                            size="24"
-                            class="group-data-[state=open]:rotate-45 transition-transform"
-                        />
-                    </AccordionTrigger>
-                </AccordionHeader>
-                <AccordionContent
-                    class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
-                >
-                    <div
-                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
-                    >
-                        <div
-                            v-for="i in 4"
-                            class="flex flex-col gap-y-[1.5rem]"
-                        >
-                            <span
-                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
-                                >صفحه نمایش</span
-                            >
-                            <ul class="list-disc w-full ps-5">
-                                <li class="text-slate-500 typo-p-md">
-                                    روشنایی :‌3000mn
-                                </li>
-                                <li class="text-slate-500 typo-p-md">
-                                    روشنایی :‌3000mn
+                                <li
+                                    v-for="detail in [ item.detail_text1, item.detail_text2, item.detail_text3, item.detail_text4 ]"
+                                    class="text-slate-500 typo-p-md"
+                                >
+                                    {{ detail }}
                                 </li>
                             </ul>
                         </div>
@@ -125,8 +62,4 @@
             </AccordionItem>
         </AccordionRoot>
     </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
+</template>
\ No newline at end of file