diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index 1085765..9504cc5 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -874,18 +874,32 @@ const ItemLister = ({
                     return !forCart || (forCart && item.qty > 0) ? (
                       <>
                         {isEditItem == item.itemId && (
-                          <button
-                            className={styles["add-item-button"]}
-                            onClick={() => editItem(0)}
-                            style={{ display: "inline-block" }}
-                          >
-                            batal
-                          </button>
+                          // <button
+                          //   className={styles["add-item-button"]}
+                          //   onClick={() => editItem(0)}
+                          //   style={{ display: "inline-block" }}
+                          // >
+                          //   batal
+                          // </button>
+                          <div style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 200 }}>
+                            <div style={{ display: 'flex', flexDirection: 'column',padding: '15px', height: '40%', backgroundColor: '#bdbdbd', borderRadius: '20px 20px 0 0' }}>
+                              <div style={{display: 'flex'}}>
+                                <div style={{width: '26vw', height: '26vw'}}>
+                                  <img style={{width: '100%', height: '100%', borderRadius: '10px'}}src={getImageUrl(item.image)}></img>
+                                </div>
+                                <div style={{width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                                  <div style={{width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid black'}}>
+                                    Ganti gambar
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
                         )}
                         <div className={styles["itemWrapper"]}>
                           {isEditMode && isEditItem != item.itemId && (
                             <div className={styles["editModeLayout"]}>
-                              <div style={{display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw'}}>
+                              <div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}>
                                 {isEditMode && (
                                   <Switch
                                     onChange={() => handleChange(item.itemId)}
@@ -897,7 +911,7 @@ const ItemLister = ({
                                 </h3>
                               </div>
 
-                              <div onClick={() => editItem(item.itemId)} style={{display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw'}}>
+                              <div onClick={() => editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
                                 <div
                                   style={{
                                     width: '32px',