diff --git a/components/product-page/course-details/Course-information.vue b/components/product-page/course-details/Course-information.vue
index 69f39bd..02221b2 100644
--- a/components/product-page/course-details/Course-information.vue
+++ b/components/product-page/course-details/Course-information.vue
@@ -6,6 +6,7 @@
       class="gap-[2vw] md:gap-[0.5vw] text-[3.59vw] md:text-[1.055vw] font-semibold flex items-center"
     >
       اطلاعات دوره
+   
       <svg
         class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
         viewBox="0 0 24 24"
@@ -73,7 +74,7 @@
           </svg>
           تعداد ویدیو ها
         </p>
-        <p class="text-[#383E43] font-semibold">3</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.countOfVideos}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -113,7 +114,7 @@
 
           حجم فایل ها
         </p>
-        <p class="text-[#383E43] font-semibold">14 گیگابایت</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.totalFileSize}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -149,7 +150,7 @@
           </svg>
           سطح دوره
         </p>
-        <p class="text-[#383E43] font-semibold">متوسط</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.level}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -200,19 +201,19 @@
 
           زبان
         </p>
-        <p class="text-[#383E43] font-semibold">فارسی</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.language}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
       >
         <p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
-        <p class="text-[#383E43] font-semibold">5.0</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.satisfactionLevel}}</p>
       </div>
 
       <h2
         class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
       >
-        220,000
+        {{props.props.price}},000
         <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
       </h2>
       <button
@@ -255,5 +256,5 @@
 
 
 <script setup>
-const paidStatus = useState("paidStatus");
+const props = defineProps(['props'])
 </script>
\ No newline at end of file
diff --git a/components/product-page/course-details/Course-status.vue b/components/product-page/course-details/Course-status.vue
index 115feb1..cfb0d5b 100644
--- a/components/product-page/course-details/Course-status.vue
+++ b/components/product-page/course-details/Course-status.vue
@@ -43,20 +43,25 @@
           />
         </svg>
       </h2>
-      <span class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+      <span v-if="props.props.completionPercentage > 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
         >تکمیل شده</span
       >
+      <span v-else-if="props.props.completionPercentage > 1 && props.props.completionPercentage < 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+        >در حال تکمیل</span
+      >
+      <span v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">در حال تولید</span>
     </div>
     <div>
       <div class="flex justify-between text-[3.19vw] md:text-[0.833vw]">
         <span class="text-[#383E43]">درصد تکمیل دوره</span>
-        <span>77٪</span>
+        <span>{{props.props.completionPercentage}}٪</span>
       </div>
       <div
         id="progressbar"
         class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
       >
         <div
+          :class="`w-[${props.props.completionPercentage}%]`"
           class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
         ></div>
       </div>
@@ -64,7 +69,9 @@
   </div>
 
 </template>
-
+<script setup>
+const props = defineProps(['props'])
+</script>
 <style scoped>
 #progressbar {
     background-color: #e5e5e5;
@@ -73,7 +80,6 @@
   }
   #progressbar > div {
     background-color: #0d3f40;
-    width: 77%;
     float: left;
   
     left: 0;
diff --git a/components/product-page/course-details/Description.vue b/components/product-page/course-details/Description.vue
index 7711d64..2e24c25 100644
--- a/components/product-page/course-details/Description.vue
+++ b/components/product-page/course-details/Description.vue
@@ -18,11 +18,7 @@
     >
   </div>
   <p class="mt-[4vw] md:mt-[2.1vw] thin">
-    آموزش HTML یکی از اساسی ترین ماموریت های شینان برای پرورش برنامه
-    نویسان وب حرفه ای محسوب میشه. حتما اسمشو شنیدید اما شاید براتون سوال
-    پیش اومده که چرا و چطور باید اون رو یاد گرفت و چه اهمیتی داره؟ میشه
-    گفت الفبای برنامه نویسی وب هست و یادگیری اون اولین پیش نیاز ورود به
-    این تخصص جذاب محسوب میشه.
+{{props.props.description}}
   </p>
   <p class="mt-[3.4vw] thin">
     شینان در کنار شماست تا بدون سردرگمی و گشتن بین آموزش های مختلف، کامل
