diff --git a/client/src/app/features/recipes/recipe-details/recipe-details.component.ts b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts
index f08f879..8f3e030 100644
--- a/client/src/app/features/recipes/recipe-details/recipe-details.component.ts
+++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts
@@ -225,8 +225,9 @@ export class RecipeDetailsComponent implements OnInit {
   }
 
   onRecipeListFormChange(repl: unknown[]) {
-    // console.log('Recipe List Form Changed', repl);
-    this.repl = repl as never[];
+    console.log('Recipe List Form Changed', repl);
+    this.repl = repl[1] as never[];
+    this.tpl = repl[0] as never[];
     this.isValueChanged ||= repl != undefined;
   }
 
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 373da4e..660051a 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
@@ -40,10 +40,10 @@
         "
       >
         <div
-          class="flex justify-center items-center space-x-2 bg-purple-300 rounded-md"
+          class="flex justify-center items-center space-x-2 bg-purple-300 rounded-md p-2"
         >
           <p>Volume</p>
-          <input type="text" class="input w-16" formControlName="powderGram" />
+          <input type="text" class="bg-transparent w-8" formControlName="powderGram" />
           <p>gram</p>
         </div>
       </td>
@@ -53,14 +53,14 @@
         *ngIf="displayByCond(i, 'powderGram', 'zero', { compare: undefined })"
       >
         <div
-          class="flex items-center space-x-2 bg-purple-300 rounded-md"
+          class="flex items-center space-x-2 bg-purple-300 rounded-md p-2"
           *ngIf="
             displayByCond(i, 'syrupGram', 'not-zero', { compare: undefined }) &&
             getTypeForRecipeListAtIndex(i)['category'] == 'syrup'
           "
         >
           <p>Volume</p>
-          <input type="text" class="input w-16" formControlName="syrupGram" />
+          <input type="text" class="bg-transparent w-8" formControlName="syrupGram" />
           <p>gram</p>
         </div>
       </td>
@@ -141,7 +141,11 @@
         <div class="collapse collapse-open" *ngIf="isTopping(getTypeForRecipeListAtIndex(i)['id'])">
           <div class="collapse-title">Topping Settings</div>
           <div class="collapse-content">
-            <app-recipe-topping></app-recipe-topping>
+            <app-recipe-topping
+              [productCode]="productCode"
+              [index]="getToppingSlotNumber(getTypeForRecipeListAtIndex(i)['id'])"
+              (toppingSetChange)="onToppingSetChange($event, i)"
+            ></app-recipe-topping>
           </div>
         </div>
       </td>
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 02aafda..821fadf 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,7 +29,8 @@ import {
   StringParam,
   stringParamsDefinition,
   conditionTests,
-  inRange
+  inRange,
+  convertFromInterProductCode
 } from 'src/app/shared/helpers/recipe';
 
 import { RecipeToppingComponent } from '../recipe-topping/recipe-topping.component';
@@ -80,6 +81,9 @@ export class RecipeListComponent implements OnInit {
   // detailed recipe list
   showDetailRecipeList: boolean = false;
 
+  // topping list
+  public toppingList: any[] = [];
+
   constructor(
     private _recipeService: RecipeService,
     private _materialService: MaterialService,
@@ -280,7 +284,9 @@ export class RecipeListComponent implements OnInit {
           emitted_res.push(recipeDetailMat);
         });
 
-        this.recipeListFormChange.emit(emitted_res as unknown[]);
+        // do another emit
+
+        this.recipeListFormChange.emit([this.toppingList, emitted_res] as unknown[]);
       } else {
         this.recipeListFormChange.emit([]);
       }
