diff --git a/login-coba/theme.js b/login-coba/theme.js
deleted file mode 100644
index a502892..0000000
--- a/login-coba/theme.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var CustomTheme = {
-    light: {
-        dark: false,
-        colors: {
-            primary: "#FFC107",
-            // primary: "#2196F3",
-            "primary-lighten": "#E3F2FD",
-            "primary-darken": "#0D47A1",
-            white: "#FFFFFF",
-            secondary: "#03a9f4",
-            accent: "#ff5722",
-            error: "#f44336",
-            warning: "#ff9800",
-            info: "#2196f3",
-            success: "#4caf50",
-        },
-    },
-}
\ No newline at end of file
diff --git a/loginv3/components/login.vue b/loginv3/components/login.vue
new file mode 100644
index 0000000..6d1c412
--- /dev/null
+++ b/loginv3/components/login.vue
@@ -0,0 +1,146 @@
+<template>
+  <v-app id="inspire">
+    <v-row no-gutters>
+      <v-col cols="8">
+        <v-img
+          :aspect-ratio="1"
+          class="bg-white"
+          src="./images/bg-left.jpg"
+          width="100vw"
+          height="100vh"
+          cover
+        ></v-img>
+      </v-col>
+      <v-col cols="4">
+        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
+          <v-img
+            class="bg-white"
+            height="86px"
+            src="../globalimages/logo.png"
+          ></v-img>
+        </div>
+        <v-container class="mb-6 mt-16">
+          <v-row style="min-height: 480px;" no-gutters justify="center">
+            <v-col>
+              <div class="d-flex px-10">
+                <v-sheet class="pl-16 ma-2">
+                  <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>
+
+              <div class="d-flex justify-center mb-6">
+                <v-card
+                  class="mx-auto px-12"
+                  elevation="0"
+                  min-width="400"
+                  rounded="lg"
+                >
+                  <v-alert
+                    color="primary"
+                    density="compact"
+                    type="info"
+                    style="width: 100% !important;"
+                    class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
+                    text="Enter the registered account"
+                  >
+                  </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-linear indeterminate></v-progress-linear>
+                      </template>
+                    </v-btn>
+                  </div>
+                </v-card>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-app>
+</template>
+
+<script type="module">
+  export default {
+    name: "login",
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.login.count;
+      },
+      email: {
+        get() {
+          return this.$store.state.login.email;
+        },
+        set(val) {
+          this.$store.commit("login/setEmail", val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/loginv3/images/bg-left.jpg b/loginv3/images/bg-left.jpg
new file mode 100644
index 0000000..ca025a5
Binary files /dev/null and b/loginv3/images/bg-left.jpg differ
diff --git a/loginv3/index.html b/loginv3/index.html
new file mode 100644
index 0000000..295d7b8
--- /dev/null
+++ b/loginv3/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WESTONE</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" />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <!-- 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>
+    <!-- loader single file component -->
+    <script src="../libraries/vue3-sfc-loader.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+
+      import login from "./modules/login.js";
+      const store = Vuex.createStore({
+        modules: {
+          login: login,
+        },
+      });
+      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);
+        },
+      };
+      // Locale messages
+      const messages = {
+        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",
+          },
+        },
+        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",
+          },
+        },
+      };
+
+      // Get the browser's preferred language
+      const browserLocale = navigator.language || navigator.languages[0];
+
+      // Initialize vue-i18n
+      const i18n = VueI18n.createI18n({
+        locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
+        fallbackLocale: "en", // Set fallback locale
+        messages, // Set locale messages
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {
+            visible: false,
+            bg_src: "",
+            loading: false, // Initialize loading state
+          };
+        },
+
+        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/login.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>
diff --git a/loginv3/modules/login.js b/loginv3/modules/login.js
new file mode 100644
index 0000000..8e21d56
--- /dev/null
+++ b/loginv3/modules/login.js
@@ -0,0 +1,64 @@
+
+const URL = "/westone-api/v1/system/auth";
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            count: 0,
+            data: null,
+            email: "",
+            password: "",
+            dialog_success: false
+        };
+    },
+    mutations: {
+        increment(state) {
+            state.count++;
+        },
+        decrement(state) {
+            state.count--;
+        },
+        setData(state, payload) {
+            state.data = payload;
+        },
+        setEmail(state, data) {
+            state.email = data;
+        },
+        setPassword(state, data) {
+            state.password = data;
+        },
+        setDialogSuccess(state, data) {
+            state.dialog_success = data;
+        }
+    },
+    actions: {
+        increment({ commit }) {
+            commit('increment');
+        },
+        decrement({ commit }) {
+            commit('decrement');
+        },
+        async loginState({ state, commit }) {
+            const params = {
+                email: state.email,
+                password: state.pasword
+            };
+
+            try {
+                const response = await axios.post(URL + '/login', params);
+                commit('setData', response.data);
+            } catch (error) {
+                commit('setError', error);
+            }
+        },
+        async LoginParam({ commit }, params) {
+            try {
+                const response = await axios.post(URL + '/login', params);
+                commit('setData', response.data);
+            } catch (error) {
+                commit('setError', error);
+            }
+        }
+    }
+};
+export default store
\ No newline at end of file