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 7cd9a47..14691a3 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
@@ -81,7 +81,7 @@ export class RecipeDetailsComponent implements OnInit {
     otherName: '',
     description: '',
     otherDescription: '',
-    lastModified: new Date(),
+    lastModified: Date(),
     price: 0,
     isUse: false,
     isShow: false,
@@ -103,9 +103,18 @@ export class RecipeDetailsComponent implements OnInit {
       await this._recipeService.getRecipeDetail(this.productCode)
     ).pipe(first());
     this.recipeDetail$.subscribe((detail) => {
-      // console.log('Recipe Detail', detail);
+      console.log('Recipe Detail', detail);
+
+      // transform lastChange aka lastUpdated to type `Date`
+      if(detail.lastUpdated){
+        console.log("Date ", detail.lastUpdated, typeof detail.lastUpdated)
+      }
 
       this.recipeDetailForm.patchValue(detail);
+
+      console.log("from recipeDetailForm", this.recipeDetailForm);
+      this.recipeDetailForm.get('lastModified')?.setValue(detail.lastUpdated.toString());
+
       this.isLoaded = true;
       this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
     });
@@ -204,11 +213,7 @@ export class RecipeDetailsComponent implements OnInit {
           this.recipeOriginalDetail.otherDescription
             ? this.recipeDetailForm.getRawValue().otherDescription
             : this.recipeOriginalDetail.otherDescription,
-        LastChange:
-          this.recipeDetailForm.getRawValue().lastModified !=
-          this.recipeOriginalDetail.lastModified
-            ? this.recipeDetailForm.getRawValue().lastModified
-            : this.recipeOriginalDetail.lastModified,
+        LastChange: new Date(),
         price:
           this.recipeDetailForm.getRawValue().price !=
           this.recipeOriginalDetail.price
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 5f2ca6d..bfca536 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
@@ -44,6 +44,7 @@ import {
 import { RecipeToppingComponent } from '../recipe-topping/recipe-topping.component';
 import Lang from 'src/app/shared/helpers/lang';
 import { Debugger } from 'src/app/shared/helpers/debugger';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-recipe-list',
@@ -115,12 +116,17 @@ export class RecipeListComponent implements OnInit, OnChanges {
   // selected recipelist
   public selectedRecipeList: number[] = [];
 
+  // plugged debug
+  private recipeListDebugger: Debugger | null = null;
+
   constructor(
     private _recipeService: RecipeService,
     private _materialService: MaterialService,
     private _formBuilder: FormBuilder,
-    private _userService: UserService
-  ) {}
+    private _userService: UserService,
+  ) {
+    this.recipeListDebugger = new Debugger(this._recipeService.shareHttpClient())
+  }
 
   recipeListForm = this._formBuilder.group(
     {
@@ -1199,6 +1205,6 @@ export class RecipeListComponent implements OnInit, OnChanges {
   }
 
   // debugger
-  recipeListDebugger = new Debugger();
-  eval = () => this.recipeListDebugger.eval(this);
+  // recipeListDebugger = new Debugger();
+  eval = () => this.recipeListDebugger!.eval(this);
 }