diff --git a/client/src/app/features/merge/merge.component.html b/client/src/app/features/merge/merge.component.html
index f510ed8..eb5f08f 100644
--- a/client/src/app/features/merge/merge.component.html
+++ b/client/src/app/features/merge/merge.component.html
@@ -15,10 +15,10 @@
       >
         [{{ getCommitAttr(commit, "Created_at") }}] [{{
           getCommitAttr(commit, "Editor")
-        }}] | {{ getCommitAttr(commit, "Msg") }}
+        }}] | {{ getCommitAttr(commit, "Msg") }} | {{ getCommitAttr(commit, "Id") }}
       </option>
     </select>
-
+    
     <br />
     <!-- third source selector / from machine -->
     <label for="anotherKeys">Select another source : </label>
@@ -29,13 +29,13 @@
     >
       <option>--- Commit ---</option>
       <option
-        *ngFor="let commit of getPatchMapKeys()"
+        *ngFor="let commit of getPatchMapKeysIfProductCode()"
         [value]="commit"
         id="source3_{{ commit }}"
       >
         [{{ getCommitAttr(commit, "Created_at") }}] [{{
           getCommitAttr(commit, "Editor")
-        }}] | {{ getCommitAttr(commit, "Msg") }}
+        }}] | {{ getCommitAttr(commit, "Msg") }} | {{ getCommitAttr(commit, "Id") }}
       </option>
       <option>--- Machine ---</option>
       <option>--- Recipe ---</option>
@@ -109,6 +109,8 @@
       <details class="collapse collapse-arrow">
         <summary class="collapse-title bg-red-200">
           {{ selectedCommit }}
+          {{ anotherSelectedSource}}
+          {{ anotherSelectedSource.startsWith('coffeethai02_') }}
         </summary>
         <div class="collapse-content grid grid-cols-3">
           <div class="flex-shrink-0 overflow-x-scroll shadow-lg" id="commit-source" (scroll)="addSyncingScrollDiffPane('commit-source')">
@@ -123,7 +125,7 @@
               (recipeListFormChange)="onRecipeListFormChange($event)"
             ></app-recipe-list>
           </div>
-          <div class="flex-shrink-0 overflow-x-scroll shadow-lg" id="main-source" (scroll)="addSyncingScrollDiffPane('main-source')">
+          <div *ngIf="reloadMainSource" class="flex-shrink-0 overflow-x-scroll shadow-lg" id="main-source" (scroll)="addSyncingScrollDiffPane('main-source')">
             <app-recipe-list
               [productCode]="
                 getCommitAttr(selectedCommit, 'contents').productCode!
@@ -138,33 +140,50 @@
               "
             ></app-recipe-list>
           </div>
-          <div
-          class="flex-shrink-0 overflow-x-scroll shadow-lg"
-            id="another-source"
+          <div 
+            class="flex-shrink-0 overflow-x-scroll shadow-lg" 
+            id="another-source" 
             (scroll)="addSyncingScrollDiffPane('another-source')"
-            *ngIf="hasProductCodeOfCommits() && anotherSelectedSource != ''"
-          >
-            <app-recipe-list
-              [productCode]="
-                getCommitAttr(selectedCommit, 'contents').productCode!
-              "
+            >
+            <ng-container *ngIf="hasProductCodeOfCommits() && anotherSelectedSource != '' && anotherSelectedSource.startsWith('coffeethai02_'); else recipeTemplate"
+              >
+              <app-recipe-list
+                [productCode]="
+                  getCommitAttr(selectedCommit, 'contents').productCode!
+                "
+                [noFetch]="true"
+                [recipeList]="
+                  anotherTargetRecipe[
+                    getCommitAttr(selectedCommit, 'contents').productCode
+                  ].recipes
+                "
+                [displayOnly]="true"
+                [diffChangeContext]="
+                  buildContext(
+                    'right',
+                    getCommitAttr(selectedCommit, 'contents').productCode
+                  )
+                "
+                (recipeListFormChange)="onSourceListFormChange($event)"
+              >
+            </app-recipe-list>
+            </ng-container>
+          </div>
+          <ng-template #recipeTemplate>
+            <app-recipe-list 
+              [productCode]="getCommitAttr(selectedCommit, 'contents').productCode!"
               [noFetch]="true"
-              [recipeList]="
-                anotherTargetRecipe[
-                  getCommitAttr(selectedCommit, 'contents').productCode
-                ].recipes
-              "
+              [recipeList]="getCommitAttr(anotherSelectedSource, 'contents').recipes"
               [displayOnly]="true"
               [diffChangeContext]="
-                buildContext(
-                  'right',
-                  getCommitAttr(selectedCommit, 'contents').productCode
-                )
-              "
+              buildContext(
+                'right',
+                getCommitAttr(selectedCommit, 'contents').productCode
+              )"
               (recipeListFormChange)="onSourceListFormChange($event)"
             >
             </app-recipe-list>
-          </div>
+          </ng-template> 
         </div>
       </details>
     </div>
diff --git a/client/src/app/features/merge/merge.component.ts b/client/src/app/features/merge/merge.component.ts
index 9f5563b..0359b41 100644
--- a/client/src/app/features/merge/merge.component.ts
+++ b/client/src/app/features/merge/merge.component.ts
@@ -83,6 +83,8 @@ export class MergeComponent
   // from another source
   anotherTargetRecipe: any = {};
 
+  reloadMainSource = true;
+
   // -------------------- current selection
 
   // currentTargetOfMaster: any = undefined;
