diff --git a/auth-code/api/api.js b/auth-code/api/api.js
new file mode 100644
index 0000000..5c774de
--- /dev/null
+++ b/auth-code/api/api.js
@@ -0,0 +1,22 @@
+const URL = "";
+
+export async function callApi(fn_url, params, headers) {
+    try {
+        console.log("API CALL")
+        var url = URL + fn_url
+        var resp = await axios.post(url, params, headers)
+        if (resp != 'OK') {
+            return  {
+                status: 'ERR',
+                message: resp.message
+            }
+        } else {
+            
+        }
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        }
+    }
+}
\ No newline at end of file
diff --git a/auth-code/components/authentication.vue b/auth-code/components/authentication.vue
new file mode 100644
index 0000000..d83bbb2
--- /dev/null
+++ b/auth-code/components/authentication.vue
@@ -0,0 +1,32 @@
+<template>
+    <v-app id="inspire">
+        <div class="hidden-md-and-up">
+            <mobile-component></mobile-component>
+        </div>
+        <div class="hidden-md-and-down">
+            <dekstop-component></dekstop-component>
+        </div>
+    </v-app>
+</template>
+
+<script type="module">
+    import dekstop from './dekstop.vue';
+    import mobile from './mobile.vue';
+    export default {
+        name: "authentication",
+        components: {
+            "dekstop-component": dekstop,
+            "mobile-component": mobile,
+        },
+        mounted() {},
+        data() {
+            return {
+                visible: false,
+            };
+        },
+        computed: {},
+        methods: {},
+    }
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/auth-code/components/dekstop.vue b/auth-code/components/dekstop.vue
new file mode 100644
index 0000000..50b8ae1
--- /dev/null
+++ b/auth-code/components/dekstop.vue
@@ -0,0 +1,100 @@
+<template>
+    <v-app id="inspire">
+        <v-row no-gutters>
+            <v-col lg="8" md="7">
+                <v-img
+                    min-height="100vh"
+                    cover
+                    style="background-repeat: repeat-y;"
+                    class="bg-white"
+                    src="./images/bg-left.jpg"
+                ></v-img>
+            </v-col>
+            <v-col lg="4" md="5">
+                <v-container class="fill-height" fluid>
+                    <v-col align-self="center">
+                        <v-card
+                            class="mx-auto px-5 py-12"
+                            elevation="0"
+                            rounded="lg"
+                            width="75%"
+                        >
+                            <div class="d-flex justify-center mb-16 bg-surface-variant">
+                                <v-img
+                                    class="bg-white"
+                                    height="86px"
+                                    aspect-ratio="16/9"
+                                    src="../globalimages/logo.png"
+                                ></v-img>
+                            </div>
+                            <v-alert
+                                density="compact"
+                                :text="alert.message"
+                                :type="alert.type"
+                                class="mt-4 mb-3 w-100"
+                                variant="tonal"
+                            >
+                            </v-alert>
+                            <v-text-field
+                                :label="$t('message.authtext')"
+                                v-model="password"
+                                :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                                :type="visible ? 'text' : 'password'"
+                                :placeholder="$t('message.authtext')"
+                                variant="outlined"
+                                @click:append-inner="visible = !visible"
+                            ></v-text-field>
+                            <div class="text-center">
+                                <v-btn
+                                    :loading="loading"
+                                    @click="login"
+                                    class="mt-5 text-none"
+                                    color="blue"
+                                    size="large"
+                                    variant="elevated"
+                                    block
+                                >
+                                    SUBMIT
+                                    <template v-slot:loader>
+                                        <v-progress-circular indeterminate></v-progress-circular>
+                                    </template>
+                                </v-btn>
+                            </div>
+                        </v-card>
+                    </v-col>
+                </v-container>
+            </v-col>
+        </v-row>
+    </v-app>
+</template>
+
+<script type="module">
+    export default {
+        name: "dekstop",
+        data() {
+            return {
+                visible: false
+            };
+        },
+        computed: {
+            alert() {
+                return this.$store.state.auth.alert
+            },
+            authcode: {
+                get() {
+                    return this.$store.state.auth.authcode;
+                },
+                set(val) {
+                    this.$store.commit("auth/setAuthcode", val);
+                }
+            }
+        },
+        methods: {
+            submit() {
+                this.$store.dispatch("auth/submit")
+            }
+        },
+    };
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/auth-code/components/mobile.vue b/auth-code/components/mobile.vue
new file mode 100644
index 0000000..ea08341
--- /dev/null
+++ b/auth-code/components/mobile.vue
@@ -0,0 +1,87 @@
+<template>
+    <div style="background-image: url(./images/bg-left.jpg); height: 100vh;">
+        <v-container class="fill-height" fluid>
+            <v-col align-self="center">
+                <v-card
+                    class="mx-auto px-5 py-12"
+                    elevation="0"
+                    rounded="lg"
+                    width="90%"
+                >
+                    <div class="d-flex justify-center mb-16 bg-surface-variant">
+                        <v-img
+                            class="bg-white"
+                            height="86px"
+                            aspect-ratio="16/9"
+                            src="../globalimages/logo.png"
+                        ></v-img>
+                    </div>
+                    <v-alert
+                        density="compact"
+                        :text="alert.message"
+                        :type="alert.type"
+                        class="mt-4 mb-3 w-100"
+                        variant="tonal"
+                    >
+                    </v-alert>
+                    <v-text-field
+                        :label="$t('message.authtext')"
+                        v-model="password"
+                        :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                        :type="visible ? 'text' : 'password'"
+                        :placeholder="$t('message.authtext')"
+                        variant="outlined"
+                        @click:append-inner="visible = !visible"
+                    ></v-text-field>
+                    <div class="text-center">
+                        <v-btn
+                            :loading="loading"
+                            @click="login"
+                            class="mt-5 text-none"
+                            color="blue"
+                            size="large"
+                            variant="elevated"
+                            block
+                        >
+                            SUBMIT
+                            <template v-slot:loader>
+                                <v-progress-circular indeterminate></v-progress-circular>
+                            </template>
+                        </v-btn>
+                    </div>
+                </v-card>
+            </v-col>
+        </v-container>
+    </div>
+</template>
+
+<script type="module">
+    export default {
+        name: "mobile",
+        data() {
+            return {
+                visible: false
+            };
+        },
+        computed: {
+            alert() {
+                return this.$store.state.auth.alert
+            },
+            authcode: {
+                get() {
+                    return this.$store.state.auth.authcode;
+                },
+                set(val) {
+                    this.$store.commit("auth/setAuthcode", val);
+                }
+            }
+        },
+        methods: {
+            submit() {
+                
+            }
+        },
+    };
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/auth-code/images/bg-left.jpg b/auth-code/images/bg-left.jpg
new file mode 100644
index 0000000..ca025a5
Binary files /dev/null and b/auth-code/images/bg-left.jpg differ
diff --git a/auth-code/index.html b/auth-code/index.html
new file mode 100644
index 0000000..edb5ee6
--- /dev/null
+++ b/auth-code/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Authentication</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 auth from "./modules/auth.js"
+
+            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,
+                    auth: auth,
+                },
+            });
+
+            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/authentication.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.log("Error loading components: ", error);
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/auth-code/language.js b/auth-code/language.js
new file mode 100644
index 0000000..971e48a
--- /dev/null
+++ b/auth-code/language.js
@@ -0,0 +1,14 @@
+var CustomMessages = {
+    en: {
+        message: {
+            authtext: 'Enter the authentication code',
+            msgInfo: 'Contact Administrator to get the authentication code',
+        },
+    },
+    id: {
+        message: {
+            authtext: 'Masukan kode autentifikasi',
+            msgInfo: "Hubungi Administrator untuk mendapatkan kode autentifikasi",
+        },
+    },
+};
\ No newline at end of file
diff --git a/auth-code/modules/auth.js b/auth-code/modules/auth.js
new file mode 100644
index 0000000..2ef0500
--- /dev/null
+++ b/auth-code/modules/auth.js
@@ -0,0 +1,55 @@
+import * as api from "../api/api.js"
+
+const Store = {
+    state() {
+        return {
+            alert: {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            },
+            authcode: "",
+            loading: false,
+        }
+    },
+    mutations: {
+        setAuthcode(state, data) {
+            state.authcode = data
+        },
+        setAlert(state, data) {
+            state.alert = data
+        },
+        setLoading(state, data) {
+            state.loading = data
+        }
+    },
+    actions: {
+        async submit({state, commit}) {
+            commit('setLoading', true)
+            try {
+                let fn = "linking"
+                let params = {
+                    AuthCodeCode: state.authcode
+                }
+                let headers = {}
+
+                let resp = await api.callApi(fn, params, headers)
+                if (resp.data.status != 'OK') {
+                    commit('setLoading', false);
+                } else {
+                    commit('setLoading', false);
+                    
+                    localStorage.setItem("token", resp.data.token)
+                    localStorage.setItem("user", JSON.stringify(resp.data.data))
+
+                    window.location.replace("")
+                }
+            } catch (error) {
+                console.log(error);
+                commit('setLoading', false);
+            }
+        }
+    }
+}
+
+export default Store
\ No newline at end of file
diff --git a/loginv3/components/dekstop.vue b/loginv3/components/dekstop.vue
index 21cb6da..2c74cb7 100644
--- a/loginv3/components/dekstop.vue
+++ b/loginv3/components/dekstop.vue
@@ -10,23 +10,22 @@
           style="background-repeat: repeat-y"
           class="bg-white"
           src="./images/bg-left.jpg"