@@ -47,4 +43,9 @@
     <li>دوست دارید کدهای بهینه تولید کنید تا سئوی قوی تری داشته باشید</li>
   </ul>
 
-</template>
\ No newline at end of file
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+
+</script>
\ No newline at end of file
diff --git a/components/product-page/course-details/Header.vue b/components/product-page/course-details/Header.vue
index 188d1c2..9e7f790 100644
--- a/components/product-page/course-details/Header.vue
+++ b/components/product-page/course-details/Header.vue
@@ -2,7 +2,7 @@
     <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
         <NuxtImg
         :placeholder="[30, 20]"
-          :src="props.props.slug.value.image"
+          :src="props.props.image"
           alt="html"
           class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
         />
@@ -10,17 +10,15 @@
           <h1
             class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
           >
-           {{ props.props.slug.value.name }} 
+           {{ props.props.name }} 
           </h1>
           <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
-            برنامه نویسی
+            {{props.props.categories[0].name}}
           </p>
           <p
             class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
           >
-            اولین قدم شروع طراحی وبسایت، آموزش HTML هست. HTML یه زبان نشانه گذاری
-            هست که با کمک اون میتونی تگ هایی بنویسی تا سایت رو روی اون تگ ها پیاده
-            کنی. همونجوری که هیچ موجودی نمیتونه بدون اسکلت زندگی کنه،...
+       {{props.props.description}}
           </p>
           <p
             class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
@@ -117,7 +115,7 @@
               </svg>
               <div class="space-y-[0.3vw]">
                 <p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">1401/12/24</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.createdAt}}</p>
               </div>
             </div>
             <div class="border-l"></div>
@@ -146,7 +144,7 @@
   
               <div class="space-y-[0.3vw]">
                 <p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">7 ساعت</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.duration}} ساعت</p>
               </div>
             </div>
             <div class="border-l"></div>
@@ -188,7 +186,7 @@
               </svg>
   
               <div class="space-y-[0.3vw]">
-                <p class="text-[3.59vw] md:text-[1.055vw]">37546</p>
+                <p class="text-[3.59vw] md:text-[1.055vw]">{{props.props.studentsCount}}</p>
                 <p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
               </div>
             </div>
@@ -199,4 +197,5 @@
 
 <script setup>
 const props = defineProps(['props'])
+
 </script>
\ No newline at end of file
diff --git a/layouts/footer.vue b/layouts/footer.vue
index d532065..16a07c0 100644
--- a/layouts/footer.vue
+++ b/layouts/footer.vue
@@ -20,8 +20,8 @@
       </div>
 
       <div>
-        <p class="text-[1.055vw] mt-[4vw]">خدمات مشتریان</p>
-        <p class="text-[0.833vw] mt-[1vw] text-[#E5E5E5]">سوالات متداول</p>
+        <p class="text-[1.055vw] mt-[4.8vw] pb-[1vw]">خدمات مشتریان</p>
+        <nuxt-link to="/frequently-questions" class="text-[0.833vw] mt-[1vw] text-[#E5E5E5]">سوالات متداول</nuxt-link>
         <p class="text-[0.833vw] mt-[0.8vw] text-[#E5E5E5]">قوانین سایت</p>
       </div>
       <svg
diff --git a/pages/[product]/index.vue b/pages/[product]/index.vue
index 872cda2..fb88547 100644
--- a/pages/[product]/index.vue
+++ b/pages/[product]/index.vue
@@ -1,17 +1,32 @@
 <template>
