diff --git a/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx b/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx
index 967d89f..83dd111 100644
--- a/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx
+++ b/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { useAddItem, useConfirmAddItem } from '../_hook/use-add-item';
+import { useItem, useConfirmItem } from '../_hook/use-item';
 
 interface IModalAddItem {
   isOpen: boolean;
@@ -18,7 +18,6 @@ const ModalAddItem = ({
   onClose,
   currentStep,
   nextStep,
-  prevStep,
   resetStep,
   handleAddItem,
 }: IModalAddItem) => {
@@ -50,7 +49,7 @@ interface IStepOneProps {
 }
 
 const StepOne = ({ nextStep }: IStepOneProps) => {
-  const { form, onSubmit } = useAddItem(nextStep);
+  const { form, onSubmit } = useItem(nextStep);
 
   return (
     <>
@@ -115,7 +114,11 @@ interface IStepTwoProps {
 }
 
 const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
-  const { onConfirm, onCancel } = useConfirmAddItem(onClose, resetStep);
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAddItem
+  );
 
   return (
     <>
diff --git a/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx b/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx
index f9dee1c..057afe7 100644
--- a/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx
+++ b/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useState } from 'react';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem, useItem } from '../_hook/use-item';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 
 interface IModalUpdateItem {
   isOpen: boolean;
@@ -17,7 +18,6 @@ const ModalUpdateItem = ({
   onClose,
   currentStep,
   nextStep,
-  prevStep,
   resetStep,
   handleUpdateItem,
 }: IModalUpdateItem) => {
@@ -49,9 +49,13 @@ interface IStepOneProps {
 }
 
 const StepOne = ({ nextStep }: IStepOneProps) => {
-  const [itemName, setItemName] = useState('Hoodie IMPHNEN Official 2025');
-  const [quantity, setQuantity] = useState('10');
-  const [chanceRate, setChanceRate] = useState('0.1');
+  const initialValues = {
+    itemName: 'Hoodie IMPHNEN Official 2025',
+    quantity: 10,
+    chanceRate: 0.1,
+  };
+
+  const { form, onSubmit } = useItem(nextStep, initialValues);
 
   return (
     <>
@@ -60,45 +64,52 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
           Update Item Roll Gacha
         </h2>
       </Modal.Header>
-      <Modal.Content className="flex flex-col gap-8">
-        <div className="flex flex-col gap-4">
-          <InputField
-            label="Pilih Item"
-            type="text"
-            placeholder="Pilih item yang dimasukkan ke roll"
-            value={itemName}
-            onChange={(e) => setItemName(e.target.value)}
-            size="lg"
-            className="w-full"
-          />
-          <InputField
-            label="Quantity"
-            type="text"
-            placeholder="Masukkan Kuantitas Item"
-            value={quantity}
-            onChange={(e) => setQuantity(e.target.value)}
-            size="lg"
-            className="w-full"
-          />
-          <InputField
-            label="Chance Rate"
-            type="text"
-            placeholder="Masukkan Chance Rate (0.1 - 1)"
-            value={chanceRate}
-            onChange={(e) => setChanceRate(e.target.value)}
-            size="lg"
-            className="w-full"
-          />
-        </div>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Pilih Item"
+              name="itemName"
+              type="text"
+              placeholder="Pilih item yang dimasukkan ke roll"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Quantity"
+              name="quantity"
+              type="number"
+              min={1}
+              placeholder="Masukkan Kuantitas Item"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Chance Rate"
+              name="chanceRate"
+              type="number"
+              value={0.1}
+              min={0.1}
+              step={0.1}
+              max={1}
+              placeholder="Masukkan Chance Rate (0,1 - 1)"
+              size="lg"
+              className="w-full"
+            />
+          </div>
 
-        <Button
-          variant="primary"
-          size="lg"
-          className="w-full"
-          onClick={nextStep}
-        >
-          Perbarui Item
-        </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={nextStep}
+          >
+            Perbarui Item
+          </Button>
+        </form>
       </Modal.Content>
     </>
   );
@@ -110,43 +121,44 @@ interface IStepTwoProps {
   resetStep: () => void;
 }
 
-const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => (
-  <>
-    <Modal.Header className="mb-0 text-center items-center">
-      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-        Update Item
-      </h2>
-      <p className="text-p3 text-neutral-400">
-        Apakah kamu yakin dengan
-        <br /> perubahan yang dilakukan?
-      </p>
-    </Modal.Header>
-    <Modal.Content className="flex gap-4">
-      <Button
-        variant="bordered"
-        size="lg"
-        className="w-full"
-        onClick={() => {
-          onClose();
-          resetStep();
-        }}
-      >
-        Batal
-      </Button>
-      <Button
-        variant="primary"
-        size="lg"
-        className="w-full"
-        onClick={() => {
-          handleUpdateItem && handleUpdateItem();
-          onClose();
-          resetStep();
-        }}
-      >
-        Update
-      </Button>
-    </Modal.Content>
-  </>
-);
+const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleUpdateItem
+  );
+
+  return (
+    <>
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Update Item
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Apakah kamu yakin dengan
+          <br /> perubahan yang dilakukan?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Update
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
 
 export default ModalUpdateItem;
diff --git a/apps/backoffice/src/app/gacha-roll/_hook/use-add-item.ts b/apps/backoffice/src/app/gacha-roll/_hook/use-item.ts
similarity index 76%
rename from apps/backoffice/src/app/gacha-roll/_hook/use-add-item.ts
rename to apps/backoffice/src/app/gacha-roll/_hook/use-item.ts
index 21c36e4..42514ed 100644
--- a/apps/backoffice/src/app/gacha-roll/_hook/use-add-item.ts
+++ b/apps/backoffice/src/app/gacha-roll/_hook/use-item.ts
@@ -5,10 +5,14 @@ import {
   TGachaRollItem
 } from '@imphnen-frontend-service/service';
 
-export const useAddItem = (nextStep: () => void) => {
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: TGachaRollItem
+) => {
   const form = useForm<TGachaRollItem>({
     resolver: zodResolver(gachaRollItemSchema),
     mode: 'all',
+    defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
@@ -22,13 +26,13 @@ export const useAddItem = (nextStep: () => void) => {
   };
 };
 
-export const useConfirmAddItem = (
+export const useConfirmItem = (
   onClose: () => void,
   resetStep: () => void,
-  handleAddItem?: () => void,
+  actionFunction?: () => void,
 ) => {
   const onConfirm = () => {
-    handleAddItem?.();
+    actionFunction?.();
     onClose();
     resetStep();
   };