diff --git a/x-page/components/filter.vue b/x-page/components/filter.vue
new file mode 100644
index 0000000..f0c0f76
--- /dev/null
+++ b/x-page/components/filter.vue
@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="2.2">
+                    <v-menu
+                        v-model="menu"
+                        :close-on-content-click="false"
+                        transition="scale-transition"
+                        offset-y
+                        min-width="auto"
+                        max-width="290px"
+                    >
+                        <template v-slot:activator="{ props }">
+                            <v-text-field
+                                :model-value="formatDate()"
+                                label="Tanggal"
+                                prepend-inner-icon="mdi-calendar"
+                                hide-details
+                                readonly
+                                variant="outlined"
+                                v-bind="props"
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker
+                            hide-header
+                            show-adjacent-months
+                            rounded="lg"
+                            color="primary"
+                            v-model="date"
+                            @update:modelValue="menu=false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-text-field
+                        label="No Reg / Nama"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        label="Kel Pelanggan"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        label="Station"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="2.2">
+                    <v-autocomplete
+                        label="Lokasi"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col cols="1">
+                    <div
+                        style="height: 100%; display: flex; align-items: center; justify-content: center;"
+                        class="rounded-lg bg-primary pa-2 h-100"
+                    >
+                        <iconify-icon
+                            style="font-size: 2rem;"
+                            icon="fluent:search-20-regular"
+                        ></iconify-icon>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "filtercomp",
+        components: {},
+        mounted() {
+            
+        },
+        data() {
+            return {
+                menu: false,
+                visible: false,
+            };
+        },
+        computed: {
+            date: {
+
+            },
+        },
+        methods: {
+            formatDate() {
+                if (!this.date) return null;
+
+                return moment(this.date).format("DD-MM-YYYY");
+            },
+        },
+    };
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/x-page/components/left.vue b/x-page/components/left.vue
new file mode 100644
index 0000000..a82534d
--- /dev/null
+++ b/x-page/components/left.vue
@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <h3 class="primary-lighten">PASIEN</h3>
+            </div>
+            <v-data-table
+                v-model="selectedItems"
+                :items="items"
+                :headers="headers"
+                hide-default-footer
+            >
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="font-weight-medium">{{ item.tanggal }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.noreg }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.kelpelanggan }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.nama }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.status }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "leftcomp",
+    components: {},
+    mounted() {
+        
+    },
+    data() {
+        return {
+            menu: false,
+            visible: false,
+            items: [
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000035LA",
+                    kelpelanggan: "PASIEN MANDIRI",
+                    nama: "Tn. Alpha",
+                    status: "New",
+                },
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000036LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. Beta",
+                    status: "New",
+                },
+            ],
+            selectedItems: [],
+            headers: [
+                {
+                    title: "TANGGAL",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "NO. REG",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "KEL. PELANGGAN",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "NAMA",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "STATUS",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        
+    },
+    methods: {
+        
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/x-page/components/main.vue b/x-page/components/main.vue
index 4c8b6ee..8f950a6 100644
--- a/x-page/components/main.vue
+++ b/x-page/components/main.vue
@@ -3,7 +3,15 @@
         <one-navbar></one-navbar>
         <v-main>
             <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
-                
+                <one-filter></one-filter>
+                <v-row>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                        <one-left></one-left>
+                    </v-col>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                        <one-right></one-right>
+                    </v-col>
+                </v-row>
             </div>
         </v-main>
     </v-app>
@@ -11,20 +19,28 @@
 
 <script type="module">
     import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import FilterComponent from "./filter.vue";
+    import LeftComponent from "./left.vue";
+    import RightComponent from "./right.vue";
     export default {
-        name: "x-page"
+        name: "x-page",
         components: {
             "one-navbar": NavbarComponent,
-        }
+            "one-filter": FilterComponent,
+            "one-left": LeftComponent,
+            "one-right": RightComponent,
+        },
         mounted() {},
         data() {
             return {
                 visible: false,
-            }
+            };
+        },
+        computed: {
+
         },
-        computed: {},
         methods: {
-            
+
         },
     };
 </script>
\ No newline at end of file
diff --git a/x-page/components/right.vue b/x-page/components/right.vue
new file mode 100644
index 0000000..64cf6e7
--- /dev/null
+++ b/x-page/components/right.vue
@@ -0,0 +1,187 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-primary-lighten rounded-lg pa-5">
+                <v-row>
+                    <v-col cols="2">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 100px; height: 100px;">
+                            <!-- placeholder photo -->
+                        </div>
+                    </v-col>
+                    <v-col cols="8">
+                        <h4>055000035LA</h4>
+                        <h4 style="color: slategray;">Tn. Alpha</h4>
+                    </v-col>
+                    <v-col cols="2" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-secondary-lighten pa-2"
+                        >
+                            <iconify-icon
+                                class="text-secondary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:speaker-2-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="10">
+                        <p class="font-weight-medium">PID</p>
+                    </v-col>
+                    <v-col cols="2" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">asd</p>
+                    </v-col>
+                </v-row>
+                <v-row no-gutters>
+                    <v-col cols="4">
+                        <p class="font-weight-medium">Tanggal Lahir dan Umur</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">10-11-1999</p>
+                    </v-col>
+                    <v-col cols="4" class="text-end">
+                        <p class="font-weight-medium" style="color: slategray;">24 Tahun 8 Bulan 21 Hari</p>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <v-row>
+                    <v-col cols="10" align-self="center">
+                        <h3 class="primary-lighten">STAF: NOVITA</h3>
+                    </v-col>
+                    <v-col cols="1" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-primary-lighten pa-2"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:note-add-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                    <v-col cols="1" align-self="center" class="d-flex justify-end">
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-primary-lighten pa-2"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:notepad-person-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </v-col>
+                </v-row>
+            </div>
+            <v-data-table
+                :items="items"
+                :headers="headers"
+                hide-default-footer
+            >
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="font-weight-medium">{{ item.specimen }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.barcode }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">-</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">-</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <div class="ml-5">
+                <v-chip class="mr-5 mt-5" color="primary">DARAH</v-chip>
+                <v-chip class="mr-5 mt-5" color="primary">SWAB/SEKRET</v-chip>
+            </div>
+        </v-container>
+        <v-container class="bg-white rounded-lg mt-5" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5">
+                <h3 class="primary-lighten">PEMERIKSAAN</h3>
+            </div>
+            <div>
+                <v-chip class="mr-5 mt-5" color="success">Hematologi Lengkap</v-chip>
+                <v-chip class="mr-5 mt-5" color="success">Golongan Darah Rhesus</v-chip>
+                <v-chip class="mr-5 mt-5" color="success">Kultur Usap Tenggorok (Vitek)</v-chip>
+            </div>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "rightcomp",
+        components: {
+
+        },
+        mounted() {},
+        data() {
+            return {
+                menu: false,
+                visible: false,
+                items: [
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "055000035LSE1A",
+                    },
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "0550000AA223FF",
+                    },
+                ],
+                headers: [
+                    {
+                        title: "SPECIMEN",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "BARCODE",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "REQUIREMENT",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "AKSI",
+                        align: "start",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    }
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/x-page/index.html b/x-page/index.html
index 8f2e7e2..549a92a 100644
--- a/x-page/index.html
+++ b/x-page/index.html
@@ -45,7 +45,7 @@
             //   }
 
             const options = {
-                modulesCache: {
+                moduleCache: {
                     vue: Vue,
                 },
                 getFile(url) {
@@ -82,7 +82,7 @@
                     return {
                         visible: false,
                         bg_src: "",
-                        loading: false, // Initialize loading state
+                        loading: false,
                     };
                 },