diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index d0df2ea..8a37a05 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -171,10 +171,10 @@ const routes: Routes = [
   //   loadComponent: () =>
   //     import('./core/notfound.component').then((m) => m.NotfoundComponent),
   // },
-  // {
-  //   path: '**',
-  //   redirectTo: 'departments',
-  // },
+  {
+    path: '**',
+    redirectTo: 'departments',
+  },
 ];
 
 @NgModule({
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 b7c54dd..8f3e046 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
@@ -28,7 +28,7 @@
     >
       <td class="font-medium text-gray-900 whitespace-nowrap sticky left-0">
         <input type="checkbox" class="toggle" formControlName="isUse" />
-        <p>{{i}}</p>
+        <p>{{ i }}</p>
       </td>
       <td class="font-medium text-gray-900 whitespace-nowrap sticky">
         <input
@@ -45,25 +45,26 @@
         <input type="text" class="input" formControlName="name" />
       </td>
 
-      <td
-        class="font-medium text-gray-900 whitespace-nowrap"
-        *ngIf="
-          displayByCond(i, 'powderGram', 'not-zero', { compare: undefined })
-        "
-      >
+      <td class="font-medium text-gray-900 whitespace-nowrap">
         <div
           class="flex justify-center items-center space-x-2 bg-purple-300 rounded-md p-2"
+          *ngIf="
+            displayByCond(i, 'powderGram', 'not-zero', {
+              compare: undefined
+            }) &&
+            (getTypeForRecipeListAtIndex(i)['category'] == 'powder' ||
+              getTypeForRecipeListAtIndex(i)['category'] == 'bean')
+          "
         >
           <p>Volume</p>
-          <input type="text" class="bg-transparent w-8" formControlName="powderGram" />
+          <input
+            type="text"
+            class="bg-transparent w-8"
+            formControlName="powderGram"
+          />
           <p>gram</p>
         </div>
-      </td>
 
-      <td
-        class="font-medium text-gray-900 whitespace-nowrap"
-        *ngIf="displayByCond(i, 'powderGram', 'zero', { compare: undefined })"
-      >
         <div
           class="flex items-center space-x-2 bg-purple-300 rounded-md p-2"
           *ngIf="
@@ -72,37 +73,37 @@
           "
         >
           <p>Volume</p>
-          <input type="text" class="bg-transparent w-8" formControlName="syrupGram" />
+          <input
+            type="text"
+            class="bg-transparent w-8"
+            formControlName="syrupGram"
+          />
           <p>gram</p>
         </div>
       </td>
       <td class="font-medium text-gray-900 whitespace-nowrap">
         <div class="flex flex-row p-2 space-x-3">
           <div class="flex items-center justify-center bg-gray-200">
-            <div class="items-center rounded-md" *ngIf="isStringParamExist(i)">
+            <div
+              class="items-center rounded-md"
+              *ngIf="isStringParamExist(i) && !isMixOrder(i)"
+            >
               <div
                 class="flex items-center rounded-md tooltip"
                 [attr.data-tip]="param.pkey"
                 *ngFor="let param of getStringParamOfIndex(i)"
               >
-
-
-
                 <div *ngIf="param.pkey != 'encoder_cnt'">
                   <!-- <p>&nbsp;</p> -->
-                <p *ngIf="param.pkey == 'notail'">tail</p>
-                <input
-                  type="text"
-                  class="w-8 bg-transparent"
-                  placeholder="{{ param.pvalue }}"
-                  (click)="openStringParamEditor(i)"
-                />
-                <p *ngIf="param.pkey == 'esp-v2-press-value'">mA</p>
+                  <p *ngIf="param.pkey == 'notail'">tail</p>
+                  <input
+                    type="text"
+                    class="w-8 bg-transparent"
+                    placeholder="{{ param.pvalue }}"
+                    (click)="openStringParamEditor(i)"
+                  />
+                  <p *ngIf="param.pkey == 'esp-v2-press-value'">mA</p>
                 </div>
-
-
-
-
               </div>
             </div>
           </div>
@@ -110,7 +111,9 @@
             class="tooltip flex items-center justify-evenly space-x-2 rounded-md bg-red-200 p-2"
             data-tip="Hot"
             *ngIf="
-              displayByCond(i, 'waterYield', 'not-zero', { compare: undefined })
+              displayByCond(i, 'waterYield', 'not-zero', {
+                compare: undefined
+              }) && !isMixOrder(i)
             "
           >
             <p>Hot</p>
@@ -126,7 +129,9 @@
             class="tooltip flex items-center justify-center space-x-2 rounded-md bg-blue-200 p-2"
             data-tip="Cold"
             *ngIf="
-              displayByCond(i, 'waterCold', 'not-zero', { compare: undefined })
+              displayByCond(i, 'waterCold', 'not-zero', {
+                compare: undefined
+              }) && !isMixOrder(i)
             "
           >
             <p>Cold</p>
@@ -147,10 +152,11 @@
                 compare: undefined
               }) &&
               getTypeForRecipeListAtIndex(i)['category'] != 'cup' &&
-              !isTopping(getTypeForRecipeListAtIndex(i)['id'])
+              !isTopping(getTypeForRecipeListAtIndex(i)['id']) &&
+              !isMixOrder(i)
             "
           >
-            <p>{{getTooltipForStirTime(getTypeForRecipeListAtIndex(i))}}</p>
+            <p>{{ getTooltipForStirTime(getTypeForRecipeListAtIndex(i)) }}</p>
             <input
               type="text"
               class="bg-transparent w-8"
