diff --git a/resources/js/components/InputPassword.vue b/resources/js/components/InputPassword.vue
new file mode 100644
index 0000000..da51b84
--- /dev/null
+++ b/resources/js/components/InputPassword.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="relative">
+    <input
+      :type="showPassword ? 'text' : 'password'"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @input="$emit('update:modelValue', $event.target.value)"
+      class="mt-1 block w-full rounded-md shadow-sm sm:text-sm
+             bg-A text-D border-B focus:border-C 
+             focus:ring focus:ring-D focus:ring-opacity-50 p-2 pr-10"
+    />
+
+    <!-- Tombol show/hide password -->
+    <button
+      type="button"
+      @click="togglePassword"
+      class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700 focus:outline-none"
+    >
+      <font-awesome-icon v-if="showPassword" :icon="['fas', 'eye']" />
+  <font-awesome-icon v-else :icon="['fas', 'eye-slash']" />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "Password",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const showPassword = ref(false);
+
+const togglePassword = () => {
+  showPassword.value = !showPassword.value;
+};
+</script>
diff --git a/resources/js/pages/Login.vue b/resources/js/pages/Login.vue
new file mode 100644
index 0000000..7102148
--- /dev/null
+++ b/resources/js/pages/Login.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center justify-center min-h-screen bg-[#0c4b66]">
+    <div class="bg-white p-8 rounded-2xl shadow-xl w-80 text-center">
+      <!-- Logo + Title -->
+      <div class="mb-6">
+        <img :src="logo" alt="Logo" class="mx-auto w-24">
+      </div>
+
+      <!-- Input -->
+      <div>
+      <InputField v-model="username" type="text" placeholder="Username" />
+      <PasswordInput v-model="password" placeholder="Password" />
+      </div>
+
+      <!-- Button -->
+      <button
+        @click="handleLogin"
+        class="w-full py-2 bg-sky-400 hover:bg-sky-500 rounded font-bold text-gray-800 transition"
+      >
+        Login
+      </button>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+import { ref } from "vue";
+import logo from '@/../images/logo.png'
+import InputField from "@/components/InputField.vue";
+const username = ref("");
+const password = ref("");
+import PasswordInput from "@/components/InputPassword.vue";
+// import { ref } from "vue";
+
+// const username = ref("");
+// const password = ref("");
+
+// const handleLogin = () => {
+//   if (!username.value || !password.value) {
+//     alert("Harap isi username dan password!");
+//     return;
+//   }
+//   // Contoh: panggil API login
+//   console.log("Login dengan:", username.value, password.value);
+// };
+</script>
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 390618f..a74f09d 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -8,13 +8,14 @@ import InputProduk from '../pages/InputProduk.vue'
 import Kategori from '../pages/Kategori.vue'
 import Sales from '../pages/Sales.vue'
 import EditProduk from '../pages/EditProduk.vue'
+import Login from '../pages/Login.vue'
 
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Login',
+    component: Login
   },
   {
     path: '/produk',