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 6eb5a93..0bbb0d1 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
@@ -11,7 +11,12 @@
     formArrayName="recipeListData"
     *ngFor="let mat of recipeListData.controls; let i = index"
   >
-    <tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
+    <tr
+      class="bg-white la border-b hover:bg-secondary"
+      formGroupName="{{ i }}"
+      (mousedown)="initHoldEvent()"
+      (mouseup)="openRecipeListEditor(i)"
+    >
       <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
         <input type="checkbox" class="toggle" formControlName="isUse" />
       </td>
@@ -33,77 +38,90 @@
 
       <td
         class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap"
-        *ngIf="displayByCond(i, 'powderGram', 'not-zero')"
+        *ngIf="
+          displayByCond(i, 'powderGram', 'not-zero', { compare: undefined })
+        "
       >
-        <div class="flex items-center">
-          <p>Volume=&nbsp;</p>
+        <div
+          class="flex justify-center items-center space-x-2 bg-purple-300 rounded-md"
+        >
+          <p>Volume</p>
           <input type="text" class="input w-16" formControlName="powderGram" />
-          <p>&nbsp;gram</p>
+          <p>gram</p>
         </div>
       </td>
 
       <td
         class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap"
-        *ngIf="displayByCond(i, 'syrupGram', 'not-zero')"
+        *ngIf="
+          displayByCond(i, 'syrupGram', 'not-zero', { compare: undefined })
+        "
       >
-        <div class="flex items-center">
-          <p>Volume=&nbsp;</p>
+        <div class="flex items-center space-x-2 bg-purple-300 rounded-md">
+          <p>Volume</p>
           <input type="text" class="input w-16" formControlName="syrupGram" />
-          <p>&nbsp;gram</p>
+          <p>gram</p>
         </div>
       </td>
       <td
         class="m-2 px-4 py-4 space-y-2 font-medium text-gray-900 whitespace-nowrap"
       >
-        <div class="flex items-center space-x-4">
+        <div class="flex items-center  justify-center space-x-4 bg-gray-200">
           <div
-            class="flex items-center rounded-md p-2"
+            class="flex items-center rounded-md"
             *ngIf="isStringParamExist(i)"
           >
             <div
-              class="flex items-center bg-orange-400 rounded-md p-2"
+              class="flex items-center rounded-md "
               *ngFor="let param of getStringParamOfIndex(i)"
             >
-              <p>&nbsp;</p>
-              <p *ngIf="param.pkey == 'notail'">tail=&nbsp;</p>
+              <!-- <p>&nbsp;</p> -->
+              <p *ngIf="param.pkey == 'notail'">tail</p>
               <input
                 type="text"
-                class="input w-16"
+                class="input input-bordered w-16"
                 placeholder="{{ param.pvalue }}"
                 (click)="openStringParamEditor(i)"
               />
-              <p *ngIf="param.pkey == 'esp-v2-press-value'">&nbsp;mA</p>
+              <p class="m-4" *ngIf="param.pkey == 'esp-v2-press-value'">
+                mA
+              </p>
             </div>
           </div>
         </div>
         <div
-          class="flex items-center"
-          *ngIf="displayByCond(i, 'waterYield', 'not-zero')"
-        >
-          <p>Hot=&nbsp;</p>
-          <input type="text" class="input w-16" formControlName="waterYield" />
-          <p>&nbsp;ml&nbsp;</p>
-        </div>
-        <div
-          class="flex items-center"
-          *ngIf="displayByCond(i, 'waterCold', 'not-zero')"
-        >
-          <p>Cold=&nbsp;</p>
-          <input type="text" class="input w-16" formControlName="waterCold" />
-          <p>&nbsp;ml&nbsp;</p>
-        </div>
-        <div
-          class="flex items-center"
+          class="flex items-center justify-center space-x-2 rounded-md bg-red-200"
           *ngIf="
-            displayByCond(i, 'stirTime', 'not-zero') &&
-            getTypeForRecipeListAtIndex(i)['category'] != 'cup'
+            displayByCond(i, 'waterYield', 'not-zero', { compare: undefined })
+          "
+        >
+          <p>Hot</p>
+          <input type="text" class="input w-16" formControlName="waterYield" />
+          <p>ml</p>
+        </div>
+        <div
+          class="flex items-center justify-center space-x-2 rounded-md bg-blue-200"
+          *ngIf="
+            displayByCond(i, 'waterCold', 'not-zero', { compare: undefined })
+          "
+        >
+          <p>Cold</p>
+          <input type="text" class="input w-16" formControlName="waterCold" />
+          <p>ml</p>
+        </div>
+        <div
+          class="flex items-center justify-center space-x-2 rounded-md bg-green-300"
+          *ngIf="
+            displayByCond(i, 'stirTime', 'not-zero', { compare: undefined }) &&
+            getTypeForRecipeListAtIndex(i)['category'] != 'cup' &&
+            !isTopping(getTypeForRecipeListAtIndex(i)['id'])
           "
         >
           <p *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'bean'">
-            Grinder=&nbsp;
+            Grinder
           </p>
           <p *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'whipper'">
-            Mix=&nbsp;
+            Mix
           </p>
           <p
             *ngIf="