-          cover
         ></v-img>
       </v-col>
       <v-col lg="4" md="5">
-        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
-          <v-img
-            class="bg-white"
-            height="12px"
-            aspect-ratio="1"
-            src="../globalimages/logo.png"
-          ></v-img>
-        </div>
-        <v-container class="mt-16">
+        <v-container class="fill-height" fluid>
           <v-row no-gutters justify="center">
             <v-col>
               <div class="d-flex justify-center">
                 <v-card class="mx-auto px-12" elevation="0" rounded="lg">
+                  <div class="d-flex justify-center mb-16 bg-surface-variant">
+                      <v-img
+                          class="bg-white"
+                          height="86px"
+                          aspect-ratio="16/9"
+                          src="../globalimages/logo.png"
+                      ></v-img>
+                  </div>
                   <div class="d-flex mb-6">
                     <v-sheet class="">
                       <h2 class="text-h6 font-weight-black">
@@ -55,19 +54,6 @@
                     :placeholder="$t('message.placeholderEmail')"
                     variant="outlined"
                   ></v-text-field>
-                  <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
                   <v-text-field
                     :label="$t('message.password')"
                     v-model="password"
@@ -93,6 +79,16 @@
                         <v-progress-circular indeterminate></v-progress-circular>
                       </template>
                     </v-btn>
+                    <v-btn
+                      class="my-5 text-none"
+                      size="large"
+                      @click="loginGoogle"
+                      variant="outlined"
+                      block
+                    >
+                      <v-img class="mr-2" src="./images/logo_google.svg" width="20px" height="20px"></v-img>
+                      SIGN IN WITH GOOGLE
+                    </v-btn>
                   </div>
                 </v-card>
               </div>
