diff --git a/client/src/app/core/layout/layout.component.html b/client/src/app/core/layout/layout.component.html
index 9032139..5d820c9 100644
--- a/client/src/app/core/layout/layout.component.html
+++ b/client/src/app/core/layout/layout.component.html
@@ -143,11 +143,9 @@
   </div>
 </aside>
 
-<div class="px-4 pt-16 sm:ml-64">
-  <div
-    class="p-4 border-2 border-gray-200 border-dashed rounded-lg sm:mt-5 md:mt-14"
-  >
-    <div class="grid grid-cols-1 gap-4 mb-4">
+<div class="pt-10 sm:ml-64">
+  <div class="p-4 sm:mt-5 md:mt-12">
+    <div class="grid grid-cols-1 gap-2 mb-2">
       <router-outlet></router-outlet>
     </div>
   </div>
diff --git a/client/src/app/core/services/recipe.service.ts b/client/src/app/core/services/recipe.service.ts
index 0f234e1..e75d3d4 100644
--- a/client/src/app/core/services/recipe.service.ts
+++ b/client/src/app/core/services/recipe.service.ts
@@ -4,16 +4,19 @@ import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
 import { Recipe } from '../models/recipe.model';
 import { environment } from 'src/environments/environment';
 
-interface Pagination {
+interface RecipeParams {
   offset: number;
   take: number;
+  search: string;
 }
 
 @Injectable({ providedIn: 'root' })
 export class RecipeService {
   constructor(private _httpClient: HttpClient) {}
 
-  getRecipes(paginate: Pagination = { take: 10, offset: 0 }): Observable<{
+  getRecipes(
+    params: RecipeParams = { take: 10, offset: 0, search: '' }
+  ): Observable<{
     recipes: Recipe;
     hasMore: boolean;
   }> {
@@ -22,10 +25,12 @@ export class RecipeService {
       hasMore: boolean;
     }>(environment.api + '/recipes', {
       params: {
-        offset: String(paginate.offset),
-        take: String(paginate.take),
+        offset: params.offset,
+        take: params.take,
+        search: params.search,
       },
       withCredentials: true,
+      responseType: 'json',
     });
   }
 }
diff --git a/client/src/app/features/dashboard/dashboard.component.html b/client/src/app/features/dashboard/dashboard.component.html
index 87ea7de..f8f9c64 100644
--- a/client/src/app/features/dashboard/dashboard.component.html
+++ b/client/src/app/features/dashboard/dashboard.component.html
@@ -28,11 +28,17 @@
                 <input
                   class="input input-bordered join-item w-[300px]"
                   placeholder="Product Code, Name or Other Name"
+                  (input)="setSearch($event)"
+                  (keydown.enter)="search($event)"
                 />
-                <button class="btn join-item">Search</button>
+                <button class="btn join-item" (click)="search($event)">
+                  Search
+                </button>
               </div>
               <div class="flex gap-2">
-                <button class="btn rounded-lg">View JSON</button>
+                <button class="btn rounded-lg" (click)="openJsonTab()">
+                  View JSON
+                </button>
                 <button class="btn rounded-lg">
                   <svg
                     class="w-6 h-6 text-gray-800 dark:text-white"
diff --git a/client/src/app/features/dashboard/dashboard.component.ts b/client/src/app/features/dashboard/dashboard.component.ts
index e387a1d..a0d75b2 100644
--- a/client/src/app/features/dashboard/dashboard.component.ts
+++ b/client/src/app/features/dashboard/dashboard.component.ts
@@ -14,6 +14,7 @@ import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { BehaviorSubject } from 'rxjs';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-dashboard',
@@ -40,6 +41,9 @@ export class DashboardComponent implements OnInit {
   isLoadMore: boolean = false;
   isHasMore: boolean = true;
 
+  private searchStr = '';
+  private oldSearchStr = '';
+
   @ViewChild('table', { static: false }) set content(table: ElementRef) {
     table.nativeElement.addEventListener(
       'scroll',
@@ -56,6 +60,7 @@ export class DashboardComponent implements OnInit {
             .getRecipes({
               offset: this.offset,
               take: this.take,
+              search: this.oldSearchStr,
             })
             .subscribe(({ recipes, hasMore }) => {
               const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -92,6 +97,7 @@ export class DashboardComponent implements OnInit {
       .getRecipes({
         offset: this.offset,
         take: this.take,
+        search: this.oldSearchStr,
       })
       .subscribe(({ recipes, hasMore }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -109,4 +115,35 @@ export class DashboardComponent implements OnInit {
         this.isHasMore = hasMore;
       });
   }
+
+  setSearch(event: Event) {
+    this.searchStr = (event.target as HTMLInputElement).value;
+  }
+
+  search(event: Event) {
+    this.offset = 0;
+    this.oldSearchStr = this.searchStr;
+    this._recipeService
+      .getRecipes({
+        offset: this.offset,
+        take: this.take,
+        search: this.searchStr,
+      })
+      .subscribe(({ recipes, hasMore }) => {
+        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
+        this.recipes01 = Recipe01;
+
+        this.recipes = {
+          ...recipesWithoutRecipe01,
+          Recipe01: [],
+        };
+        this.offset += 10;
+        this.isLoaded = true;
+        this.isHasMore = hasMore;
+      });
+  }
+
+  openJsonTab() {
+    window.open(environment.api + '/recipes/json', '_blank');
+  }
 }
diff --git a/server/routers/recipe.go b/server/routers/recipe.go
index be3546e..936af58 100644
--- a/server/routers/recipe.go
+++ b/server/routers/recipe.go
@@ -2,12 +2,12 @@ package routers
 
 import (
 	"encoding/json"
-	"log"
 	"net/http"
 	"recipe-manager/data"
 	"recipe-manager/models"
 	"sort"
 	"strconv"
+	"strings"
 
 	"github.com/go-chi/chi/v5"
 )
@@ -35,8 +35,20 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 				take = newTake
 			}
 
-			// copy the strcut to avoid modifying the original
 			recipe := rr.data.GetRecipe()
+			searchQuery := r.URL.Query().Get("search")
+
+			if searchQuery != "" {
+				recipe.Recipe01 = []models.Recipe01{}
+				for _, v := range rr.data.GetRecipe01() {
+					if strings.Contains(strings.ToLower(v.ProductCode), strings.ToLower(searchQuery)) ||
+						strings.Contains(strings.ToLower(v.Name), strings.ToLower(searchQuery)) ||
+						strings.Contains(strings.ToLower(v.OtherName), strings.ToLower(searchQuery)) {
+						recipe.Recipe01 = append(recipe.Recipe01, v)
+					}
+				}
+			}
+
 			isHasMore := len(recipe.Recipe01) >= int(take+offset)
 			if isHasMore {
 				recipe.Recipe01 = recipe.Recipe01[offset : take+offset]
@@ -44,7 +56,6 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 					return recipe.Recipe01[i].ID < recipe.Recipe01[j].ID
 				})
 			} else if len(recipe.Recipe01) > int(offset) {
-				log.Println("offset", offset, "len", len(recipe.Recipe01))
 				recipe.Recipe01 = recipe.Recipe01[offset:]
 			} else {
 				recipe.Recipe01 = []models.Recipe01{}
@@ -55,5 +66,10 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 				"hasMore": isHasMore,
 			})
 		})
+
+		r.Get("/json", func(w http.ResponseWriter, r *http.Request) {
+			w.Header().Add("Content-Type", "application/json")
+			json.NewEncoder(w).Encode(rr.data.GetRecipe())
+		})
 	})
 }