diff --git a/src/components/BarChart.module.css b/src/components/BarChart.module.css
index 6eade31..90dbc4b 100644
--- a/src/components/BarChart.module.css
+++ b/src/components/BarChart.module.css
@@ -27,10 +27,28 @@
     flex-grow: 1;
     text-align: center;
     padding: 10px;
-    border-radius: 10px 10px 0 0;
     transition: all 0.3s ease-in-out;
+    font-weight: 600;
+  }
+
+  .dateSelector:first-child {
+    flex-grow: 1;
+    text-align: center;
+    padding: 10px;
+    border-radius: 10px 0 0 0;
+    transition: all 0.3s ease-in-out;
+    font-weight: 600;
   }
   
+  .dateSelector:last-child {
+    flex-grow: 1;
+    text-align: center;
+    padding: 10px;
+    border-radius: 0 10px 0 0;
+    transition: all 0.3s ease-in-out;
+    font-weight: 600;
+  }
+
   .dateSelectorActive {
     color: black;
     z-index: 2;
@@ -43,5 +61,6 @@
   
   .chartWrapper {
     border: 1px solid rgb(179, 177, 177);
+    border-radius: 0 0 11px 11px;
   }
   
\ No newline at end of file
diff --git a/src/components/BarChart.js b/src/components/DailyCharts.js
similarity index 85%
rename from src/components/BarChart.js
rename to src/components/DailyCharts.js
index 448d91c..14d194a 100644
--- a/src/components/BarChart.js
+++ b/src/components/DailyCharts.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 BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
+const DailyCharts = ({ transactionGraph, colors, type }) => {
   const [selectedIndex, setSelectedIndex] = useState(-1);
 
   useEffect(() => {
@@ -12,20 +12,6 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
   const processData = (graphData) => {
     if (!graphData) return null;
     return graphData.map((dayData) => {
-      const monthly = [
-        "minggu 1",
-        "minggu 2",
-        "minggu 3",
-        "minggu 4",
-      ];
-
-      const yearly = [
-        "Q1",
-        "Q2",
-        "Q3",
-        "Q4",
-      ];
-
       const categories = [
         "0-3",
         "3-6",
@@ -103,12 +89,15 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
                     key={indexx}
                     className={`${styles.dateSelector} ${index === indexx ? styles.dateSelectorActive : styles.dateSelectorInactive
                       }`}
+                      style={{border: (index==0||index==1) && selectedIndex != index && selectedIndex != indexx || selectedIndex ==-1 && index == 0 || selectedIndex == index && index == indexx ? 
+                        '1px solid rgb(179, 177, 177)' : 'none' }}
                     onClick={() =>
-                      selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
+                      type == 'yesterday' && selectedIndex == -1 || type != 'yesterday' && selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
                     }
-                    style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
+                    // style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
                   >
-                    <div>
+                    <div 
+                    style={{ color: index === indexx ? colors[index % colors.length] : 'transparent' }}>
                       {indexx !== chartData.length - 1 ? (
                         <>
                           {day}{" "}
@@ -126,6 +115,7 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
             <div className={styles.chartWrapper}>
               <Chart
                 options={{
+                  tooltip: { enabled: false },
                   chart: {
                     id: `chart-${index}`,
                     type: "area",
@@ -173,4 +163,4 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
   );
 };
 
-export default BarChart;
+export default DailyCharts;
diff --git a/src/components/Header.js b/src/components/Header.js
index 8a162cb..b922b7d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -316,7 +316,7 @@ const Header = ({
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src={user.username == undefined? shopImage : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
+          src={user.username == undefined? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s': "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
           alt="Profile"
           onClick={user.username !== undefined?handleImageClick: null}
           animate={showRectangle && animate}
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index da67862..ae77934 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -271,7 +271,7 @@
   height: 200px;
   overflow: hidden;
   border: 3px dashed #fbebcd;
-  border-radius: 11px;
+  border-radius: 11px 11px 0 0;
 
   /* Flexbox for centering */
   display: flex;
diff --git a/src/components/PeriodCharts.js b/src/components/PeriodCharts.js
new file mode 100644
index 0000000..1f243ca
--- /dev/null
+++ b/src/components/PeriodCharts.js
@@ -0,0 +1,156 @@
+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 [selectedIndex, setSelectedIndex] = useState(-1);
+
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [aggregatedCurrentReports, aggregatedPreviousReports]);
+
+  const monthly = ["1 - 7", "8 - 14", "15 - 21", "22 - 28", "29 - 31"];
+  const yearly = ["Kuartal 1", "Kuartal 2", "Kuartal 3", "Kuartal 4"];
+  const cat = type == 'monthly' ? monthly : yearly;
+
+  // Map the data for the current reports
+  let currentIncomeData, currentOutcomeData, currentTransactionData, previousIncomeData, previousOutcomeData, previousTransactionData = null;
+  if (aggregatedCurrentReports) {
+    currentIncomeData = aggregatedCurrentReports.map((report) => report.income);
+    currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
+    currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
+  }
+  if (aggregatedPreviousReports) {
+    // Map the data for the previous reports
+    previousIncomeData = aggregatedPreviousReports.map((report) => report.income);
+    previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
+    previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
+  }
+  let globalMax = null;
+  if (aggregatedCurrentReports || aggregatedPreviousReports)
+    // Find the global maximum for the y-axis
+    globalMax = Math.max(
+      // ...currentIncomeData,
+      // ...currentOutcomeData,
+      ...currentTransactionData,
+      // ...previousIncomeData,
+      // ...previousOutcomeData,
+      ...previousTransactionData
+    );
+
+  return (
+    <div className={styles.chartItemContainer}>
+
+      {aggregatedPreviousReports && (
+        <div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 0
+          ? styles.chartItemWrapperActive
+          : styles.chartItemWrapperInactive
+          }`}>
+
+          <div className={styles.dateSelectorWrapper}>
+            <div className={styles.dateSelector}
+              onClick={() =>
+                selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1)
+              }
+              style={{border: '1px solid rgb(179, 177, 177)', color: colors[0]}}
+             >
+              <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
+            </div>
+            <div
+              className={`${styles.dateSelector} ${styles.dateSelectorInactive
+                }`}
+                onClick={() =>
+                  selectedIndex === 0 ? setSelectedIndex(-1) : setSelectedIndex(1)
+                }>
+              <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
+            </div>
+          </div>
+          <div className={styles.chartWrapper}>
+            <Chart
+              options={{
+                tooltip: { enabled: false },
+                chart: { type: "area", zoom: { enabled: false }, toolbar: { show: false } },
+                xaxis: { 
+                  categories: cat,
+                  axisBorder: {
+                    show: false, // Removes the x-axis line
+                  },
+                  axisTicks: {
+                    show: false, // Removes the ticks on the x-axis
+                  },
+                 },
+                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
+                grid: { show: false },
+                fill: { opacity: 0.5 },
+                colors: [colors[0]],
+              }}
+              series={[
+                // { name: "Pemasukan", data: previousIncomeData },
+                // { name: "Pengaluaran", data: previousOutcomeData },
+                { name: "Total transaksi", data: previousTransactionData },
+              ]}
+              type="area"
+              height={200}
+              width="100%"
+            />
+          </div>
+        </div>
+      )}
+      {aggregatedCurrentReports && (
+        <div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 1
+          ? styles.chartItemWrapperActive
+          : styles.chartItemWrapperInactive
+          }`}>
+          <div className={styles.dateSelectorWrapper}>
+            <div
+              className={`${styles.dateSelector} ${styles.dateSelectorInactive
+                }`}
+                onClick={() =>
+                  selectedIndex === 1 ? setSelectedIndex(-1) : setSelectedIndex(0)
+                }>
+              <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
+            </div>
+            <div className={styles.dateSelector}
+              onClick={() =>
+                selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1)
+              }
+              
+              style={{border: '1px solid rgb(179, 177, 177)', color: colors[1]}}>
+              <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
+            </div>
+          </div>
+          <div className={styles.chartWrapper}>
+            <Chart
+              options={{
+                tooltip: { enabled: false },
+                chart: { type: "area", zoom: { enabled: false }, toolbar: { show: false } },
+                xaxis: {
+                  categories: cat, 
+                  axisBorder: {
+                    show: false, // Removes the x-axis line
+                  },
+                  axisTicks: {
+                    show: false, // Removes the ticks on the x-axis
+                  }, },
+                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
+                grid: { show: false },
+                fill: { opacity: 0.5 },
+                colors: [colors[1]],
+              }}
+              series={[
+                // { name: "Pemasukan", data: currentIncomeData },
+                // { name: "Pengeluaran", data: currentOutcomeData },
+                { name: "Total transaksi", data: currentTransactionData },
+              ]}
+              type="area"
+              height={200}
+              width="100%"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PeriodCharts;
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 570577c..e05935f 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -10,7 +10,7 @@ import { ThreeDots } from "react-loader-spinner";
 import Header from '../components/Header';
 import CircularDiagram from "./CircularDiagram";
 import API_BASE_URL from '../config';
-import BarChart from '../components/BarChart';
+import DailyCharts from '../components/DailyCharts';
 
 const LinktreePage = ({ user, setModal }) => {
   const navigate = useNavigate();
@@ -746,7 +746,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
 
               </div>
               <h3>penambahan stok</h3>
-              <BarChart Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
+              <DailyCharts Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
               <div style={{ height: '24vh' }}></div>
             </div>
 
diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js
index 5081646..5c29d88 100644
--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -325,7 +325,6 @@ const MaterialList = ({ cafeId, handleClose }) => {
                 )}
                 <div style={styles.cardContent}>
                   <h3 style={styles.cardTitle}>{currentMaterial.name}</h3>
-                  <p>{currentMaterial.unit}</p>
                 </div>
                 <div style={styles.buttonContainer}>
                   <button
@@ -542,10 +541,10 @@ const styles = {
     marginBottom: "5px",
   },
   image: {
-    width: "250px",
-    height: "150px",
+    width: "100px",
+    height: "100px",
+    borderRadius: '50%',
     objectFit: "contain",
-    borderRadius: "8px",
     marginBottom: "10px",
   },
   error: {
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 4187c24..5f7a218 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -7,7 +7,8 @@ import styles from "./Transactions.module.css";
 import "./Switch.css";
 
 import MultiSwitch from "react-multi-switch-toggle";
-import BarChart from '../components/BarChart';
+import DailyCharts from '../components/DailyCharts.js';
+import PeriodCharts from '../components/PeriodCharts.js';
 
 const RoundedRectangle = ({
   onClick,
@@ -128,27 +129,27 @@ const App = ({ cafeId,
   const filteredItems = analytics.itemSales || [];
 
   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
+    "#E63946", // Bright Red
+    "#F4A261", // Soft Orange
+    "#FFD166", // Sunshine Yellow
+    "#06D6A0", // Mint Green
+    "#118AB2", // Rich Teal
+    "#9D4EDD", // Vivid Violet
+    "#FF66B3", // Bubblegum Pink
+    "#FF7F50", // Coral
+    "#FFA07A", // Light Salmon
+    "#F7CAD0", // Blush Pink
+    "#A8DADC", // Aqua Blue
+    "#457B9D", // Steel Blue
+    "#2A9D8F", // Jungle Green
+    "#FFB703", // Mustard Yellow
+    "#E9C46A", // Honey Gold
+    "#264653", // Charcoal Green
+    "#D4A5A5", // Rose Beige
+    "#A6D6F0", // Sky Blue
+    "#BC4749", // Cranberry Red
   ];
+  
 
   const segments = filteredItems.map((item, index) => ({
     percentage: item.percentage,
@@ -321,7 +322,11 @@ const App = ({ cafeId,
             ))}
           </div>
         </div>
-        <BarChart transactionGraph={analytics?.transactionGraph} type={analytics?.type} aggregatedReports={analytics?.aggregatedReports} colors={colors}/>
+        {filter == 'yesterday' || filter == 'weekly' ?
+        <DailyCharts transactionGraph={analytics?.transactionGraph} type={filter} colors={colors}/>
+        :
+        <PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors}/>
+                }
       </div>
       <div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>