diff --git a/bun.lockb b/bun.lockb
index e7d3689..6a6e196 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/app/navbar.vue b/components/app/navbar.vue
index 05ecf2e..abf8891 100644
--- a/components/app/navbar.vue
+++ b/components/app/navbar.vue
@@ -48,7 +48,8 @@ const handleRandomClick = async () => {
         <li><a>Categories</a></li>
       </ul>
     </div>
-    <div class="navbar-end">
+    <div class="navbar-end gap-2">
+      <recipe-search />
       <button class="btn btn-primary" @click="handleRandomClick">Random</button>
     </div>
   </nav>
diff --git a/components/recipe/search.vue b/components/recipe/search.vue
new file mode 100644
index 0000000..a5a7f76
--- /dev/null
+++ b/components/recipe/search.vue
@@ -0,0 +1,48 @@
+<template>
+  <label
+    class="input input-bordered input-primary flex items-center gap-2 container mx-auto px-4 lg:px-8 my-4"
+  >
+    <input
+      type="text"
+      class="grow"
+      placeholder="Search"
+      v-model="searchQuery"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+    <kbd class="kbd kbd-sm" :class="{ 'opacity-50': !isFocused }">⌘</kbd>
+    <kbd class="kbd kbd-sm" :class="{ 'opacity-50': !isFocused }">K</kbd>
+  </label>
+</template>
+
+<script setup lang="ts">
+const searchQuery = ref("");
+const isFocused = ref(false);
+
+// Debounced search function
+const debouncedSearch = useDebounceFn(async (query: string) => {
+  const { data, status, error } = await useRecipeSearch(query);
+  console.log("result", data.value, status.value, error.value);
+}, 500);
+
+// Watch for changes in searchQuery
+watch(searchQuery, (newQuery) => {
+  debouncedSearch(newQuery);
+});
+
+// Optional: Handle keyboard shortcut
+onMounted(() => {
+  const handleKeydown = (e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      const inputEl = document.querySelector("input");
+      inputEl?.focus();
+    }
+  };
+
+  window.addEventListener("keydown", handleKeydown);
+  onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeydown);
+  });
+});
+</script>
diff --git a/composables/useRecipeSearch.ts b/composables/useRecipeSearch.ts
new file mode 100644
index 0000000..9674ab4
--- /dev/null
+++ b/composables/useRecipeSearch.ts
@@ -0,0 +1,4 @@
+export default function useRecipeSearch(query: string) {
+  const { $client } = useNuxtApp();
+  return $client.recipeSearch.useQuery(query);
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 71f4a8a..4b65173 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,6 +8,7 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "nuxt-delay-hydration",
     "@nuxtjs/robots",
+    "@vueuse/nuxt",
   ],
 
   app: {
@@ -59,5 +60,4 @@ export default defineNuxtConfig({
 
   ssr: true,
   compatibilityDate: "2024-12-13",
-});
-
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 2344e37..43f19fb 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@nuxtjs/robots": "5.0.1",
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
+    "@vueuse/nuxt": "12.0.0",
     "nuxt": "^3.14.1592",
     "nuxt-icon": "^0.6.10",
     "trpc-nuxt": "^0.10.22",
diff --git a/server/trpc/routers/recipes.ts b/server/trpc/routers/recipes.ts
index 91a0070..254c2a9 100644
--- a/server/trpc/routers/recipes.ts
+++ b/server/trpc/routers/recipes.ts
@@ -42,4 +42,23 @@ export const recipeRouter = router({
     const recipes = parseRecipeData(data);
     return recipes[0];
   }),
+  recipeSearch: publicProcedure
+    .input(
+      z.string({
+        required_error: "search query is required",
+      }),
+    )
+    .query(async ({ input }) => {
+      const data = await $fetch<{ meals: Meal[] }>(
+        new URL(`search.php?s=${input}`, apiUrl).href,
+      );
+      if (!data?.meals) {
+        throw createError({
+          statusCode: 404,
+          statusMessage: "Recipe not found",
+        });
+      }
+      const recipes = parseRecipeData(data);
+      return recipes;
+    }),
 });