diff --git a/src/components/MostWastedMaterials/DropDown.jsx b/src/components/MostWastedMaterials/DropDown.jsx
new file mode 100644
index 0000000000..39611e7842
--- /dev/null
+++ b/src/components/MostWastedMaterials/DropDown.jsx
@@ -0,0 +1,51 @@
+import { useState, useRef, useEffect } from 'react';
+import styles from './Dropdown.module.css';
+import { useSelector } from 'react-redux';
+export default function CustomDropdown({ options, selected, onSelect }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.dropdownWrapper}`} ref={dropdownRef}>
+        <button
+          type="button"
+          className={`${styles.dropdownButton}`}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span>{selected.name}</span>
+          <span className={`${isOpen ? styles.arrowOpen : styles.arrow}`}>▼</span>
+        </button>
+
+        {isOpen && (
+          <div className={`${styles.dropdownMenu}`}>
+            {options.map(option => (
+              <button
+                type="button"
+                key={option.id}
+                className={`${styles.dropdownItem}`}
+                onClick={() => {
+                  onSelect(option);
+                  setIsOpen(false);
+                }}
+              >
+                {option.name}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/MostWastedMaterials/Dropdown.module.css b/src/components/MostWastedMaterials/Dropdown.module.css
new file mode 100644
index 0000000000..4b4c8231af
--- /dev/null
+++ b/src/components/MostWastedMaterials/Dropdown.module.css
@@ -0,0 +1,92 @@
+.dropdownWrapper {
+  position: relative;
+  width: 100%;
+  margin-top: 30px;
+}
+
+.dropdownButton {
+  width: 100%;
+  padding: 8px 16px;
+  text-align: left;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.arrow {
+  transition: transform 0.2s;
+}
+
+.arrowOpen {
+  transform: rotate(180deg);
+  transition: transform 0.2s;
+}
+
+.dropdownMenu {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  margin-top: 4px;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.dropdownButton:hover {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.dropdownItem {
+  width: 100%;
+  padding: 8px 16px;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.dropdownItem:hover {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+/* Dark Mode Styles */
+.darkMode .dropdownButton {
+  background-color: #1f2937;
+  border-color: #4b5563;
+  color: #f3f4f6;
+}
+
+.darkMode .arrow,
+.darkMode .arrowOpen {
+  color: #d1d5db;
+}
+
+.darkMode .dropdownMenu {
+  background-color: #1f2937;
+  border-color: #4b5563;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.darkMode .dropdownButton:hover {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+.darkMode .dropdownItem {
+  color: #f3f4f6;
+}
+
+.darkMode .dropdownItem:hover {
+  background-color: #2563eb;
+  color: #ffffff;
+}
diff --git a/src/components/MostWastedMaterials/Label.jsx b/src/components/MostWastedMaterials/Label.jsx
new file mode 100644
index 0000000000..168319120d
--- /dev/null
+++ b/src/components/MostWastedMaterials/Label.jsx
@@ -0,0 +1,19 @@
+// Custom Label component for displaying percentages on bars
+import { useSelector } from 'react-redux';
+
+export default function CustomLabel(props) {
+  const { x, y, width, value } = props;
+  const darkMode = useSelector(state => state.theme.darkMode);
+  return (
+    <text
+      x={x + width / 2}
+      y={y - 5}
+      fill={darkMode ? '#ffffff' : '#374151'}
+      textAnchor="middle"
+      fontSize="12"
+      fontWeight="500"
+    >
+      {`${value}%`}
+    </text>
+  );
+}
diff --git a/src/components/MostWastedMaterials/MostWastedMaterials.jsx b/src/components/MostWastedMaterials/MostWastedMaterials.jsx
index 050bb64bf8..ca5de78d49 100644
--- a/src/components/MostWastedMaterials/MostWastedMaterials.jsx
+++ b/src/components/MostWastedMaterials/MostWastedMaterials.jsx
@@ -1,6 +1,4 @@
-'use client';
-
-import { useMemo, useRef, useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import {
   Bar,
   BarChart,
@@ -11,303 +9,199 @@ import {
   Tooltip,
   LabelList,
 } from 'recharts';
-import { useSelector } from 'react-redux';
+import { mockProjects, mockData } from './mockData';
+import CustomDropdown from './DropDown';
+import CustomLabel from './Label';
+import CustomTooltip from './Tooltip';
 import styles from './MostWastedMaterials.module.css';
-
-// ---------------- Mock data (unchanged) ----------------
-const mockProjects = [
-  { id: 'all', name: 'All Projects' },
-  { id: 'project-1', name: 'Construction Site A' },
-  { id: 'project-2', name: 'Office Building B' },
-  { id: 'project-3', name: 'Residential Complex C' },
-];
-
-const mockData = {
-  all: [
-    { material: 'Concrete', wastePercentage: 15.8 },
-    { material: 'Steel Rebar', wastePercentage: 12.3 },
-    { material: 'Lumber', wastePercentage: 11.7 },
-    { material: 'Drywall', wastePercentage: 9.4 },
-    { material: 'Insulation', wastePercentage: 8.9 },
-    { material: 'Tiles', wastePercentage: 7.2 },
-    { material: 'Paint', wastePercentage: 6.8 },
-    { material: 'Electrical Wire', wastePercentage: 5.1 },
-  ],
-  'project-1': [
-    { material: 'Concrete', wastePercentage: 18.2 },
-    { material: 'Steel Rebar', wastePercentage: 14.1 },
-    { material: 'Lumber', wastePercentage: 10.3 },
-    { material: 'Drywall', wastePercentage: 8.7 },
-    { material: 'Insulation', wastePercentage: 7.9 },
-  ],
-  'project-2': [
-    { material: 'Drywall', wastePercentage: 13.5 },
-    { material: 'Steel Rebar', wastePercentage: 11.8 },
-    { material: 'Concrete', wastePercentage: 10.9 },
-    { material: 'Tiles', wastePercentage: 9.2 },
-    { material: 'Paint', wastePercentage: 8.4 },
-  ],
-  'project-3': [
-    { material: 'Lumber', wastePercentage: 16.3 },
-    { material: 'Insulation', wastePercentage: 12.7 },
-    { material: 'Drywall', wastePercentage: 11.1 },
-    { material: 'Paint', wastePercentage: 9.8 },
-    { material: 'Tiles', wastePercentage: 6.5 },
-  ],
-};
-
-// ---------------- Small utils ----------------
-const fmtPct = n => new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(n);
+import { useSelector } from 'react-redux';
 
 const downloadCSV = (rows, filename = 'most-wasted-materials.csv') => {
   if (!rows?.length) return;
-
-  /* eslint-disable testing-library/no-node-access */
   const headers = Object.keys(rows[0]);
   const body = rows.map(r => headers.map(h => JSON.stringify(r[h] ?? '')).join(','));
   const csv = [headers.join(','), ...body].join('\n');
   const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
   const url = URL.createObjectURL(blob);
-
   const a = document.createElement('a');
   a.href = url;
   a.download = filename;
   a.click();
   URL.revokeObjectURL(url);
-  /* eslint-enable testing-library/no-node-access */
 };
 
-// ---------------- Reusable Dropdown ----------------
-// `buttonId` links the label's htmlFor to this button for a11y.
-function CustomDropdown({ options, selected, onSelect, buttonId = undefined }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
+export default function MostWastedMaterialsDashboard() {
   const darkMode = useSelector(state => state.theme.darkMode);
-
-  return (
-    <div style={{ position: 'relative' }} ref={dropdownRef}>
-      {/* id ties this button to the <label htmlFor> */}
-      <button
-        id={buttonId}
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-haspopup="listbox"
-        aria-expanded={isOpen}
-        className={styles.dropdownButton}
-      >
-        <span>{selected.name}</span>
-        <span style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>▼</span>
-      </button>
-
-      {isOpen && (
-        <div role="listbox" aria-labelledby={buttonId} className={styles.dropdownMenu}>
-          {options.map(option => (
-            <button
-              type="button"
-              key={option.id}
-              role="option"
-              aria-selected={selected.id === option.id}
-              onClick={() => {
-                onSelect(option);
-                setIsOpen(false);
-              }}
-              className={styles.dropdownItem}
-              onMouseEnter={e => {
-                e.target.style.backgroundColor = darkMode ? '#5a6578' : '#f3f4f6';
-              }}
-              onMouseLeave={e => {
-                e.target.style.backgroundColor = 'transparent';
-              }}
-            >
-              {option.name}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------- Tooltip ----------------
-function CustomTooltip({ active, payload, label }) {
-  const darkMode = useSelector(state => state.theme.darkMode);
-
-  if (active && payload?.length) {
-    const v = payload[0].value;
-    return (
-      <div
-        className={styles.tooltip}
-        style={{
-          backgroundColor: darkMode ? '#2d3748' : '#ffffff',
-          border: `1px solid ${darkMode ? '#4a5568' : '#e5e7eb'}`,
-          borderRadius: '8px',
-          boxShadow: darkMode ? '0 4px 6px rgba(0, 0, 0, 0.3)' : '0 4px 6px rgba(0, 0, 0, 0.1)',
-          padding: '12px',
-        }}
-      >
-        <p
-          style={{
-            fontWeight: '500',
-            color: darkMode ? '#e2e8f0' : '#111827',
-            margin: '0 0 4px 0',
-          }}
-        >
-          {label}
-        </p>
-        <p
-          style={{
-            fontSize: '14px',
-            color: darkMode ? '#cbd5e0' : '#6b7280',
-            margin: 0,
-          }}
-        >
-          Waste: {fmtPct(v)}%
-        </p>
-      </div>
-    );
-  }
-  return null;
-}
-
-// ---------------- Main Component (mock-only) ----------------
-export default function MostWastedMaterials() {
   const [selectedProject, setSelectedProject] = useState(mockProjects[0]);
   const [dateRange, setDateRange] = useState({
-    from: '2024-01-01',
-    to: new Date().toISOString().split('T')[0],
+    from: '',
+    to: '',
   });
-
-  // New controls
+  const [chartData, setChartData] = useState([]);
   const [topN, setTopN] = useState(8);
-  const [sortDir, setSortDir] = useState('desc'); // 'desc' = most→least; 'asc' = least→most
-  const darkMode = useSelector(state => state.theme.darkMode);
-
-  // Compute chart data from mock (respect filters + topN + sort)
-  const chartData = useMemo(() => {
-    const raw = mockData[selectedProject.id] || mockData.all || [];
-    const sorted = [...raw].sort((a, b) =>
+  const [sortDir, setSortDir] = useState('desc');
+
+  const dateBounds = useMemo(() => {
+    const data = mockData[selectedProject.id] || mockData.all;
+    const dates = data
+      .map(item => item.date)
+      .filter(Boolean)
+      .sort();
+    if (dates.length === 0) {
+      return { min: '0000-01-01', max: '9999-12-31' };
+    }
+    return { min: dates[0], max: dates[dates.length - 1] };
+  }, [selectedProject]);
+
+  useEffect(() => {
+    setDateRange(prev => ({
+      from:
+        prev.from && prev.from >= dateBounds.min && prev.from <= dateBounds.max
+          ? prev.from
+          : dateBounds.min,
+      to:
+        prev.to && prev.to >= dateBounds.min && prev.to <= dateBounds.max
+          ? prev.to
+          : dateBounds.max,
+    }));
+  }, [dateBounds]);
+
+  useEffect(() => {
+    const data = mockData[selectedProject.id] || mockData.all;
+    const fromDate = dateRange.from || dateBounds.min;
+    const toDate = dateRange.to || dateBounds.max;
+    const minDate = fromDate <= toDate ? fromDate : toDate;
+    const maxDate = fromDate <= toDate ? toDate : fromDate;
+    const filteredData = data.filter(item => item.date >= minDate && item.date <= maxDate);
+    const sortedData = [...filteredData].sort((a, b) =>
       sortDir === 'desc'
         ? b.wastePercentage - a.wastePercentage
         : a.wastePercentage - b.wastePercentage,
     );
-    return sorted.slice(0, Math.max(1, Math.min(20, topN || 1)));
-  }, [selectedProject, sortDir, topN, dateRange]);
+    const n = Number(topN);
+    const clampedN = Math.max(1, Math.min(20, Number.isNaN(n) ? 8 : n));
+    setChartData(sortedData.slice(0, clampedN));
+  }, [selectedProject, dateRange, dateBounds, sortDir, topN]);
 
   return (
-    <div className={`${styles.container} ${darkMode ? styles.darkMode : ''}`}>
-      <div className={styles.header}>
-        <h1 className={styles.title}>Most Wasted Materials</h1>
-        <p className={styles.subtitle}>Y-axis: % of material wasted · X-axis: material name</p>
-      </div>
-
-      {/* Filters */}
-      <div className={styles.card}>
-        <div className={styles.filterGrid}>
-          <div>
-            <label htmlFor="project-filter" className={styles.filterLabel}>
-              Project Filter
-            </label>
-            <CustomDropdown
-              options={mockProjects}
-              selected={selectedProject}
-              onSelect={setSelectedProject}
-              buttonId="project-filter"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="mw-from" className={styles.filterLabel}>
-              From
-            </label>
-            <input
-              id="mw-from"
-              type="date"
-              value={dateRange.from}
-              onChange={e => setDateRange(r => ({ ...r, from: e.target.value }))}
-              className={styles.input}
-            />
-          </div>
+    <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.mostWastedMaterialsContainer}`}>
+        <div className={`${styles.mostWastedMaterialsHeader}`}>
+          <h1 className={`${styles.headerTitle}`}>Most Wasted Materials</h1>
+        </div>
 
