diff --git a/src/components/Searchbar.vue b/src/components/Searchbar.vue
new file mode 100644
index 0000000..e051e7b
--- /dev/null
+++ b/src/components/Searchbar.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- default values - placeholder - 'Search', showClearButton - 'always' -->
+  <ion-searchbar 
+    :placeholder='placeholder'
+    :showClearButton="showClearButton"
+    @keyup.enter="search($event.target.value)"
+    @ionClear="emit('on-clear')"
+    @ionFocus="emit('on-focus', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { IonSearchbar } from '@ionic/vue';
+
+defineProps(['placeholder', 'showClearButton'])
+const emit = defineEmits(['update-query-string', 'on-search', 'on-clear', 'on-focus'])
+
+function search(queryString: string) {
+  emit('update-query-string', queryString)
+  emit('on-search')
+}
+</script>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index c59a932..cb2af6c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,7 +14,8 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
+export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as ShopifyImg } from './ShopifyImg.vue';
+export { default as Searchbar } from './Searchbar.vue';
diff --git a/src/index.ts b/src/index.ts
index 29b77bc..cb33426 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,13 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg } from "./components";
+import {
+  LanguageSwitcher,
+  OmsInstanceNavigator,
+  ProductIdentifier,
+  Searchbar,
+  ShopifyImg,
+} from "./components";
 import Login from "./components/Login";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -45,6 +51,7 @@ export let dxpComponents = {
     app.component('Login', Login)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
+    app.component('Searchbar', Searchbar)
     app.component('ShopifyImg', ShopifyImg)
 
     loginContext.login = options.login
@@ -83,6 +90,7 @@ export {
   productIdentificationContext,
   ShopifyImg,
   shopifyImgContext,
+  Searchbar,
   translate,
   useAuthStore,
   useProductIdentificationStore,