@@ -135,6 +131,9 @@ export default {
       set(val) {
         this.$store.commit("login/setPassword", val);
       },
+      loginGoogle() {
+        this.$store.dispatch("login/loginGoogle")
+      }
     },
   },
   methods: {
diff --git a/loginv3/components/mobile.vue b/loginv3/components/mobile.vue
index 682e9fd..ef75877 100644
--- a/loginv3/components/mobile.vue
+++ b/loginv3/components/mobile.vue
@@ -1,86 +1,95 @@
 <template>
-  <div style="background-image: url(./images/bg-left.jpg);">
-    <v-container class="h-100 w-100">
-      <v-col align-self="center">
-        <v-card
-          class="mx-auto px-5 py-12"
-          elevation="0"
-          rounded="lg"
-          width="90%"
-        >
-          <div class="d-flex justify-center mb-6 bg-surface-variant">
-            <v-img
-              class="bg-white"
-              height="86px"
-              aspect-ratio="16/9"
-              src="../globalimages/logo.png"
-            ></v-img>
-          </div>
-          <div class="d-flex mb-6">
-            <v-sheet class="">
-              <h2 class="text-h6 font-weight-black">
-                {{ $t("message.title") }}
-              </h2>
-              <p class="text-subtitle-1" style="color: #637381;">
-                {{ $t("message.sublogin") }}
-              </p>
-            </v-sheet>
-          </div>
-          <v-alert
-            density="compact"
-            :text="alert.message"
-            :type="alert.type"
-            class="mt-4 mb-3 w-100"
-            variant="tonal"
+  <div style="background-image: url(./images/bg-left.jpg); height: 100vh;">
+    <v-container class="fill-height" fluid>
+        <v-col align-self="center">
+          <v-card
+            class="mx-auto px-5 py-12"
+            elevation="0"
+            rounded="lg"
+            width="90%"
           >
-          </v-alert>
-          <v-text-field
-            class="mt-3"
-            v-model="email"
-            :label="$t('message.email')"
-            :placeholder="$t('message.placeholderEmail')"
-            variant="outlined"
-          ></v-text-field>
-          <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
-          <v-text-field
-            :label="$t('message.password')"
-            v-model="password"
-            :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
-            :type="visible ? 'text' : 'password'"
-            :placeholder="$t('message.placeholderPassword')"
-            variant="outlined"
-            @click:append-inner="visible = !visible"
-          ></v-text-field>
-          <div class="text-center">
-            <v-btn
-              :loading="loading"
-              @click="login"
-              class="mt-5 text-none"
-              color="blue"
-              size="large"
-              variant="elevated"
-              block
+            <div class="d-flex justify-center mb-6 bg-surface-variant">
+              <v-img
+                class="bg-white"
+                height="86px"
+                aspect-ratio="16/9"
+                src="../globalimages/logo.png"
+              ></v-img>
+            </div>
+            <div class="d-flex mb-6">
+              <v-sheet class="">
+                <h2 class="text-h6 font-weight-black">
+                  {{ $t("message.title") }}
+                </h2>
+                <p class="text-subtitle-1" style="color: #637381;">
+                  {{ $t("message.sublogin") }}
+                </p>
+              </v-sheet>
+            </div>
+            <v-alert
+              density="compact"
+              :text="alert.message"
+              :type="alert.type"
+              class="mt-4 mb-3 w-100"
+              variant="tonal"
             >
-              {{ $t("message.login") }}
-              <template v-slot:loader>
-                <v-progress-circular indeterminate></v-progress-circular>
-              </template>
-            </v-btn>
-          </div>
-        </v-card>
-      </v-col>
+            </v-alert>
+            <v-text-field
+              class="mt-3"
+              v-model="email"
+              :label="$t('message.email')"
+              :placeholder="$t('message.placeholderEmail')"
+              variant="outlined"
+            ></v-text-field>
+            <!-- <div
+                  class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+                >
+                  {{ $t("message.password") }}
+                  <a
+                    class="text-caption text-decoration-none text-blue"
+                    href="#"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    {{ $t("message.forgotPassword") }}</a
+                  >
+                </div> -->
+            <v-text-field
+              :label="$t('message.password')"
+              v-model="password"
+              :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+              :type="visible ? 'text' : 'password'"
+              :placeholder="$t('message.placeholderPassword')"
+              variant="outlined"
+              @click:append-inner="visible = !visible"
+            ></v-text-field>
+            <div class="text-center">
+              <v-btn
+                :loading="loading"
+                @click="login"
+                class="mt-5 text-none"
+                color="blue"
+                size="large"
+                variant="elevated"
+                block
+              >
+                {{ $t("message.login") }}
+                <template v-slot:loader>
+                  <v-progress-circular indeterminate></v-progress-circular>
+                </template>
+              </v-btn>
+              <v-btn
+                class="my-5 text-none"
+                size="large"
+                variant="outlined"
+                block
+              >
+                <v-img class="mr-2" src="./images/logo_google.svg" width="20px" height="20px"></v-img>
+                SIGN IN WITH GOOGLE
+              </v-btn>
+            </div>
+          </v-card>
+        </v-col>
     </v-container>
   </div>
 </template>
diff --git a/loginv3/images/google_logo.png b/loginv3/images/google_logo.png
new file mode 100644
index 0000000..e7d106c
Binary files /dev/null and b/loginv3/images/google_logo.png differ
diff --git a/loginv3/images/logo_google.svg b/loginv3/images/logo_google.svg
new file mode 100644
index 0000000..c0669b3
--- /dev/null
+++ b/loginv3/images/logo_google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>
\ No newline at end of file
diff --git a/loginv3/index.html b/loginv3/index.html
index 5b0569e..696a72d 100644
--- a/loginv3/index.html
+++ b/loginv3/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BISKEU</title>
+    <title>Login</title>
     <!-- Vuetify CSS -->
     <link href="../css/vuetify.css" rel="stylesheet" />
     <!-- Local Stylesheet for Fonts -->
diff --git a/loginv3/modules/login.js b/loginv3/modules/login.js
index 6fb3a3b..b5b32ef 100644
--- a/loginv3/modules/login.js
+++ b/loginv3/modules/login.js
@@ -1,7 +1,7 @@
 
 // const URL = "/westone-api/v1/system/auth";
-
-const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+// const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth";
+const apiURL = "http://localhost:8080/api/v1/auth";
 
 const store = {
     namespaced: true,
@@ -63,12 +63,12 @@ const store = {
                 message: window.i18n.global.t('message.msgInfo')
             }
             let params = {
-                username: state.email,
+                email: state.email,
                 password: state.password
             };
-            console.log(params);
+            
             try {
-                const response = await axios.post(URL + '/login', params);
+                const response = await axios.post(apiURL + '/login', params);
                 console.log(response.data)
                 if (response.data.status != 'OK') {
                     commit('setLoading', false);
@@ -81,13 +81,19 @@ const store = {
                 } else {
                     commit('setLoading', false);
                     commit('setData', response.data.data);
-                    localStorage.setItem("token", response.data.data.token)
-                    localStorage.setItem('user', JSON.stringify(response.data.data.user))
+                    localStorage.setItem("token", response.data.token)
+                    localStorage.setItem('user', JSON.stringify(response.data.data))
                     //console.log(localStorage.getItem("token"))
                     // if (data.user.is_courier === 'Y' && window.innerWidth < 600)
                     //     window.location = "/one-ui/test/vuex/one-courier-mobile/";
                     // else
                     // window.location = "/" + response.data.data.user.M_UserGroupDashboard;
+                    
+                    if (response.data.type === 'westone') {
+
+                    } else {
+                        window.location.href = "/auth-code";
+                    }
 
                 }
                 commit('setAlert', alert)
@@ -97,6 +103,9 @@ const store = {
 
             }
         },
+        async loginGoogle() {
+            window.location.href = apiURL + "/google/login"
+        },
         async loginState({ state, commit }) {
             commit('setLoading', true);
             const params = {
@@ -105,7 +114,7 @@ const store = {
             };
 
             try {
-                const response = await axios.post(URL + '/login', params);
+                const response = await axios.post(apiURL + '/login', params);
                 if (response.status != 'OK') {
                     commit('setLoading', false);
 
@@ -121,7 +130,7 @@ const store = {
         },
         async LoginParam({ commit }, params) {
             try {
-                const response = await axios.post(URL + '/login', params);
+                const response = await axios.post(apiURL + '/login', params);
                 commit('setData', response.data);
             } catch (error) {
                 commit('setError', error);
diff --git a/registration/components/datatable_patient.vue b/registration/components/datatable_patient.vue
index 3c7b999..595ebf3 100644
--- a/registration/components/datatable_patient.vue
+++ b/registration/components/datatable_patient.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="mb-3">
+    <v-card class="mb-3 rounded-lg" elevation="0">
       <v-card-text>
         <div class="d-flex">
           <v-text-field
@@ -10,79 +10,74 @@
             :loading="loading"
             hint="NAMA + DOB (DD-MM-YYYY) + NIK + HP"
             hide-details="auto"
-            class="me-auto pr-1"
+            class="me-auto pr-4"
             density="compact"
+            variant="outlined"
           >
           </v-text-field>
-
-          <!--<v-btn-toggle
-          v-model="type_card"
-          variant="outlined"
-          divided
-          class="mt-1"
-          density="compact"
-  
-        >
-          <v-btn >
-            <v-icon size="x-large"  icon="mdi-badge-account"></v-icon>
+          <v-btn class="rounded-lg bg-primary mr-4" size="large">
+              <iconify-icon
+                  style="font-size: 1.75rem;"
+                  icon="fluent:search-24-regular"
+              ></iconify-icon>
           </v-btn>
-  
-          <v-btn>
-            <v-icon size="x-large"  icon="mdi-book-account"></v-icon>
+          <v-btn class="rounded-lg bg-primary" size="large">
+              <iconify-icon
+                  style="font-size: 1.75rem;"
+                  icon="fluent:add-24-regular"
+              ></iconify-icon>
           </v-btn>
-        </v-btn-toggle>-->
         </div>
       </v-card-text>
-    </v-card>
-    <v-card
-      border="xl"
-      variant="outlined"
-      class="scroll-container pa-2"
-      style="height: 70vh"
-    >
-      <v-list selectable lines="three" item-props density="compact">
-        <v-list-subheader inset>Hasil Pencarian Pasien</v-list-subheader>
 
-        <v-list-item
-          v-for="(item, index) in items"
-          :key="index"
-          @click="handleSelect(item)"
-        >
-          <template v-slot:prepend>
-            <v-avatar color="grey-lighten-1">
-              <v-img
-                :src="item.prependAvatar"
-                class="rounded-circle"
-                max-width="40"
-              ></v-img>
-            </v-avatar>
-          </template>
-          <template v-slot:title>
-            <div v-html="item.title"></div>
-          </template>
-          <template v-slot:subtitle>
-            <div v-html="item.subtitle"></div>
-            <v-chip class="mt-1 mr-1" color="pink" label size="small">
-              <v-icon icon="mdi-cake" start></v-icon>
-              {{ item.dob }}
-            </v-chip>
+      <div class="mx-4">
+        <v-list selectable lines="three" item-props density="compact">
+          <v-list-subheader class="font-weight-medium">Hasil Pencarian Pasien</v-list-subheader>
 
-            <v-chip class="mt-1 mr-1" color="primary" label size="small">
-              <v-icon icon="mdi-phone" start></v-icon>
-              {{ item.hp }}
-            </v-chip>
-          </template>
+          <v-list-item
+            class="rounded-lg"
+            color="primary"
+            v-for="(item, index) in items"
+            :key="index"
+            @click="handleSelect(item)"
+          >
+            <template v-slot:prepend>
+              <v-avatar color="grey-lighten-1">
+                <v-img
+                  :src="item.prependAvatar"
+                  class="rounded-circle"
+                  max-width="40"
+                ></v-img>
+              </v-avatar>
+            </template>
+            <template v-slot:title>
+              <p class="font-weight-medium">{{ item.title }}</p>
+            </template>
+            <template v-slot:subtitle>
+              <p class="font-weight-medium text-primary">{{ item.name }}</p>
+              <p class="text-black">{{ item.subtitle }}</p>
+              <v-chip class="mt-1 mr-1" color="success" label size="small">
+                <v-icon icon="mdi-cake" start></v-icon>
+                {{ item.dob }}
+              </v-chip>
 
-          <template v-slot:append>
-            <v-btn
-              v-if="item.selected"
-              color="green"
-              icon="mdi-check"
-              variant="text"
-            ></v-btn>
-          </template>
-        </v-list-item>
-      </v-list>
+              <v-chip class="mt-1 mr-1" color="primary" label size="small">
+                <v-icon icon="mdi-phone" start></v-icon>
+                {{ item.hp }}
+              </v-chip>
+            </template>
+
+            <!-- <template v-slot:append>
+              <v-btn
+                v-if="item.selected"
+                color="primary"
+                icon="mdi-check"
+                variant="text"
+              ></v-btn>
+            </template> -->
+          </v-list-item>
+        </v-list>
+      </div>
     </v-card>
   </div>
 </template>
@@ -92,7 +87,8 @@ const items = [
   {
     prependAvatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
     title: "LAA0000082",
-    subtitle: `<span class="text-primary">Fatiha Rizku Nur Imansari</span> &mdash; Giwangan Tegal Turi UH.7 144 Sawunggaling, Wonokromo, Surabaya`,
+    name: "Fatiha Rizku Nur Imansari",
+    subtitle: `Giwangan Tegal Turi UH.7 144 Sawunggaling, Wonokromo, Surabaya`,
     dob: "19-01-2001",
     hp: "087731221123",
   },
@@ -100,7 +96,8 @@ const items = [
   {
     prependAvatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
     title: "LAA0007904",
-    subtitle: `<span class="text-primary">Stephan Wilson Mandala Putra Aditama</span> &mdash; Taman Pondok Jati BI/5 Sawunggaling, Wonokromo, Surabaya`,
+    name: "Stephan Wilson Mandala Putra Aditama",
+    subtitle: `Taman Pondok Jati BI/5 Sawunggaling, Wonokromo, Surabaya`,
     dob: "07-07-2002",
     hp: "081234222126",
   },
@@ -108,8 +105,8 @@ const items = [
   {
     prependAvatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
     title: "LAA0000035",
-    subtitle:
-      '<span class="text-primary">Ujang Taufik S.Sastramidjaja</span> &mdash; JL. Winata NO.14 Sawunggaling, Wonokromo, Surabaya?',
+    name: "Ujang Taufik S.Sastramidjaja",
+    subtitle: 'JL. Winata NO.14 Sawunggaling, Wonokromo, Surabaya',
     dob: "14-09-1988",
     hp: "085111222129",
     selected: false,
@@ -118,8 +115,8 @@ const items = [
   {
     prependAvatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
     title: "LAA0000072",
-    subtitle:
-      '<span class="text-primary">Santi Yuliana</span> &mdash; Darmo Permai TIM 2/41 Sawunggaling, Wonokromo, Surabaya',
+    name: "Santi Yuliana",
+    subtitle: 'Darmo Permai TIM 2/41 Sawunggaling, Wonokromo, Surabaya',
     dob: "11-10-2004",
     hp: "0852343421900",
     selected: true,
@@ -128,8 +125,8 @@ const items = [
   {
     prependAvatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
     title: "LAA0010689",
-    subtitle:
-      '<span class="text-primary">Cindy Tiara Hadianti</span> &mdash; Gunung Sari Indah OO-9 Sawunggaling, Wonokromo, Surabaya',
+    name: "Cindy Tiara Hadianti",
+    subtitle: 'Gunung Sari Indah OO-9 Sawunggaling, Wonokromo, Surabaya',
     dob: "17-01-2001",
     hp: "087734211126",
     selected: false,
@@ -137,157 +134,157 @@ const items = [
 ];
 </script>
 <script>
-export default {
-  name: "leftcomp",
-  components: {},
-  mounted() {},
-  data() {
-    return {
-      selected: {},
-      type_card: 0,
-      value: "",
-      loading: false,
-      expanded: [],
-      headers: [
-        {
-          title: "No Reg", // pastikan menggunakan 'text' bukan 'title'
-          align: "start",
-          key: "M_PatientNoReg",
-          sortable: true,
-          width: "15%",
-          value: "M_PatientNoReg", // tambahkan 'value' untuk identifikasi
+  export default {
+    name: "leftcomp",
+    components: {},
+    mounted() {},
+    data() {
+      return {
+        selected: {},
+        type_card: 0,
+        value: "",
+        loading: false,
+        expanded: [],
+        headers: [
+          {
+            title: "No Reg", // pastikan menggunakan 'text' bukan 'title'
+            align: "start",
+            key: "M_PatientNoReg",
+            sortable: true,
+            width: "15%",
+            value: "M_PatientNoReg", // tambahkan 'value' untuk identifikasi
+          },
+          {
+            title: "Nama",
+            align: "start",
+            key: "M_PatientName",
+            sortable: true,
+            width: "35%",
+            value: "PatientFullName", // tambahkan 'value' untuk identifikasi
+          },
+          {
+            title: "Alamat",
+            align: "start",
+            key: "M_PatientAddress",
+            sortable: true,
+            value: "M_PatientAddressDescription", // tambahkan 'value' untuk identifikasi
+          },
+        ],
+      };
+    },
+    computed: {
+      search: {
+        get() {
+          return this.$store.state.patient.search;
         },
-        {
-          title: "Nama",
-          align: "start",
-          key: "M_PatientName",
-          sortable: true,
-          width: "35%",
-          value: "PatientFullName", // tambahkan 'value' untuk identifikasi
+        set(data) {
+          this.$store.commit("setSearch", data);
         },
-        {
-          title: "Alamat",
-          align: "start",
-          key: "M_PatientAddress",
-          sortable: true,
-          value: "M_PatientAddressDescription", // tambahkan 'value' untuk identifikasi
+      },
+      patients() {
+        return this.$store.state.patient.patients;
+      },
+      selected_patient: {
+        get() {
+          return this.$store.state.patient.selected_patient;
+        },
+        set(data) {
+          this.$store.commit("setSelectedPatient", data);
         },
-      ],
-    };
-  },
-  computed: {
-    search: {
-      get() {
-        return this.$store.state.patient.search;
       },
-      set(data) {
-        this.$store.commit("setSearch", data);
+      current_page: {
+        get() {
+          return this.$store.state.patient.current_page;
+        },
+        set(data) {
+          this.$store.commit("setCurrentPage", data);
+        },
+      },
+      loading: {
+        get() {
+          return this.$store.state.patient.loading;
+        },
+        set(data) {
+          this.$store.commit("setLoading", data);
+        },
+      },
+      loadmore: {
+        get() {
+          return this.$store.state.patient.loadmore;
+        },
+        set(data) {
+          this.$store.commit("setLoadMore", data);
+        },
+      },
+      itemsperpage: {
+        get() {
+          return this.$store.state.patient.itemsperpage;
+        },
+        set(data) {
+          this.$store.commit("setItemsPerPage", data);
+        },
+      },
+      sortby: {
+        get() {
+          return this.$store.state.patient.sortby;
+        },
+        set(data) {
+          this.$store.commit("setSortBy", data);
+        },
       },
     },
-    patients() {
-      return this.$store.state.patient.patients;
-    },
-    selected_patient: {
-      get() {
-        return this.$store.state.patient.selected_patient;
+    methods: {
+      handleSelect(item) {
+        console.log("Selected item:", item);
+        this.selected = item; // Simpan item yang dipilih
       },
-      set(data) {
-        this.$store.commit("setSelectedPatient", data);
+      selectItem(data) {
+        this.selected_patient = data;
       },
-    },
-    current_page: {
-      get() {
-        return this.$store.state.patient.current_page;
+      isItemSelected(data) {
+        return data.M_PatientID === this.$store.state.patient.selected_patient.M_PatientID;
       },
-      set(data) {
-        this.$store.commit("setCurrentPage", data);
+      searchPat() {
+        this.current_page = 1;
+        this.searchPatients();
       },
-    },
-    loading: {
-      get() {
-        return this.$store.state.patient.loading;
-      },
-      set(data) {
-        this.$store.commit("setLoading", data);
-      },
-    },
-    loadmore: {
-      get() {
-        return this.$store.state.patient.loadmore;
-      },
-      set(data) {
-        this.$store.commit("setLoadMore", data);
-      },
-    },
-    itemsperpage: {
-      get() {
-        return this.$store.state.patient.itemsperpage;
-      },
-      set(data) {
-        this.$store.commit("setItemsPerPage", data);
-      },
-    },
-    sortby: {
-      get() {
-        return this.$store.state.patient.sortby;
-      },
-      set(data) {
-        this.$store.commit("setSortBy", data);
-      },
-    },
-  },
-  methods: {
-    handleSelect(item) {
-      console.log("Selected item:", item);
-      this.selected = item; // Simpan item yang dipilih
-    },
-    selectItem(data) {
-      this.selected_patient = data;
-    },
-    isItemSelected(data) {
-      return data.M_PatientID === this.$store.state.patient.selected_patient.M_PatientID;
-    },
-    searchPat() {
-      this.current_page = 1;
-      this.searchPatients();
-    },
-    searchPatients() {
-      if (this.search != "") {
-        this.loading = true;
-        const formattedSortBy =
-          this.sortby.length > 0 ? `${this.sortby[0].key}:${this.sortby[0].order}` : "";
-        if (this.search !== "") {
-          this.$store
-            .dispatch("searchPatients", {
-              current_page: this.current_page,
-              items_per_page: this.itemsperpage,
-              sort_by: formattedSortBy,
-              search: this.search,
-            })
-            .then(() => {
-              this.loading = false;
-            });
+      searchPatients() {
+        if (this.search != "") {
+          this.loading = true;
+          const formattedSortBy =
+            this.sortby.length > 0 ? `${this.sortby[0].key}:${this.sortby[0].order}` : "";
+          if (this.search !== "") {
+            this.$store
+              .dispatch("searchPatients", {
+                current_page: this.current_page,
+                items_per_page: this.itemsperpage,
+                sort_by: formattedSortBy,
+                search: this.search,
+              })
+              .then(() => {
+                this.loading = false;
+              });
+          }
         }
-      }
+      },
+      loadMore() {
+        this.current_page += 1;
+        this.searchPatients();
+      },
+      handleSort(sortBy) {
+        this.sortby = sortBy.map((sort) => ({
+          key: sort.key,
+          order: sort.order === "desc" ? "desc" : "asc",
+        }));
+        this.current_page = 1;
+        this.searchPatients(); // Panggil searchPatients setelah sortBy diupdate
+      },
     },
-    loadMore() {
-      this.current_page += 1;
-      this.searchPatients();
-    },
-    handleSort(sortBy) {
-      this.sortby = sortBy.map((sort) => ({
-        key: sort.key,
-        order: sort.order === "desc" ? "desc" : "asc",
-      }));
-      this.current_page = 1;
-      this.searchPatients(); // Panggil searchPatients setelah sortBy diupdate
-    },
-  },
-};
+  };
 </script>
 
 <style scoped>
-.row-pointer >>> tbody tr :hover {
-  cursor: pointer;
-}
+  .row-pointer >>> tbody tr :hover {
+    cursor: pointer;
+  }
 </style>
diff --git a/registration/components/detail_order.vue b/registration/components/detail_order.vue
new file mode 100644
index 0000000..7eee7c0
--- /dev/null
+++ b/registration/components/detail_order.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">DETAIL ORDER</v-toolbar-title>
+            </v-toolbar>
+            
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "detailordercomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                kelpelanggan: [
+                    { id: 1, name: "sasone 2024" },
+                    { id: 2, name: "sasone 2023" },
+                ],
+                agreement: [
+                    { id: 1, name: "mcu karyawan 2024" },
+                    { id: 2, name: "mcu karyawan 2023" }
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/registration/components/form_patient.vue b/registration/components/form_patient.vue
index b354be0..a941b19 100644
--- a/registration/components/form_patient.vue
+++ b/registration/components/form_patient.vue
@@ -1,23 +1,15 @@
 <template>
   <div>
-    <v-card class="scroll-container pa-2" style="height: 70vh">
-      <v-toolbar color="amber-lighten-5" density="compact">
-        <v-toolbar-title class="text-subtitle-1 font-weight-medium"
-          >DATA PASIEN</v-toolbar-title
-        >
-
-        <v-spacer></v-spacer>
-
-        <v-btn icon>
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
+    <v-card class="scroll-container pa-4 rounded-lg" elevation="0">
+      <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+        <v-toolbar-title class="text-title-1 font-weight-bold">DATA PASIEN</v-toolbar-title>
       </v-toolbar>
-      <v-row no-gutters class="mt-2">
-        <v-col cols="3">
+      <v-row no-gutters class="mt-4">
+        <v-col cols="2">
           <div class="d-flex mb-2">
             <v-img
               :aspect-ratio="1"
-              class="bg-white"
+              class="bg-grey"
               src="https://cdn.vuetifyjs.com/images/lists/4.jpg"
               width="250"
               rounded
@@ -45,80 +37,52 @@
           <div class="d-flex mb-2">
             <v-btn
               color="primary"
-              text="Riwayat Order"
+              text="Riwayat"
               class="flex-grow-1"
               variant="tonal"
               flat
             ></v-btn>
           </div>
         </v-col>
-        <v-col class="pl-2" cols="9">
-          <v-row no-gutters class="mt-0">
-            <v-col cols="12">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                density="compact"
-                label="PID"
-                hide-details="auto"
-                variant="underlined"
-              ></v-text-field>
-            </v-col>
-          </v-row>
-          <v-row no-gutters class="mt-3">
-            <v-col cols="3" class="pr-2">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                hide-details="auto"
-                density="compact"
-                label="Awalan"
-                variant="underlined"
-              ></v-text-field>
+        <v-col class="pl-4" cols="10">
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="PID"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Nama"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Tanggal Lahir"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Umur"
+          ></v-text-field>
+          <v-row no-gutters class="mb-2">
+            <v-col cols="6">
+              <v-select
+              :items="genders" return-object class="pr-1" hide-details="auto"
+              density="compact" label="Kartu Identitas" color="primary"
+              item-title="name" variant="outlined"
+              ></v-select>
             </v-col>
             <v-col cols="6">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                hide-details="auto"
-                density="compact"
-                label="Nama"
-                variant="underlined"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="3" class="pl-2">
-              <v-text-field
-                v-model="first"
-                color="primary"
-                hide-details="auto"
-                density="compact"
-                label="Akhiran"
-                variant="underlined"
+              <v-text-field class="pl-1" variant="outlined" density="compact" hide-details="auto"
+                color="primary" v-model="first" label="Nomor ID"
               ></v-text-field>
             </v-col>
           </v-row>
-          <v-row no-gutters class="mt-3">
-            <v-col cols="6" class="pr2">
-              <v-select
-                :items="genders"
-                density="compact"
-                label="Jenis Kelamin"
-                return-object
-                item-title="name"
-                variant="underlined"
-              ></v-select>
-            </v-col>
-            <v-col cols="6" class="pl-2">
-              <v-select
-                :items="titles"
-                density="compact"
-                label="Sapaan"
-                return-object
-                item-title="name"
-                variant="underlined"
-              ></v-select>
-            </v-col>
-          </v-row>
+          <v-textarea class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Alamat" rows="3"
+          ></v-textarea>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Diagnosa"
+          ></v-text-field>
+          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Catatan Pasien"
+          ></v-text-field>
+          <v-text-field variant="outlined" density="compact" hide-details="auto"
+            color="primary" v-model="first" label="Catatan FO"
+          ></v-text-field>
         </v-col>
       </v-row>
     </v-card>
diff --git a/registration/components/form_pemeriksaan.vue b/registration/components/form_pemeriksaan.vue
new file mode 100644
index 0000000..5f0757b
--- /dev/null
+++ b/registration/components/form_pemeriksaan.vue
@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">PEMERIKSAAN</v-toolbar-title>
+            </v-toolbar>
+            <v-text-field 
+                append-inner-icon="mdi-magnify" hide-details="auto" variant="outlined"
+                class="my-4" density="compact" label="Pemeriksaan" color="primary"
+            ></v-text-field>
+            <v-row no-gutters class="mt-2">
+                <v-col v-for="x in pemeriksaan" cols="6" class="pa-1">
+                    <v-btn block color="primary" variant="tonal" style="justify-content: start;">
+                        {{ x.name }}
+                    </v-btn>
+                </v-col>
+            </v-row>
+            <v-divider class="mt-4 border-opacity-25"></v-divider>
+            <v-row no-gutters class="mt-4">
+                <v-col cols="10" align-self="center">
+                    <p class="text-secondary-darken font-weight-medium">Apakah persyaratan dipenuhi?</p>
+                </v-col>
+                <v-col cols="2" class="d-flex">
+                    <v-spacer/>
+                    <v-btn color="error" variant="tonal" class="mr-2">
+                        <iconify-icon style="font-size: 1.5rem;" icon="fluent:dismiss-24-regular"></iconify-icon>
+                    </v-btn>
+                    <v-btn color="success" variant="tonal">
+                        <iconify-icon style="font-size: 1.5rem;" icon="fluent:checkmark-24-regular"></iconify-icon>
+                    </v-btn>
+                </v-col>
+            </v-row>
+            <v-row no-gutters class="mt-4">
+                <v-col class="pa-1" cols="6" v-for="syarat in persyaratan">
+                    <p class="font-weight-medium">{{ syarat.name }}</p>
+                </v-col>
+            </v-row>
+            <v-switch inset color="success" label="Hanya terima sample" class="mt-2"></v-switch>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "formpemeriksaancomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                pemeriksaan: [
+                    { id: 1, name: "SGOT" },
+                    { id: 2, name: "SGPT" },
+                    { id: 3, name: "Asam Urat" },
+                    { id: 4, name: "Panel Creatinin" },
+                ],
+                persyaratan: [
+                    { id: 1, name: "Aktifitas Fisik" },
+                    { id: 2, name: "Hamil" },
+                    { id: 3, name: "Vitamin C" },
+                    { id: 4, name: "Alkohol" },
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/registration/components/form_pengirim.vue b/registration/components/form_pengirim.vue
new file mode 100644
index 0000000..141e32b
--- /dev/null
+++ b/registration/components/form_pengirim.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">PENGIRIM DAN BAHASA</v-toolbar-title>
+            </v-toolbar> 
+            <v-row no-gutters class="mt-4">
+                <v-col cols="6">
+                    <v-select
+                        :items="pengirim" return-object class="pr-1 mb-2" hide-details="auto"
+                        density="compact" label="Pengirim"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                    <v-select
+                        :items="bahasa" return-object class="pr-1" hide-details="auto"
+                        density="compact" label="Bahasa 1"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                </v-col>
+                <v-col cols="6">
+                    <v-select
+                        :items="alamat" return-object class="pl-1 mb-2" hide-details="auto"
+                        density="compact" label="Alamat"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                    <v-select
+                        :items="bahasa" return-object class="pl-1" hide-details="auto"
+                        density="compact" label="Bahasa 2"
+                        item-title="name" variant="outlined"
+                    ></v-select>
+                </v-col>
+            </v-row>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "pengirimcomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                pengirim: [
+                    { id: 1, name: "Dr. Andra" },
+                    { id: 2, name: "Dr. Reffi" },
+                ],
+                bahasa: [
+                    { id: 1, name: "Indonesia" },
+                    { id: 2, name: "Inggris" },
+                ],
+                alamat: [
+                    { id: 1, name: "Malang" },
+                    { id: 2, name: "Surabaya" },
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/registration/components/kelpelanggan_agreement.vue b/registration/components/kelpelanggan_agreement.vue
new file mode 100644
index 0000000..e1ab6cc
--- /dev/null
+++ b/registration/components/kelpelanggan_agreement.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <v-card class="pa-4 rounded-lg" elevation="0">
+            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
+                <v-toolbar-title class="text-title-1 font-weight-bold">KEL. PELANGGAN DAN AGREEMENT</v-toolbar-title>
+            </v-toolbar>
+            <div class="mt-4">
+                <v-select 
+                    :items="kelpelanggan" return-object class="mb-2" hide-details="auto" color="primary"
+                    density="compact" label="Kel. Pelanggan" item-title="name" variant="outlined"
+                ></v-select>
+                <v-select 
+                    :items="agreement" return-object hide-details="auto" color="primary"
+                    density="compact" label="Agreement" item-title="name" variant="outlined"
+                ></v-select>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "pelangganagreementcomp",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                kelpelanggan: [
+                    { id: 1, name: "sasone 2024" },
+                    { id: 2, name: "sasone 2023" },
+                ],
+                agreement: [
+                    { id: 1, name: "mcu karyawan 2024" },
+                    { id: 2, name: "mcu karyawan 2023" }
+                ]
+            }
+        },
+        computed: {
+            
+        },
+        methods: {
+            
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/registration/components/left.vue b/registration/components/left.vue
deleted file mode 100644
index c749636..0000000
--- a/registration/components/left.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <div>
-        <v-container class="pt-0" fluid>
-            <div class="rounded-lg pa-5 mb-5">
-                <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
-            </div>
-            <v-data-table
-                v-model="selected_patients"
-                :items="patients"
-                :headers="headers"
-                hide-default-footer
-                class="row-pointer"
-            >
-                <template v-slot:headers="{ columns }">
-                    <tr>
-                        <template v-for="column in columns" :key="column.key">
-                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
-                                <span>{{ column.title }}</span>
-                            </td>
-                        </template>
-                    </tr>
-                </template>
-                <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: this.$t('message.tablePatient.date'),
-                    align: "start",
-                    sortable: false,
-                    key: "date",
-                    width: "15%",
-                    class: "font-weight-bold",
-                },
-                {
-                    title: this.$t('message.tablePatient.noreg'),
-                    align: "start",
-                    sortable: false,
-                    key: "noreg",
-                    width: "20%",
-                    class: "font-weight-bold",
-                },
-                {
-                    title: this.$t('message.tablePatient.group'),
-                    align: "start",
-                    sortable: false,
-                    key: "group",
-                    width: "25%",
-                    class: "font-weight-bold",
-                },
-                {
-                    title: this.$t('message.tablePatient.name'),
-                    align: "start",
-                    sortable: false,
-                    key: "name",
-                    width: "25%",
-                    class: "font-weight-bold",
-                },
-                {
-                    title: this.$t('message.tablePatient.status'),
-                    align: "start",
-                    sortable: false,
-                    key: "status",
-                    width: "15%",
-                    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);
-            this.selected_patients = 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/registration/components/main.vue b/registration/components/main.vue
index 8a0a6c5..f936d7c 100644
--- a/registration/components/main.vue
+++ b/registration/components/main.vue
@@ -1,40 +1,31 @@
 <template>
-  <v-app style="background:#e8eaf6" >
+  <v-app id="inspire">
     <one-navbar></one-navbar>
-    <v-main class="pt-12">
-
-      <div class="ml-2 mr-2 mt-0 rounded h-100">
+    <v-main class="mt-3 mb-3 mx-2">
+      <div class="pa-4 bg-primary-lighten rounded-xl h-100">
         <one-tabs></one-tabs>
-        <v-row>
-          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3">
-            <one-left></one-left>
-          </v-col>
-          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3">
-            <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 NavbarComponent from "../../globalcomponent/one-navbar.vue";
+  import Tabs from "./tabs.vue";
 
-import Tabs from "./tabs.vue";
-export default {
-  name: "registration",
-  components: {
-    "one-navbar": NavbarComponent,
-    "one-tabs": Tabs,
-  },
-  mounted() {},
-  data() {
-    return {
-      visible: false,
-    };
-  },
-  computed: {},
-  methods: {},
-};
+  export default {
+    name: "registration",
+    components: {
+      "one-navbar": NavbarComponent,
+      "one-tabs": Tabs,
+    },
+    mounted() {},
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {},
+    methods: {},
+  };
 </script>
diff --git a/registration/components/right.vue b/registration/components/right.vue
deleted file mode 100644
index b5543bc..0000000
--- a/registration/components/right.vue
+++ /dev/null
@@ -1,275 +0,0 @@
-<template>
-    <div>
-        <v-container class="rounded-lg" fluid>
-            <div class="rounded-lg pa-5">
-                <v-row>
-                    <v-col cols="2">
-                        <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
-                            <!-- placeholder photo -->
-                        </div>
-                    </v-col>
-                    <v-col cols="8">
-                        <h4>{{ selected.noreg }}</h4>
-                        <h4 class="text-grey-darken-1">{{ selected.nama }}</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"
-                            v-show="selected.status === 'Call'"
-                        >
-                            <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"
-                            @click="setCall(selected)"
-                            v-show="selected.doneCall !== 'Y'"
-                        >
-                            <iconify-icon
-                                class="text-secondary-darken"
-                                style="font-size: 1.5rem;"
-                                :icon="setIconCall(selected.status)"
-                            ></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;">-</p>
-                    </v-col>
-                </v-row>
-                <v-row no-gutters>
-                    <v-col cols="4">
-                        <p class="font-weight-medium">{{ $t('message.dobage') }}</p>
-                    </v-col>
-                    <v-col cols="4" class="text-end">
-                        <p class="font-weight-medium" style="color: slategray;">{{ selected.dob }}</p>
-                    </v-col>
-                    <v-col cols="4" class="text-end">
-                        <p class="font-weight-medium" style="color: slategray;">{{ selected.age }}</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">{{ $t('message.tableDetail.title') }}: {{ details.staff }}</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="details.specimen"
-                :headers="headers"
-                hide-default-footer
-            >
-                <template v-slot:headers="{ columns }">
-                    <tr>
-                        <template v-for="column in columns" :key="column.key">
-                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
-                                <span>{{ column.title }}</span>
-                            </td>
-                        </template>
-                    </tr>
-                </template>
-                <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"
-                                v-if="selected.doneCall === 'Y'"
-                            >
-                                <div
-                                    class="pointer"
-                                    style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
-                                >
-                                    <iconify-icon
-                                        :class="{'text-error': item.requirement === 'N'}"
-                                        style="font-size: 1.5rem;"
-                                        icon="fluent:dismiss-12-filled"
-                                        @click="setReq(item, 'N')"
-                                    ></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-success': item.requirement === 'Y'}"
-                                        style="font-size: 2rem;"
-                                        icon="fluent:checkmark-12-filled"
-                                        @click="setReq(item, 'Y')"
-                                    ></iconify-icon>
-                                </div>
-                            </div>
-                            <p v-else style="font-size: 1.5rem;">-</p>
-                        </td>
-                        <td align="center">
-                            <div v-if="selected.doneCall === 'Y'" class="py-1">
-                                <div class="bg-warning rounded-lg pa-1 text-white">
-                                    {{ formatDate(item.sDate) }}
-                                </div>
-                                <div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
-                                    {{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
-                                </div>
-                            </div>
-                            <p v-else style="font-size: 1.5rem;">-</p>
-                        </td>
-                    </tr>
-                </template>
-            </v-data-table>
-            <div class="ml-3">
-                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</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">{{ $t('message.examination') }}</h3>
-            </div>
-            <div>
-                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
-            </div>
-        </v-container>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "rightcomp",
-        components: {
-
-        },
-        mounted() {},
-        data() {
-            return {
-                menu: false,
-                visible: false,
-                headers: [
-                    {
-                        title: this.$t('message.tableDetail.speciment'),
-                        align: "start",
-                        sortable: false,
-                        key: "name",
-                        width: "20%",
-                        class: "font-weight-bold",
-                    },
-                    {
-                        title: this.$t('message.tableDetail.barcode'),
-                        align: "start",
-                        sortable: false,
-                        key: "name",
-                        width: "20%",
-                        class: "font-weight-bold",
-                    },
-                    {
-                        title: this.$t('message.tableDetail.requirement'),
-                        align: "center",
-                        sortable: false,
-                        key: "name",
-                        width: "20%",
-                        class: "font-weight-bold",
-                    },
-                    {
-                        title: this.$t('message.tableDetail.action'),
-                        align: "center",
-                        sortable: false,
-                        key: "name",
-                        width: "20%",
-                        class: "font-weight-bold",
-                    },
-                ],
-            };
-        },
-        computed: {
-            selected: {
-                get() {
-                    return this.$store.state.collection.selected_patients;
-                },
-                set(data) {
-                    this.$store.commit("setSelectedPatients", data);
-                }
-            },
-            details: {
-                get() {
-                    return this.$store.state.collection.details;
-                },
-                set(data) {
-                    this.$store.commit("")
-                }
-            },
-            pemeriksaan() {
-                return this.$store.state.collection.pemeriksaan;
-            }
-        },
-        methods: {
-            setIconCall(status) {
-                switch (status.toLowerCase()) {
-                    case "call":
-                        return "fluent:arrow-sync-24-regular";
-                    default:
-                        return "fluent:speaker-2-24-regular";
-                }
-            },
-            setCall(data) {
-                if (data.status == "New") {
-                    data.status = "Call";    
-                } else if (data.status == "Call") {
-                    data.doneCall = "Y";
-                }
-            },
-            setReq(data, status) {
-                data.requirement = status;
-                data.eDate= new Date();
-            },
-            formatDate(date) {
-                if (!date) return null;
-
-                return moment(date).format("DD-MM-YYYY HH:mm");
-            },
-        },
-    }
-</script>
-
-<style scoped>
-    .pointer {
-        cursor: pointer;
-    }
-</style>
\ No newline at end of file
diff --git a/registration/components/tabs.vue b/registration/components/tabs.vue
index 2e1f340..2fc7567 100644
--- a/registration/components/tabs.vue
+++ b/registration/components/tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="mb-0 pa-2 mt-0 pt-0">
+    <v-card class="pa-4 rounded-lg" elevation="0">
       <v-tabs v-model="tab" align-tabs="center" color="primary" grow>
         <v-tab :value="1">DEMOGRAFI</v-tab>
         <v-tab :value="2">PEMERIKSAAN</v-tab>
@@ -10,13 +10,25 @@
     </v-card>
 
     <v-tabs-window v-model="tab">
-      <v-tabs-window-item v-for="n in 3" :key="n" :value="n">
-        <v-row class="no-gutters">
-          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3 pr-1">
+      <v-tabs-window-item v-for="n in 4" :key="n" :value="n">
+        <v-row no-gutters>
+          
+          <!-- left side-->
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pr-2">
             <datatable-patient v-if="tab === 1"></datatable-patient>
+            <div v-else-if="tab === 2">
+              <form-agreement></form-agreement>
+              <form-pemeriksaan class="mt-4"></form-pemeriksaan>
+            </div>
+            <div v-else-if="tab === 3">KIRIM HASIL</div>
+            <div v-else>PEMBAYARAN</div>
           </v-col>
-          <v-col cols="12" md="6" sm="12" xs="12" class="pl-1 mt-3">
+          
+          <!-- right side -->
+          <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pl-2">
             <form-patient v-if="tab === 1"></form-patient>
+            <form-pengirim class="mt-4" v-if="tab === 1"></form-pengirim>
+            <detail-order v-if="tab === 2"></detail-order>
           </v-col>
         </v-row>
       </v-tabs-window-item>
@@ -26,12 +38,20 @@
 
 <script type="module">
 import DatatablePatient from "./datatable_patient.vue";
+import Detail_order from "./detail_order.vue";
 import FormPatient from "./form_patient.vue";
+import Form_pemeriksaan from "./form_pemeriksaan.vue";
+import FormPengirim from "./form_pengirim.vue";
+import Kelpelanggan_agreement from "./kelpelanggan_agreement.vue";
 export default {
   name: "filtercomp",
   components: {
     "datatable-patient": DatatablePatient,
     "form-patient": FormPatient,
+    "form-pengirim": FormPengirim,
+    "form-agreement": Kelpelanggan_agreement,
+    "form-pemeriksaan": Form_pemeriksaan,
+    "detail-order": Detail_order,
   },
   mounted() {},
   data() {
@@ -72,7 +92,7 @@ export default {
 </script>
 
 <style scoped>
-.pointer {
-  cursor: pointer;
-}
+  .pointer {
+    cursor: pointer;
+  }
 </style>
diff --git a/registration/index.html b/registration/index.html
index 3c3297a..4f8e79f 100644
--- a/registration/index.html
+++ b/registration/index.html
@@ -12,10 +12,7 @@
         <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
     </head>
     <body>
-        <v-responsive class="border rounded" max-height="300">
         <div id="app"></div>
-
-  </v-responsive>
         <!-- Moment -->
         <script src="../libraries/moment.js"></script>
         <!-- Vue.js -->
diff --git a/specimen-collection/components/main.vue b/specimen-collection/components/main.vue
index be057bd..025b2c4 100644
--- a/specimen-collection/components/main.vue
+++ b/specimen-collection/components/main.vue
@@ -1,14 +1,14 @@
 <template>
     <v-app id="inspire">
         <one-navbar></one-navbar>
-        <v-main>
-            <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+        <v-main class="mt-3 mb-3 mx-2">
+            <div class="pa-4 bg-primary-lighten rounded-xl h-100">
                 <one-filter></one-filter>
-                <v-row>
-                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                <v-row no-gutters>
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pr-2">
                         <one-left></one-left>
                     </v-col>
-                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
+                    <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pl-2">
                         <one-right></one-right>
                     </v-col>
                 </v-row>
diff --git a/specimen-collection/components/right.vue b/specimen-collection/components/right.vue
index 06243f9..a9529c0 100644
--- a/specimen-collection/components/right.vue
+++ b/specimen-collection/components/right.vue
@@ -59,7 +59,7 @@
                 </v-row>
             </div>
         </v-container>
-        <v-container class="bg-white rounded-lg mt-5" fluid>
+        <v-container class="bg-white rounded-lg mt-4" fluid>
             <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
                 <v-row>
                     <v-col cols="10" align-self="center">
@@ -160,7 +160,7 @@
                 <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</v-chip>
             </div>
         </v-container>
-        <v-container class="bg-white rounded-lg mt-5" fluid>
+        <v-container class="bg-white rounded-lg mt-4" fluid>
             <div class="bg-secondary-lighten rounded-lg pa-5">
                 <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
             </div>