diff --git a/src/components/Coupon.js b/src/components/Coupon.js
index 38fc2ca..d083067 100644
--- a/src/components/Coupon.js
+++ b/src/components/Coupon.js
@@ -52,7 +52,7 @@ const Coupon = ({ code, value, period, type, expiration }) => {
                 {/* <div className='dotted-line'></div> */}
             </div>
             <div className='coupon-right'>
-                <h2 className='coupon-value'>{code == null ? 'Voucher tidak ditemukan' : formattedValue}</h2>
+                <h2 className='coupon-value'>{code == null ? 'Voucher tidak ada' : formattedValue}</h2>
                 {type && <span className='coupon-type'>{type}</span>} {/* Display type if provided */}
                 <p className='coupon-period'>
                     {code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa Voucher ${period} minggu`}
diff --git a/src/components/DailyCharts.js b/src/components/DailyCharts.js
index 4b7cdd6..592e977 100644
--- a/src/components/DailyCharts.js
+++ b/src/components/DailyCharts.js
@@ -22,7 +22,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
         "18-21",
         "21-24",
       ];
-
+      console.log(dayData)
       const seriesData = [
         dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
         dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
@@ -75,7 +75,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
     };
     
   return (
-    <div className={styles.chartItemContainer}>
+    <div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
       {chartData &&
         chartData.map((data, index) => (
           <div
@@ -99,7 +99,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
                     }
                     // style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
                   >
-                    <div style={{position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: index == indexx ? `1px solid ${colors[index % colors.length]}` : 'none'}}></div>
+                    <div style={{position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: index == indexx ? `2px solid ${colors[index % colors.length]}` : 'none'}}></div>
                     <div 
                     style={{ color: index === indexx ? 'black' : 'transparent' }}>
                       {indexx !== chartData.length - 1 ? (
diff --git a/src/components/PeriodCharts.js b/src/components/PeriodCharts.js
index 18bb112..e8c68df 100644
--- a/src/components/PeriodCharts.js
+++ b/src/components/PeriodCharts.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Chart from "react-apexcharts";
 import styles from "./BarChart.module.css"; // Import the CSS module
 
-const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
+const PeriodCharts = ({ type, graphFilter, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
   const [selectedIndex, setSelectedIndex] = useState(-1);
 
   useEffect(() => {
@@ -20,6 +20,12 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
     currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
     currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
 
+    if (type == 'monthly' && currentIncomeData.length === 4) {
+      currentIncomeData.push(null);
+    }
+    if (type == 'monthly' && currentOutcomeData.length === 4) {
+      currentOutcomeData.push(null);
+    }
     if (type == 'monthly' && currentTransactionData.length === 4) {
       currentTransactionData.push(null);
     }
@@ -30,21 +36,27 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
     previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
     previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
 
+    if (type == 'monthly' && previousIncomeData.length === 4) {
+      previousIncomeData.push(null);
+    }
+    if (type == 'monthly' && previousOutcomeData.length === 4) {
+      previousOutcomeData.push(null);
+    }
     if (type == 'monthly' && previousTransactionData.length === 4) {
       previousTransactionData.push(null);
     }
   }
-  let globalMax = null;
-  if (aggregatedCurrentReports || aggregatedPreviousReports)
-    // Find the global maximum for the y-axis
-    globalMax = Math.max(
-      // ...currentIncomeData,
-      // ...currentOutcomeData,
-      ...currentTransactionData,
-      // ...previousIncomeData,
-      // ...previousOutcomeData,
-      ...previousTransactionData
-    );
+let globalMax = null;
+if (aggregatedCurrentReports || aggregatedPreviousReports) {
+  // Find the global maximum for the y-axis
+  globalMax = Math.max(
+    ...(graphFilter === 'income' 
+      ? [...currentIncomeData, ...previousIncomeData]
+      : graphFilter === 'outcome' 
+      ? [...currentOutcomeData, ...previousOutcomeData]
+      : [...currentTransactionData, ...previousTransactionData])
+  );
+}
 
   return (
     <div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
@@ -61,7 +73,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
               }
               style={{ color: 'black', position: 'relative' }}
             >
-              <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[0]}` }}></div>
+              <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `2px solid ${colors[0]}` }}></div>
               <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
             </div>
             <div
