diff --git a/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx b/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx
index 935294cff8..b9ee69f3b6 100644
--- a/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx
+++ b/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
-import { Button, ButtonGroup, Table } from 'reactstrap';
+import { Button, Table, UncontrolledTooltip } from 'reactstrap';
 import Select from 'react-select';
 
 import { fetchBMProjects } from '~/actions/bmdashboard/projectActions';
@@ -11,6 +11,8 @@ import {
 import { getHeaderData } from '~/actions/authActions';
 import { getUserProfile } from '~/actions/userProfile';
 
+import styles from './EDailyActivityLog.module.css';
+
 // Helper function to get today's date in YYYY-MM-DD format
 const getToday = () => {
   const now = new Date();
@@ -61,17 +63,76 @@ const buildRows = list =>
     };
   });
 
+const getSelectStyles = (darkMode, isTableSelect = false) => ({
+  container: base => ({
+    ...base,
+    width: isTableSelect ? 300 : '100%',
+    minWidth: isTableSelect ? 300 : 'auto',
+    maxWidth: isTableSelect ? 300 : 'none',
+  }),
+  control: base => ({
+    ...base,
+    backgroundColor: darkMode ? '#2a3f5f' : '#fff',
+    borderColor: darkMode ? '#3a506b' : '#ced4da',
+    color: darkMode ? '#ffffff' : '#000', // Changed to pure white
+  }),
+  singleValue: base => ({
+    ...base,
+    color: darkMode ? '#ffffff' : '#000', // Changed to pure white
+  }),
+  input: base => ({
+    ...base,
+    color: darkMode ? '#ffffff' : '#000', // Changed to pure white
+  }),
+  menu: base => ({
+    ...base,
+    backgroundColor: darkMode ? '#2a3f5f' : '#fff',
+    zIndex: 9999,
+  }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: state.isFocused
+      ? darkMode
+        ? '#3a506b'
+        : '#e9ecef'
+      : darkMode
+      ? '#2a3f5f'
+      : '#fff',
+    color: darkMode ? '#ffffff' : '#000', // Changed to pure white
+    cursor: 'pointer',
+  }),
+  placeholder: base => ({
+    ...base,
+    color: darkMode ? '#ffffff' : '#6c757d', // Changed to pure white
+    opacity: 0.7, // Kept the opacity so it still looks like a placeholder
+  }),
+  multiValue: base => ({
+    ...base,
+    backgroundColor: darkMode ? '#3a506b' : '#e9ecef',
+  }),
+  multiValueLabel: base => ({
+    ...base,
+    color: darkMode ? '#ffffff' : '#000', // Changed to pure white
+  }),
+  multiValueRemove: base => ({
+    ...base,
+    color: darkMode ? '#ffffff' : '#000', // Changed to pure white
+    ':hover': {
+      backgroundColor: 'red',
+      color: 'white',
+    },
+  }),
+});
+
 function EDailyActivityLog(props) {
   const dispatch = useDispatch();
 
-  /* redux slices */
   const bmProjects = useSelector(s => s.bmProjects || []);
   const equipments = useSelector(s => s.bmEquipments?.equipmentslist || []);
   const darkMode = useSelector(state => state.theme.darkMode);
 
   const { user } = props.auth;
 
-  /* local state */
   const [selectedProject, setSelectedProject] = useState(null);
   const [date, setDate] = useState(getToday());
   const [logType, setLogType] = useState('check-in'); // 'check-in' | 'check-out'
@@ -82,14 +143,12 @@ function EDailyActivityLog(props) {
     dispatch(fetchBMProjects());
   }, [dispatch]);
 
-  /* fetch equipments whenever project changes */
   useEffect(() => {
     if (selectedProject?.value) {
       dispatch(fetchAllEquipments(selectedProject.value));
     }
   }, [selectedProject, dispatch]);
 
-  /* build rows whenever equipments slice updates */
   const derived = useMemo(() => buildRows(equipments), [equipments]);
   useEffect(() => setRows(derived), [derived]);
 
@@ -145,12 +204,12 @@ function EDailyActivityLog(props) {
     dispatch(updateMultipleEquipmentLogs(selectedProject.value, payload));
   };
 