@@ -392,9 +398,9 @@ export class RecipeListComponent implements OnInit {
         let interCode = Math.floor(mat.materialId / 10000) * 10000;
         let originalCode = mat.materialId - (interCode);
 
-        console.log("from",mat.materialId,"interCode", interCode, "originalCode", originalCode);
+        // console.log("from",mat.materialId,"interCode", interCode, "originalCode", originalCode);
         category = getMaterialType(originalCode);
-        console.log("get original category of inter", category);
+        // console.log("get original category of inter", category);
       }
 
       if (Array.isArray(catMap[category])) {
@@ -415,7 +421,11 @@ export class RecipeListComponent implements OnInit {
   isNotExistbyCatagories = (materialId: number) =>
     getMaterialType(materialId) == 'others';
 
-  isTopping = (materialId: number) => { return inRange(8111, 8130, materialId); };
+  isTopping = (materialId: number) => {
+    return inRange(8111, 8130, convertFromInterProductCode(materialId));
+  };
+
+  getToppingSlotNumber = (mat: number) => convertFromInterProductCode(mat) - 8110;
 
   isStringParamExist = (i: number) => {
     let rawStringParam = this.recipeListData.at(i).get('StringParam')?.value;
@@ -549,4 +559,10 @@ export class RecipeListComponent implements OnInit {
 
     return '';
   };
+
+  onToppingSetChange = (event: any, index: number) => {
+    // console.log('onToppingSetChange at index', index, "get event", event);
+    this.toppingList[event[0]] = event[1];
+    // console.log('onToppingSetChange', this.toppingList);
+  }
 }
diff --git a/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.html b/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.html
index 6db76f8..8da2488 100644
--- a/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.html
+++ b/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.html
@@ -1,27 +1,38 @@
-<div>
-  <input type="checkbox" />
-  <!-- toppingGroup -->
-  <ng-select
-    appendTo="body"
-    [clearable]="false"
-    [compareWith]="this.compareFunc"
-    formControlName="groupID"
-  >
-    <ng-option
-      *ngFor="let item of allToppingsDefinitions"
-      [value]="item.groupId.toString()"
+<div [formGroup]="toppingForm">
+  <div formArrayName="toppingList" *ngFor="let topping of toppingList.controls; let i = index">
+    <div formGroupName="{{ i }}">
+
+      <input type="checkbox" />
+    <!-- toppingGroup -->
+    <ng-select
+      appendTo="body"
+      [clearable]="false"
+      [compareWith]="this.compareFunc"
+      formControlName="groupID"
+      (close)="getDefaultOfGroup(getGroupIdByIndex(i))"
     >
-      <div>{{ item.name }} ({{ item.groupId }})</div>
+      <ng-option
+        *ngFor="let item of allToppingsDefinitions"
+        [value]="item.groupId.toString()"
+      >
+        <div>{{ item.name }} ({{ item.groupId }})</div>
+      </ng-option>
+    </ng-select>
+    <!-- defaultSelect -->
+    <ng-select
+      appendTo="body"
+      [clearable]="false"
+      [compareWith]="this.compareFunc"
+      formControlName="defaultIDSelect"
+    >
+      <ng-option
+      *ngFor="let item of getMembersByGroupId(getGroupIdByIndex(this.index!))"
+      [value]="item.id.toString()"
+    >
+      <div>{{ item.name }} ({{ item.id }})</div>
     </ng-option>
-  </ng-select>
-  <!-- defaultSelect -->
-  <ng-select
-  >
-    <!-- <ng-option
-      *ngFor="let item of getMembersByGroupId(getGroupIdByIndex(this.index))"
-      [value]="item.defaultId.toString()"
-    >
-      <div>{{ item.name }} ({{ item.defaultId }})</div>
-    </ng-option> -->
-  </ng-select>
+    </ng-select>
+  </div>
+    </div>
+
 </div>
diff --git a/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.ts b/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.ts
index 2d0a79a..7fd4e4a 100644
--- a/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.ts
+++ b/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.ts
@@ -1,10 +1,19 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormArray,
+  FormBuilder,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { ToppingService } from 'src/app/core/services/topping.service';
-import { Topping, ToppingGroup, ToppingSet } from 'src/app/core/models/recipe.model';
+import {
+  Topping,
+  ToppingGroup,
+  ToppingSet,
+} from 'src/app/core/models/recipe.model';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -14,8 +23,8 @@ import { ActivatedRoute } from '@angular/router';
   templateUrl: './recipe-topping.component.html',
 })
 export class RecipeToppingComponent implements OnInit {
-  @Input() index: number = 0;
-  @Input() toppingSet!: ToppingSet;
+  @Input() productCode: string = '';
+  @Input() index: number | undefined = undefined;
   @Output() toppingSetChange = new EventEmitter<unknown[]>();
 
   allToppings: Topping | undefined = undefined;
@@ -30,41 +39,90 @@ export class RecipeToppingComponent implements OnInit {
   }[] = [];
   department = this._route.snapshot.paramMap.get('department');
 
+  private _toppingSetOriginalArray!: ToppingSet[];
+
+  // form
+  toppingForm = this._formBuilder.group(
+    {
+      toppingList: this._formBuilder.array([]),
+    },
+    {
+      updateOn: 'blur',
+    }
+  );
+
+  get toppingList(): FormArray {
+    return this.toppingForm.get('toppingList') as FormArray;
+  }
+
   constructor(
+    private _formBuilder: FormBuilder,
     private _recipeService: RecipeService,
     private _toppingService: ToppingService,
     private _route: ActivatedRoute
   ) {}
   async ngOnInit(): Promise<void> {
-    (await this._toppingService
-      .getToppings(
+    // get topping of this recipe
+
+    //    initialize toppinglist form
+
+    (
+      await this._toppingService.getToppingsOfRecipe(
+        await this._recipeService.getCurrentCountry(),
+        this._recipeService.getCurrentFile(),
+        this.productCode
+      )
+    ).subscribe((data) => {
+      this._toppingSetOriginalArray = data;
+      // console.log('ToppingSet', data);
+
+      // check length of toppingList if in range with given index
+      if(this.index && data.length >= this.index!){
+        this.toppingList.push(
+          this._formBuilder.group({
+            isUse: data[this.index!].isUse,
+            groupID: data[this.index!].groupID,
+            defaultIDSelect: data[this.index!].defaultIDSelect,
+            ListGroupID: data[this.index!].ListGroupID,
+          })
+        );
+      }
+    });
+
+    // get all topping
+    (
+      await this._toppingService.getToppings(
         this.department!,
         this._recipeService.getCurrentFile()
-      ))
-      .subscribe((data) => {
-        this.allToppings = data;
-        // console.log('allToppings', data);
+      )
+    ).subscribe((data) => {
+      this.allToppings = data;
+      // console.log('allToppings', data);
 
-        data.ToppingGroup.forEach((group: ToppingGroup) => {
-          if (this.allToppingsDefinitions != null) {
-            // this.allToppingsDefinitions = {};
-            this.allToppingsDefinitions.push({
-              groupId: group.groupID,
-              name: group.name,
-              members: group.idInGroup,
-              default: group.idDefault,
-            });
+      data.ToppingGroup.forEach((group: ToppingGroup) => {
+        if (this.allToppingsDefinitions != null) {
+          // this.allToppingsDefinitions = {};
+          this.allToppingsDefinitions.push({
+            groupId: group.groupID,
+            name: group.name,
+            members: group.idInGroup,
+            default: group.idDefault,
+          });
 
-            this.allToppingMembersByGroup.push({
-              id: group.groupID,
-              members: this.mapToppingListToMember(group.idInGroup.split(',')),
-            });
-          }
-        });
-
-        // console.log(this.allToppingsDefinitions);
-        // console.log('allToppingMembersByGroup', this.allToppingMembersByGroup);
+          this.allToppingMembersByGroup.push({
+            id: group.groupID,
+            members: this.mapToppingListToMember(group.idInGroup.split(',')),
+          });
+        }
       });
+    });
+
+
+    // emit value changes
+    this.toppingForm.valueChanges.subscribe((value) => {
+      console.log('emit value', value);
+      this.toppingSetChange.emit([this.index, this.toppingList.value]);
+    });
   }
 
   compareFunc = (a: any, b: any) => a.toString() === b.toString();
@@ -80,15 +138,24 @@ export class RecipeToppingComponent implements OnInit {
       };
     });
 
-    getMembersByGroupId(groupID: string) {
-      return this.allToppingMembersByGroup.find((x) => x.id == groupID)?.members;
-    }
+  getMembersByGroupId(groupID: string) {
+    return this.allToppingMembersByGroup.find((x) => x.id == groupID)?.members;
+  }
 
-    getGroupIdByIndex(i: number) {
-      // console.log("getGroupId",this.toppingList.value![i])
-      // return (this.toppingList.value![i] as any).groupID as string;
-    }
+  getGroupIdByIndex(i: number) {
+    return (this.toppingList.value![0] as any).groupID as string;
+  }
 
-  // services
+  getDefaultOfGroup(groupID: any) {
+    this.toppingList.controls.forEach((control) => {
+      if ((control.value as any).groupID == groupID) {
+
+        let newDefault = (this.allToppingsDefinitions as any).find(
+          (x: any) => x.groupId == groupID
+        )!.default;
+
+        control.get('defaultIDSelect')?.setValue(newDefault);
+      }
+    })
+  }
 }
-
diff --git a/client/src/app/shared/helpers/recipe.ts b/client/src/app/shared/helpers/recipe.ts
index 4ab1bad..baa004b 100644
--- a/client/src/app/shared/helpers/recipe.ts
+++ b/client/src/app/shared/helpers/recipe.ts
@@ -48,6 +48,14 @@ export function isNonMaterial(materialId: number) {
   );
 }
 
+// Inter mode checker
+export function convertFromInterProductCode(materialId: number) {
+  let interPrefix = Math.floor(materialId / 10000) * 10000;
+  let interId = materialId - interPrefix;
+
+  return interId;
+}
+
 // StringParam
 
 export class StringParam {