@@ -101,7 +113,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
               series={[
                 // { name: "Pemasukan", data: previousIncomeData },
                 // { name: "Pengaluaran", data: previousOutcomeData },
-                { name: "Total transaksi", data: previousTransactionData },
+                { name: "Total transaksi", data: graphFilter == 'income' ? previousIncomeData : graphFilter == 'outcome' ? previousOutcomeData : previousTransactionData },
               ]}
               type="area"
               height={200}
@@ -131,7 +143,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
 
               style={{ color: 'black', position: 'relative' }}
             >
-              <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[1]}` }}></div>
+              <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `2px solid ${colors[1]}` }}></div>
               <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
             </div>
           </div>
@@ -162,7 +174,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
               series={[
                 // { name: "Pemasukan", data: currentIncomeData },
                 // { name: "Pengeluaran", data: currentOutcomeData },
-                { name: "Total transaksi", data: currentTransactionData },
+                { name: "Total transaksi", data: graphFilter == 'income' ? currentIncomeData : graphFilter == 'outcome' ? currentOutcomeData : currentTransactionData },
               ]}
               type="area"
               height={200}
diff --git a/src/pages/CreateUserWithCoupon.js b/src/pages/CreateUserWithCoupon.js
index 883583b..efded44 100644
--- a/src/pages/CreateUserWithCoupon.js
+++ b/src/pages/CreateUserWithCoupon.js
@@ -114,7 +114,7 @@ const LinktreePage = ({ setModal }) => {
             />
             <input
               type="password"
-              placeholder="Re-type Password"
+              placeholder="Ketik ulang password"
               value={retypePassword}
               onChange={(e) => setRetypePassword(e.target.value)}
               maxLength="30"
diff --git a/src/pages/Join.js b/src/pages/Join.js
index b23bacd..393b4f0 100644
--- a/src/pages/Join.js
+++ b/src/pages/Join.js
@@ -4,6 +4,9 @@ import styles from './Join.module.css'; // Import the module.css file
 import { checkCoupon, logCouponForUser } from '../helpers/couponHelpers';  // Import the new helper
 import Coupon from '../components/Coupon';
 
+import {
+  getLocalStorage,
+} from "../helpers/localStorageHelpers";
 
 const LinktreePage = ({ data, setModal }) => {
   const queryParams = new URLSearchParams(window.location.search);
@@ -21,9 +24,24 @@ const LinktreePage = ({ data, setModal }) => {
 
     console.log(code)
     if (modal == 'claim-coupon') {
+      if (!getLocalStorage('auth')) {
+
+        // Preserve the couponCode query param while navigating to the claim-coupon modal
+        const newUrl = `?modal=join${code ? `&couponCode=${code}` : ''}`;
+        window.location.href = newUrl; // This will update the URL and reload the page
+      }
+
       setIsOnlyClaimCoupon(true)
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
     }
+    else {
+      if (getLocalStorage('auth')) {
+
+        // Preserve the couponCode query param while navigating to the claim-coupon modal
+        const newUrl = `?modal=claim-coupon${code ? `&couponCode=${code}` : ''}`;
+        window.location.href = newUrl; // This will update the URL and reload the page
+      }
+    }
     if (code) {
       setCouponCode(code);
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
@@ -104,9 +122,9 @@ const LinktreePage = ({ data, setModal }) => {
         </div>
       ) : (
         <div className={styles.dashboardContainer}>
-          <div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Voucher' : 'Daftar Menggunakan Voucher'}</div>
+          <div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Voucher' : 'Daftar Dengan Voucher'}</div>
           <div className={styles.subHeading}>
-          Voucher dapat digunakan untuk pembuatan akun penyewa maupun untuk memperpanjang masa berlangganan.
+            Voucher dapat digunakan untuk pembuatan akun bisnis maupun untuk memperpanjang masa berlangganan.
           </div>
           {couponStatus === 0 ? (
             <form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}>
@@ -152,7 +170,7 @@ const LinktreePage = ({ data, setModal }) => {
                       }
                     }}
                   >
-                    <span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan voucher ini'}</span>
+                    <span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun bisnis dengan voucher ini'}</span>
                   </button>
 
                 </div>
@@ -161,6 +179,16 @@ const LinktreePage = ({ data, setModal }) => {
           )}
           <div className={styles.footer}>
             <div className={styles.footerLinks}>
+              {!getLocalStorage('auth') &&
+              <a
+                href="https://linktr.ee/discover/trending"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.footerLink}
+              >
+                Sudah punya akun bisnis?
+              </a>
+}
               <a
                 href="https://linktr.ee/discover/trending"
                 target="_blank"
diff --git a/src/pages/Join.module.css b/src/pages/Join.module.css
index 4f8dca6..80fb656 100644
--- a/src/pages/Join.module.css
+++ b/src/pages/Join.module.css
@@ -123,6 +123,8 @@
 
 .claimButton span {
   font-weight: 600;
+  font-size: 13px;
+  line-height: 21px;
 }
 
 /* Footer */
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 64f71b0..5007f5c 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -114,6 +114,8 @@ const App = ({ forCafe = true, cafeId = -1,
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState("yesterday");
+  const [circularFilter, setCircularFilter] = useState("item");
+  const [graphFilter, setGraphFilter] = useState("income");
 
   const [itemName, setItemName] = useState('');
 
@@ -143,7 +145,7 @@ const App = ({ forCafe = true, cafeId = -1,
     fetchData(filter); // Fetch data when filter changes
   }, [filter, selectedCafeId]);
 
-  const filteredItems = analytics?.itemSales || analytics?.items || [];
+  const filteredItems = (selectedCafeId != 0 && selectedCafeId != -1) ? (circularFilter == 'item' ? analytics?.itemSales || [] : analytics.materialSpend || []) : analytics?.items || [];
 
   const colors = [
     "#af9463", // Bright Red
@@ -172,6 +174,11 @@ const App = ({ forCafe = true, cafeId = -1,
     return total + cafeTotal;
   }, 0);
 
+  const totalSpendAcrossAllCafes = filteredItems.reduce((total, cafe) => {
+    const cafeTotal = (cafe.report?.materialSpend || []).reduce((sum, item) => sum + item.spend, 0);
+    return total + cafeTotal;
+  }, 0);
+
   // Define a color palette or generate colors dynamically
   const colorPalette = colors;
 
@@ -214,6 +221,42 @@ const App = ({ forCafe = true, cafeId = -1,
 
   segments.sort((a, b) => b.sold - a.sold);
 
+  
+  let materialSegments = (selectedCafeId == 0 || selectedCafeId == -1) ? filteredItems.flatMap((cafe) => {
+    const cafeItems = cafe.report?.materialSpend || [];
+    console.log(cafeItems); // Log all items for the cafe
+
+    return cafeItems.map((item, index) => {
+      const percentage = totalSpendAcrossAllCafes > 0
+        ? ((item.spend / totalSpendAcrossAllCafes) * 100).toFixed(2)
+        : 0;
+
+      console.log(`${item.materialName}: ${(percentage)}%`); // Log item name and percentage
+
+      // Assign a unique color from the color palette
+      const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors
+
+      colorIndex++; // Increment to ensure a new color for the next item
+
+      return {
+        itemName: item.materialName,
+        sold: item.spend,
+        percentage: percentage,
+        color: color,
+      };
+    });
+  }) : filteredItems.map((item, index) => {
+    const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors
+    colorIndex++; // Increment to ensure a new color for the next item
+    return {
+      itemName: item.materialName,
+      percentage: item.percentage,
+      color: color,
+    };
+  });
+
+  materialSegments.sort((a, b) => b.spend - a.spend);
+
 
   console.log(selectedCafeId)
   console.log(segments)
@@ -474,23 +517,46 @@ const App = ({ forCafe = true, cafeId = -1,
                 `Data dihitung dengan membandingkan
                 ${comparisonText} hari terakhir dengan ${comparisonText} hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
               :
