diff --git a/globalscript/theme.js b/globalscript/theme.js
index 91c2a42..c0fd546 100644
--- a/globalscript/theme.js
+++ b/globalscript/theme.js
@@ -18,6 +18,8 @@ var CustomTheme = {
             "success-lighten": "#E8F5E9",
             "success-darken": "#1B5E20",
             white: "#FFFFFF",
+            grey: "#9E9E9E",
+            "grey-lighten-5": "#FAFAFA",
         },
     },
 }
\ No newline at end of file
diff --git a/specimen-collection/components/filter.vue b/specimen-collection/components/filter.vue
new file mode 100644
index 0000000..8e024d9
--- /dev/null
+++ b/specimen-collection/components/filter.vue
@@ -0,0 +1,118 @@
+<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 pointer"
+                    >
+                        <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>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/specimen-collection/components/left.vue b/specimen-collection/components/left.vue
new file mode 100644
index 0000000..d67566d
--- /dev/null
+++ b/specimen-collection/components/left.vue
@@ -0,0 +1,122 @@
+<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="selected_patients"
+                :items="patients"
+                :headers="headers"
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:item="{ item }">
+                    <tr @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
+                        <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,
+            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: {
+        patients() {
+            return this.$store.state.collection.patients
+        },
+        selected_patients: {
+            get() {
+                return this.$store.state.collection.selected_patients
+            },
+            set(data) {
+                this.$store.commit("setSelectedPatients", data)
+            }
+        }
+    },
+    methods: {
+        selectItem(data) {
+            this.$store.commit("setSelectedPatients", data);
+        },
+        isItemSelected(data) {
+            return data.noreg === this.$store.state.collection.selected_patients.noreg
+        }
+    },
+};
+</script>
+
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/specimen-collection/components/main.vue b/specimen-collection/components/main.vue
new file mode 100644
index 0000000..be057bd
--- /dev/null
+++ b/specimen-collection/components/main.vue
@@ -0,0 +1,46 @@
+<template>
+    <v-app id="inspire">
+        <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>
+</template>
+
+<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: "specimen collection",
+        components: {
+            "one-navbar": NavbarComponent,
+            "one-filter": FilterComponent,
+            "one-left": LeftComponent,
+            "one-right": RightComponent,
+        },
+        mounted() {},
+        data() {
+            return {
+                visible: false,
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    };
+</script>
\ No newline at end of file
diff --git a/specimen-collection/components/right.vue b/specimen-collection/components/right.vue
new file mode 100644
index 0000000..82e9452
--- /dev/null
+++ b/specimen-collection/components/right.vue
@@ -0,0 +1,228 @@
+<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 pa-2 mr-2 bg-grey-lighten-5 pointer"
+                        >
+                            <iconify-icon
+                                class="text-grey"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:arrow-previous-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-secondary-lighten pa-2 pointer"
+                        >
+                            <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="2" 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 pointer"
+                        >
+                            <iconify-icon
+                                class="text-primary-darken"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:note-add-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                            class="rounded-lg bg-success-lighten pa-2 ml-2 pointer"
+                        >
+                            <iconify-icon
+                                class="text-success-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 align="center">
+                            <div
+                                style="display: flex; align-items: center; justify-content: center;"
+                                class="rounded-lg pa-2"
+                            >
+                                <div
+                                    class="pointer"
+                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        class="text-grey"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                                <div
+                                    class="pointer"
+                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
+                                >
+                                    <iconify-icon
+                                        class="text-grey"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:checkmark-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                            </div>
+                        </td>
+                        <td align="center" class="py-1">
+                            <div class="bg-warning rounded-lg pa-1 text-white">
+                                06-08-2024 14:17
+                            </div>
+                            <div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1">
+                                00-00-0000 00:00
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <div class="ml-3">
+                <v-chip class="mr-5 mt-2" color="primary">DARAH</v-chip>
+                <v-chip class="mr-5 mt-2" 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: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: "AKSI",
+                        align: "center",
+                        sortable: false,
+                        key: "name",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    }
+</script>
+
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/specimen-collection/index.html b/specimen-collection/index.html
new file mode 100644
index 0000000..f12ff88
--- /dev/null
+++ b/specimen-collection/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Specimen Collection</title>
+        <!-- Vuetify CSS -->
+        <link href="../css/vuetify.css" rel="stylesheet" />
+        <!-- Local Stylesheet for Fonts -->
+        <link rel="stylesheet" href="../css/styles.css" />
+        <link href="../css/materialdesignicon.css" rel="stylesheet" />
+        <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+    </head>
+    <body>
+        <div id="app"></div>
+        <!-- Moment -->
+        <script src="../libraries/moment.js"></script>
+        <!-- Vue.js -->
+        <!-- DEV -->
+        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+        <!-- PROD -->
+        <!-- <script src="../libraries/vue3.4.36.global.prod.js"></script> -->
+        <!-- Vuex -->
+        <script src="../libraries/vuex.js"></script>
+        <!-- Vuetify -->
+        <script src="../libraries/vuetify3.js"></script>
+        <!-- vue-i18n -->
+        <script src="../libraries/vue-i18n.global.js"></script>
+        <!-- Axios -->
+        <script src="../libraries/axios.js"></script>
+
+        <script src="../globalscript/theme.js"></script>
+        <script src="../globalscript/global.js"></script>
+        <!-- loader single file component -->
+        <script src="../libraries/vue3-sfc-loader.js"></script>
+        <script src="./language.js"></script>
+
+        <script type="module">
+            const { loadModule } = window["vue3-sfc-loader"];
+            import system from "../globalstore/globalstore.js";
+            import collection from "./modules/collection.js";
+
+            //   if (one_token()) {
+            //     let usr = JSON.parse(localStorage.getItem("user"));
+            //     location.replace("/" + usr.M_UserGroupDashboard);
+            //   }
+
+            const options = {
+                moduleCache: {
+                    vue: Vue,
+                },
+                getFile(url) {
+                    return fetch(url).then((response) =>
+                        response.ok ? response.text() : Promise.reject(response)
+                    );
+                },
+                addStyle(textContent) {
+                    const style = document.createElement("style");
+                    style.textContent = textContent;
+                    const ref = document.head.getElementsByTagName("style")[0] || null;
+                    document.head.insertBefore(style, ref);
+                },
+            };
+
+            const messages = CustomMessages;
+            const browserLocale = navigator.language || navigator.languages[0];
+            const i18n = VueI18n.createI18n({
+                locale: browserLocale.startsWith("id") ? "id" : "en",
+                fallbackLocale: "en",
+                messages,
+            });
+            window.i18n = i18n;
+
+            moment.locale(browserLocale.startsWith("id") ? "id" : "en");
+            const store = Vuex.createStore({
+                modules: {
+                    system: system,
+                    collection: collection,
+                },
+            });
+
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        visible: false,
+                        bg_src: "",
+                        loading: false,
+                    };
+                },
+
+                template: `
+                    <main-component></main-component>
+                    `,
+            });
+
+            const vuetify = Vuetify.createVuetify({
+                theme: {
+                    themes: CustomTheme,
+                },
+            });
+
+            app.use(store);
+            app.use(vuetify);
+            app.use(i18n);
+
+            const components = {
+                "main-component": "./components/main.vue",
+            };
+            Promise.all(
+                Object.entries(components).map(([name, path]) => {
+                    return loadModule(path, options).then((component) => {
+                        app.component(name, component);
+                    });
+                })
+            )
+            .then(() => {
+                app.mount("#app");
+            })
+            .catch((error) => {
+                console.error("Error loading components:", error);
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/specimen-collection/language.js b/specimen-collection/language.js
new file mode 100644
index 0000000..b3b6368
--- /dev/null
+++ b/specimen-collection/language.js
@@ -0,0 +1,32 @@
+var CustomMessages = {
+    en: {
+        message: {
+            login: "Log in",
+            title: "Log in to your account",
+            sublogin: "Enter your details below",
+            email: "Email",
+            password: "Password",
+            forgotPassword: "Forgot password?",
+            placeholderEmail: "Enter your email",
+            placeholderPassword: "Enter your password",
+            msgInfo: 'Enter the registered account',
+            errorQuery: "Error get data",
+            invalid: "Invalid username / password"
+        },
+    },
+    id: {
+        message: {
+            login: "Masuk",
+            title: "Masuk ke akun Anda",
+            sublogin: "Masukkan detail Anda di bawah ini",
+            email: "Surel",
+            password: "Kata Sandi",
+            forgotPassword: "Lupa kata sandi?",
+            placeholderEmail: "Isikan email anda",
+            placeholderPassword: "Isikan kata sandi anda",
+            msgInfo: "Masukkan akun terdaftar",
+            errorQuery: "Gagal mendapatkan data",
+            invalid: "Nama pengguna / kata sandi tidak valid"
+        },
+    },
+};
\ No newline at end of file
diff --git a/specimen-collection/modules/collection.js b/specimen-collection/modules/collection.js
new file mode 100644
index 0000000..eea265b
--- /dev/null
+++ b/specimen-collection/modules/collection.js
@@ -0,0 +1,47 @@
+const store = {
+    state() {
+        return {
+            patients: [
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000037LA",
+                    kelpelanggan: "PASIEN MANDIRI",
+                    nama: "Tn. Alpha",
+                    status: "New",
+                },
+                {
+                    tanggal: "31-07-2024",
+                    noreg: "055000036LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. Beta",
+                    status: "New",
+                },
+                {
+                    tanggal: "30-07-2024",
+                    noreg: "055000035LA",
+                    kelpelanggan: "PASIEN KLINISI",
+                    nama: "Tn. Gamma",
+                    status: "New",
+                },
+            ],
+            selected_patients: {
+
+            },
+        };
+    },
+    mutations: {
+        setPatients(state, data) {
+            state.patients = data
+        },
+        setSelectedPatients(state, data) {
+            state.selected_patients = data
+        },
+    },
+    actions: {
+        selectPatient({ commit, data }) {
+            commit('setSelectedPatients', data);
+        }
+    }
+}
+
+export default store
\ No newline at end of file