diff --git a/globalscript/theme.js b/globalscript/theme.js
index 1a943de..b5bbdb4 100644
--- a/globalscript/theme.js
+++ b/globalscript/theme.js
@@ -19,6 +19,7 @@ var CustomTheme = {
             "success-darken": "#1B5E20",
             white: "#FFFFFF",
             grey: "#9E9E9E",
+            "grey-lighten-2": "#E0E0E0",
             "grey-lighten-5": "#FAFAFA",
             "grey-darken-1": "#757575"
         },
diff --git a/status-patient/components/content.vue b/status-patient/components/content.vue
index 376291d..8083b78 100644
--- a/status-patient/components/content.vue
+++ b/status-patient/components/content.vue
@@ -6,11 +6,12 @@
                     <h3>{{ $t('message.table.title') }}</h3>
                 </v-col>
                 <v-col cols="1" align="end">
-                    <h3>6</h3>
+                    <h3>{{ datax.length }}</h3>
                 </v-col>
             </v-row>
         </div>
         <v-data-table
+            :items="datax"
             :headers="headers"
             hide-default-footer
         >
@@ -23,14 +24,86 @@
                     </template>
                 </tr>
             </template>
+            <template v-slot:item="{ item }">
+                <tr>
+                    <td align="center" class="pa-2">
+                        <p class="font-weight-medium">{{ item.xno }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p class="font-weight-medium">{{ item.order_date }}</p>
+                        <p class="font-weight-medium rounded-lg bg-grey-lighten-2 px-4" style="display: inline-block;">{{ item.order_promise }}</p>
+                    </td>
+                    <td align="start" class="pa-2">
+                        <v-row>
+                            <v-col cols="5" align="start">
+                                <p class="font-weight-medium">{{ item.no_reg }}</p>
+                            </v-col>
+                            <v-col cols="7" align="end">
+                                <p class="font-weight-bold text-blue">{{ item.no_reg_ext }}</p>
+                            </v-col>
+                        </v-row>
+                        <p class="font-weight-bold">{{ item.patient_name }}</p>
+                        <v-row>
+                            <v-col cols="5" align="start">
+                                <p class="font-weight-medium">{{ item.company_name }}</p>
+                            </v-col>
+                            <v-col cols="7" align="end">
+                                <p class="font-weight-medium text-grey">{{ item.mou_name }}</p>
+                            </v-col>
+                        </v-row>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_order[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                            @click="dialog=true"
+                        >{{ item.details_order[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_sampling[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                        >{{ item.details_sampling[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_process[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                        >{{ item.details_process[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_result_verification[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                        >{{ item.details_result_verification[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_result_validation[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                        >{{ item.details_result_validation[0].group_name }}</p>
+                    </td>
+                    <td align="center" class="pa-2">
+                        <p 
+                            :class="['font-weight-medium rounded-lg pointer', item.details_print[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
+                            style=" width: 80%; height: 60%; align-content: center;"
+                        >{{ item.details_print[0].group_name }}</p>
+                    </td>
+                </tr>
+            </template>
         </v-data-table>
+        <v-pagination :length="total_page"></v-pagination>
+        <sp-dialog></sp-dialog>
     </v-container>
 </template>
 
 <script>
+    import Sp_dialog from './sp_dialog.vue';
     export default {
         name: "contentcomp",
-        components: {},
+        components: {
+            "sp-dialog": Sp_dialog
+        },
         mounted() {},
         data() {
             return {
@@ -39,7 +112,7 @@
                 headers : [
                     {
                         title: this.$t('message.table.h_no'),
-                        align: "start",
+                        align: "center",
                         sortable: false,
                         key: "name",
                         width: "5%",
@@ -112,5 +185,31 @@
                 ]
             };
         },
+        computed: {
+            datax: {
+                get() {
+                    return this.$store.state.stored.data;
+                }
+            },
+            total_page: {
+                get() {
+                    return this.$store.state.stored.total_page;
+                }
+            },
+            dialog: {
+                get() {
+                    return this.$store.state.stored.sp_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setDialog", bool);
+                }
+            }
+        },
     }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/status-patient/components/sp_dialog.vue b/status-patient/components/sp_dialog.vue
new file mode 100644
index 0000000..75442bd
--- /dev/null
+++ b/status-patient/components/sp_dialog.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <v-dialog v-model="dialog" width="auto">
+            <v-card min-width="600" max-width="750" class="rounded-lg">
+                <v-card-item class="bg-primary mb-5">
+                    <v-card-title>TIMELINE</v-card-title>
+                </v-card-item>
+                <v-card-text>
+                    <v-row class="ga-4 mb-5">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 80px; height: 80px;"></div>
+                        <div>
+                            <h4 class="font-weight-medium">05600027LA</h4>
+                            <h4 class="font-weight-bold">Ny IMELDA JANICE</h4>
+                        </div>
+                    </v-row>
+                    
+                    <v-timeline side="end" style="align-items: start; align-content: start">
+                        <v-timeline-item
+                                v-for="item in items"
+                                :key="item.id"
+                                dot-color="white"
+                                fill-dot="false"
+                                :icon="item.icon"
+                                icon-color="primary"
+                                size="small"
+                            >
+                            
+                        </v-timeline-item>
+                    </v-timeline>
+                </v-card-text>
+                <template v-slot:actions>
+                    <v-btn
+                        class="ms-auto text-primary font-weight-medium"
+                        text="TUTUP"
+                        @click="dialog=false"
+                    ></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "statuspasiendialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                items: [
+                    {
+                        id: 1,
+                        color: 'info',
+                        icon: 'mdi-check-circle',
+                    },
+                    {
+                        id: 2,
+                        color: 'error',
+                        icon: 'mdi-alert-circle',
+                    },
+                ],
+            };
+        },
+        computed: {
+            dialog: {
+                get() {
+                    return this.$store.state.stored.sp_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setDialog", bool);
+                }
+            }
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/modules/store.js b/status-patient/modules/store.js
index bc26017..115f616 100644
--- a/status-patient/modules/store.js
+++ b/status-patient/modules/store.js
@@ -78,13 +78,93 @@ const store = {
                     }
                   ],
                   "no_reg_ext": "056G3C17LA"
+                },
+                {
+                  "xno": 2,
+                  "xid": "132283",
+                  "order_date": "28-08-2024 15:51",
+                  "no_reg": "05600028LA",
+                  "patient_name": "Ny COBA HENY",
+                  "company_name": "PASIEN MANDIRI",
+                  "mou_name": "PRAMITA PROMO PAKET IMLEK 2024",
+                  "status_cito": "N",
+                  "order_promise": "29-08-2024 12:00",
+                  "details_order": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_sampling": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_verifications": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_process": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_result_verification": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_result_validation": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "details_print": [
+                    {
+                      "ids": "1626780",
+                      "group_name": "Fisioterapi SWD",
+                      "group_id": "26",
+                      "flag_nonlab": "N",
+                      "status": "Y"
+                    }
+                  ],
+                  "no_reg_ext": "056R2H68LA"
                 }
-            ]
+            ],
+            total_page: 1,
+            sp_dialog: false,
         }
     },
     mutations: {
         setDate(state, date) {
             state.date = date;
+        },
+        setDialog(state, bool) {
+          state.sp_dialog = bool;
         }
     },
     actions: {