diff --git a/app/components/search/search-menu-desktop.vue b/app/components/search/search-menu-desktop.vue
index b3c14b6..31469ca 100644
--- a/app/components/search/search-menu-desktop.vue
+++ b/app/components/search/search-menu-desktop.vue
@@ -43,24 +43,6 @@ const closeSearch = () => {
   emit('closeSearch');
 };
 
-// Helpers
-const { getColorOption } = useProductHelpers();
-
-// Computed
-const productsWithOptions = computed(() =>
-  props.products.map((product) => {
-    const options = product.options;
-    const colorOption = getColorOption(options);
-    const colorOptionName = colorOption?.optionValues[0]?.name;
-
-    return {
-      ...product,
-      colorOption,
-      colorOptionName
-    };
-  })
-);
-
 // Watchers
 watch(
   () => appStore.searchMenuOpen,
@@ -105,58 +87,32 @@ watch(
         <div class="grid grid-cols-[280px_1fr] gap-12">
           <div class="flex flex-col gap-4">
             <h3 class="text-sm">Suggestions</h3>
-            <div v-if="searchQuery.length && products?.length" class="flex flex-col">
-              <NuxtLink
-                v-for="product in productsWithOptions"
+            <div v-if="props.searchQuery.length && props.products?.length" class="flex flex-col">
+              <SuggestedLink
+                v-for="product in products"
                 :key="product.id"
-                :to="`/products/${product.handle}`"
-                class="max-w-fit hover:text-gray-500"
-              >
-                <p v-if="product.colorOption" class="normal-case truncate ...">
-                  {{ product.title }} ({{ product.colorOptionName }})
-                </p>
-                <span v-else>{{ product?.title }}</span>
-              </NuxtLink>
+                :product="product"
+              />
             </div>
             <div v-else class="flex flex-col">
               <NuxtLink
                 v-for="link in defaulSearchLinks"
                 :key="link.label"
                 :to="link.path"
-                class="max-w-fit normal-case truncate ... hover:text-gray-500"
+                class="max-w-fit normal-case hover:text-gray-500"
               >
                 {{ link.label }}
               </NuxtLink>
             </div>
           </div>
-          <div v-if="searchQuery.length && products?.length" class="flex flex-col gap-4">
+          <div v-if="props.searchQuery.length && props.products?.length" class="flex flex-col gap-4">
             <h3 class="text-sm">Products</h3>
             <div class="grid grid-cols-2 gap-8 w-full">
-              <NuxtLink
-                v-for="product in productsWithOptions"
+              <SuggestedProductCard
+                v-for="product in products"
                 :key="product.id"
-                :to="`/products/${product.handle}`"
-                class="flex gap-4"
-              >
-                <div class="w-24 aspect-square shrink-0">
-                  <ShopifyImage
-                    :image="product.featuredImage"
-                    :alt="product.featuredImage?.altText || product.title"
-                  />
-                </div>
-                <div class="flex flex-col flex-1">
-                  <div class="mb-1">
-                    <h2 v-if="product.title">{{ product.title }}</h2>
-                    <h3 v-if="product.colorOption" class="normal-case">
-                      {{ product.colorOptionName }}
-                    </h3>
-                  </div>
-                  <PriceDisplay
-                    :price="product.priceRange?.minVariantPrice"
-                    :compare-at-price-range="product.compareAtPriceRange?.minVariantPrice"
-                  />
-                </div>
-              </NuxtLink>
+                :product="product"
+              />
             </div>
           </div>
         </div>
diff --git a/app/components/search/search-menu-mobile.vue b/app/components/search/search-menu-mobile.vue
index 25d8953..34a0652 100644
--- a/app/components/search/search-menu-mobile.vue
+++ b/app/components/search/search-menu-mobile.vue
@@ -36,24 +36,6 @@ const closeSearch = () => {
   emit('closeSearch');
 };
 
-// Helpers
-const { getColorOption } = useProductHelpers();
-
-// Computed
-const productsWithOptions = computed(() =>
-  props.products.map((product) => {
-    const options = product.options;
-    const colorOption = getColorOption(options);
-    const colorOptionName = colorOption?.optionValues[0]?.name;
-
-    return {
-      ...product,
-      colorOption,
-      colorOptionName
-    };
-  })
-);
-
 // Watchers
 watch(
   () => appStore.searchMenuOpen,
@@ -96,32 +78,12 @@ watch(
           </button>
         </div>
         <div class="flex flex-col flex-1 overflow-y-scroll overflow-x-hidden no-scrollbar">
-          <div v-if="searchQuery.length && products?.length" class="grid grid-cols-2 gap-x-4 gap-y-8 w-full">
-            <NuxtLink
-              v-for="product in productsWithOptions"
+          <div v-if="props.searchQuery.length && props.products?.length" class="grid grid-cols-2 gap-x-4 gap-y-8 w-full">
+            <SuggestedProductCard
+              v-for="product in products"
               :key="product.id"
-              :to="`/products/${product.handle}`"
-              class="flex gap-4"
-            >
-              <div class="size-24 aspect-square shrink-0">
-                <ShopifyImage
-                  :image="product.featuredImage"
-                  :alt="product.featuredImage?.altText || product.title"
-                />
-              </div>
-              <div class="flex flex-col flex-1">
-                <div class="mb-1">
-                  <h2 v-if="product.title">{{ product.title }}</h2>
-                  <h3 v-if="product.colorOption" class="normal-case">
-                    {{ product.colorOptionName }}
-                  </h3>
-                </div>
-                <PriceDisplay
-                  :price="product.priceRange?.minVariantPrice"
-                  :compare-at-price-range="product.compareAtPriceRange?.minVariantPrice"
-                />
-              </div>
-            </NuxtLink>
+              :product="product"
+            />
           </div>
         </div>
       </div>
diff --git a/app/components/search/search-menu.vue b/app/components/search/search-menu.vue
index 587ca76..d0bc358 100644
--- a/app/components/search/search-menu.vue
+++ b/app/components/search/search-menu.vue
@@ -17,7 +17,14 @@ const shopify = useShopify();
 
 // Debounce query
 const handleSearch = async (query: string) => {
-  searchQuery.value = query.trim();
+  const trimmedQuery = query.trim();
+
+  if (!trimmedQuery) {
+    searchResults.value = [];
+    return;
+  }
+
+  searchQuery.value = trimmedQuery;
 
   const searchVars: PredictiveSearchQueryVariables = {
     query: searchQuery.value,
diff --git a/app/components/search/suggestions/suggested-link.vue b/app/components/search/suggestions/suggested-link.vue
new file mode 100644
index 0000000..85c321c
--- /dev/null
+++ b/app/components/search/suggestions/suggested-link.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ProductFragment } from '@@/types/shopify';
+
+// Props
+const props = defineProps<{
+  product: ProductFragment;
+}>();
+
+// Helpers
+const { getColorOption } = useProductHelpers();
+
+// Computed
+const options = computed(() => props.product?.options);
+const colorOption = computed(() => getColorOption(options.value));
+const colorOptionName = computed(() => colorOption.value?.optionValues[0]?.name);
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/products/${product.handle}`"
+    class="max-w-fit hover:text-gray-500"
+  >
+    <p v-if="colorOptionName" class="normal-case truncate ...">
+      {{ product.title }} ({{ colorOptionName }})
+    </p>
+    <p v-else class="normal-case truncate ...">{{ product.title }}</p>
+  </NuxtLink>
+</template>
diff --git a/app/components/search/suggestions/suggested-product-card.vue b/app/components/search/suggestions/suggested-product-card.vue
new file mode 100644
index 0000000..15b5363
--- /dev/null
+++ b/app/components/search/suggestions/suggested-product-card.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ProductFragment } from '@@/types/shopify';
+
+// Props
+const props = defineProps<{
+  product: ProductFragment;
+}>();
+
+// Helpers
+const { getColorOption } = useProductHelpers();
+
+// Computed
+const options = computed(() => props.product?.options);
+const colorOption = computed(() => getColorOption(options.value));
+const colorOptionName = computed(() => colorOption.value?.optionValues[0]?.name);
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/products/${product.handle}`"
+    class="flex gap-4"
+  >
+    <div class="w-24 aspect-square shrink-0">
+      <ShopifyImage
+        :image="product.featuredImage"
+        :alt="product.featuredImage?.altText || product.title"
+      />
+    </div>
+    <div class="flex flex-col">
+      <div class="mb-2">
+        <h2 v-if="product.title">{{ product.title }}</h2>
+        <h3 v-if="colorOption" class="normal-case">
+          {{ colorOptionName }}
+        </h3>
+      </div>
+      <PriceDisplay
+        :price="product.priceRange.minVariantPrice"
+        :compare-at-price-range="product.compareAtPriceRange.minVariantPrice"
+      />
+    </div>
+  </NuxtLink>
+</template>