diff --git a/src/App.css b/src/App.css
index 2ec71d5..1024dd9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
-
+@import url("https://fonts.googleapis.com/css2?family=Aboreto&family=Rubik+Doodle+Shadow&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap");
 html,
 body {
diff --git a/src/components/Header.js b/src/components/Header.js
index 3d8771c..c43d66f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -4,18 +4,32 @@ import { useLocation } from "react-router-dom";
 import { useNavigationHelpers } from "../helpers/navigationHelpers";
 import Switch from "react-switch";
 
+const HeaderBarbackground = styled.div`
+  ${({ shopName }) =>
+    shopName &&
+    `
+      background: linear-gradient(360deg, rgb(255 255 255) 0%, rgb(95 121 89) 100%);
+    `}
+`;
+
 const HeaderBar = styled.div`
   pointer-events: auto;
-  margin-top:${(props) => (props.HeaderMargin)};
+  margin-top: ${(props) => props.HeaderMargin};
+  box-shadow: ${(props) => (props.shopName ? '2px 2px #c1c1c1' : 'none')};
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 15px;
   color: black;
-  background-color: white;
+  background-color: #ffffff;
   z-index: 200;
+  border: 1px solid #00000000;
+  margin: 20px 12px;
+  border-radius: 13px;
 `;
 
+
+
 const Title = styled.h2`
   margin: 0;
   font-family: "Plus Jakarta Sans", sans-serif;
@@ -23,6 +37,7 @@ const Title = styled.h2`
   font-style: normal;
   font-size:${(props) => (props.HeaderSize)};
   color: rgba(88, 55, 50, 1);
+  text-transform: uppercase;
 `;
 
 const ProfileName = styled.h2`
@@ -113,7 +128,7 @@ const g = keyframes`
   }
   100% {
     top: 28px;
-    right: 247px;
+    right: 242px;
     width: 40px;
     height: 40px;
   }
@@ -122,7 +137,7 @@ const g = keyframes`
 const s = keyframes`
   0% {
     top: 28px;
-    right: 247px;
+    right: 242px;
     width: 40px;
     height: 40px;
   }
@@ -136,12 +151,14 @@ const s = keyframes`
 
 const grow = keyframes`
   0% {
+    right: 12px;
     width: 60px;
     height: 60px;
     border-top-left-radius: 50%;
     border-bottom-left-radius: 50%;
   }
   100% {
+    right: 28px;
     width: 300px;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
@@ -150,20 +167,23 @@ const grow = keyframes`
 
 const shrink = keyframes`
   0% {
+    right: 12px;
     width: 300px;
     height: auto;
     border-radius: 20px;
   }
   100% {
+    right: 28px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
   }
 `;
 const Rectangle = styled.div`
+  overflow-y: hidden;
   position: absolute;
-  top: 45px;
-  right: 15px;
+  top: 39px;
+  right: 12px;
   width: 200px;
   max-height: 87vh; /* or another appropriate value */
   background-color: white;
@@ -171,7 +191,6 @@ const Rectangle = styled.div`
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   animation: ${(props) => (props.animate === "grow" ? grow : shrink)} 0.5s
     forwards;
-  overflow-y: auto; /* Enable vertical scrolling */
   padding: 10px;
   box-sizing: border-box;
   overflow-x: hidden;
@@ -302,14 +321,15 @@ const Header = ({
     // Otherwise, use the possessive function
     return `${cafeName}'s menu`;
   };
-  return (
-    <HeaderBar HeaderMargin={HeaderMargin} >
+  return ( 
+    <HeaderBarbackground shopName={shopName}>
+    <HeaderBar HeaderMargin={HeaderMargin} shopName={shopName}>
       <Title HeaderSize={HeaderSize}>
         {shopName == null
           ? HeaderText == null
             ? "kedaimaster"
             : HeaderText
-          : generateMenuHeader(shopName)}
+          : shopName}
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
@@ -403,7 +423,7 @@ const Header = ({
                     <Child>{shopName}</Child>
 
                     <Child>
-                      Mode edit&nbsp;
+                      Mode pengembangan&nbsp;
                       <Switch
                         borderRadius={0}
                         checked={isEditMode}
@@ -411,8 +431,21 @@ const Header = ({
                       />
                     </Child>
                     <Child onClick={() => setModal("add_material")}>
-                      stok
+                      Kelola bahan baku
                     </Child>
+
+                    <Child hasChildren>
+                        <Child>Konfigurasi</Child>
+                        <Child onClick={() => setModal("welcome_config")}>
+                          Desain kafe
+                        </Child>
+                        <Child onClick={() => setModal("edit_tables")}>
+                          Identifikasi kedai
+                        </Child>
+                        <Child onClick={() => setModal("payment_option")}>
+                          Metode pembayaran
+                        </Child>
+                      </Child>
                     {user.username !== undefined &&
                       user.roleId == 2 &&
                       user.cafeId == shopId && (
@@ -449,7 +482,7 @@ const Header = ({
           </Rectangle>
         )}
       </div>
-    </HeaderBar>
+    </HeaderBar></HeaderBarbackground>
   );
 };
 
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index 27c3b29..c72de7f 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -53,6 +53,7 @@
   width: 26vw;
   height: 26vw;
   border-radius: 12px;
+  object-fit: cover;
 }
 
 .overlay {
diff --git a/src/helpers/userHelpers.js b/src/helpers/userHelpers.js
index b0802bf..3bfa70b 100644
--- a/src/helpers/userHelpers.js
+++ b/src/helpers/userHelpers.js
@@ -137,6 +137,7 @@ export const loginUser = async (username, password) => {
         success: true,
         token: responseData.token,
         cafeId: responseData.cafeId,
+        cafeIdentifyName: responseData.cafeIdentifyName
       };
     } else {
       return { success: false, token: null };
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 35b8434..3c53d0d 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -213,7 +213,7 @@ function CafePage({
         ) : ( */}
             <div className={`Cafe ${isExceededDeadline ? 'grayscale' : ''}`}>
               
-            {API_BASE_URL != 'https://dev.api.kedaimaster.com' &&
+            {API_BASE_URL != 'https://dev.api.kedaimaster.com' && API_BASE_URL != 'https://api.kedaimaster.com' &&
               <div className="Watermark"></div>
             }
               <div className="App-header">
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 70cb076..40a5ecd 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -103,7 +103,8 @@ const LinktreePage = ({ user, setModal }) => {
       const response = await loginUser(username, password);
       if (response.success) {
         localStorage.setItem('auth', response.token);
-        window.location.href = response.cafeId ? `/${response.cafeId}` : '/';
+        console.log(response)
+        window.location.href = response.cafeIdentifyName ? `/${response.cafeIdentifyName}` : '/';
       } else {
         setError(true);
       }
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index c3bb68e..4750d22 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -506,7 +506,6 @@
   top: 0;
   width: 100%;
   height: calc(25vh - 25px);
-  padding-top: 25px;
   margin-bottom: 85px;
 }