@@ -112,31 +130,11 @@
                 getTypeForRecipeListAtIndex(i)['id'] == 8002)
             "
           >
-            Clean=&nbsp;
+            Clean
           </p>
           <input type="text" class="input w-16" formControlName="stirTime" />
-          <p>&nbsp;sec&nbsp;</p>
+          <p>sec</p>
         </div>
-        <button class="btn" (click)="openRecipeListEditor(i)">
-          <div class="flex items-center space-x-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-gear"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"
-              />
-              <path
-                d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"
-              />
-            </svg>
-            <p>Details</p>
-          </div>
-        </button>
       </td>
     </tr>
   </tbody>
@@ -265,10 +263,10 @@
             <p>&nbsp;gram</p>
           </div>
 
-          <div class="flex items-center space-x-2">
+          <!-- <div class="flex items-center space-x-2">
             <p class="text-base m-4">Time</p>
             <input type="text" class="input" formControlName="powderTime" />
-          </div>
+          </div> -->
         </details>
 
         <details
@@ -282,24 +280,36 @@
             <p>&nbsp;gram</p>
           </div>
 
-          <div class="flex items-center space-x-2">
+          <!-- <div class="flex items-center space-x-2">
             <p class="text-base m-4">Time</p>
             <input type="text" class="input" formControlName="syrupTime" />
-          </div>
+          </div> -->
         </details>
 
         <details class="flex items-center space-x-2 bg-blue-200 p-4 rounded-md">
           <summary class="cursor-pointer">Water</summary>
           <div class="flex items-center space-x-2">
             <p class="text-base m-4">Hot (waterYield)</p>
-            <input type="text" class="input" formControlName="waterYield" />
+            <input type="text" class="input w-16" formControlName="waterYield" />
+            <p class="text-base m-4">ml</p>
           </div>
 
           <div class="flex items-center space-x-2">
             <p class="text-base m-4">Cold (waterCold)</p>
-            <input type="text" class="input" formControlName="waterCold" />
+            <input type="text" class="input w-16" formControlName="waterCold" />
+            <p class="text-base m-4">ml</p>
           </div>
         </details>
+
+        <!-- String Param -->
+        <div class="flex items-center space-x-2">
+          <p class="text-base m-4">Parameters</p>
+          <input
+            type="text"
+            class="input input-bordered"
+            formControlName="StringParam"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
index 4c64750..1690427 100644
--- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
+++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
@@ -29,6 +29,7 @@ import {
   StringParam,
   stringParamsDefinition,
   conditionTests,
+  inRange
 } from 'src/app/shared/helpers/recipe';
 
 @Component({
@@ -389,6 +390,8 @@ export class RecipeListComponent implements OnInit {
   isNotExistbyCatagories = (materialId: number) =>
     getMaterialType(materialId) == 'others';
 
+  isTopping = (materialId: number) => { return inRange(8111, 8130, materialId); };
+
   isStringParamExist = (i: number) => {
     let rawStringParam = this.recipeListData.at(i).get('StringParam')?.value;
     if (rawStringParam) {
@@ -454,12 +457,47 @@ export class RecipeListComponent implements OnInit {
     return stringParamsDefinition[name] || name;
   };
 
-  displayByCond = (index: number, key: string, condition: string) =>{
+  displayByCond = (index: number, key: string, condition: string, compare?: any) =>{
+
     return conditionTests[condition](this.recipeListData.value[index][key])};
 
 
+  // timeout
+  timeoutHandler: any;
+  timeout: number = 0;
+  initHoldEvent() {
+    // if(this.timeoutHandler){
+    //   clearInterval(this.timeoutHandler);
+    //   this.timeoutHandler = undefined;
+    // }
+    // let timeout = 0;
+    this.timeoutHandler = setInterval(() => {
+      this.timeout += 1;
+    }, 100);
+  }
+
   openRecipeListEditor(i: number) {
-    this.showDetailRecipeList = true;
-    this.currentSelectRecipeList = i;
+
+    if(this.timeoutHandler){
+      console.log("timeout get", this.timeout);
+      if(this.timeout >= 5){
+        this.showDetailRecipeList = true;
+      }
+
+      clearInterval(this.timeoutHandler);
+      this.timeoutHandler = undefined;
+      this.currentSelectRecipeList = i;
+      this.timeout = 0;
+    }
+
+  }
+
+  // this does update, not save
+  updateRecipeListControl(i: any, key: string) {
+    // this.recipeListData.at(i).get(key)?.setValue(this.recipeListData.value[i][key]);
+
+    (this.recipeListData.controls[i] as any).controls[key].setValue(
+      this.recipeListData.value[i][key]
+    );
   }
 }
diff --git a/client/src/app/shared/helpers/recipe.ts b/client/src/app/shared/helpers/recipe.ts
index 64c8a21..c42d251 100644
--- a/client/src/app/shared/helpers/recipe.ts
+++ b/client/src/app/shared/helpers/recipe.ts
@@ -91,5 +91,6 @@ export var stringParamsDefinition: { [key: string]: string } = {
 }
 
 export var conditionTests: { [key: string]: (arg: any) => boolean } = {
-  'not-zero': (arg: any) => arg != 0
+  'not-zero': (arg: any) => arg != 0,
+  'false-if-another-exist': (arg: any) => arg[1] != undefined
 }