@@ -158,38 +164,43 @@
             />
             <p>sec</p>
           </div>
-
-
         </div>
         <!-- feed levels -->
-        <div class="flex w-58 rounded-md bg-pink-200 items-center space-x-2 p-2 justify-center" *ngIf="getTooltipForStirTime(getTypeForRecipeListAtIndex(i)) == 'Mix'">
-
-
-
-
-
-            <p>Style</p>
-            <input class="w-4 bg-transparent" formControlName="feedPattern">
-            <p>Level</p>
-            <input class="w-12 bg-transparent" type="number" formControlName="feedParameter">
-
-
-
-
-          <div class="flex p-1 space-x-2 bg-green-300 text-center rounded-md" *ngIf="getStringParam(i, 'encoder_cnt') != undefined">
-
-            <p>Encoder </p>
-            <p>{{getStringParam(i, "encoder_cnt")?.pvalue}}</p>
+        <div
+          class="flex w-58 rounded-md bg-pink-200 items-center space-x-2 p-2 justify-center"
+          *ngIf="
+            getTooltipForStirTime(getTypeForRecipeListAtIndex(i)) == 'Mix' &&
+            !isMixOrder(i)
+          "
+        >
+          <p>Style</p>
+          <input class="w-4 bg-transparent" formControlName="feedPattern" />
+          <p>Level</p>
+          <input
+            class="w-12 bg-transparent"
+            type="number"
+            formControlName="feedParameter"
+          />
 
+          <div
+            class="flex p-1 space-x-2 bg-green-300 text-center rounded-md"
+            *ngIf="getStringParam(i, 'encoder_cnt') != undefined"
+          >
+            <p>Encoder</p>
+            <p>{{ getStringParam(i, "encoder_cnt")?.pvalue }}</p>
           </div>
-
         </div>
-        <div class="collapse collapse-open" *ngIf="isTopping(getTypeForRecipeListAtIndex(i)['id'])">
+        <div
+          class="collapse collapse-open"
+          *ngIf="isTopping(getTypeForRecipeListAtIndex(i)['id'])"
+        >
           <!-- <div class="collapse-title">Topping Settings</div> -->
           <div class="collapse-content">
             <app-recipe-topping
               [productCode]="productCode"
-              [index]="getToppingSlotNumber(getTypeForRecipeListAtIndex(i)['id'])"
+              [index]="
+                getToppingSlotNumber(getTypeForRecipeListAtIndex(i)['id'])
+              "
               (toppingSetChange)="onToppingSetChange($event, i)"
             ></app-recipe-topping>
           </div>
@@ -199,7 +210,6 @@
   </tbody>
 </table>
 
-
 <!-- show string param modal -->
 
 <input
@@ -378,7 +388,11 @@
 
           <div class="flex items-center space-x-2">
             <p class="text-base m-4">Level</p>
-            <input type="text" class="input w-16" formControlName="feedParameter" />
+            <input
+              type="text"
+              class="input w-16"
+              formControlName="feedParameter"
+            />
           </div>
         </details>
 
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 9d97978..cfb76e7 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
@@ -117,7 +117,7 @@ export class RecipeListComponent implements OnInit {
 
     (await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
       this.fullMaterialList = materials;
-      this.categoriedMaterial = this.ListCategory();
+      this.categoriedMaterial = this.listCategory();
       console.log(this.categoriedMaterial);
 
 
@@ -578,7 +578,7 @@ export class RecipeListComponent implements OnInit {
   }
 
   // Filter from full detail by type
-  ListCategory = () => {
+  listCategory = () => {
     let catMap: { [key: string]: any[] } = {
       others: [],
     };
@@ -629,6 +629,16 @@ export class RecipeListComponent implements OnInit {
 
   getToppingSlotNumber = (mat: number) => convertFromInterProductCode(mat) - 8110 - 1 ;
 
+  // get value at index, if 'MixOrder' exist and is 1, return true
+  isMixOrder = (index: number) => {
+    let mixOrder = this.recipeListData.at(index).get('mixOrder')?.value;
+    // console.log("get::MixOrder", mixOrder, "test get::mixOrder", this.recipeListData.at(index).get('mixOrder'));
+    return mixOrder.toString() == "1" ? true : false;
+  }
+
+
+  // ------------------ String Param ------------------
+
   isStringParamExist = (i: number) => {
     let rawStringParam = this.recipeListData.at(i).get('StringParam')?.value;
     if (rawStringParam) {
@@ -694,9 +704,15 @@ export class RecipeListComponent implements OnInit {
     return stringParamsDefinition[name] || name;
   };
 
-  displayByCond = (index: number, key: string, condition: string, compare?: any) =>{
 
-    return conditionTests[condition](this.recipeListData.value[index][key])};
+  // ------------------ Filter ------------------
+
+  displayByCond = (index: number, key: string, condition: any, compare?: any) =>{
+    if(typeof condition == 'function'){
+      return condition(this.recipeListData.value[index][key], compare);
+    }
+    return conditionTests[condition](this.recipeListData.value[index][key])
+  };
 
 
   // timeout
diff --git a/client/src/environments/environment.ts b/client/src/environments/environment.ts
index baf010b..16ac628 100644
--- a/client/src/environments/environment.ts
+++ b/client/src/environments/environment.ts
@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  api: 'http://10.11.77.50:5555',
+  api: 'https://recipe.taobin.io:8090/api',
 };