diff --git a/client/src/app/core/services/recipe.service.ts b/client/src/app/core/services/recipe.service.ts
index 21abd16..e6d5c53 100644
--- a/client/src/app/core/services/recipe.service.ts
+++ b/client/src/app/core/services/recipe.service.ts
@@ -60,8 +60,28 @@ export class RecipeService {
     return 'coffeethai02_580.json';
   }
 
-  getRecipesById(id: string): Observable<Recipe01> {
-    return this._httpClient.get<Recipe01>(environment.api + '/recipes/' + id, {
+  getRecipesById(id: string): Observable<{
+    recipe: Recipe01;
+    recipeMetaData: {
+      productCode: string;
+      name: string;
+      otherName: string;
+      description: string;
+      otherDescription: string;
+      picture: string;
+    };
+  }> {
+    return this._httpClient.get<{
+      recipe: Recipe01;
+      recipeMetaData: {
+        productCode: string;
+        name: string;
+        otherName: string;
+        description: string;
+        otherDescription: string;
+        picture: string;
+      };
+    }>(environment.api + '/recipes/' + id, {
       withCredentials: true,
       responseType: 'json',
     });
diff --git a/client/src/app/shared/modal/recipe-details/recipe-modal.component.html b/client/src/app/shared/modal/recipe-details/recipe-modal.component.html
index 7ef38fb..568468b 100644
--- a/client/src/app/shared/modal/recipe-details/recipe-modal.component.html
+++ b/client/src/app/shared/modal/recipe-details/recipe-modal.component.html
@@ -24,7 +24,11 @@
     <div class="modal-scroll">
       <form class="flex flex-col gap-2" [formGroup]="recipeDetail">
         <div class="flex gap-5">
-          <div class="bg-gray-500 w-[300px] h-[300px]">Picture</div>
+          <img
+            src="{{ recipeMetaData?.picture }}.png"
+            width="300"
+            height="400"
+          />
           <div class="grid grid-cols-2 gap-4 w-full">
             <div class="flex items-center">
               <label class="label"
diff --git a/client/src/app/shared/modal/recipe-details/recipe-modal.component.ts b/client/src/app/shared/modal/recipe-details/recipe-modal.component.ts
index ca7439e..0ebfcb2 100644
--- a/client/src/app/shared/modal/recipe-details/recipe-modal.component.ts
+++ b/client/src/app/shared/modal/recipe-details/recipe-modal.component.ts
@@ -22,6 +22,15 @@ interface RecipeDetail {
   disable: boolean;
 }
 
+interface RecipeMetaData {
+  productCode: string;
+  name: string;
+  otherName: string;
+  description: string;
+  otherDescription: string;
+  picture: string;
+}
+
 @Component({
   selector: 'recipe-modal',
   templateUrl: './recipe-modal.component.html',
@@ -45,6 +54,8 @@ export class RecipeModalComponent {
     disable: new FormControl<boolean>(false),
   });
 
+  recipeMetaData: RecipeMetaData | null = null;
+
   originalRecipeDetail: RecipeDetail | null = null;
 
   private detailModal: ElementRef<HTMLDialogElement> | null = null;
@@ -61,10 +72,25 @@ export class RecipeModalComponent {
     this.detailModal?.nativeElement.showModal();
 
     if (this.detailModal?.nativeElement.open) {
-      this.recipeService.getRecipesById(this.id).subscribe((recipe) => {
-        this.title = recipe.name + ' | ' + recipe.productCode;
-        this.recipeDetail.patchValue(
-          {
+      this.recipeService
+        .getRecipesById(this.id)
+        .subscribe(({ recipe, recipeMetaData }) => {
+          this.title = recipe.name + ' | ' + recipe.productCode;
+          this.recipeDetail.patchValue(
+            {
+              productCode: recipe.productCode,
+              name: recipe.name,
+              otherName: recipe.otherName,
+              description: recipe.Description,
+              otherDescription: recipe.otherDescription,
+              price: recipe.cashPrice,
+              isUse: recipe.isUse,
+              isShow: recipe.isShow,
+              disable: recipe.disable,
+            },
+            { emitEvent: false }
+          );
+          this.originalRecipeDetail = {
             productCode: recipe.productCode,
             name: recipe.name,
             otherName: recipe.otherName,
@@ -74,21 +100,9 @@ export class RecipeModalComponent {
             isUse: recipe.isUse,
             isShow: recipe.isShow,
             disable: recipe.disable,
-          },
-          { emitEvent: false }
-        );
-        this.originalRecipeDetail = {
-          productCode: recipe.productCode,
-          name: recipe.name,
-          otherName: recipe.otherName,
-          description: recipe.Description,
-          otherDescription: recipe.otherDescription,
-          price: recipe.cashPrice,
-          isUse: recipe.isUse,
-          isShow: recipe.isShow,
-          disable: recipe.disable,
-        };
-      });
+          };
+          this.recipeMetaData = recipeMetaData;
+        });
     }
   }
 
diff --git a/server/routers/recipe.go b/server/routers/recipe.go
index e9e4327..46b914f 100644
--- a/server/routers/recipe.go
+++ b/server/routers/recipe.go
@@ -73,22 +73,42 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 			})
 		})
 
-		r.Get("/{id}", func(w http.ResponseWriter, r *http.Request) {
+		r.Get("/{product_code}", func(w http.ResponseWriter, r *http.Request) {
 			w.Header().Add("Content-Type", "application/json")
-			id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 64)
-			if err != nil {
-				http.Error(w, "Invalid ID", http.StatusBadRequest)
-				return
-			}
+			productCode := chi.URLParam(r, "product_code")
 
 			recipe := rr.data.GetRecipe01()
+			recipeMetaData := rr.sheetService.GetSheet(r.Context(), "1rSUKcc5POR1KeZFGoeAZIoVoI7LPGztBhPw5Z_ConDE")
+
+			recipeResult := models.Recipe01{}
+			recipeMetaDataResult := map[string]string{}
+
 			for _, v := range recipe {
-				if uint64(v.ID) == id {
-					json.NewEncoder(w).Encode(v)
-					return
+				if v.ProductCode == productCode {
+					recipeResult = v
+					break
 				}
 			}
 
+			for _, v := range recipeMetaData {
+				if v[0].(string) == productCode {
+					recipeMetaDataResult = map[string]string{
+						"productCode":      v[0].(string),
+						"name":             v[1].(string),
+						"otherName":        v[2].(string),
+						"description":      v[3].(string),
+						"otherDescription": v[4].(string),
+						"picture":          v[5].(string),
+					}
+					break
+				}
+			}
+
+			json.NewEncoder(w).Encode(map[string]interface{}{
+				"recipe":         recipeResult,
+				"recipeMetaData": recipeMetaDataResult,
+			})
+
 			http.Error(w, "Recipe not found", http.StatusNotFound)
 		})
 
@@ -110,12 +130,12 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 
 			for _, v := range result {
 				mapResult = append(mapResult, map[string]string{
-					"product_code":      v[0].(string),
-					"name":              v[1].(string),
-					"other_name":        v[2].(string),
-					"description":       v[3].(string),
-					"other_description": v[4].(string),
-					"image":             v[5].(string),
+					"productCode":      v[0].(string),
+					"name":             v[1].(string),
+					"otherName":        v[2].(string),
+					"description":      v[3].(string),
+					"otherDescription": v[4].(string),
+					"picture":          v[5].(string),
 				})
 			}
 			json.NewEncoder(w).Encode(mapResult)