+  const projectSelectStyles = getSelectStyles(darkMode, false);
+  const tableSelectStyles = getSelectStyles(darkMode, true);
+
   return (
-    <div
-      className={`container-fluid ${darkMode ? 'bg-oxford-blue text-light' : ''}`}
-      style={{ height: '100%' }}
-    >
-      {/* Custom dark mode table row and header hover style: dark background, light text */}
+    <div className={`container-fluid ${styles.mainContainer} ${darkMode ? styles.darkMode : ''}`}>
+      {/* Custom dark mode styling for native date pickers and specific table hovers */}
       {darkMode && (
         <style>{`
           .dark-table-row:hover,
@@ -161,7 +220,6 @@ function EDailyActivityLog(props) {
             transition: background-color 0.2s;
           }
           
-          /* Comprehensive dark mode date picker styling */
           .dark-date-input {
             background-color: #343a40 !important;
             color: #f8f9fa !important;
@@ -171,39 +229,24 @@ function EDailyActivityLog(props) {
           .dark-date-input::-webkit-calendar-picker-indicator {
             filter: invert(1);
             cursor: pointer;
+            background-color: #495057;
+            border-radius: 4px;
+            padding: 4px;
           }
           
-          .dark-date-input::-webkit-datetime-edit {
-            color: #f8f9fa;
-          }
-          
-          .dark-date-input::-webkit-datetime-edit-fields-wrapper {
-            color: #f8f9fa;
-          }
-          
-          .dark-date-input::-webkit-datetime-edit-text {
-            color: #f8f9fa;
-          }
-          
+          .dark-date-input::-webkit-datetime-edit,
+          .dark-date-input::-webkit-datetime-edit-fields-wrapper,
+          .dark-date-input::-webkit-datetime-edit-text,
           .dark-date-input::-webkit-datetime-edit-month-field,
           .dark-date-input::-webkit-datetime-edit-day-field,
           .dark-date-input::-webkit-datetime-edit-year-field {
             color: #f8f9fa;
           }
           
-          /* For Firefox */
           .dark-date-input[type="date"] {
             color-scheme: dark;
           }
           
-          /* For calendar dropdown - limited browser support */
-          .dark-date-input::-webkit-calendar-picker-indicator {
-            background-color: #495057;
-            border-radius: 4px;
-            padding: 4px;
-          }
-          
-          /* Make the calendar dropdown dark - this is limited to browsers that support it */
           @supports (-webkit-appearance: none) or (-moz-appearance: none) {
             .dark-date-input {
               color-scheme: dark;
@@ -212,7 +255,6 @@ function EDailyActivityLog(props) {
         `}</style>
       )}
 
-      {/* Also add light mode styles */}
       {!darkMode && (
         <style>{`
           .light-date-input {
@@ -232,10 +274,10 @@ function EDailyActivityLog(props) {
       )}
 
       <div className="container">
-        <h4 className="mb-4">Daily Equipment Log</h4>
+        <h4 className="mb-4 pt-3">Daily Equipment Log</h4>
 
-        {/* header */}
-        <div className="row mb-3">
+        {/* Header Row */}
+        <div className="row mb-3 align-items-end">
           <div className="col-md-3">
             <label
               className={`form-label fw-bold${darkMode ? ' text-light' : ''}`}
@@ -277,128 +319,90 @@ function EDailyActivityLog(props) {
               Project
             </label>
             <Select
-              inputId="project-select" // associate label via inputId for react-select
+              inputId="project-select"
               value={selectedProject}
               onChange={setSelectedProject}
               options={bmProjects.map(p => ({ label: p.name, value: p._id }))}
               placeholder="Select project…"
               isClearable
-              styles={{
-                maxWidth: '150px',
-                control: base => ({
-                  ...base,
-                  backgroundColor: darkMode ? '#343a40' : '#fff',
-                  borderColor: darkMode ? '#495057' : '#ced4da',
-                  color: darkMode ? '#fff' : '#000',
-                  minHeight: 38,
-                  boxShadow: 'none',
-                }),
-                singleValue: base => ({
-                  ...base,
-                  color: darkMode ? '#fff' : '#000',
-                }),
-                input: base => ({
-                  ...base,
-                  color: darkMode ? '#fff' : '#000',
-                }),
-                placeholder: base => ({
-                  ...base,
-                  color: darkMode ? '#adb5bd' : '#6c757d',
-                }),
-                menu: base => ({
-                  ...base,
-                  backgroundColor: darkMode ? '#343a40' : '#fff',
-                  border: darkMode ? '1px solid #495057' : '1px solid #ced4da',
-                  zIndex: 10001,
-                  borderRadius: 8,
-                  marginTop: 2,
-                }),
-                menuList: base => ({
-                  ...base,
-                  maxHeight: 400,
-                  overflowY: 'auto',
-                  backgroundColor: darkMode ? '#343a40' : '#fff',
-                  color: darkMode ? '#fff' : '#000',
-                  padding: 0,
-                }),
-                option: (base, state) => ({
-                  ...base,
-                  backgroundColor: state.isSelected
-                    ? '#0d55b3'
-                    : state.isFocused
-                    ? darkMode
-                      ? '#495057'
-                      : '#f8f9fa'
-                    : darkMode
-                    ? '#343a40'
-                    : '#fff',
-                  color: state.isSelected ? '#fff' : darkMode ? '#fff' : '#000',
-                  fontSize: 13,
-                  padding: '10px 16px',
-                  cursor: 'pointer',
-                  '&:hover': {
-                    backgroundColor: state.isSelected
-                      ? '#0d55b3'
-                      : darkMode
-                      ? '#495057'
-                      : '#c4c8cbff',
-                    color: state.isSelected ? '#c4c8cbff' : darkMode ? '#fff' : '#000',
-                  },
-                }),
-              }}
+              styles={projectSelectStyles}
             />
           </div>
 
           <div className="col-md-4">
-            <p
-              className={`form-label fw-bold${darkMode ? ' text-light' : ''}`}
+            <div
+              className={`form-label fw-bold mb-2 ${darkMode ? 'text-light' : ''}`}
               id="log-type-label"
               style={darkMode ? { color: '#f8f9fa' } : {}}
             >
               Log Type
-            </p>
-            <ButtonGroup className="d-block" aria-labelledby="log-type-label">
+            </div>
+
+            <div className="d-flex" role="group" aria-labelledby="log-type-label">
               <Button
                 color={logType === 'check-in' ? 'primary' : 'secondary'}
                 onClick={() => flipLogType('check-in')}
+                className={styles.checkInBtn}
               >
                 Check In
               </Button>
               <Button
                 color={logType === 'check-out' ? 'primary' : 'secondary'}
                 onClick={() => flipLogType('check-out')}
+                className={styles.checkOutBtn}
               >
                 Check Out
               </Button>
-            </ButtonGroup>
+            </div>
           </div>
         </div>
 
-        {/* table */}
+        {/* Table */}
         <Table bordered responsive>
-          <thead className={`${darkMode ? 'table-dark' : 'table-light'} align-middle`}>
-            <tr className={`${darkMode ? 'text-light' : 'text-dark'} `}>
+          <thead className={`${darkMode ? styles.tableDark : 'table-light'} align-middle`}>
+            <tr>
               <th>Name</th>
-              <th>Working</th>
-              <th>Available</th>
-              <th>Using</th>
-              <th>Tool / Equipment&nbsp;#</th>
+              <th>
+                Working
+                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-working"></i>
+                <UncontrolledTooltip placement="top" target="tooltip-working">
+                  Total number of units operational today
+                </UncontrolledTooltip>
+              </th>
+              <th>
+                Available
+                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-available"></i>
+                <UncontrolledTooltip placement="top" target="tooltip-available">
+                  Number of units currently not in use
+                </UncontrolledTooltip>
+              </th>
+              <th>
+                Using
+                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-using"></i>
+                <UncontrolledTooltip placement="top" target="tooltip-using">
+                  Quantity being checked in/out
+                </UncontrolledTooltip>
+              </th>
+              <th>
+                Tool / Equipment #
+                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-toolnum"></i>
+                <UncontrolledTooltip placement="top" target="tooltip-toolnum">
+                  Select the specific tool identifier
+                </UncontrolledTooltip>
+              </th>
             </tr>
           </thead>
           <tbody>
             {!selectedProject && (
-              <tr className={darkMode ? 'select-project-row dark-mode' : ''}>
-                <td
-                  colSpan={5}
-                  className={`text-center py-3 ${darkMode ? 'text-light' : 'text-dark'} `}
-                >
+              <tr className={darkMode ? `select-project-row dark-mode ${styles.darkMode}` : ''}>
+                <td colSpan={5} className={`text-center py-3 ${darkMode ? 'text-light' : ''}`}>
                   Select a project to load equipments.
                 </td>
               </tr>
             )}
 
             {selectedProject && rows.length === 0 && (
-              <tr className={`${darkMode ? 'text-light' : 'text-dark'} `}>
+              <tr className={`${darkMode ? styles.darkMode : ''}`}>
                 <td colSpan={5} className="text-center py-3">
                   No equipments found for this project.
                 </td>
@@ -412,7 +416,10 @@ function EDailyActivityLog(props) {
                 const limit = logType === 'check-in' ? r.availableQty : r.usingQty;
 
                 return (
-                  <tr key={r.id} className={darkMode ? 'dark-table-row text-light' : 'text-dark'}>
+                  <tr
+                    key={r.id}
+                    className={darkMode ? `dark-table-row text-light ${styles.darkMode}` : ''}
+                  >
                     <td>{r.name}</td>
                     <td>{r.workingQty}</td>
                     <td>{r.availableQty}</td>
@@ -426,106 +433,7 @@ function EDailyActivityLog(props) {
                         onChange={sel => onToolSelect(idx, sel)}
                         placeholder={`Pick up to ${limit}…`}
                         menuPortalTarget={document.body}
-                        styles={{
-                          container: base => ({
-                            ...base,
-                            width: 300, // lock it to 300px
-                            minWidth: 300,
-                            maxWidth: 300,
-                          }),
-                          control: base => ({
-                            ...base,
-                            width: '100%', // fill the container
-                            overflow: 'hidden',
-                            whiteSpace: 'nowrap',
-                            backgroundColor: darkMode ? '#343a40' : '#fff',
-                            borderColor: darkMode ? '#495057' : '#ced4da',
-                            color: darkMode ? '#fff' : '#000',
-                          }),
-                          placeholder: base => ({
-                            ...base,
-                            color: darkMode ? '#adb5bd' : '#6c757d',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                          }),
-                          singleValue: base => ({
-                            ...base,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            color: darkMode ? '#fff' : '#000',
-                          }),
-                          multiValue: base => ({
-                            ...base,
-                            maxWidth: '60%',
-                            overflow: 'hidden',
-                            backgroundColor: darkMode ? '#495057' : '#e9ecef',
-                          }),
-                          multiValueLabel: base => ({
-                            ...base,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            color: darkMode ? '#fff' : '#000',
-                          }),
-                          multiValueRemove: base => ({
-                            ...base,
-                            color: darkMode ? '#fff' : '#000',
-                            '&:hover': {
-                              backgroundColor: darkMode ? '#6c757d' : '#dee2e6',
-                              color: darkMode ? '#fff' : '#000',
-                            },
-                          }),
-                          indicatorsContainer: base => ({
-                            ...base,
-                            flexWrap: 'nowrap',
-                          }),
-                          menu: base => ({
-                            ...base,
-                            width: 300,
-                            minWidth: 300,
-                            maxWidth: 300,
-                            zIndex: 9999,
-                            backgroundColor: darkMode ? '#343a40' : '#fff',
-                            border: darkMode ? '1px solid #495057' : '1px solid #ced4da',
-                            borderRadius: 8,
-                            marginTop: 2,
-                          }),
-                          menuList: base => ({
-                            ...base,
-                            maxHeight: 400,
-                            overflowY: 'auto',
-                            backgroundColor: darkMode ? '#343a40' : '#fff',
-                            color: darkMode ? '#fff' : '#000',
-                            padding: 0,
-                          }),
-                          option: (base, state) => ({
-                            ...base,
-                            backgroundColor: state.isSelected
-                              ? '#0d55b3'
-                              : state.isFocused
-                              ? darkMode
-                                ? '#495057'
-                                : '#f0f0f0'
-                              : darkMode
-                              ? '#343a40'
-                              : '#fff',
-                            color: state.isSelected ? '#fff' : darkMode ? '#fff' : '#000',
-                            fontSize: 13,
-                            padding: '10px 16px',
-                            cursor: 'pointer',
-                            '&:hover': {
-                              backgroundColor: state.isSelected
-                                ? '#0d55b3'
-                                : darkMode
-                                ? '#495057'
-                                : '#c4c8cbff',
-                              color: darkMode ? '#fff' : '#000',
-                            },
-                          }),
-                          menuPortal: base => ({ ...base, zIndex: 9999 }),
-                        }}
+                        styles={tableSelectStyles}
                       />
                     </td>
                   </tr>
@@ -534,8 +442,7 @@ function EDailyActivityLog(props) {
           </tbody>
         </Table>
 
-        {/* actions */}
-        <div className="d-flex justify-content-end gap-2">
+        <div className={styles.actionContainer}>
           <Button color="secondary" onClick={handleCancel}>
             Cancel
           </Button>
diff --git a/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.module.css b/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.module.css
new file mode 100644
index 0000000000..f888727aef
--- /dev/null
+++ b/src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.module.css
@@ -0,0 +1,44 @@
+.mainContainer {
+  height: 100%;
+  min-height: 100vh;
+  padding-bottom: 2rem;
+}
+
+.darkMode {
+  background-color: #1e293b;
+  color: #f8f9fa;
+}
+
+.tableDark th {
+  background-color: #0f172a;
+  color: #fff;
+  border-color: #334155;
+}
+
+.tableDark td {
+  background-color: #1e293b;
+  color: #e2e8f0;
+  border-color: #334155;
+}
+
+.infoIcon {
+  cursor: pointer;
+  opacity: 0.7;
+  margin-left: 0.5rem;
+}
+
+.actionContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.checkInBtn {
+  margin-right: 15px !important;
+  width: 50%;
+}
+
+.checkOutBtn {
+  width: 50%;
+}