@@ -169,6 +171,14 @@ export class MergeComponent
       });
   }
 
+  // reload data of main-source
+  triggerReload() {
+    this.reloadMainSource = false;
+    setTimeout(() => {
+      this.reloadMainSource = true;
+    }, 0);
+  }
+
   async ngOnInit(): Promise<void> {
     // fetch related product codes
   }
@@ -200,6 +210,15 @@ export class MergeComponent
   // get patch map keys
   getPatchMapKeys = () => Object.keys(this.patchMap);
 
+  // get patch map keys, if have the same productCode
+  getPatchMapKeysIfProductCode() {
+    const keys = Object.keys(this.patchMap).filter(selectedCommit => {
+      return this.patchMap[selectedCommit].productCode === this.selectedProductCode;
+    });
+    // console.log("Filtered PacthMap : ", keys);
+    return keys;
+  }
+
   // check if load patch keys
   isPatchMapKeysLoaded = () => this.getPatchMapKeys().length > 0;
   testLoadCheck = () =>
@@ -260,19 +279,26 @@ export class MergeComponent
   selectCommit = (commit: any) => {
     // console.log('select commit', commit.target.value);
     this.selectedCommit = commit.target.value;
+    this.selectedProductCode = this.getCommitAttr(this.selectedCommit,"contents").productCode
+    // reload data of main-source
+    this.triggerReload();
+    console.log("selectedCommit target v : ",this.selectedCommit)
+    console.log("selectedProductCode : ",this.selectedProductCode)
   };
 
   selectAnotherSource = (source: any) => {
     this.anotherSelectedSource = source.target.value;
+    console.log("another select target v : ",this.anotherSelectedSource)
   };
 
   changeAnotherSource = async (source: any) => {
-    this.anotherSelectedSource =
-      'coffeethai02_' + source.target.value + '.json';
-    console.log(
-      'another source: target version -> ',
-      this.anotherSelectedSource
-    );
+    //base on change
+    this.anotherSelectedSource = 'coffeethai02_' + source.target.value + '.json';
+    // const vset = '691'
+    // this.anotherSelectedSource = `coffeethai02_${source}.json`;
+    console.log('another source: target version -> ',this.anotherSelectedSource);
+    console.log("anotherTargetRecipe : ",this.anotherTargetRecipe)
+
     // activate fetch
     for (let pd of this.getProductCodesOfCommits()) {
       await this.getAnotherRecipeOfProductCode(pd);
@@ -321,7 +347,8 @@ export class MergeComponent
           return {
             changeContext: undefined,
             skipZeroes: true,
-            toppingData: this.anotherTargetRecipe[pd!].ToppingSet,
+            // toppingData: this.anotherTargetRecipe[pd!].ToppingSet,
+            toppingData: this.getCommitAttr(this.selectedCommit, 'contents').ToppingSet,
           };
       }
     }
@@ -384,15 +411,17 @@ export class MergeComponent
         // test compare
         this.getPatchMapKeys().forEach((patchId) => {
           // compare with master
-          let cmp = compare(
-            this.anotherTargetRecipe[productCode!],
-            this.fullPatches[patchId].contents,
-            ['LastChange']
-          );
-          // save only what changes
-          this.changeMap[patchId + '_' + this.anotherSelectedSource] = {
-            changes: cmp,
-          };
+          if (this.anotherTargetRecipe[productCode!]['productCode']  == this.fullPatches[patchId].contents['productCode']) {
+            let cmp = compare(
+              this.anotherTargetRecipe[productCode!],
+              this.fullPatches[patchId].contents,
+              ['LastChange']
+            );
+            // save only what changes
+            this.changeMap[patchId + '_' + this.anotherSelectedSource] = {
+              changes: cmp,
+            };
+          }
         });
 
         console.log('change map', this.changeMap);
@@ -500,6 +529,7 @@ export class MergeComponent
 
   // selection empty?
   isSelectionEmpty(side: string): boolean {
+    console.log("isSelectionEmpty : ",side,this.selectionMap[this.selectedCommit + side])
     return this.selectionMap[this.selectedCommit + side] == undefined || this.selectionMap[this.selectedCommit + side].length == 0;
   }
 
diff --git a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html
index 211323b..0d5644b 100644
--- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html
+++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html
@@ -61,7 +61,7 @@
         >
           <p>Volume</p>
           <input
-            type="text"
+            type="number"
             class="bg-transparent w-8"
             formControlName="powderGram"
           />
@@ -77,7 +77,7 @@
         >
           <p>Volume</p>
           <input
-            type="text"
+            type="number"
             class="bg-transparent w-8"
             formControlName="syrupGram"
           />
@@ -122,7 +122,7 @@
             <p>Hot</p>
 
             <input
-              type="text"
+              type="number"
               class="w-8 bg-transparent"
               formControlName="waterYield"
             />
@@ -139,7 +139,7 @@
           >
             <p>Cold</p>
             <input
-              type="text"
+              type="number"
               class="w-8 bg-transparent"
               formControlName="waterCold"
             />
@@ -161,7 +161,7 @@
           >
             <p>{{ getTooltipForStirTime(getTypeForRecipeListAtIndex(i)) }}</p>
             <input
-              type="text"
+              type="number"
               class="bg-transparent w-8"
               formControlName="stirTime"
             />
@@ -301,7 +301,7 @@
       >
         <input type="checkbox" formControlName="isUse" />
         <input
-          type="text"
+          type="number"
           class="input input-primary"
           formControlName="materialPathId"
           (click)="openMaterialList(isdx)"