diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 6fe87d4..290143b 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -24,6 +24,7 @@ const LinktreePage = ({ user, setModal }) => {
   const [expanded, setIsExpand] = useState(false);
   const [expandedCafeId, setExpandedCafeId] = useState(null);
   const [selectedItemId, setSelectedItemId] = useState(0);
+  const [selectedSubItemId, setSelectedSubItemId] = useState(0);
 
   // Handle expand/collapse of cafe details
   const handleToggleExpand = (cafeId) => {
@@ -133,6 +134,51 @@ const LinktreePage = ({ user, setModal }) => {
       if (amount != null) return amount.toString();
     }
   };
+  const colors = [
+    "#FF0000", // Red
+    "#FF6F00", // Dark Orange
+    "#FFD700", // Gold
+    "#32CD32", // Lime Green
+    "#00CED1", // Dark Turquoise
+    "#1E90FF", // Dodger Blue
+    "#8A2BE2", // BlueViolet
+    "#FF00FF", // Magenta
+    "#FF1493", // Deep Pink
+    "#FF4500", // OrangeRed
+    "#FFDAB9", // Peach Puff
+    "#4B0082", // Indigo
+    "#00FF7F", // Spring Green
+    "#C71585", // Medium Violet Red
+    "#F0E68C", // Khaki
+    "#FF6347", // Tomato
+    "#006400", // Dark Green
+    "#8B4513", // SaddleBrown
+    "#00BFFF", // Deep Sky Blue
+    "#FF69B4", // Hot Pink
+  ];
+
+  const selectedTenant = items.tenants?.find(tenant => tenant.userId === selectedItemId);
+
+  // If the selected tenant is found, extract the cafes
+  const selectedTenantCafes = selectedTenant?.cafes || [];
+  
+  // 1. Optionally combine all report items from cafes of the selected tenant
+  const allSelectedTenantCafeItems = selectedTenantCafes.flatMap(cafe => cafe.report?.items || []);
+  
+  // 2. Retrieve the specific cafe's report items if needed
+  const filteredItems = selectedTenantCafes.find(cafe => cafe.cafeId === selectedSubItemId) || { report: { items: [] } };
+  
+  // 3. Decide whether to use combined items or individual cafe items
+  const segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedTenantCafeItems : filteredItems.report.items || []).map((item, index) => ({
+    percentage: item.percentage,
+    color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
+  })) || []; // Ensure segments is an empty array if no items are available
+  
+  // Function to combine items of all cafes for the selected tenant
+  function combineSelectedTenantCafeReports(selectedTenant) {
+    return selectedTenant.cafes.flatMap(cafe => cafe.report?.items || []);
+  }
+
   return (
     <>
       {user && user.roleId < 2 ? (
@@ -153,18 +199,14 @@ const LinktreePage = ({ user, setModal }) => {
             </div>
             <div className={styles.headerCardWrapper}>
               <div className={styles.headerCard}>
-                <h1>Total pemasukan</h1>
+                <h1>Total pemasukan {items?.totalIncomeFromAllTenant}</h1>
               </div>
             </div>
 
           </div>
 
           <div style={{ flex: 1 }}>
-            <CircularDiagram segments={[]} />
-          </div>
-
-          <div style={{ flex: 1 }}>
-            <CircularDiagram segments={[]} />
+            <CircularDiagram segments={segments} />
           </div>
           <div className={styles.cafeListWrapper}>
             <div className={styles.cafeListHeader}>
@@ -176,44 +218,62 @@ const LinktreePage = ({ user, setModal }) => {
             {user.roleId < 1 &&
               <div className={styles.rectangle}
                 style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
-                onClick={() => setSelectedItemId(selectedItemId == 0 ? -1 : 0)}
+                onClick={() => setSelectedItemId(selectedItemId == -1 ? 0 : -1)}
               >
                 Tambah penyewa
               </div>
             }
             {
-              items && Array.isArray(items.tenants) && items.tenants.length > 0 ? (
-                items.tenants.map((tenant, tenantIndex) => (
-                  <>
-                  <div key={tenant.userId} onClick={() => setSelectedItemId(selectedItemId == tenant.userId ? 0 : tenant.userId)} style={{ backgroundColor: selectedItemId == tenant.userId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }} className={styles.rectangle}>
-                    <h3>{tenant.username}</h3>
-                    <div>
-                      Total Pendapatan: {formatIncome(tenant.totalIncome)} {/* Total Income for the tenant */}
-                    </div>
+              items?.tenants?.length > 0 ? (
+                items.tenants.map((tenant) => {
+                  const isTenantSelected = selectedItemId === tenant.userId;
+                  const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
+                  const hasCafes = tenant?.cafes?.length > 0;
 
-                  </div>
-                  
-                  {selectedItemId == tenant.userId && tenant.cafes && tenant.cafes.length > 0 && tenant.cafes.map((cafe, cafeIndex) => (
-                      <div>
-                        <h5 >↳</h5>
-                      <div key={cafe.cafeId} className={styles.subRectangle}
-                        onClick={() => setSelectedItemId(selectedItemId === cafe.cafeId ? -1 : cafe.cafeId)}
-                        style={{
-                          backgroundColor: selectedItemId === cafe.cafeId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)'
+                  return (
+                    <div key={tenant.userId}>
+                      <div
+                        onClick={() => {
+                          setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : tenant.userId);
+                          setSelectedSubItemId(0); // Reset subitem selection when changing tenant
                         }}
+                        style={{ backgroundColor: tenantBackgroundColor }}
+                        className={isTenantSelected ? styles.rectangleNLine : styles.rectangle}
                       >
-                        {cafe.name}
-                        &nbsp;pendapatan {formatIncome(cafe.report?.totalIncome || 0)}
+                        <h3>{tenant.username}</h3>
+                        <div>
+                          Total Pendapatan: {formatIncome(tenant.totalIncome)}
+                        </div>
                       </div>
-                      </div>
-                    ))}
-                  </>
-                ))
+
+                      {/* Only show cafes if the tenant is selected */}
+                      {selectedItemId === tenant.userId && hasCafes && tenant.cafes.map((cafe) => {
+                        const isCafeSelected = selectedSubItemId === cafe.cafeId;
+                        const cafeBackgroundColor = isCafeSelected ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
+
+                        return (
+                          <div
+                            key={cafe.cafeId}
+                            className={styles.subRectangle}
+                            onClick={() => {
+                              setSelectedSubItemId(isCafeSelected ? 0 : cafe.cafeId); // Toggle subitem selection
+                              setSelectedItemId(tenant.userId); // Ensure tenant stays selected
+                            }}
+                            style={{ backgroundColor: cafeBackgroundColor }}
+                          >
+                            {cafe.name}
+                            &nbsp;pendapatan {formatIncome(cafe.report?.totalIncome || 0)}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })
               ) : (
                 <div>No tenants available</div>
               )
             }
-
+            <div style={{height:'2px'}}></div>
             {user.roleId > 0 &&
               <div className={styles.rectangle}
 
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index 6ed83a4..9beec76 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -326,31 +326,86 @@
   }
   
   
-.rectangle {
-  height: 50px; /* Height of each rectangle */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px; /* Rounded corners */
-  font-size: 20px;
-  background-color: rgb(114, 114, 114);
-  margin: 5%;
-  position: relative;
-  font-weight: 500;
-}
-.subRectangle {
-  height: 50px; /* Height of each rectangle */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px; /* Rounded corners */
-  font-size: 20px;
-  background-color: rgb(114, 114, 114);
-  margin: 5%;
-  position: relative;
-  font-weight: 500;
-  margin-left: 60px;
-}
+  .rectangle {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    font-size: 20px;
+    background-color: rgb(114, 114, 114);
+    margin: 5%;
+    position: relative;
+    font-weight: 500;
+    margin-bottom: 20px; /* Add some space below the rectangle */
+  }
+  .rectangleNLine {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    font-size: 20px;
+    background-color: rgb(114, 114, 114);
+    margin: 5%;
+    position: relative;
+    font-weight: 500;
+    margin-bottom: 20px; /* Add some space below the rectangle */
+  }
+  
+  .subRectangle {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    font-size: 20px;
+    background-color: rgb(114, 114, 114);
+    margin: 5%;
+    position: relative;
+    font-weight: 500;
+    margin-top: 10px;  /* Move it down a little */
+    margin-left: 50px;  /* Move it down a little */
+  }
+  
+  /* Arrow + line connection */
+  .rectangleNLine::after {
+    content: "";
+    position: absolute;
+    left: -17px;
+    top: 50%;
+    width: 18px;
+    height: 2px; /* Line thickness */
+    background-color: rgb(114, 114, 114); /* Line color */
+    transform: translateY(-50%); /* Center the line vertically */
+  }
+  
+  /* Arrow + line connection */
+  .subRectangle::after {
+    content: "";
+    position: absolute;
+    left: -45px; /* Position it to the left of the rectangle */
+    top: 50%; /* Center vertically */
+    width: 45px; /* Length of the horizontal line */
+    height: 2px; /* Line thickness */
+    background-color: rgb(114, 114, 114); /* Line color */
+    transform: translateY(-50%); /* Center the line vertically */
+  }
+  
+  /* The arrow at the bottom */
+  .subRectangle::before {
+    content: "-";
+    position: absolute;
+    left: -45px;
+    top: -21%;
+    width: 2px;
+    height: 70px;
+    content: "";
+    position: absolute;
+    background-color: rgb(114, 114, 114);
+    transform: translateY(-50%);
+  }
+  
 
 
 .header {