diff --git a/client/src/app/core/models/recipe.model.ts b/client/src/app/core/models/recipe.model.ts
index 2a95696..cbfe306 100644
--- a/client/src/app/core/models/recipe.model.ts
+++ b/client/src/app/core/models/recipe.model.ts
@@ -32,13 +32,13 @@ export interface Recipe01 {
   TextForWarningBeforePay: string[];
   cashPrice: number;
   changerecipe: string;
-  disable: string;
+  disable: boolean;
   disable_by_cup: string;
   disable_by_ice: string;
   EncoderCount: string;
   id: string;
-  isUse: string;
-  isShow: string;
+  isUse: boolean;
+  isShow: boolean;
   name: string;
   nonCashPrice: string;
   otherDescription: string;
diff --git a/client/src/app/shared/modal/recipe-modal.component.html b/client/src/app/shared/modal/recipe-modal.component.html
index c0a8003..01e3870 100644
--- a/client/src/app/shared/modal/recipe-modal.component.html
+++ b/client/src/app/shared/modal/recipe-modal.component.html
@@ -17,50 +17,83 @@
 </button>
 
 <dialog class="modal" #detailModal>
-  <div class="modal-box w-11/12 max-w-5xl">
+  <div class="modal-box max-w-[1200px]">
     <div>
       <h3 class="font-bold text-lg mb-3">{{ title }}</h3>
     </div>
     <div class="modal-scroll">
       <form class="flex flex-col gap-2" [formGroup]="recipeDetail">
-        <div class="flex flex-wrap">
-          <div class="flex flex-col gap-1">
-            <label><span class="text-base label-text">Name: </span> </label>
-            <input
-              type="text"
-              class="w-full input input-sm input-bordered input-ghost"
-              formControlName="name"
-            />
-          </div>
-          <div class="flex flex-col gap-1">
-            <label
-              ><span class="text-base label-text"> Other Name:</span>
-            </label>
-            <input
-              type="text"
-              class="w-full input input-sm input-bordered input-ghost"
-              formControlName="otherName"
-            />
-          </div>
-          <div class="flex flex-row items-center justify-between gap-2">
-            <div class="flex flex-col gap-1 w-1/2">
-              <label
-                ><span class="text-base label-text"> Description:</span>
-              </label>
+        <div class="flex gap-5">
+          <div class="bg-gray-500 w-[300px] h-[300px]">Picture</div>
+          <div class="grid grid-cols-2 gap-4 w-full">
+            <div class="flex items-center">
+              <label class="label"
+                ><span class="label-text text-base mr-3 w-max"
+                  >Name:</span
+                ></label
+              >
               <input
                 type="text"
-                class="w-full input input-sm input-bordered input-ghost"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="name"
+              />
+            </div>
+            <div class="flex items-center">
+              <label class="text-base mr-3 w-max">Other Name:</label>
+              <input
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="otherName"
+              />
+            </div>
+            <div class="flex items-center">
+              <label class="text-base mr-3 w-max">Description:</label>
+              <input
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
                 formControlName="description"
               />
             </div>
-            <div class="flex flex-col gap-1 w-1/2">
-              <label><span class="text-baase label-text">Price:</span></label>
+            <div class="flex items-center">
+              <label class="text-base mr-3 w-max">Other Description:</label>
               <input
-                type="number"
-                class="w-full input input-sm input-bordered input-ghost"
-                formControlName="price"
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="otherDescription"
               />
             </div>
+            <div class="flex flex-row col-span-2 gap-5">
+              <div class="form-control">
+                <label class="cursor-pointer label">
+                  <span class="label-text">Is Use?</span>
+                  <input
+                    type="checkbox"
+                    class="toggle"
+                    formControlName="isUse"
+                  />
+                </label>
+              </div>
+              <div class="form-control">
+                <label class="cursor-pointer label">
+                  <span class="label-text">Is Show?</span>
+                  <input
+                    type="checkbox"
+                    class="toggle"
+                    formControlName="isShow"
+                  />
+                </label>
+              </div>
+              <div class="form-control">
+                <label class="cursor-pointer label">
+                  <span class="label-text">Is Disable?</span>
+                  <input
+                    type="checkbox"
+                    class="toggle"
+                    formControlName="disable"
+                  />
+                </label>
+              </div>
+            </div>
           </div>
         </div>
         <div class="modal-action">
diff --git a/client/src/app/shared/modal/recipe-modal.component.ts b/client/src/app/shared/modal/recipe-modal.component.ts
index 312612b..ef58e3c 100644
--- a/client/src/app/shared/modal/recipe-modal.component.ts
+++ b/client/src/app/shared/modal/recipe-modal.component.ts
@@ -8,7 +8,11 @@ interface RecipeDetail {
   name: string;
   otherName: string;
   description: string;
+  otherDescription: string;
   price: number;
+  isUse: boolean;
+  isShow: boolean;
+  disable: boolean;
 }
 
 @Component({
@@ -27,7 +31,11 @@ export class RecipeModalComponent {
     name: new FormControl<string>(''),
     otherName: new FormControl<string>(''),
     description: new FormControl<string>(''),
+    otherDescription: new FormControl<string>(''),
     price: new FormControl<number>(0),
+    isUse: new FormControl<boolean>(false),
+    isShow: new FormControl<boolean>(false),
+    disable: new FormControl<boolean>(false),
   });
 
   originalRecipeDetail: RecipeDetail | null = null;
@@ -62,7 +70,11 @@ export class RecipeModalComponent {
             name: recipe.name,
             otherName: recipe.otherName,
             description: recipe.Description,
+            otherDescription: recipe.otherDescription,
             price: recipe.cashPrice,
+            isUse: recipe.isUse,
+            isShow: recipe.isShow,
+            disable: recipe.disable,
           },
           { emitEvent: false }
         );
@@ -71,7 +83,11 @@ export class RecipeModalComponent {
           name: recipe.name,
           otherName: recipe.otherName,
           description: recipe.Description,
+          otherDescription: recipe.otherDescription,
           price: recipe.cashPrice,
+          isUse: recipe.isUse,
+          isShow: recipe.isShow,
+          disable: recipe.disable,
         };
       });
     }