-          <div>
-            <label htmlFor="mw-to" className={styles.filterLabel}>
-              To
-            </label>
-            <input
-              id="mw-to"
-              type="date"
-              value={dateRange.to}
-              onChange={e => setDateRange(r => ({ ...r, to: e.target.value }))}
-              className={styles.input}
-            />
+        <div className={`${styles.mostWastedMaterialsCard}`}>
+          <div className={`${styles.mostWastedMaterialsFilter}`}>
+            {/* Project Filter */}
+            <div className={`${styles.mostWastedMaterialsFilterItem}`}>
+              <label htmlFor="project-filter" className={`${styles.filterLabel}`}>
+                Project Filter
+              </label>
+              <CustomDropdown
+                options={mockProjects}
+                selected={selectedProject}
+                onSelect={setSelectedProject}
+              />
+            </div>
+
+            {/* Date Filter */}
+            <div className={`${styles.mostWastedMaterialsFilterItem}`}>
+              <label htmlFor="date-filter" className={`${styles.filterLabel}`}>
+                Date Filter
+              </label>
+              <div className={`${styles.dateFilterGrid}`}>
+                <div>
+                  <label htmlFor="date-from" className={`${styles.dateLabel}`}>
+                    From
+                  </label>
+                  <input
+                    id="date-from"
+                    type="date"
+                    min={dateBounds.min}
+                    max={dateBounds.max}
+                    value={dateRange.from}
+                    onChange={e => setDateRange(prev => ({ ...prev, from: e.target.value }))}
+                    className={`${styles.dateInput}`}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="date-to" className={`${styles.dateLabel}`}>
+                    To
+                  </label>
+                  <input
+                    id="date-to"
+                    type="date"
+                    min={dateBounds.min}
+                    max={dateBounds.max}
+                    value={dateRange.to}
+                    onChange={e => setDateRange(prev => ({ ...prev, to: e.target.value }))}
+                    className={`${styles.dateInput}`}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Top N */}
+            <div className={`${styles.mostWastedMaterialsFilterItem}`}>
+              <label htmlFor="top-n" className={`${styles.filterLabel}`}>
+                Top N
+              </label>
+              <input
+                id="top-n"
+                type="number"
+                min={1}
+                max={8}
+                value={topN}
+                onFocus={e => e.target.select()}
+                onChange={e => {
+                  const val = e.target.value;
+                  if (val === '') {
+                    setTopN('');
+                    return;
+                  }
+                  const num = Number(val);
+                  if (!Number.isNaN(num)) {
+                    setTopN(num);
+                  }
+                }}
+                onBlur={() => {
+                  setTopN(prev => {
+                    const n = Number(prev);
+                    if (Number.isNaN(n)) return 8;
+                    return Math.max(1, Math.min(8, n));
+                  });
+                }}
+                className={`${styles.dateInput}`}
+              />
+            </div>
           </div>
 