-  <product-pageAttended-course v-if="paidCourse" />
-  <product-pageCourse-detail :slug="data.data" v-else/>
+  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
+    <product-page-course-detailsHeader :props="data.course"/>
+    <div
+      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
+    >
+      <div
+        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
+      >
+        <product-page-course-detailsDescription :props="data.course" />
+        <product-page-course-detailsHeadlines :props="data.course"/>
+        <product-page-course-detailsComments :props="data.course"/>
+      </div>
+      <div class="w-full md:w-[23.438vw] text-[#383E43]">
+        <product-page-course-detailsCourse-status :props="data.course"/>
+        <product-page-course-detailsCourse-information :props="data.course"/>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 const route = useRoute();
-const data = await useFetch("/api/productId", {
+const  {data}  = await useFetch("/api/productId", {
     method: "POST",
       body: {
         id: route.params.product,
       },
   })
-const paidCourse = useState('paidStatus', () => false)
-
+console.log(data.value.course);
 
 </script>
\ No newline at end of file
diff --git a/pages/account/tickets.vue b/pages/account/tickets.vue
index b10a5b7..7e8e501 100644
--- a/pages/account/tickets.vue
+++ b/pages/account/tickets.vue
@@ -348,33 +348,7 @@
 </div>
       </div>
     </tabs>
-    <!-- <div
-      v-if="addTicketForm"
-      class="backdrop-blur-xl bg-white/30 absolute px-[5vw] py-[8vw] 
-      w-full top-0 space-y-[5vw] md:space-y-[2vw] border rounded-[1vw] shadow-md h-[80vw] md:h-auto"
-    >
-      <p class="text-[3vw] md:text-[1vw] font-semibold text-primaryGreen">موضوع تیکت :</p>
-      <div class="flex flex-col md:flex-row gap-[5vw] md:gap-[1vw]">
-        <input
-          class="h-[10vw] md:h-[3vw] rounded-[1vw] px-[1vw] md:w-[40vw] border"
-          type="text"
-          placeholder="موضوع تیکت را وارد کنید"
-          v-model="subject"
-        />
-        <button
-          class="text-[3vw] md:text-[0.7vw] greenButton rounded-[1vw] px-[1.5vw] h-[10vw] md:h-[3vw]"
-          @click="sendTicket"
-        >
-          ثبت
-        </button>
-        <button
-          class="text-[3vw] md:text-[0.7vw]  bg-red-400 rounded-[1vw] text-white px-[1vw] h-[10vw] md:h-[3vw]"
-          @click="addTicketForm = false"
-        >
-          انصراف
-        </button>
-      </div>
-    </div> -->
+
   </div>
 </template>
 
diff --git a/pages/frequently-questions/index.vue b/pages/frequently-questions/index.vue
new file mode 100644
index 0000000..1b2ca01
--- /dev/null
+++ b/pages/frequently-questions/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="flexBox overflow-x-hidden !max-w-[100vw]">
+    <div class="relative flexBox round">
+      <img
+        src="/public/images/questions.jpg"
+        alt=""
+        class="relative ask object-cover mt-[7.4vw]"
+      />
+      <h1 class="absolute text-white mt-[10vw] thin text-[2.706vw] font-bold">
+        سؤالات متداول
+      </h1>
+      <svg
+        class="absolute w-[1.719vw] h-[6.979vw] left-[38vw] mt-[30vw]"
+        viewBox="0 0 33 134"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M33 -2.88495e-06C20.6662 5.8727 4.22709 37.5761 1.23394 60.1708C-2.00567 84.6276 0.711141 98.6363 14.4574 127.343C12.5088 126.917 10.9951 126.517 9.45562 126.27C7.77956 126.001 6.0776 125.741 4.39053 125.763C3.8651 125.77 3.00726 126.661 2.93201 127.228C2.86018 127.77 3.47837 128.766 4.0187 128.963C8.69395 130.663 13.4077 132.265 18.1381 133.815C19.7168 134.333 20.886 133.766 21.3134 132.069C22.8841 125.831 24.5361 119.612 25.9711 113.344C26.3096 111.867 25.9206 110.228 25.8514 108.229C21.7095 109.79 22.1803 113.239 21.07 115.695C19.8962 118.292 19.1895 121.093 18.0745 124.412C12.6278 116.45 9.19096 108.418 7.02976 99.9164C-0.909448 68.685 5.63275 40.0232 23.373 13.4706C25.6829 10.0144 28.3993 6.82148 30.8833 3.47536C31.5548 2.57061 32.0643 1.55003 33 -2.88495e-06Z"
+          fill="white"
+        />
+      </svg>
+    </div>
+  </div>
+<div class="text-[#878787] mt-[10vw] mb-[10vw] flex flex-col mx-auto justify-center w-[80vw]">
+
+
+    <button class="rounded-t-[1.302vw]  !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center">
+        <div class="flexBox gap-[2vw]">
+            <p class="text-[1.901vw] font-bold ">01</p>
+            <h2 class="text-[0.938vw] font-semibold thin">
+                آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
+              </h2>
+         </div>
+          <svg
+          class="h-[2.604vw] w-[2.604vw] transition"
+          viewBox="0 0 50 51"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
+          <path
+          id="center"
+            d="M17.6665 25.5H32.3332"
+            stroke="#878787"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+          id="around"
+            d="M25 32.8334V18.1667"
+            stroke="#878787"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+    </button>
+    <div class="text-[#878787] content overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
+ <p class="px-[4vw] pb-[3vw]">
+    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
+ </p>
+</div>
+<div class="border-b py-[0.2vw]"></div>
+    
+
+<button class="rounded-t-[1.302vw]  !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center">
+    <div class="flexBox gap-[2vw]">
+        <p class="text-[1.901vw] font-bold ">01</p>
+        <h2 class="text-[0.938vw] font-semibold thin">
+            آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
+          </h2>
+     </div>
+      <svg
+      class="h-[2.604vw] w-[2.604vw] transition"
+      viewBox="0 0 50 51"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
+      <path
+      id="center"
+        d="M17.6665 25.5H32.3332"
+        stroke="#878787"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+      id="around"
+        d="M25 32.8334V18.1667"
+        stroke="#878787"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+</button>
+<div class="text-[#878787] content overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
+<p class="px-[4vw] pb-[3vw]">
+لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
+</p>
+</div>
+<div class="border-b py-[0.2vw]"></div>
+
+
+
+
+    <!-- <button class="accordion ">متن تست 2</button>
+    <div class="content">
+      <p>لوریپسوم...</p>
+    </div>
+    
+    <button class="accordion">متن تست 3</button>
+    <div class="content">
+      <p>لوریپسوم...</p>
+    </div>  -->
+
+
+</div>
+    
+
+  
+</template>
+
+
+<script setup>
+if (process.client) {
+    var acc = document.getElementsByClassName("accordion");
+    var i;
+      
+      for (i = 0; i < acc.length; i++) {
+        acc[i].addEventListener("click", function() {
+          this.classList.toggle("active");
+    
+          var content = this.nextElementSibling;
+          if (content.style.maxHeight) {
+            content.style.maxHeight = null;
+          } 
+          else
+          {
+            content.style.maxHeight = content.scrollHeight + 50 + "px";
+          }
+        });
+      }
+    
+}
+</script>
+
+
+<style scoped>
+
+.accordion {
+max-width: 100vw !important;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    text-align: center;
+    border: none;
+    outline: none;
+    transition: 0.4s;
+  }
+  
+  
+  .active {
+    background-color: #E0FEFF;
+    
+  }
+  .active svg {
+    transform: rotate(45deg);
+    transition: 0.2s;
+  }
+  .active svg path {
+    stroke: #E0FEFF;
+  }
+  .active rect {
+    fill: #0D3F40;
+  }
+  .active p {
+    color: #0D3F40;
+  }
+  .active h2 {
+    color: #383E43;
+  }
+  /*.panel {
+    padding: 0 18px;
+    background-color: white;
+    display: none;
+    overflow: hidden;
+  }*/
+  
+  .content {
+    max-width: 100vw !important;
+    background-color: white;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+  }
+.ask {
+  filter: brightness(50%);
+  border-radius:0 0 200% 200% / 80%;
+}
+
+</style>
\ No newline at end of file
diff --git a/public/images/questions.jpg b/public/images/questions.jpg
new file mode 100644
index 0000000..367f90d
Binary files /dev/null and b/public/images/questions.jpg differ