diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index 9c59b51..98ed8d8 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
 import styles from "./ItemLister.module.css";
 import Item from "./Item";
 import Switch from "react-switch";
+import { ThreeDots, ColorRing } from "react-loader-spinner";
 import {
   getItemQtyFromCart,
   updateItemQtyInCart,
@@ -13,6 +14,7 @@ import {
   updateItemType,
   deleteItemType,
 } from "../helpers/itemHelper.js";
+import ItemType from "./ItemType.js";
 
 const ItemLister = ({
   itemTypeId,
@@ -21,6 +23,7 @@ const ItemLister = ({
   shopOwnerId,
   user,
   typeName,
+  typeImage,
   itemList,
   forCart,
   forInvoice,
@@ -53,7 +56,6 @@ const ItemLister = ({
   const [editedTypeName, setEditedTypeName] = useState(typeName);
   const typeNameInputRef = useRef(null);
 
-
   const handlePlusClick = (itemId) => {
     const updatedItems = items.map((item) => {
       if (item.itemId === itemId) {
@@ -99,11 +101,6 @@ const ItemLister = ({
 
   const toggleEditTypeItem = () => {
     setIsEditing((prev) => !prev);
-    if (!isEdit) {
-      setTimeout(() => {
-        typeNameInputRef.current.focus();
-      }, 0);
-    }
   };
 
   const handleSaveType = async () => {
@@ -126,22 +123,21 @@ const ItemLister = ({
   };
 
   useEffect(() => {
-    if(beingEditedType == itemTypeId)return;
-    
-    setOnEditItem(0); 
+    if (beingEditedType == itemTypeId) return;
+
+    setOnEditItem(0);
     setIsAddingNewItem(false);
-    console.log(itemTypeId)
   }, [beingEditedType]);
 
   const toggleAddNewItem = () => {
+    setBeingEditedType(itemTypeId);
     setIsAddingNewItem((prev) => !prev);
     setOnEditItem(0);
-    setBeingEditedType(itemTypeId);
   };
   const editItem = (itemId) => {
+    setBeingEditedType(itemTypeId);
     setIsAddingNewItem(false);
     setOnEditItem(itemId);
-    setBeingEditedType(itemTypeId);
   };
   const handleChange = async (itemId) => {
     // Find the item in the current items array
@@ -189,45 +185,143 @@ const ItemLister = ({
     handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
     setIsAddingNewItem(false);
   };
-
+  console.log(getImageUrl(typeImage));
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState("");
+  useEffect(() => {
+    if (selectedImage) {
+      setPreviewUrl(selectedImage);
+    } else {
+      setPreviewUrl(getImageUrl(typeImage));
+    }
+  }, [selectedImage]);
+  const handleImageChange = (e) => {
+    setSelectedImage(e);
+  };
   return (
     <>
       {(items.length > 0 ||
         (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && (
-        <div className={styles["item-lister"]}>
+        <div
+          className={`${styles["item-lister"]} ${
+            isEdit ? styles["fullscreen"] : ""
+          }`}
+          style={{ paddingBottom: isEdit ? "25vh" : "" }}
+        >
           {!raw && (
             <div className={styles["title-container"]}>
+              {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
               <input
                 ref={typeNameInputRef}
                 className={`${styles.title} ${
-                  isEdit
-                    ? styles.border
-                    : styles.noborder
+                  isEdit ? styles.border : styles.noborder
                 }`}
                 value={editedTypeName}
                 onChange={(e) => setEditedTypeName(e.target.value)}
                 disabled={!isEdit}
               />
-              {isEditMode && (
-                  <>
-                    <button
-                      className={styles["edit-typeItem-button"]}
-                      onClick={toggleEditTypeItem}
-                    >
-                      {isEdit ? "Cancel" : "Edit"}
-                    </button>
-                    {isEdit && (
-                      <button
-                        className={styles["edit-typeItem-button"]}
-                        onClick={handleSaveType}
-                      >
-                        &nbsp;&nbsp;Save&nbsp;&nbsp;
-                      </button>
-                    )}
-                  </>
-                )}
+              {isEditMode && !isEdit && (
+                <>
+                  <button
+                    className={styles["edit-typeItem-button"]}
+                    onClick={toggleEditTypeItem}
+                  >
+                    Edit
+                  </button>
+                </>
+              )}
             </div>
           )}
+          {isEdit && (
+            <div className={styles["grid-container"]}>
+              <ItemType
+                rectangular={true}
+                blank={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/addnew.png")}
+              />
+              {typeImage != null && !previewUrl.includes(typeImage) && (
+                <ItemType
+                  rectangular={true}
+                  onClick={(e) => handleImageChange(e)}
+                  imageUrl={getImageUrl(typeImage)}
+                />
+              )}
+
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/beverage1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/beverage2.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/beverage3.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/dessert1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/dessert2.jpg")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/food1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/food2.jpg")}
+              />
+
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/food3.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/packet1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/packet2.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack2.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack3.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack4.png")}
+              />
+            </div>
+          )}
+
           <div className={styles["item-list"]}>
             {user &&
               user.roleId == 1 &&
@@ -274,8 +368,7 @@ const ItemLister = ({
                     </button>
                   )}
                   <div className={styles["itemWrapper"]}>
-                    {isEditMode && onEditItem != item.itemId&&
-                        (
+                    {isEditMode && onEditItem != item.itemId && (
                       <div className={styles["editModeLayout"]}>
                         {isEditMode && (
                           <Switch
@@ -305,9 +398,7 @@ const ItemLister = ({
                       onPlusClick={() => handlePlusClick(item.itemId)}
                       onNegativeClick={() => handleNegativeClick(item.itemId)}
                       onRemoveClick={() => handleRemoveClick(item.itemId)}
-                      isBeingEdit={
-                        onEditItem == item.itemId 
-                      }
+                      isBeingEdit={onEditItem == item.itemId}
                       isAvailable={item.availability}
                       handleUpdateItem={(name, price, image) =>
                         handleUpdateItem(item.itemId, name, price, image)
@@ -332,6 +423,42 @@ const ItemLister = ({
                 </>
               )}
           </div>
+          {isEdit && (
+            <div className={styles.PaymentOption}>
+              <div className={styles.TotalContainer}>
+                <span>Pengaturan</span>
+                <span className="svg-container">
+  <svg 
+    enable-background="new 0 0 91 91" 
+    height="91px" 
+    id="Layer_1" 
+    version="1.1" 
+    viewBox="0 0 91 91" 
+    width="40px" 
+  >
+    <g>
+      <path d="M45.574,38.253c-5.443,0-9.871,4.428-9.871,9.871s4.428,9.871,9.871,9.871s9.871-4.428,9.871-9.871 S51.018,38.253,45.574,38.253z M45.574,54.595c-3.568,0-6.471-2.904-6.471-6.471c0-3.568,2.902-6.471,6.471-6.471 c3.566,0,6.471,2.902,6.471,6.471C52.045,51.69,49.141,54.595,45.574,54.595z"/>
+      <path d="M64.057,27.726l-6.975,4.029c-0.971-0.686-2.004-1.281-3.086-1.781v-8.061H37.152v8.061 c-1.008,0.467-1.979,1.021-2.898,1.654l-6.936-4.111l-8.586,14.488l6.936,4.109c-0.078,0.709-0.115,1.373-0.115,2.01 c0,0.574,0.029,1.158,0.092,1.785l-6.98,4.031l8.422,14.584l6.979-4.031c0.973,0.686,2.004,1.281,3.088,1.781v8.061h16.844v-8.061 c1.008-0.467,1.977-1.021,2.896-1.654l6.936,4.111l8.586-14.488l-6.934-4.109c0.078-0.705,0.115-1.371,0.115-2.01 c0-0.576-0.029-1.158-0.092-1.785l6.98-4.031L64.057,27.726z M61.824,44.538l0.17,1.143c0.137,0.928,0.203,1.703,0.203,2.443 c0,0.797-0.076,1.656-0.232,2.631l-0.182,1.141l5.973,3.539l-5.119,8.639l-5.973-3.541l-0.914,0.713 c-1.244,0.969-2.617,1.754-4.078,2.33l-1.076,0.424v6.936H40.551v-6.934l-1.074-0.426c-1.533-0.605-2.955-1.428-4.23-2.443 l-0.906-0.723l-6.01,3.471l-5.021-8.695l6.016-3.475l-0.17-1.143c-0.137-0.928-0.203-1.703-0.203-2.443 c0-0.801,0.074-1.639,0.232-2.635l0.178-1.139l-5.971-3.537l5.119-8.639l5.973,3.543l0.914-0.713 c1.248-0.971,2.621-1.756,4.08-2.332l1.074-0.424v-6.936h10.045v6.934l1.076,0.426c1.529,0.605,2.953,1.428,4.229,2.443 l0.908,0.723l6.008-3.469l5.023,8.693L61.824,44.538z"/>
+    </g>
+  </svg>
+</span>
+
+              </div>
+              <button className={styles.PayButton}>
+                {false ? (
+                  <ColorRing height="50" width="50" color="white" />
+                ) : (
+                  "Simpan"
+                )}
+              </button>
+              <div
+                className={styles.Pay2Button}
+                onClick={() => setIsEditing(false)}
+              >
+                Kembali
+              </div>
+            </div>
+          )}
         </div>
       )}
     </>
diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css
index 8a491f8..d0347a4 100644
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -10,9 +10,30 @@
 .item-lister:last-child {
   margin-bottom: 50px;
 }
+.fullscreen {
+  position: fixed; /* Keep the container fixed */
+  top: 0; /* Adjust the top position as needed */
+  bottom: 0; /* Occupy the full height of the viewport */
+  left: 0; /* Align to the left */
+  right: 0; /* Align to the right */
+  background-color: white; /* Background color */
+  z-index: 1000; /* Layering */
+  overflow-y: auto; /* Allow vertical scrolling */
+}
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  /* padding: 10px; */
+  max-height: calc(3 * (25vw - 20px) + 20px);
+  overflow-y: auto;
+  height: calc(49vw - 20px);
+}
+
 .title-container {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .title {
@@ -78,3 +99,59 @@
   align-items: center;
   justify-content: center;
 }
+
+.PaymentOption {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  border-radius: 15px 15px 0 0;
+
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  z-index: 300;
+}
+
+.TotalContainer {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
+.PayButton {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+
+  width: 80vw;
+  height: 18vw;
+  border-radius: 50px;
+  background-color: rgba(88, 55, 50, 1);
+  color: white;
+  border: none;
+  margin: 0px auto;
+  cursor: pointer;
+  margin-bottom: 23px;
+}
+
+.Pay2Button {
+  text-align: center;
+  color: rgba(88, 55, 50, 1);
+  font-size: 1em;
+  margin-bottom: 25px;
+  cursor: pointer;
+}
diff --git a/src/components/ItemType.js b/src/components/ItemType.js
index 37ad127..aa17ce4 100644
--- a/src/components/ItemType.js
+++ b/src/components/ItemType.js
@@ -91,7 +91,7 @@ export default function ItemType({
           </div>
         )}
       </div>
-      {(rectangular || !blank) && (
+      {(!rectangular && !blank) && (
         <input
           ref={inputRef}
           className={`${styles["item-type-name"]} ${styles.noborder}`}
diff --git a/src/components/ItemType.module.css b/src/components/ItemType.module.css
index fbbbf63..17ce2a8 100644
--- a/src/components/ItemType.module.css
+++ b/src/components/ItemType.module.css
@@ -18,7 +18,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: start;
   position: relative; /* Ensure absolute positioning inside works */
 }
 .item-type-nomargin {
diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css
index 239572b..11259a9 100644
--- a/src/components/ItemTypeLister.css
+++ b/src/components/ItemTypeLister.css
@@ -43,6 +43,8 @@
   padding: 10px; /* Padding inside grid */
   max-height: calc(3 * (25vw - 20px) + 20px); /* 3 items + gaps */
   overflow-y: auto; /* Allow scrolling if items overflow */
+  padding-top: 15px;
+  height: calc(43vw - 20px);
 }
 
 .add-button {
diff --git a/src/config.js b/src/config.js
index 8886979..7335e06 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = "https://yjgyr4-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://3nvnzs-5000.csb.app"; // Replace with your actual backend URL
 
 export default API_BASE_URL;
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index c02a8d2..fff1001 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -215,6 +215,7 @@ function CafePage({
                       key={itemType.itemTypeId}
                       itemTypeId={itemType.itemTypeId}
                       typeName={itemType.name}
+                      typeImage={itemType.image}
                       itemList={itemType.itemList}
                       isEditMode={isEditMode}
                       beingEditedType={beingEditedType}