diff --git a/README.md b/README.md
index 54ddaef..12970f0 100644
--- a/README.md
+++ b/README.md
@@ -679,6 +679,7 @@ This modular architecture provides several benefits:
 - [ ] Terraform dependencies
 - [ ] Move all auth logic to auth module
 - [ ] Remove bootstrap endpoint
+- [ ] Move cloud function code to src folder and reuse code with embedding service
 
 ### Pagination Status ✅
 - **✅ Images API**: Fully implemented with `skip`, `limit`, `total` parameters
diff --git a/client/js/search.js b/client/js/search.js
index 64dad32..b9a59b4 100644
--- a/client/js/search.js
+++ b/client/js/search.js
@@ -43,9 +43,13 @@ async function performSearch() {
     `;
     
     try {
-        const results = await apiClient.searchImages(query, threshold, maxResults);
-        await displaySearchResults(results, query);
+        console.log('Performing search with:', { query, threshold, maxResults });
+        const response = await apiClient.searchImages(query, threshold, maxResults);
+        console.log('Search response received:', response);
+        
+        await displaySearchResults(response, query);
     } catch (error) {
+        console.error('Search error:', error);
         handleApiError(error, 'searching images');
         resultsContainer.innerHTML = `
             <div class="alert alert-danger">
@@ -57,10 +61,18 @@ async function performSearch() {
 }
 
 // Display search results
-async function displaySearchResults(results, query) {
+async function displaySearchResults(response, query) {
     const container = document.getElementById('searchResults');
     
-    if (!results || results.length === 0) {
+    console.log('displaySearchResults called with:', { response, query });
+    
+    // Extract results array from response object
+    const results = response.results || response;
+    
+    console.log('Extracted results:', results);
+    console.log('Results is array:', Array.isArray(results));
+    
+    if (!results || !Array.isArray(results) || results.length === 0) {
         container.innerHTML = `
             <div class="text-center py-5">
                 <i class="fas fa-search fa-3x text-muted mb-3"></i>
@@ -71,6 +83,8 @@ async function displaySearchResults(results, query) {
         return;
     }
 
+    console.log('Processing', results.length, 'results');
+
     // Create results HTML with placeholder images first
     const resultsHtml = `
         <div class="mb-4">
@@ -78,59 +92,67 @@ async function displaySearchResults(results, query) {
             <p class="text-muted">Found ${results.length} images matching "${escapeHtml(query)}"</p>
         </div>
         <div class="row">
-            ${results.map(result => `
+            ${results.map(result => {
+                // Handle both old format (result.image) and new format (direct result)
+                const image = result.image || result;
+                const similarity = result.similarity || result.similarity_score || 0;
+                
+                console.log('Processing result:', { result, image, similarity });
+                
+                return `
                 <div class="col-md-6 col-lg-4 mb-4">
                     <div class="card search-result h-100">
                         <div class="position-relative">
                             <div class="image-container" style="position: relative; height: 200px;">
-                                <img id="search-img-${result.image.id}" 
+                                <img id="search-img-${image.id}" 
                                      src="/placeholder-image.png" 
                                      class="card-img-top" 
-                                     alt="${escapeHtml(result.image.description || 'Image')}"
+                                     alt="${escapeHtml(image.description || 'Image')}"
                                      style="height: 200px; object-fit: cover; cursor: pointer; opacity: 0.5;"
-                                     onclick="viewImage('${result.image.id}')">
+                                     onclick="viewImage('${image.id}')">
                                 <div class="loading-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                     <div class="loading-spinner"></div>
                                 </div>
                             </div>
                             <div class="position-absolute top-0 end-0 m-2">
                                 <span class="badge bg-primary similarity-score">
-                                    ${Math.round(result.similarity * 100)}% match
+                                    ${Math.round(similarity * 100)}% match
                                 </span>
                             </div>
                         </div>
                         <div class="card-body">
-                            <h6 class="card-title">${escapeHtml(truncateText(result.image.description || 'Untitled', 60))}</h6>
+                            <h6 class="card-title">${escapeHtml(truncateText(image.description || 'Untitled', 60))}</h6>
                             <p class="card-text small text-muted">
-                                <i class="fas fa-calendar me-1"></i>${formatDate(result.image.upload_date)}
+                                <i class="fas fa-calendar me-1"></i>${formatDate(image.upload_date)}
                             </p>
-                            ${result.image.tags && result.image.tags.length > 0 ? `
+                            ${image.tags && image.tags.length > 0 ? `
                                 <div class="mb-2">
-                                    ${result.image.tags.slice(0, 3).map(tag => 
+                                    ${image.tags.slice(0, 3).map(tag => 
                                         `<span class="badge bg-secondary me-1">${escapeHtml(tag)}</span>`
                                     ).join('')}
-                                    ${result.image.tags.length > 3 ? 
-                                        `<span class="badge bg-light text-dark">+${result.image.tags.length - 3}</span>` : ''
+                                    ${image.tags.length > 3 ? 
+                                        `<span class="badge bg-light text-dark">+${image.tags.length - 3}</span>` : ''
                                     }
                                 </div>
                             ` : ''}
                             <div class="d-flex justify-content-between align-items-center">
                                 <div class="btn-group" role="group">
-                                    <button class="btn btn-sm btn-outline-primary" onclick="viewImage('${result.image.id}')">
+                                    <button class="btn btn-sm btn-outline-primary" onclick="viewImage('${image.id}')">
                                         <i class="fas fa-eye"></i>
                                     </button>
-                                    <button class="btn btn-sm btn-outline-secondary" onclick="editImage('${result.image.id}')">
+                                    <button class="btn btn-sm btn-outline-secondary" onclick="editImage('${image.id}')">
                                         <i class="fas fa-edit"></i>
                                     </button>
                                 </div>
                                 <small class="text-muted">
-                                    Similarity: ${(result.similarity * 100).toFixed(1)}%
+                                    Similarity: ${(similarity * 100).toFixed(1)}%
                                 </small>
                             </div>
                         </div>
                     </div>
                 </div>
-            `).join('')}
+            `;
+            }).join('')}
         </div>
     `;
     
@@ -138,9 +160,10 @@ async function displaySearchResults(results, query) {
     
     // Load actual images asynchronously (need to import loadImageBlob from images.js)
     for (const result of results) {
+        const image = result.image || result;
         if (typeof loadImageBlob === 'function') {
-            loadImageBlob(result.image.id).then(blobUrl => {
-                const imgElement = document.getElementById(`search-img-${result.image.id}`);
+            loadImageBlob(image.id).then(blobUrl => {
+                const imgElement = document.getElementById(`search-img-${image.id}`);
                 const loadingOverlay = imgElement?.parentElement.querySelector('.loading-overlay');
                 
                 if (imgElement) {
@@ -151,8 +174,8 @@ async function displaySearchResults(results, query) {
                     }
                 }
             }).catch(error => {
-                console.error(`Failed to load search image ${result.image.id}:`, error);
-                const imgElement = document.getElementById(`search-img-${result.image.id}`);
+                console.error(`Failed to load search image ${image.id}:`, error);
+                const imgElement = document.getElementById(`search-img-${image.id}`);
                 const loadingOverlay = imgElement?.parentElement.querySelector('.loading-overlay');
                 
                 if (imgElement) {
@@ -175,7 +198,10 @@ function addSearchRefinementOptions(query, results) {
     const container = document.getElementById('searchResults');
     
     // Extract common tags from results
-    const allTags = results.flatMap(result => result.image.tags || []);
+    const allTags = results.flatMap(result => {
+        const image = result.image || result;
+        return image.tags || [];
+    });
     const tagCounts = {};
     allTags.forEach(tag => {
         tagCounts[tag] = (tagCounts[tag] || 0) + 1;