diff --git a/src/modules/01_exam/components/ExamCrad.vue b/src/modules/01_exam/components/ExamCrad.vue
new file mode 100644
index 0000000..dde74f8
--- /dev/null
+++ b/src/modules/01_exam/components/ExamCrad.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="q-pa-md shadow-4 rounded-borders cursor-pointer">
+    <label class="text-h6 row cursor-pointer">{{ items.title }}</label>
+    <label class="text-grey-7 row text-size cursor-pointer"
+      >ประกาศวันที่ {{ date2Thai(items.announcementDate) }}</label
+    >
+    <label class="text-grey-7 row q-my-md text-size cursor-pointer"
+      >ครั้งที่ {{ items.registerRound }}</label
+    >
+    <div class="row justify-between items-end cursor-pointer">
+      <label class="text-grey-7 text-size row cursor-pointer"
+        >เปิดรับสมัคร {{ date2Thai(items.registerDateStart) }} -
+        {{ date2Thai(items.registerDateEnd) }}</label
+      >
+      <div class="rounded-borders q-pa-sm bg-teal cursor-pointer shadow-2">
+        <label class="text-semi text-white text-size cursor-pointer">สมัครสอบ</label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ExamCard } from '../interface/index/Main'
+import { useCounterMixin } from '@/stores/mixin'
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+
+const props = defineProps({
+  items: {
+    type: Object as PropType<ExamCard>,
+    required: true
+  }
+})
+</script>
+<style lang="scss" scope>
+.text-size {
+  font-size: 1.2em;
+}
+</style>
diff --git a/src/modules/01_exam/interface/index/Main.ts b/src/modules/01_exam/interface/index/Main.ts
index 0c8fa42..0c17658 100644
--- a/src/modules/01_exam/interface/index/Main.ts
+++ b/src/modules/01_exam/interface/index/Main.ts
@@ -95,6 +95,109 @@ interface zipCodeOption {
   zipCode: string
 }
 
+interface ExamCard {
+  id: string
+  title: string
+  announcementDate: Date
+  registerRound: Number
+  registerDateStart: Date
+  registerDateEnd: Date
+  yearly: Date
+}
+
+const defaultCard: ExamCard[] = [
+  {
+    id: '1',
+    title: 'การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 2,
+    announcementDate: new Date('2022-11-23'),
+    registerDateStart: new Date('2022-11-09'),
+    registerDateEnd: new Date('2022-11-10'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  },
+  {
+    id: '2',
+    title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
+    registerRound: 1,
+    announcementDate: new Date('2022-10-14'),
+    registerDateStart: new Date('2022-10-09'),
+    registerDateEnd: new Date('2022-11-30'),
+    yearly: new Date('2022-01-01')
+  }
+]
+
 const defaultAddress: Address = {
   address: 'บ้านเลขที่ 1/2 ซอย 56 ถนนตัดใหม่',
   provinceId: 'กรุงเทพ',
@@ -165,7 +268,7 @@ const defaultOccupation: Occupation = {
   other: null
 }
 
-export { defaultInformation, defaultFamily, defaultAddress, defaultOccupation }
+export { defaultInformation, defaultFamily, defaultAddress, defaultOccupation, defaultCard }
 export type {
   Pagination,
   DataOption,
@@ -175,5 +278,6 @@ export type {
   Family,
   Address,
   zipCodeOption,
-  Occupation
+  Occupation,
+  ExamCard
 }
diff --git a/src/modules/01_exam/views/ExamMain.vue b/src/modules/01_exam/views/ExamMain.vue
index 9f4d7e7..9daf7cf 100644
--- a/src/modules/01_exam/views/ExamMain.vue
+++ b/src/modules/01_exam/views/ExamMain.vue
@@ -6,8 +6,9 @@
     >
   </q-toolbar>
 
-  <q-card flat class="">
-    <data-table
+  <div class="q-pa-md q-gutter-md">
+    <CardExam v-for="row in ExamData" :key="row.id" :items="row" @click="next(row.id)" />
+    <!-- <data-table
       style="height: 80vh"
       :rows="rows"
       :columns="columns"
@@ -48,8 +49,8 @@
           </q-td>
         </q-tr>
       </template>
-    </data-table>
-  </q-card>
+    </data-table> -->
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue'
@@ -57,7 +58,9 @@ import { useRouter } from 'vue-router'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import type { RequestItemsObject, Columns } from '@/modules/01_exam/interface/request/Main'
 import type { ResponseObject } from '@/modules/01_exam/interface/response/Main'
-import type { Pagination } from '@/modules/01_exam/interface/index/Main'
+import type { Pagination, ExamCard } from '@/modules/01_exam/interface/index/Main'
+import { defaultCard } from '@/modules/01_exam/interface/index/Main'
+import CardExam from '../components/ExamCrad.vue'
 
 const router = useRouter()
 const store = useExamDataStore()
@@ -67,6 +70,7 @@ const initialPagination = ref<Pagination>({
   rowsPerPage: 0
 })
 
+const ExamData = ref<ExamCard[]>(defaultCard)
 const visibleColumns = ref<String[]>([])
 examData.main.columns.length == 0
   ? (visibleColumns.value = [