diff --git a/src/modules/01_exam/components/ExamDetail.vue b/src/modules/01_exam/components/ExamDetail.vue
index 5088497..4741ff6 100644
--- a/src/modules/01_exam/components/ExamDetail.vue
+++ b/src/modules/01_exam/components/ExamDetail.vue
@@ -1,44 +1,41 @@
 <template>
-  <div class="q-pa-md">
-    <div class="text-h4 text-center text-primary q-pb-lg">รายละเอียดการสอบ</div>
-    <div>
-      <q-card v-for="exam in examPost" :key="exam.contentItemId" class="q-pa-md">
-        <q-card-section>
-          <div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
-          <div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
-          <div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
-          <div class="text-subtitle2 q-py-sm">
-            เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
-          </div>
-          <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
-          <div v-html="exam.htmlBody.html"></div>
-        </q-card-section>
-
-        <div class="text-subtitle1 text-center text-primary">ประกาศเกี่ยวกับการสอบนี้</div>
-        <div class="row justify-start q-pa-md q-col-gutter-md">
-          <div
-            v-for="file in exam.bag.contentItems"
-            :key="file.contentItemId"
-            class="col-12"
-            :href="`https://localhost:5001${file.file.urls[0]}`"
-          >
-            <p>
-              <a :href="`https://localhost:5001${file.file.urls[0]}`" target="_blank">{{
-                file.displayText
-              }}</a
-              ><br />
-            </p>
-          </div>
+  <div class="q-px-md">
+    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+      <q-card-section>
+        <div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
+        <div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
+        <div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
+        <div class="text-subtitle2 q-py-sm">
+          เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
         </div>
-        <template v-slot:body-cell-name="props">
+        <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
+        <!-- <div v-html="exam.htmlBody.html"></div> -->
+      </q-card-section>
+
+      <div class="text-subtitle1 text-center text-primary">เอกสารเกี่ยวกับการสอบนี้</div>
+      <div class="row justify-start q-pa-md q-col-gutter-md">
+        <div
+          v-for="file in exam.document"
+          :key="file.contentItemId"
+          class="col-12"
+          :href="`https://localhost:5001${file.file}`"
+        >
+          <p>
+            <a :href="`https://localhost:5001${file.file}`" target="_blank">{{
+              file.displayText
+            }}</a
+            ><br />
+          </p>
+        </div>
+      </div>
+      <!-- <template v-slot:body-cell-name="props">
           <q-td :props="props">
             <div>
               <a href="https://quasar.dev/vue-components/table#QTable-API" />
             </div>
           </q-td>
-        </template>
-      </q-card>
-    </div>
+        </template> -->
+    </q-card>
     <div class="col-12">
       <div class="text-h6 q-py-sm">ข้อควรระวัง</div>
       <div class="text-warning q-pb-md">1. ผู้สมัครสามารถสมัครได้เพียงครั้งเดียว</div>
@@ -59,7 +56,28 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
+import { useCounterMixin } from '@/stores/mixin'
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const exam = ref<any>({
+  contentItemId: null,
+  displayText: 'การสอบภาค ข.พิเศษ สำหรับผู้สอบผ่านของ่วนราชการแล้ว',
+  description: 'ครั้งที่2',
+  createdUtc: new Date(),
+  budgetYear: 2566,
+  startDate: new Date(),
+  endDate: new Date(),
+  fee: 200,
+  document: [
+    {
+      contentItemId: 111,
+      file: '111',
+      displayText: 'เอกสารเพิ่มเติมเกี่ยวกับการสอบ'
+    }
+  ]
+})
 </script>
 
 <style scoped></style>