diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 484c699aaf..e86293bb02 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -34,7 +34,16 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, outerRadius, percent, width }
 };
 
 // Custom tooltip component
-const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectName, toolId }) => {
+const CustomTooltip = ({
+  active,
+  payload,
+  total,
+  hasNoData,
+  toolName,
+  projectName,
+  toolId,
+  darkMode,
+}) => {
   if (!active || !payload || !payload.length) {
     return null;
   }
@@ -44,8 +53,8 @@ const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectNam
     return (
       <div
         style={{
-          backgroundColor: 'rgba(255, 255, 255, 0.95)',
-          border: '1px solid #ccc',
+          backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
+          border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`,
           borderRadius: '4px',
           padding: '8px 12px',
           fontSize: '14px',
@@ -53,8 +62,10 @@ const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectNam
           maxWidth: '200px',
         }}
       >
-        <div style={{ fontWeight: '600', color: '#333' }}>📊 No Tools Match</div>
-        <div style={{ color: '#666', fontSize: '12px' }}>
+        <div style={{ fontWeight: '600', color: darkMode ? '#e0e0e0' : '#333' }}>
+          📊 No Tools Match
+        </div>
+        <div style={{ color: darkMode ? '#c5d0dd' : '#666', fontSize: '12px' }}>
           No tools match the selected combination
         </div>
       </div>
@@ -66,8 +77,8 @@ const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectNam
     return (
       <div
         style={{
-          backgroundColor: 'rgba(255, 255, 255, 0.95)',
-          border: '1px solid #ccc',
+          backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
+          border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`,
           borderRadius: '4px',
           padding: '8px 12px',
           fontSize: '14px',
@@ -75,8 +86,10 @@ const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectNam
           maxWidth: '200px',
         }}
       >
-        <div style={{ fontWeight: '600', color: '#333' }}>{toolName}</div>
-        <div style={{ color: '#666', fontSize: '12px' }}>❌ Not used in this project</div>
+        <div style={{ fontWeight: '600', color: darkMode ? '#e0e0e0' : '#333' }}>{toolName}</div>
+        <div style={{ color: darkMode ? '#c5d0dd' : '#666', fontSize: '12px' }}>
+          ❌ Not used in this project
+        </div>
       </div>
     );
   }
@@ -87,8 +100,8 @@ const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectNam
   return (
     <div
       style={{
-        backgroundColor: 'rgba(255, 255, 255, 0.95)',
-        border: '1px solid #ccc',
+        backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
+        border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`,
         borderRadius: '4px',
         padding: '8px 12px',
         fontSize: '14px',
@@ -96,13 +109,13 @@ const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectNam
         maxWidth: '200px',
       }}
     >
-      <div style={{ fontWeight: '600', color: '#333', marginBottom: '4px' }}>
+      <div style={{ fontWeight: '600', color: darkMode ? '#e0e0e0' : '#333', marginBottom: '4px' }}>
         {toolName || 'All Tools'}
       </div>
-      <div style={{ color: '#666', marginBottom: '2px' }}>
+      <div style={{ color: darkMode ? '#c5d0dd' : '#666', marginBottom: '2px' }}>
         Count: <strong>{data.value}</strong>
       </div>
-      <div style={{ color: '#666' }}>
+      <div style={{ color: darkMode ? '#c5d0dd' : '#666' }}>
         Percentage: <strong>{percentage}%</strong>
       </div>
     </div>
@@ -316,6 +329,7 @@ export default function ToolStatusDonutChart() {
                     hasNoData={hasNoData}
                     toolName={toolName}
                     toolId={toolId}
+                    darkMode={darkMode}
                   />
                 }
                 cursor={false}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.module.css
index 988ced2c86..e3d41e6631 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.module.css
@@ -46,6 +46,40 @@
   color: var(--donut-text-color);
 }
 
+.toolDonutWrapper select {
+  width: 220px;
+  margin-top: 8px;
+  padding: 10px 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 14px;
+  background-color: #ffffff;
+  color: #111827;
+  font-size: 20px;
+  line-height: 1.2;
+  outline: none;
+}
+
+.toolDonutWrapper select:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.toolDonutWrapperDark select {
+  background-color: #253342;
+  color: #ffffff;
+  border-color: #3a506b;
+}
+
+.toolDonutWrapperDark select:focus {
+  border-color: #5b89c2;
+  box-shadow: 0 0 0 2px rgba(91, 137, 194, 0.25);
+}
+
+.toolDonutWrapperDark select option {
+  background-color: #253342;
+  color: #ffffff;
+}
+
 .filterValue {
   font-size: 14px;
   color: #888;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.jsx
index 5dd1d9f1d2..da5183ed3a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.jsx
@@ -59,51 +59,6 @@ function ToolsAvailabilityPage() {
     setEndDate('');
   };
 
-  // Apply dark mode styles to document body when in dark mode
-  useEffect(() => {
-    if (darkMode) {
-      document.body.classList.add('dark-mode-body');
-    } else {
-      document.body.classList.remove('dark-mode-body');
-    }
-
-    // Add dark mode CSS
-    if (!document.getElementById('dark-mode-styles')) {
-      const styleElement = document.createElement('style');
-      styleElement.id = 'dark-mode-styles';
-      styleElement.innerHTML = `
-        .dark-mode-body .tools-availability-page {
-          background-color: #1e2736 !important;
-          color: #e0e0e0 !important;
-        }
-        .dark-mode-body .tools-availability-content {
-          background-color: #1e2736 !important;
-          color: #e0e0e0 !important;
-        }
-        .dark-mode-body .recharts-wrapper,
-        .dark-mode-body .recharts-surface {
-          background-color: #1e2736 !important;
-        }
-        .dark-mode-body .recharts-layer {
-          background-color: #1e2736 !important;
-        }
-      `;
-      document.head.appendChild(styleElement);
-    }
-
-    return () => {
-      // Cleanup
-      document.body.classList.remove('dark-mode-body');
-    };
-  }, [darkMode]);
-
-  const darkModeStyles = darkMode
-    ? {
-        backgroundColor: '#1e2736',
-        color: '#e0e0e0',
-      }
-    : {};
-
   // Render project selection based on loading and error states
   const renderProjectSelection = () => {
     if (loading) {
@@ -130,16 +85,16 @@ function ToolsAvailabilityPage() {
             ? {
                 control: baseStyles => ({
                   ...baseStyles,
-                  backgroundColor: '#2c3344',
-                  borderColor: '#364156',
+                  backgroundColor: '#253342',
+                  borderColor: '#3a506b',
                 }),
                 menu: baseStyles => ({
                   ...baseStyles,
-                  backgroundColor: '#2c3344',
+                  backgroundColor: '#253342',
                 }),
                 option: (baseStyles, state) => ({
                   ...baseStyles,
-                  backgroundColor: state.isFocused ? '#364156' : '#2c3344',
+                  backgroundColor: state.isFocused ? '#3a506b' : '#253342',
                   color: '#e0e0e0',
                 }),
                 singleValue: baseStyles => ({
@@ -158,11 +113,8 @@ function ToolsAvailabilityPage() {
   };
 
   return (
-    <div
-      className={`tools-availability-page ${darkMode ? 'dark-mode' : ''}`}
-      style={darkModeStyles}
-    >
-      <div className="tools-availability-content" style={darkModeStyles}>
+    <div className={`tools-availability-page ${darkMode ? 'dark-mode' : ''}`}>
+      <div className="tools-availability-content">
         <div className="tools-chart-filters">
           <div className="filter-group">
             <label htmlFor="project-select">Project</label>
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.module.css
index a911dde851..1b9ba8ff2d 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.module.css
@@ -1,24 +1,45 @@
 .tools-availability-page {
+  --tools-bg: #ffffff;
+  --tools-text: #000000;
+  --tools-card: #fafafa;
+  --tools-section: #ffffff;
+  --tools-border: #d1d5db;
+  --tools-input-bg: #ffffff;
+  --tools-input-border: #d1d5db;
+  --tools-select-bg: #ffffff;
+  --tools-select-hover: #f3f4f6;
+
   padding: 24px;
   min-height: 100vh;
-  background-color: var(--bg-color);
+  background-color: var(--tools-bg);
+  color: var(--tools-text);
+  transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 .tools-availability-page.dark-mode {
-  background-color: var(--dark-bg);
+  --tools-bg: #1b2a41;
+  --tools-text: #ffffff;
+  --tools-card: #2b3e59;
+  --tools-section: #253342;
+  --tools-border: #3a506b;
+  --tools-input-bg: #253342;
+  --tools-input-border: #3a506b;
+  --tools-select-bg: #253342;
+  --tools-select-hover: #3a506b;
 }
 
 .tools-availability-content {
   max-width: 1200px;
   margin: 0 auto;
   padding: 24px;
-  background-color: var(--card-bg);
+  background-color: var(--tools-section);
   border-radius: 8px;
-  box-shadow: 0 2px 5px var(--card-shadow);
+  box-shadow: 0 2px 5px var(--card-shadow, rgba(0,0,0,0.1));
 }
 
 .tools-availability-page.dark-mode .tools-availability-content {
-  background-color: var(--section-bg);
+  background-color: var(--tools-section);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 /* Filter section styling */
@@ -79,8 +100,8 @@
 
 /* Dark mode date picker styling */
 .tools-availability-page.dark-mode .date-picker {
-  background-color: #2c3344;
-  border-color: #364156;
+  background-color: var(--tools-input-bg);
+  border-color: var(--tools-input-border);
   color: #e0e0e0;
 }
 
@@ -90,7 +111,7 @@
 }
 
 .tools-availability-page.dark-mode .date-picker:hover {
-  border-color: #4b5563;
+  border-color: var(--tools-input-border);
 }
 
 /* "to" text styling */
@@ -184,9 +205,9 @@
 }
 
 .tools-availability-page.dark-mode .select-loading {
-  background-color: #2c3344;
+  background-color: var(--tools-input-bg);
   color: #9ca3af;
-  border-color: #364156;
+  border-color: var(--tools-input-border);
 }
 
 .tools-availability-page.dark-mode .select-error {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index 57451e1889..b90c703083 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import Select from 'react-select';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts';
 import axios from 'axios';
 import { ENDPOINTS } from '../../../../utils/URL';
 import styles from './ToolsHorizontalBarChart.module.css';
 
-// No mock data - use real backend data only
-
-// Custom tooltip component
-function CustomTooltip({ active, payload, label }) {
+function CustomTooltip({ active, payload, label, darkMode }) {
   if (!active || !payload || !payload.length) {
     return null;
   }
@@ -16,19 +14,41 @@ function CustomTooltip({ active, payload, label }) {
   const total = payload.reduce((sum, entry) => sum + (entry.value || 0), 0);
 
   return (
-    <div className={styles['tools-horizontal-bar-chart-tooltip']}>
-      <p className={styles['tools-horizontal-bar-chart-tooltip-label']}>{label}</p>
+    <div
+      className={styles['tools-horizontal-bar-chart-tooltip']}
+      style={{
+        backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
+        borderColor: darkMode ? '#3a506b' : '#ccc',
+      }}
+    >
+      <p
+        className={styles['tools-horizontal-bar-chart-tooltip-label']}
+        style={{ color: darkMode ? '#e0e0e0' : '#333' }}
+      >
+        {label}
+      </p>
       {payload.map((entry, index) => (
         <p key={index} style={{ color: entry.color }}>
           {entry.name}: {entry.value}
         </p>
       ))}
-      <p className={styles['tools-horizontal-bar-chart-tooltip-total']}>Total: {total}</p>
+      <p
+        className={styles['tools-horizontal-bar-chart-tooltip-total']}
+        style={{
+          color: darkMode ? '#e0e0e0' : '#333',
+          borderTopColor: darkMode ? 'rgba(255, 255, 255, 0.2)' : '#eee',
+        }}
+      >
+        Total: {total}
+      </p>
     </div>
   );
 }
 
-function ToolsHorizontalBarChart({ darkMode }) {
+function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
+  const reduxDarkMode = useSelector(state => state.theme.darkMode);
+  const darkMode = typeof darkModeProp === 'boolean' ? darkModeProp : reduxDarkMode;
+
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -36,8 +56,8 @@ function ToolsHorizontalBarChart({ darkMode }) {
   const [selectedProject, setSelectedProject] = useState(null);
   const [allTools, setAllTools] = useState([]);
   const [selectedTools, setSelectedTools] = useState([]);
+  const [isPreviewHovering, setIsPreviewHovering] = useState(false);
 
-  // Date range state for filters
   const currentDate = new Date();
   const startDate12MonthsAgo = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), 1);
   const endOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
@@ -45,41 +65,41 @@ function ToolsHorizontalBarChart({ darkMode }) {
   const [startDate, setStartDate] = useState(startDate12MonthsAgo.toISOString().split('T')[0]);
   const [endDate, setEndDate] = useState(endOfCurrentMonth.toISOString().split('T')[0]);
 
-  // Date range logging removed for production
-
-  // Fetch projects list
   useEffect(() => {
     const fetchProjects = async () => {
       try {
         const projectsResponse = await axios.get(ENDPOINTS.TOOLS_AVAILABILITY_PROJECTS);
         const projects = projectsResponse.data;
 
-        // Projects fetched successfully
-
         if (projects && projects.length > 0) {
           const projectOptions = projects.map(project => ({
             value: project.projectId,
-            label: project.projectId, // Use project ID as the visible label
+            label: project.projectId,
           }));
           setAllProjects(projectOptions);
-
-          // Auto-select first project for initial display
-          setSelectedProject(projectOptions[0]);
+          setSelectedProject(null);
+        } else {
+          setAllProjects([]);
+          setSelectedProject(null);
         }
       } catch (err) {
         setError('Failed to load projects');
+        setAllProjects([]);
+        setSelectedProject(null);
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchProjects();
   }, []);
 
-  // Fetch tools data when project or date range changes
   useEffect(() => {
     const fetchToolsData = async () => {
       if (!selectedProject?.value) {
         setData([]);
         setAllTools([]);
+        setError(null);
         setLoading(false);
         return;
       }
@@ -90,12 +110,10 @@ function ToolsHorizontalBarChart({ darkMode }) {
 
         const projectId = selectedProject.value;
 
-        // 1. Fetch unfiltered dataset (for fallback + full tool list)
         const toolsResponseNoFilter = await axios.get(
           ENDPOINTS.TOOLS_AVAILABILITY_BY_PROJECT(projectId),
         );
 
-        // 2. Fetch filtered dataset
         const toolsResponse = await axios.get(
           ENDPOINTS.TOOLS_AVAILABILITY_BY_PROJECT(projectId, startDate, endDate),
         );
@@ -103,16 +121,14 @@ function ToolsHorizontalBarChart({ darkMode }) {
         const toolsDataFiltered = toolsResponse.data;
         const toolsDataUnfiltered = toolsResponseNoFilter.data;
 
-        // Use filtered data if available; otherwise fallback to unfiltered
         const toolsData =
           toolsDataFiltered && toolsDataFiltered.length > 0
             ? toolsDataFiltered
             : toolsDataUnfiltered;
 
-        // Extract unique tool names for dropdown
         if (toolsDataUnfiltered?.length > 0) {
           const uniqueTools = [...new Set(toolsDataUnfiltered.map(item => item.toolName))]
-            .filter(Boolean) // remove null/undefined
+            .filter(Boolean)
             .map(tool => ({
               label: tool,
               value: tool,
@@ -123,14 +139,12 @@ function ToolsHorizontalBarChart({ darkMode }) {
           setAllTools([]);
         }
 
-        // If tool filters active → apply them
         let filteredForChart = toolsData;
         if (selectedTools.length > 0) {
           const selectedNames = selectedTools.map(t => t.value);
           filteredForChart = toolsData.filter(item => selectedNames.includes(item.toolName));
         }
 
-        // ✅ Format chart data
         if (filteredForChart.length > 0) {
           const formattedData = filteredForChart.map(item => ({
             name: item.toolName || 'Unknown Tool',
@@ -138,13 +152,11 @@ function ToolsHorizontalBarChart({ darkMode }) {
             needsReplacement: item.needsReplacement || 0,
             yetToReceive: item.yetToReceive || 0,
           }));
-
           setData(formattedData);
         } else {
           setData([]);
         }
       } catch (err) {
-        console.error(err);
         setError('Failed to load tools data');
         setData([]);
         setAllTools([]);
@@ -156,7 +168,6 @@ function ToolsHorizontalBarChart({ darkMode }) {
     fetchToolsData();
   }, [selectedProject, startDate, endDate, selectedTools]);
 
-  // Filter handlers
   const handleToolChange = selectedOption => setSelectedTools(selectedOption || []);
 
   const handleProjectChange = selectedOption => {
@@ -172,59 +183,47 @@ function ToolsHorizontalBarChart({ darkMode }) {
   };
 
   const handleClearDates = () => {
-    const currentDate = new Date();
-    const startDate12MonthsAgo = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), 1);
-    const endOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-    setStartDate(startDate12MonthsAgo.toISOString().split('T')[0]);
-    setEndDate(endOfCurrentMonth.toISOString().split('T')[0]);
+    const now = new Date();
+    const start = new Date(now.getFullYear() - 1, now.getMonth(), 1);
+    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    setStartDate(start.toISOString().split('T')[0]);
+    setEndDate(end.toISOString().split('T')[0]);
+    setSelectedProject(null);
   };
 
-  if (loading) {
-    return (
-      <div className={styles['tools-horizontal-bar-chart-card']}>
-        <h4 className={styles['tools-horizontal-bar-chart-title']}>Tools by Availability</h4>
-        <div className={styles['tools-horizontal-bar-chart-loading']}>Loading...</div>
-      </div>
-    );
-  }
-
-  if (error && data.length === 0) {
-    return (
-      <div className={styles['tools-horizontal-bar-chart-card']}>
-        <h4 className={styles['tools-horizontal-bar-chart-title']}>Tools by Availability</h4>
-        <div className={styles['tools-horizontal-bar-chart-error']}>{error}</div>
-      </div>
-    );
-  }
-
   const darkSelectStyles = {
     control: base => ({
       ...base,
-      backgroundColor: '#2c3344',
-      borderColor: '#364156',
+      backgroundColor: '#253342',
+      borderColor: '#3a506b',
       minHeight: '32px',
       fontSize: '12px',
     }),
     menu: base => ({
       ...base,
-      backgroundColor: '#2c3344',
+      backgroundColor: '#253342',
       fontSize: '12px',
     }),
     option: (base, state) => ({
       ...base,
-      backgroundColor: state.isFocused ? '#364156' : '#2c3344',
+      backgroundColor: state.isFocused ? '#3a506b' : '#253342',
       color: '#e0e0e0',
       fontSize: '12px',
     }),
     multiValue: base => ({
       ...base,
-      backgroundColor: '#364156',
+      backgroundColor: '#3a506b',
     }),
     multiValueLabel: base => ({
       ...base,
       color: '#e0e0e0',
       fontSize: '12px',
     }),
+    singleValue: base => ({
+      ...base,
+      color: '#e0e0e0',
+      fontSize: '12px',
+    }),
     placeholder: base => ({
       ...base,
       color: '#aaaaaa',
@@ -254,6 +253,10 @@ function ToolsHorizontalBarChart({ darkMode }) {
       ...base,
       fontSize: '12px',
     }),
+    singleValue: base => ({
+      ...base,
+      fontSize: '12px',
+    }),
     placeholder: base => ({
       ...base,
       fontSize: '12px',
@@ -268,7 +271,6 @@ function ToolsHorizontalBarChart({ darkMode }) {
     >
       <h4 className={styles['tools-horizontal-bar-chart-title']}>Tools by Availability</h4>
 
-      {/* Filters Section */}
       <div className={styles['tools-horizontal-bar-chart-filter-group']}>
         <label htmlFor="tool-select">Tool(s)</label>
         <Select
@@ -279,8 +281,8 @@ function ToolsHorizontalBarChart({ darkMode }) {
           onChange={handleToolChange}
           options={allTools}
           placeholder="Select tools"
-          isMulti={true}
-          isClearable={true}
+          isMulti
+          isClearable
           isDisabled={allTools.length === 0}
           closeMenuOnSelect={false}
           styles={darkMode ? darkSelectStyles : lightSelectStyles}
@@ -300,62 +302,7 @@ function ToolsHorizontalBarChart({ darkMode }) {
             placeholder="Select a project"
             isClearable={false}
             isDisabled={allProjects.length === 0}
-            styles={
-              darkMode
-                ? {
-                    control: baseStyles => ({
-                      ...baseStyles,
-                      backgroundColor: '#2c3344',
-                      borderColor: '#364156',
-                      minHeight: '32px',
-                      fontSize: '12px',
-                    }),
-                    menu: baseStyles => ({
-                      ...baseStyles,
-                      backgroundColor: '#2c3344',
-                      fontSize: '12px',
-                    }),
-                    option: (baseStyles, state) => ({
-                      ...baseStyles,
-                      backgroundColor: state.isFocused ? '#364156' : '#2c3344',
-                      color: '#e0e0e0',
-                      fontSize: '12px',
-                    }),
-                    singleValue: baseStyles => ({
-                      ...baseStyles,
-                      color: '#e0e0e0',
-                      fontSize: '12px',
-                    }),
-                    placeholder: baseStyles => ({
-                      ...baseStyles,
-                      color: '#aaaaaa',
-                      fontSize: '12px',
-                    }),
-                  }
-                : {
-                    control: baseStyles => ({
-                      ...baseStyles,
-                      minHeight: '32px',
-                      fontSize: '12px',
-                    }),
-                    menu: baseStyles => ({
-                      ...baseStyles,
-                      fontSize: '12px',
-                    }),
-                    option: baseStyles => ({
-                      ...baseStyles,
-                      fontSize: '12px',
-                    }),
-                    singleValue: baseStyles => ({
-                      ...baseStyles,
-                      fontSize: '12px',
-                    }),
-                    placeholder: baseStyles => ({
-                      ...baseStyles,
-                      fontSize: '12px',
-                    }),
-                  }
-            }
+            styles={darkMode ? darkSelectStyles : lightSelectStyles}
           />
         </div>
 
@@ -394,37 +341,157 @@ function ToolsHorizontalBarChart({ darkMode }) {
         </div>
       </div>
 
-      {data.length > 0 ? (
-        <div className={styles['tools-horizontal-bar-chart-content']}>
-          <ResponsiveContainer width="100%" height={200}>
+      {!selectedProject?.value && (
+        <div
+          style={{
+            position: 'relative',
+            height: '200px',
+            border: `1px dashed ${darkMode ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.15)'}`,
+            borderRadius: '8px',
+            background: darkMode ? '#1f2e40' : 'rgba(0,0,0,0.02)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            cursor: 'default',
+          }}
+          onMouseEnter={() => setIsPreviewHovering(true)}
+          onMouseLeave={() => setIsPreviewHovering(false)}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              top: '12px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              background: darkMode ? 'rgba(27,42,65,0.97)' : 'rgba(255,255,255,0.95)',
+              border: `1px solid ${darkMode ? '#3a506b' : 'rgba(0,0,0,0.12)'}`,
+              borderRadius: '10px',
+              padding: '10px 14px',
+              fontSize: '13px',
+              fontWeight: 600,
+              color: darkMode ? '#fff' : '#111',
+              boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+              opacity: isPreviewHovering ? 1 : 0,
+              pointerEvents: 'none',
+              transition: 'opacity 0.25s ease',
+              textAlign: 'center',
+              whiteSpace: 'nowrap',
+              zIndex: 2,
+            }}
+          >
+            Hover to preview - apply filters to load data.
+          </div>
+
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              filter: isPreviewHovering ? 'blur(1px)' : 'none',
+              opacity: isPreviewHovering ? 0.92 : 1,
+              transition: 'filter 0.25s ease, opacity 0.25s ease',
+            }}
+          >
+            <div
+              style={{ textAlign: 'center', width: '100%', maxWidth: '360px', padding: '0 12px' }}
+            >
+              <div
+                style={{
+                  fontSize: '28px',
+                  fontWeight: 800,
+                  color: darkMode ? '#ffffff' : '#111',
+                  marginBottom: '6px',
+                }}
+              >
+                Chart Preview
+              </div>
+              <div
+                style={{
+                  fontSize: '14px',
+                  color: darkMode ? 'rgba(224,224,224,0.6)' : 'rgba(0,0,0,0.45)',
+                  marginBottom: '14px',
+                }}
+              >
+                Select a project to load data
+              </div>
+              {[80, 55, 70].map((w, i) => (
+                <div
+                  key={i}
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}
+                >
+                  <div
+                    style={{
+                      width: '40px',
+                      height: '10px',
+                      borderRadius: '3px',
+                      background: darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)',
+                    }}
+                  />
+                  <div
+                    style={{
+                      width: `${w}%`,
+                      height: '14px',
+                      borderRadius: '4px',
+                      background: darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.1)',
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedProject?.value && loading && (
+        <div className={styles['tools-horizontal-bar-chart-loading']}>Loading...</div>
+      )}
+
+      {selectedProject?.value && !loading && error && data.length === 0 && (
+        <div className={styles['tools-horizontal-bar-chart-error']}>{error}</div>
+      )}
+
+      {selectedProject?.value && !loading && !error && data.length > 0 && (
+        <div
+          className={styles['tools-horizontal-bar-chart-content']}
+          style={{ flex: 1, minHeight: 0 }}
+        >
+          <ResponsiveContainer width="100%" height={Math.max(data.length * 100 + 60, 320)}>
             <BarChart
               layout="vertical"
               data={data}
-              margin={{ top: 10, right: 30, left: 40, bottom: 10 }}
+              margin={{ top: 10, right: 80, left: 40, bottom: 10 }}
+              barSize={40}
             >
               <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
               <XAxis type="number" hide />
               <YAxis
                 type="category"
                 dataKey="name"
-                tick={{
-                  fill: darkMode ? '#e0e0e0' : '#333',
-                  fontSize: 12,
-                }}
-                width={35}
+                tick={{ fill: darkMode ? '#e0e0e0' : '#333', fontSize: 12 }}
+                width={80}
                 axisLine={false}
                 tickLine={false}
               />
-              <Tooltip content={<CustomTooltip />} />
+              <Tooltip
+                content={<CustomTooltip darkMode={darkMode} />}
+                cursor={{ fill: 'rgba(0,0,0,0.05)' }}
+                wrapperStyle={{ zIndex: 10, outline: 'none', pointerEvents: 'none' }}
+                position={{ x: 0, y: -110 }}
+              />
               <Bar dataKey="inUse" stackId="a" fill="#2196F3" name="In Use" />
               <Bar dataKey="needsReplacement" stackId="a" fill="#F44336" name="Needs Replacement" />
               <Bar dataKey="yetToReceive" stackId="a" fill="#FF9800" name="Yet to Receive" />
             </BarChart>
           </ResponsiveContainer>
         </div>
-      ) : (
+      )}
+
+      {selectedProject?.value && !loading && !error && data.length === 0 && (
         <div className={styles['tools-horizontal-bar-chart-empty']}>
-          <p>📊 No tools data available</p>
+          <p>No tools data available</p>
         </div>
       )}
     </div>
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index eaa10c6276..26af0cc376 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -16,6 +16,12 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
+.tools-horizontal-bar-chart-card.tools-horizontal-bar-chart-dark-mode {
+  background-color: var(--card-bg, #2b3e59);
+  color: var(--text-color, #ffffff);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
 .tools-horizontal-bar-chart-title {
   font-size: 16px;
   font-weight: 600;
@@ -129,7 +135,7 @@
   font-size: 12px;
   font-weight: 500;
   margin-bottom: 4px;
-  color: var(--label-color);
+  color: #555;
 }
 
 .tools-horizontal-bar-chart-card.tools-horizontal-bar-chart-dark-mode
@@ -142,6 +148,10 @@
   max-width: 100%;
 }
 
+.tools-horizontal-bar-chart-tool-select {
+  max-width: 100%;
+}
+
 .tools-horizontal-bar-chart-date-picker-group {
   display: flex;
   align-items: center;
@@ -161,8 +171,8 @@
 
 .tools-horizontal-bar-chart-card.tools-horizontal-bar-chart-dark-mode
   .tools-horizontal-bar-chart-date-picker {
-  background-color: #2c3344;
-  border-color: #364156;
+  background-color: #253342;
+  border-color: #3a506b;
   color: #e0e0e0;
 }
 
@@ -202,15 +212,15 @@
 
 .tools-horizontal-bar-chart-card.tools-horizontal-bar-chart-dark-mode
   .tools-horizontal-bar-chart-clear-dates-btn {
-  background: #364156;
-  border-color: #4a5568;
+  background: #253342;
+  border-color: #3a506b;
   color: #e0e0e0;
 }
 
 .tools-horizontal-bar-chart-card.tools-horizontal-bar-chart-dark-mode
   .tools-horizontal-bar-chart-clear-dates-btn:hover {
-  background: #4a5568;
-  border-color: #5a6578;
+  background: #3a506b;
+  border-color: #4a6a8a;
 }
 
 /* Responsive adjustments */
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index 652de05d16..7cc341915e 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -583,7 +583,9 @@ function WeeklyProjectSummary() {
   return (
     <div
       ref={containerRef}
-      className={`${styles.weeklyProjectSummaryContainer} ${darkMode ? styles.darkMode : ''}`}
+      className={`weekly-project-summary-container ${styles.weeklyProjectSummaryContainer} ${
+        darkMode ? styles.darkMode : ''
+      } ${darkMode ? 'dark-mode' : ''}`}
       data-testid="weekly-project-summary-container"
     >
       <WeeklyProjectSummaryHeader