diff --git a/resources/js/components/Searchbar.vue b/resources/js/components/Searchbar.vue
new file mode 100644
index 0000000..1f886c1
--- /dev/null
+++ b/resources/js/components/Searchbar.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="border border-C bg-A rounded-md w-full relative items-center">
+    <input v-model="searchText" type="text" placeholder="Cari ..."
+      class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
+      @input="$emit('update:search', searchText)" />
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
+     <i class="fas fa-search"></i>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+
+const searchText = ref("");
+defineEmits(["update:search"]);
+</script>