-              (filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan dimulai dari data kemarin` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan dimulai dari data kemarin`}
+              (filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan berakhir pada data kemarin.` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan berakhir pada data kemarin.`}
               </h6>
             </div>
           </div>
+          
+          <div className={styles.filterSelectorWrapper}>
+            <div className={`${styles.filterSelector} ${circularFilter == 'item' ? '':styles.filterSelectorInactive}
+                }`}
+              onClick={() =>
+                setCircularFilter('item')
+              }
+              style={{ color: 'black', position: 'relative' }}
+            >
+              <div>Item laku</div>
+            </div>
+            <div
+              className={`${styles.filterSelector} ${circularFilter == 'material' ? '':styles.filterSelectorInactive}
+                }`}
+
+              onClick={() =>
+                setCircularFilter('material')
+              }
+              >
+              <div>Bahan baku</div>
+            </div>
+          </div>
           <div
             style={{
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
               padding: "20px",
+              paddingTop: 0
             }}
           >
             <div style={{ flex: 1 }}>
-              <CircularDiagram segments={segments} />
+              <CircularDiagram segments={circularFilter == 'item' ? segments : materialSegments} />
             </div>
             <div style={{ flex: 1, marginLeft: "20px" }}>
-              {segments.map((item, index) => (
+              {(circularFilter === 'item' ? segments : materialSegments).map((item, index) => (
                 <div
                   key={index}
                   style={{
@@ -513,10 +579,42 @@ const App = ({ forCafe = true, cafeId = -1,
               ))}
             </div>
           </div>
+          
+          <div className={styles.filterSelectorWrapper}>
+            <div className={`${styles.filterSelector} ${graphFilter == 'income' ? '':styles.filterSelectorInactive}
+                }`}
+              onClick={() =>
+                setGraphFilter('income')
+              }
+              style={{ color: 'black', position: 'relative' }}
+            >
+              <div>Pemasukan</div>
+            </div>
+            <div
+              className={`${styles.filterSelector} ${graphFilter == 'outcome' ? '':styles.filterSelectorInactive}
+                }`}
+
+              onClick={() =>
+                setGraphFilter('outcome')
+              }
+              >
+              <div>Pengeluaran</div>
+            </div>
+            <div
+              className={`${styles.filterSelector} ${graphFilter == 'transactions' ? '':styles.filterSelectorInactive}
+                }`}
+
+                onClick={() =>
+                  setGraphFilter('transactions')
+                }
+              >
+              <div>Transaksi</div>
+            </div>
+          </div>
           {filter == 'yesterday' || filter == 'weekly' ?
             <DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
             :
-            <PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
+            <PeriodCharts type={filter} graphFilter={graphFilter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
           }
         </div>
       }
diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css
index 8b02582..452b59f 100644
--- a/src/pages/Transactions.module.css
+++ b/src/pages/Transactions.module.css
@@ -293,7 +293,7 @@
   justify-content: space-around;
   position: relative;
   overflow: hidden;
-  width: calc(100vw - 30px);
+  width: calc(100vw - 50px);
 }
 
 .dateSelector {
@@ -342,4 +342,33 @@
   margin-bottom: 10px;
   width: 100%;
   height: 52px;
+}
+
+
+.filterSelectorWrapper {
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+  overflow: hidden;
+  width: calc(100vw - 60px);
+  margin: 10px 30px 10px 30px;
+}
+.filterSelector {
+  flex-grow: 1;
+  padding: 6px;
+  width: calc(30vw - 30px);
+  background-color: #00000045;
+  border-radius: 20px;
+  font-size: 14px;
+  margin: 3px;
+}
+.filterSelectorInactive {
+  flex-grow: 1;
+  padding: 6px;
+  width: calc(30vw - 30px);
+  border-radius: 20px;
+  font-size: 14px;
+  margin: 3px;
+  background-color: white;
+  border: 1px solid black;
 }
\ No newline at end of file