-          <div>
-            <label htmlFor="mw-topn" className={styles.filterLabel}>
-              Top N
-            </label>
-            <input
-              id="mw-topn"
-              type="number"
-              min={1}
-              max={20}
-              value={topN}
-              onFocus={e => e.target.select()}
-              onChange={e => {
-                const val = e.target.value;
-
-                // Allow empty input while typing
-                if (val === '') {
-                  setTopN('');
-                  return;
-                }
-
-                const num = Number(val);
-                if (!Number.isNaN(num)) {
-                  setTopN(num);
-                }
-              }}
-              onBlur={() => {
-                // Clamp value only when leaving the field
-                setTopN(prev => {
-                  const n = Number(prev);
-                  if (Number.isNaN(n)) return 1;
-                  return Math.max(1, Math.min(20, n));
-                });
-              }}
-              className={styles.input}
-            />
+          {/* Action Buttons */}
+          <div className={`${styles.actionButtons}`}>
+            <button
+              type="button"
+              onClick={() => setSortDir(d => (d === 'desc' ? 'asc' : 'desc'))}
+              className={`${styles.actionButton}`}
+              title="Toggle sort order"
+            >
+              Sort: {sortDir === 'desc' ? 'Most → Least' : 'Least → Most'}
+            </button>
+            <button
+              type="button"
+              onClick={() => downloadCSV(chartData)}
+              className={`${styles.actionButton}`}
+            >
+              Export CSV
+            </button>
           </div>
         </div>
 
-        <div className={styles.actionButtons}>
-          <button
-            type="button"
-            onClick={() => setSortDir(d => (d === 'desc' ? 'asc' : 'desc'))}
-            className={styles.actionButton}
-            title="Toggle sort order"
-          >
-            Sort: {sortDir === 'desc' ? 'Most → Least' : 'Least → Most'}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => downloadCSV(chartData)}
-            className={styles.actionButton}
-          >
-            Export CSV
-          </button>
-        </div>
-      </div>
-
-      {/* Chart */}
-      <div className={styles.card}>
-        {chartData.length === 0 ? (
-          <div className={styles.noData}>No data for the selected filters.</div>
-        ) : (
-          <div className={styles.chartContainer}>
+        {/* Chart */}
+        <div className={`${styles.chartWrapper}`}>
+          <div className={`${styles.chartContainer}`}>
             <ResponsiveContainer width="100%" height="100%">
               <BarChart data={chartData} margin={{ top: 30, right: 30, left: 20, bottom: 60 }}>
-                <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? '#4a5568' : '#e5e7eb'} />
+                <CartesianGrid strokeDasharray="3 3" className={`${styles.chartGrid}`} />
                 <XAxis
                   dataKey="material"
                   angle={-45}
@@ -315,38 +209,31 @@ export default function MostWastedMaterials() {
                   height={80}
                   fontSize={12}
                   interval={0}
-                  tick={{ fill: darkMode ? '#cbd5e0' : '#374151' }}
+                  tick={{ fill: darkMode ? '#d1d5db' : '#374151' }}
                 />
                 <YAxis
                   label={{
                     value: 'Percentage of Material Wasted (%)',
                     angle: -90,
                     position: 'insideLeft',
-                    style: {
-                      textAnchor: 'middle',
-                      fill: darkMode ? '#cbd5e0' : '#374151',
-                    },
+                    style: { textAnchor: 'middle', fill: darkMode ? '#d1d5db' : '#374151' },
                   }}
                   fontSize={12}
-                  tick={{ fill: darkMode ? '#cbd5e0' : '#374151' }}
+                  tick={{ fill: darkMode ? '#d1d5db' : '#374151' }}
                 />
                 <Tooltip content={<CustomTooltip />} />
-                <Bar
-                  dataKey="wastePercentage"
-                  fill={darkMode ? '#4299e1' : '#3b82f6'}
-                  radius={[4, 4, 0, 0]}
-                >
+                <Bar dataKey="wastePercentage" fill="#3b82f6" radius={[4, 4, 0, 0]}>
                   <LabelList
                     dataKey="wastePercentage"
                     position="top"
-                    formatter={v => `${fmtPct(v)}%`}
-                    style={{ fill: darkMode ? '#e2e8f0' : '#374151' }}
+                    formatter={v => `${v}%`}
+                    style={{ fill: darkMode ? '#ffffff' : '#374151' }}
                   />
                 </Bar>
               </BarChart>
             </ResponsiveContainer>
           </div>
-        )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/MostWastedMaterials/MostWastedMaterials.module.css b/src/components/MostWastedMaterials/MostWastedMaterials.module.css
index 35fcc71cc5..23a9f8636e 100644
--- a/src/components/MostWastedMaterials/MostWastedMaterials.module.css
+++ b/src/components/MostWastedMaterials/MostWastedMaterials.module.css
@@ -1,249 +1,170 @@
-/* MostWastedMaterials.module.css */
-
-/* Light mode (default) */
-.container {
+.mostWastedMaterialsContainer {
+  padding: 20px;
+  font-family: Arial, sans-serif;
   width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
-  background-color: #f9fafb;
-  min-height: 100vh;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-.darkMode {
-  background-color: #1a202c !important;
-  color: #e2e8f0 !important;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding-bottom: 80px;
+  height: 100vh;
 }
 
-.header {
-  text-align: center;
-  margin-bottom: 32px;
+.mostWastedMaterialsHeader {
+  margin-bottom: 24px;
 }
 
-.title {
-  font-size: 32px;
-  font-weight: bold;
+.headerTitle {
+  font-size: 30px;
+  font-weight: 500;
   color: #111827;
-  margin: 0;
-  transition: color 0.3s ease;
-}
-
-.darkMode .title {
-  color: #e2e8f0;
-}
-
-.subtitle {
-  color: #6b7280;
-  margin-top: 8px;
-  font-size: 14px;
-  transition: color 0.3s ease;
-}
-
-.darkMode .subtitle {
-  color: #a0aec0;
 }
 
-.card {
+.mostWastedMaterialsCard {
   background-color: #ffffff;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
   padding: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
-.darkMode .card {
-  background-color: #2d3748;
-  border-color: #4a5568;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+.mostWastedMaterialsFilter {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-end;
 }
 
-.filterGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 20px;
+.mostWastedMaterialsFilterItem {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 200px;
 }
 
 .filterLabel {
-  display: block;
+  font-weight: 500;
   font-size: 14px;
-  font-weight: 600;
   color: #374151;
-  margin-bottom: 8px;
-  transition: color 0.3s ease;
-}
-
-.darkMode .filterLabel {
-  color: #cbd5e0;
 }
 
-.dropdownButton {
-  width: 100%;
-  padding: 8px 16px;
-  text-align: left;
-  background-color: #ffffff;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
-}
-
-.darkMode .dropdownButton {
-  background-color: #4a5568;
-  border-color: #718096;
-  color: #e2e8f0;
-}
-
-.dropdownButton:hover {
-  border-color: #9ca3af;
+.dateFilterGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
 }
 
-.darkMode .dropdownButton:hover {
-  border-color: #a0aec0;
-  background-color: #4a5568;
+.dateLabel {
+  font-size: 12px;
+  color: #6b7280;
 }
 
-.dropdownMenu {
-  position: absolute;
-  z-index: 10;
+.dateInput {
   width: 100%;
-  margin-top: 4px;
-  background-color: #ffffff;
+  padding: 8px 12px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s ease, border-color 0.3s ease;
+  font-size: 14px;
 }
 
-.darkMode .dropdownMenu {
-  background-color: #4a5568;
-  border-color: #718096;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+.actionButtons {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+  flex-wrap: wrap;
 }
 
-.dropdownItem {
-  width: 100%;
+.actionButton {
   padding: 8px 16px;
-  text-align: left;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  color: #374151;
-  transition: background-color 0.2s ease, color 0.3s ease;
-}
-
-.darkMode .dropdownItem {
-  color: #e2e8f0;
-}
-
-.input {
-  width: 100%;
-  padding: 8px 12px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
-  font-size: 14px;
   background-color: #ffffff;
   color: #374151;
-  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
-.darkMode .input {
-  background-color: #4a5568;
-  border-color: #718096;
-  color: #e2e8f0;
+.actionButton:hover {
+  background-color: #f3f4f6;
 }
 
-.input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.chartWrapper {
+  background-color: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  margin-bottom: 100px;
+  padding: 14px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  height: 500px;
 }
 
-.darkMode .input:focus {
-  border-color: #63b3ed;
-  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2);
+.chartContainer {
+  width: 100%;
+  height: 100%;
 }
 
-.actionButtons {
-  margin-top: 16px;
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
+.chartGrid {
+  stroke: #e5e7eb;
 }
 
-.actionButton {
-  padding: 8px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  background-color: #fff;
-  cursor: pointer;
-  color: #374151;
-  font-size: 14px;
-  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+/* Dark Mode Styles */
+.darkMode .mostWastedMaterialsContainer {
+  background-color: #1b2a41;
 }
 
-.darkMode .actionButton {
-  background-color: #4a5568;
-  border-color: #718096;
-  color: #e2e8f0;
+.darkMode .headerTitle {
+  color: #f9fafb;
 }
 
-.actionButton:hover {
-  background-color: #f3f4f6;
+.darkMode .mostWastedMaterialsCard {
+  background-color: #1f2937;
+  border-color: #374151;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-.darkMode .actionButton:hover {
-  background-color: #5a6578;
+.darkMode .filterLabel {
+  color: #d1d5db;
 }
 
-.chartContainer {
-  width: 100%;
-  height: 500px;
+.darkMode .dateLabel {
+  color: #9ca3af;
 }
 
-.noData {
-  height: 500px;
-  display: grid;
-  place-items: center;
-  color: #6b7280;
-  transition: color 0.3s ease;
+.darkMode .dateInput {
+  background-color: #374151;
+  border-color: #4b5563;
+  color: #f3f4f6;
+  color-scheme: dark;
 }
 
-.darkMode .noData {
-  color: #a0aec0;
+.darkMode .actionButton {
+  background-color: #374151;
+  border-color: #4b5563;
+  color: #f3f4f6;
 }
 
-/* Chart specific styles */
-.darkMode .recharts-cartesian-grid-horizontal line,
-.darkMode .recharts-cartesian-grid-vertical line {
-  stroke: #4a5568;
+.darkMode .actionButton:hover {
+  background-color: #4b5563;
 }
 
-.darkMode .recharts-x-axis .recharts-cartesian-axis-tick-value,
-.darkMode .recharts-y-axis .recharts-cartesian-axis-tick-value {
-  fill: #cbd5e0;
+.darkMode .chartWrapper {
+  background-color: #1f2937;
+  border-color: #374151;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-.darkMode .recharts-x-axis .recharts-cartesian-axis-line,
-.darkMode .recharts-y-axis .recharts-cartesian-axis-line {
-  stroke: #718096;
+.darkMode .chartGrid {
+  stroke: #374151;
 }
 
-.darkMode .recharts-tooltip-wrapper {
-  background-color: #2d3748 !important;
-  border-color: #4a5568 !important;
+.darkMode :global(.recharts-bar-rectangle) {
+  fill: #3b82f6;
 }
 
-.darkMode .recharts-tooltip-item {
-  color: #e2e8f0 !important;
+.darkMode :global(.recharts-bar-rectangle:hover) {
+  fill: #93c5fd !important;
 }
 
-.darkMode .recharts-default-tooltip {
-  background-color: #2d3748 !important;
-  border: 1px solid #4a5568 !important;
-}
\ No newline at end of file
+.darkMode :global(.recharts-label-list) text {
+  fill: #ffffff;
+}
diff --git a/src/components/MostWastedMaterials/Tooltip.jsx b/src/components/MostWastedMaterials/Tooltip.jsx
new file mode 100644
index 0000000000..5d72b45eef
--- /dev/null
+++ b/src/components/MostWastedMaterials/Tooltip.jsx
@@ -0,0 +1,17 @@
+// Custom Tooltip Component
+import styles from './Tooltip.module.css';
+import { useSelector } from 'react-redux';
+export default function CustomTooltip({ active, payload, label }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  if (active && payload && payload.length) {
+    return (
+      <div className={`${darkMode ? styles.darkMode : ''}`}>
+        <div className={`${styles.tooltipWrapper}`}>
+          <p className={`${styles.tooltipLabel} ${styles.labelBlue}`}>{label}</p>
+          <p className={`${styles.tooltipValue}`}>Waste: {payload[0].value}%</p>
+        </div>
+      </div>
+    );
+  }
+  return null;
+}
diff --git a/src/components/MostWastedMaterials/Tooltip.module.css b/src/components/MostWastedMaterials/Tooltip.module.css
new file mode 100644
index 0000000000..0457af183f
--- /dev/null
+++ b/src/components/MostWastedMaterials/Tooltip.module.css
@@ -0,0 +1,35 @@
+.tooltipWrapper {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 12px;
+}
+
+.tooltipLabel {
+  font-weight: 500;
+  margin: 0 0 4px 0;
+}
+
+.tooltipLabel.labelBlue {
+  color: #3b82f6 !important;
+}
+
+.darkMode .tooltipLabel.labelBlue {
+  color: #60a5fa !important;
+}
+
+.tooltipValue {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0;
+}
+
+.darkMode .tooltipWrapper {
+  background-color: #1f2937; /* dark gray */
+  border: 1px solid #374151;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+.darkMode .tooltipValue {
+  color: #d1d5db;
+}
diff --git a/src/components/MostWastedMaterials/mockData.js b/src/components/MostWastedMaterials/mockData.js
new file mode 100644
index 0000000000..eebd56b9f5
--- /dev/null
+++ b/src/components/MostWastedMaterials/mockData.js
@@ -0,0 +1,41 @@
+// Mock data for demonstration
+export const mockProjects = [
+  { id: 'all', name: 'All Projects' },
+  { id: 'project-1', name: 'Construction Site A' },
+  { id: 'project-2', name: 'Office Building B' },
+  { id: 'project-3', name: 'Residential Complex C' },
+];
+
+export const mockData = {
+  all: [
+    { material: 'Concrete', wastePercentage: 15.8, date: '2024-01-15' },
+    { material: 'Steel Rebar', wastePercentage: 12.3, date: '2024-02-12' },
+    { material: 'Lumber', wastePercentage: 11.7, date: '2024-03-08' },
+    { material: 'Drywall', wastePercentage: 9.4, date: '2024-04-05' },
+    { material: 'Insulation', wastePercentage: 8.9, date: '2024-05-22' },
+    { material: 'Tiles', wastePercentage: 7.2, date: '2024-06-14' },
+    { material: 'Paint', wastePercentage: 6.8, date: '2024-07-09' },
+    { material: 'Electrical Wire', wastePercentage: 5.1, date: '2024-08-18' },
+  ],
+  'project-1': [
+    { material: 'Concrete', wastePercentage: 18.2, date: '2024-02-10' },
+    { material: 'Steel Rebar', wastePercentage: 14.1, date: '2024-03-16' },
+    { material: 'Lumber', wastePercentage: 10.3, date: '2024-05-03' },
+    { material: 'Drywall', wastePercentage: 8.7, date: '2024-06-21' },
+    { material: 'Insulation', wastePercentage: 7.9, date: '2024-08-02' },
+  ],
+  'project-2': [
+    { material: 'Drywall', wastePercentage: 13.5, date: '2024-01-28' },
+    { material: 'Steel Rebar', wastePercentage: 11.8, date: '2024-04-11' },
+    { material: 'Concrete', wastePercentage: 10.9, date: '2024-06-07' },
+    { material: 'Tiles', wastePercentage: 9.2, date: '2024-07-19' },
+    { material: 'Paint', wastePercentage: 8.4, date: '2024-09-04' },
+  ],
+  'project-3': [
+    { material: 'Lumber', wastePercentage: 16.3, date: '2024-02-05' },
+    { material: 'Insulation', wastePercentage: 12.7, date: '2024-03-27' },
+    { material: 'Drywall', wastePercentage: 11.1, date: '2024-05-18' },
+    { material: 'Paint', wastePercentage: 9.8, date: '2024-07-01' },
+    { material: 'Tiles', wastePercentage: 6.5, date: '2024-08-23' },
+  ],
+};