diff --git a/src/actions/bmdashboard/equipmentActions.js b/src/actions/bmdashboard/equipmentActions.js
index 7e604125ad..35ebee7c31 100644
--- a/src/actions/bmdashboard/equipmentActions.js
+++ b/src/actions/bmdashboard/equipmentActions.js
@@ -26,7 +26,7 @@ export const setErrors = payload => {
 };
 
 export const fetchEquipmentById = equipmentId => {
-  const url = ENDPOINTS.BM_EQUIPMENT_BY_ID(equipmentId);
+  const url = `${ENDPOINTS.BM_EQUIPMENT_BY_ID(equipmentId)}`;
   return async dispatch => {
     axios
       .get(url)
@@ -77,12 +77,12 @@ export const purchaseEquipment = async body => {
 export const updateMultipleEquipmentLogs = (projectId, bulkArr) => dispatch => {
   axios
     .put(
-      `${ENDPOINTS.BM_EQUIPMENT_LOGS}?project=${projectId}`, 
+      `${ENDPOINTS.BM_EQUIPMENT_LOGS}?project=${projectId}`,
       bulkArr
     )
     .then(res => {
-      dispatch(setEquipments(res.data)); 
-      toast.success('Equipment logs updated successfully!');  
+      dispatch(setEquipments(res.data));
+      toast.success('Equipment logs updated successfully!');
       return res.data;
     })
     .catch(err => {
@@ -91,3 +91,71 @@ export const updateMultipleEquipmentLogs = (projectId, bulkArr) => dispatch => {
       throw err;
     });
 }
+
+export const updateEquipment = (equipmentId, updateData) => async (dispatch, getState) => {
+  const url = `${ENDPOINTS.BM_EQUIPMENT_STATUS_UPDATE(equipmentId)}`;
+
+  try {
+    const state = getState();
+    let currentUserId = state?.auth?.user?.userid;
+
+    if (!currentUserId) {
+      currentUserId = state?.auth?.user?._id ||
+        state?.auth?.user?.id ||
+        state?.auth?._id ||
+        state?.auth?.id;
+    }
+
+    if (!currentUserId) {
+      const storedUserId = localStorage.getItem('userId');
+      if (storedUserId) {
+        currentUserId = storedUserId;
+      }
+    }
+
+    if (!currentUserId) {
+      console.error('No user ID found in any storage location');
+      console.error('Auth state:', state.auth);
+
+      const errorMsg = 'User not authenticated. Please log in.';
+      toast.error(errorMsg);
+      throw new Error(errorMsg);
+    }
+
+    const statusUpdateData = {
+      condition: updateData.condition,
+      lastUsedBy: updateData.lastUsedBy,
+      lastUsedFor: updateData.lastUsedFor,
+      replacementRequired: updateData.replacementRequired,
+      description: updateData.description || '',
+      notes: updateData.notes || '',
+      createdBy: currentUserId,
+    };
+
+    const res = await axios.put(url, statusUpdateData);
+
+    dispatch(setEquipment(res.data));
+    toast.success('Equipment status updated successfully!');
+    dispatch(fetchEquipmentById(equipmentId));
+
+    return res.data;
+  } catch (err) {
+
+    let errorMessage = 'Failed to update equipment status.';
+
+    if (err.response) {
+      errorMessage = err.response.data?.error ||
+        err.response.data?.message ||
+        err.response.statusText ||
+        errorMessage;
+      dispatch(setErrors(err.response.data));
+    } else if (err.request) {
+      errorMessage = 'No response from server. Please check your connection.';
+    } else {
+      errorMessage = err.message;
+    }
+
+    toast.error(errorMessage);
+    throw err;
+  }
+};
\ No newline at end of file
diff --git a/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx b/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx
index 122b48fb89..86107e8171 100644
--- a/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx
+++ b/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchEquipmentById } from '~/actions/bmdashboard/equipmentActions';
-import { Button, Form, FormGroup, Label, Container, Row, Col, Input } from 'reactstrap';
+import { fetchEquipmentById, updateEquipment } from '~/actions/bmdashboard/equipmentActions';
+import { Button, Form, FormGroup, Label, Container, Row, Col, Input, Alert } from 'reactstrap';
 import CheckTypesModal from '~/components/BMDashboard/shared/CheckTypesModal';
 import { useHistory, useParams } from 'react-router-dom';
 import Radio from '~/components/common/Radio';
@@ -24,14 +24,37 @@ export default function UpdateEquipment() {
   const [status, setStatus] = useState('');
   const [notes, setNotes] = useState('');
   const [uploadedFiles, setUploadedFiles] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+  const [submitSuccess, setSubmitSuccess] = useState('');
+  const [uploadedFilesPreview, setUploadedFilesPreview] = useState([]);
   const equipmentDetails = useSelector(state => state.bmEquipments.singleEquipment);
-
   const dispatch = useDispatch();
+
   useEffect(() => {
     if (equipmentId) {
       dispatch(fetchEquipmentById(equipmentId));
     }
+
+    return () => {
+      uploadedFilesPreview.forEach(file => {
+        if (file.preview && file.preview.startsWith('blob:')) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
   }, [dispatch, equipmentId]);
+
+  useEffect(() => {
+    return () => {
+      uploadedFilesPreview.forEach(file => {
+        if (file.preview && file.preview.startsWith('blob:')) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+  }, [uploadedFilesPreview]);
+
   const handleCancel = () => history.goBack();
 
   const calculateDaysLeft = endDate => {
@@ -45,63 +68,269 @@ export default function UpdateEquipment() {
     return daysLeft >= 0 ? daysLeft : 'Expired';
   };
 
-  const handleSubmit = e => {
+  const validateForm = () => {
+    if (!status) {
+      return 'Status/Condition is required';
+    }
+    if (!lastUsedBy) {
+      return 'Please specify who used the tool/equipment last time';
+    }
+    if (lastUsedBy === 'other' && !lastUsedByOther.trim()) {
+      return 'Please specify the name of who used the tool/equipment';
+    }
+    if (!lastUsedFor) {
+      return 'Please specify what the tool/equipment was used for';
+    }
+    if (lastUsedFor === 'other' && !lastUsedForOther.trim()) {
+      return 'Please specify what the tool/equipment was used for';
+    }
+    if (!replacementRequired) {
+      return 'Please indicate if replacement is required';
+    }
+    if (sendNote === 'yes' && !notes.trim()) {
+      return 'Please add a note if you selected to send one';
+    }
+    return null;
+  };
+
+  const handleFileUpload = files => {
+    uploadedFilesPreview.forEach(file => {
+      if (file.preview && file.preview.startsWith('blob:')) {
+        URL.revokeObjectURL(file.preview);
+      }
+    });
+
+    const validFiles = files.filter(file => {
+      const fileType = file.type || '';
+      const fileName = file.name || '';
+      const isValidType = fileType.startsWith('image/');
+      const isValidExtension = fileName.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+      return isValidType || isValidExtension;
+    });
+
+    if (validFiles.length === 0) {
+      console.warn('No valid image files found');
+      return;
+    }
+
+    const newPreviews = validFiles.map(file => {
+      const previewUrl = URL.createObjectURL(file);
+      return {
+        name: file.name || 'Image',
+        preview: previewUrl,
+        size: file.size || 0,
+        type: file.type || 'image/*',
+        file: file,
+        status: 'uploaded',
+        uploadedAt: new Date().toISOString(),
+      };
+    });
+
+    setUploadedFiles(prev => [...prev, ...validFiles]);
+    setUploadedFilesPreview(prev => [...prev, ...newPreviews]);
+  };
+
+  const formatFileSize = bytes => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const handleSubmit = async e => {
     e.preventDefault();
+
+    const validationError = validateForm();
+    if (validationError) {
+      setSubmitError(validationError);
+      return;
+    }
+
+    setIsSubmitting(true);
+    setSubmitError('');
+    setSubmitSuccess('');
+
+    try {
+      const updateData = {
+        condition: status,
+        lastUsedBy: lastUsedBy === 'other' ? lastUsedByOther : lastUsedBy,
+        lastUsedFor: lastUsedFor === 'other' ? lastUsedForOther : lastUsedFor,
+        replacementRequired,
+        description,
+        notes: sendNote === 'yes' ? notes : '',
+      };
+
+      await dispatch(updateEquipment(equipmentId, updateData));
+
+      let successMessage = 'Equipment status updated successfully!';
+
+      if (uploadedFiles.length > 0) {
+        successMessage += ' Note: Images were uploaded and stored locally for preview.';
+        setUploadedFilesPreview(prev =>
+          prev.map(file => ({
+            ...file,
+            status: 'local-only',
+            message: 'Stored locally for preview',
+          })),
+        );
+      }
+
+      setSubmitSuccess(successMessage);
+
+      setTimeout(() => {
+        history.goBack();
+      }, 2000);
+    } catch (error) {
+      console.error('Update failed:', error);
+
+      let errorMessage = 'Failed to update equipment. Please try again.';
+
+      if (error.message && error.message.includes('User not authenticated')) {
+        errorMessage = 'Authentication error. Please check if you are logged in.';
+      } else if (error.response?.data?.error?.includes('Invalid user ID format')) {
+        errorMessage = 'User ID format error. Please contact support.';
+      }
+
+      if (uploadedFiles.length > 0) {
+        errorMessage += ' Note: Images were selected and previewed but not saved to database.';
+        setUploadedFilesPreview(prev =>
+          prev.map(file => ({
+            ...file,
+            status: 'not-saved',
+            message: 'Selected but not saved to database',
+          })),
+        );
+      }
+
+      setSubmitError(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRemoveFile = index => {
+    if (uploadedFilesPreview[index]?.preview) {
+      URL.revokeObjectURL(uploadedFilesPreview[index].preview);
+    }
+
+    const newPreviews = [...uploadedFilesPreview];
+    newPreviews.splice(index, 1);
+    setUploadedFilesPreview(newPreviews);
+
+    const newFiles = [...uploadedFiles];
+    newFiles.splice(index, 1);
+    setUploadedFiles(newFiles);
+  };
+
+  const formLabelStyle = {
+    fontWeight: '600',
+    color: '#212529',
+    display: 'block',
+    marginBottom: '0.5rem',
+  };
+
+  const formInputStyle = {
+    borderColor: '#ced4da',
+    backgroundColor: '#ffffff',
+    color: '#212529',
+  };
+
+  const readonlyStyle = {
+    padding: '10px 12px',
+    backgroundColor: '#ffffff',
+    border: '1px solid #ced4da',
+    borderRadius: '6px',
+    color: '#212529',
+    fontSize: '1rem',
+    minHeight: '48px',
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '5px',
+    fontWeight: '500',
   };
 
   return (
-    <Container className="inv-form-page-container">
+    <Container className={`${styles['inv-form-page-container']} inv-form-page-container`}>
       <CheckTypesModal modal={modal} setModal={setModal} type="Equipments" />
       <Row>
         <Col md={12}>
           <header className="bm-dashboard__header text-center">
-            <h1>Update Tool or Equipment Status</h1>
+            <h1 style={{ color: '#212529' }}>Update Tool or Equipment Status</h1>
           </header>
         </Col>
       </Row>
 
-      {equipmentDetails && (
+      {submitError && (
         <Row>
+          <Col md={12}>
+            <Alert color="danger" className="mt-3">
+              <i className="fas fa-exclamation-circle me-2"></i>
+              {submitError}
+            </Alert>
+          </Col>
+        </Row>
+      )}
+
+      {submitSuccess && (
+        <Row>
+          <Col md={12}>
+            <Alert color="success" className="mt-3">
+              <i className="fas fa-check-circle me-2"></i>
+              {submitSuccess}
+            </Alert>
+          </Col>
+        </Row>
+      )}
+
+      {equipmentDetails && (
+        <Row className="mb-4">
           <Col md={3}>
             <Image
               name="equipment-image"
               src={equipmentDetails.imageUrl || 'https://via.placeholder.com/150'}
               alt="Equipment image"
-              className={`${styles.squareImage}`}
+              className={`${styles.squareImage} mb-3`}
+              style={{ border: '2px solid #dee2e6' }}
             />
           </Col>
         </Row>
       )}
-      <Form className="inv-form">
+
+      <Form onSubmit={handleSubmit} className="inv-form">
         <FormGroup className="background-from-db">
           <Row form>
             <Col md={4}>
-              <Label for="itemName">Name</Label>
-              <div className={`${styles.readOnlyDiv}`}>
-                {equipmentDetails?.itemType?.name || 'Unknown'}
-              </div>
+              <Label for="itemName" style={formLabelStyle}>
+                Name
+              </Label>
+              <div style={readonlyStyle}>{equipmentDetails?.itemType?.name || 'Unknown'}</div>
             </Col>
             <Col md={4}>
-              <Label for="itemNumber">Number</Label>
-              <div className={`${styles.readOnlyDiv}`}>{equipmentDetails?._id || 'Unknown'}</div>
+              <Label for="itemNumber" style={formLabelStyle}>
+                Number
+              </Label>
+              <div style={readonlyStyle}>{equipmentDetails?._id || 'Unknown'}</div>
             </Col>
             <Col md={4}>
-              <Label for="itemClass">Class</Label>
-              <div className={`${styles.readOnlyDiv}`}>
-                {equipmentDetails?.itemType?.category || 'Unknown'}
-              </div>
+              <Label for="itemClass" style={formLabelStyle}>
+                Class
+              </Label>
+              <div style={readonlyStyle}>{equipmentDetails?.itemType?.category || 'Unknown'}</div>
             </Col>
           </Row>
           <Row form>
             <Col md={4}>
-              <Label for="itemProject">Project</Label>
-              <div className={`${styles.readOnlyDiv}`}>
-                {equipmentDetails?.project?.name || 'Unknown'}
-              </div>
+              <Label for="itemProject" style={formLabelStyle}>
+                Project
+              </Label>
+              <div style={readonlyStyle}>{equipmentDetails?.project?.name || 'Unknown'}</div>
             </Col>
             <Col md={4}>
-              <Label for="itemStatus">Current Status</Label>
-              <div className={`${styles.readOnlyDiv}`}>
+              <Label for="itemStatus" style={formLabelStyle}>
+                Current Status
+              </Label>
+              <div style={readonlyStyle}>
                 {equipmentDetails?.updateRecord?.length > 0
                   ? equipmentDetails.updateRecord[equipmentDetails.updateRecord.length - 1]
                       .condition
@@ -109,132 +338,158 @@ export default function UpdateEquipment() {
               </div>
             </Col>
             <Col md={4}>
-              <Label for="itemOwnership">Ownership</Label>
-              <div className={`${styles.readOnlyDiv}`}>
-                {equipmentDetails?.purchaseStatus || 'Unknown'}
-              </div>
+              <Label for="itemOwnership" style={formLabelStyle}>
+                Ownership
+              </Label>
+              <div style={readonlyStyle}>{equipmentDetails?.purchaseStatus || 'Unknown'}</div>
             </Col>
           </Row>
           {equipmentDetails && equipmentDetails.purchaseStatus === 'Rental' && (
             <Row form>
               <Col md={4}>
-                <Label>Rental End Date</Label>
-                <div className={`${styles.readOnlyDiv}`}>
+                <Label style={formLabelStyle}>Rental End Date</Label>
+                <div style={readonlyStyle}>
                   {equipmentDetails.rentalDueDate?.split('T')[0] || 'Unknown'}
                 </div>
               </Col>
               <Col md={4}>
-                <Label>Days Left</Label>
-                <div className={`${styles.readOnlyDiv}`}>
+                <Label style={formLabelStyle}>Days Left</Label>
+                <div style={readonlyStyle}>
                   {calculateDaysLeft(equipmentDetails?.rentalDueDate)}
                 </div>
               </Col>
             </Row>
           )}
         </FormGroup>
+
         <Row form>
           <Col md={12}>
-            <div className={`${styles.updateConfirmText}`}>
+            <div
+              style={{
+                color: '#0d6efd',
+                fontWeight: '600',
+                margin: '20px 0',
+                padding: '12px 16px',
+                backgroundColor: '#f8f9fa',
+                border: '1px solid #cfe2ff',
+                borderRadius: '6px',
+                fontSize: '1rem',
+              }}
+            >
               Please confirm you are updating the status of the tool or equipment shown above.
             </div>
           </Col>
         </Row>
-        <Row form>
-          <Col md={4}>
-            <FormGroup>
-              <Label for="updateDate">Update Date</Label>
-              <Input
-                type="date"
-                name="updateDate"
-                id="updateDate"
-                value={updateDate}
-                onChange={e => setUpdateDate(e.target.value)}
-                placeholder="DD/MM/YYYY"
-                className="form-control"
-              />
-            </FormGroup>
-          </Col>
-        </Row>
+
         <Row>
           <Col md={8}>
             <FormGroup>
-              <Label for="status">Status/Condition Now</Label>
+              <Label for="status" style={formLabelStyle}>
+                Status/Condition Now *
+              </Label>
               <Input
                 id="status"
                 name="status"
                 type="select"
                 value={status}
                 onChange={e => setStatus(e.target.value)}
+                required
+                style={formInputStyle}
               >
-                <option value="1">Working well</option>
-                <option value="2">Broken/Needs repair</option>
-                <option value="3">Stolen/Lost</option>
-                <option value="4">End of life</option>
-                <option value="5">Returned</option>
+                <option value="">Select status</option>
+                <option value="Working well">Working well</option>
+                <option value="Broken/Needs repair">Broken/Needs repair</option>
+                <option value="Stolen/Lost">Stolen/Lost</option>
+                <option value="End of life">End of life</option>
+                <option value="Returned">Returned</option>
               </Input>
             </FormGroup>
           </Col>
+
           <Col md={8}>
             <FormGroup>
-              <Label for="lastUsedBy">Who used the tool/equipment last time?</Label>
+              <Label for="lastUsedBy" style={formLabelStyle}>
+                Who used the tool/equipment last time? *
+              </Label>
               <Input
                 type="select"
                 name="lastUsedBy"
                 id="lastUsedBy"
                 value={lastUsedBy}
                 onChange={e => setLastUsedBy(e.target.value)}
+                required
+                style={formInputStyle}
               >
-                <option value="1">Jane Doe (Volunteer #1)</option>
-                <option value="2">Jane Doe (Volunteer #2)</option>
-                <option value="3">Jane Doe (Volunteer #3)</option>
-                <option value="4">Jane Doe (Volunteer #4)</option>
+                <option value="">Select user</option>
+                <option value="Jane Doe (Volunteer #1)">Jane Doe (Volunteer #1)</option>
+                <option value="Jane Doe (Volunteer #2)">Jane Doe (Volunteer #2)</option>
+                <option value="Jane Doe (Volunteer #3)">Jane Doe (Volunteer #3)</option>
+                <option value="Jane Doe (Volunteer #4)">Jane Doe (Volunteer #4)</option>
                 <option value="other">Other (Please specify below)</option>
               </Input>
-              <Input
-                type="text"
-                name="lastUsedByOther"
-                id="lastUsedByOther"
-                placeholder="If other is selected, input the name."
-                value={lastUsedByOther}
-                onChange={e => setLastUsedByOther(e.target.value)}
-                className="mt-2"
-              />
+              {lastUsedBy === 'other' && (
+                <Input
+                  type="text"
+                  name="lastUsedByOther"
+                  id="lastUsedByOther"
+                  placeholder="Please specify the name"
+                  value={lastUsedByOther}
+                  onChange={e => setLastUsedByOther(e.target.value)}
+                  className="mt-2"
+                  required
+                  style={formInputStyle}
+                />
+              )}
             </FormGroup>
           </Col>
         </Row>
+
         <Row>
           <Col md={8}>
             <FormGroup>
-              <Label for="lastUsedFor">What was it used for last time?</Label>
+              <Label for="lastUsedFor" style={formLabelStyle}>
+                What was it used for last time? *
+              </Label>
               <Input
                 type="select"
                 name="lastUsedFor"
                 id="lastUsedFor"
                 value={lastUsedFor}
                 onChange={e => setLastUsedFor(e.target.value)}
+                required
+                style={formInputStyle}
               >
-                <option value="1">Kitchen - tiling</option>
-                <option value="2">Kitchen - tiling</option>
-                <option value="3">Kitchen - tiling</option>
-                <option value="4">Kitchen - tiling</option>
+                <option value="">Select usage</option>
+                <option value="Kitchen - tiling">Kitchen - tiling</option>
+                <option value="Bathroom - plumbing">Bathroom - plumbing</option>
+                <option value="Living room - painting">Living room - painting</option>
+                <option value="Garden - landscaping">Garden - landscaping</option>
                 <option value="other">Other (Please specify below)</option>
               </Input>
-              <Input
-                type="text"
-                name="lastUsedForOther"
-                id="lastUsedForOther"
-                placeholder="If other is selected, input the task."
-                value={lastUsedForOther}
-                onChange={e => setLastUsedForOther(e.target.value)}
-                className="mt-2"
-              />
+              {lastUsedFor === 'other' && (
+                <Input
+                  type="text"
+                  name="lastUsedForOther"
+                  id="lastUsedForOther"
+                  placeholder="Please specify the task"
+                  value={lastUsedForOther}
+                  onChange={e => setLastUsedForOther(e.target.value)}
+                  className="mt-2"
+                  required
+                  style={formInputStyle}
+                />
+              )}
             </FormGroup>
           </Col>
         </Row>
 
         <FormGroup>
-          <Label className="form-control-label" for="replacementRequired-yes">
-            Require a replacement?
+          <Label
+            className="form-control-label"
+            for="replacementRequired-yes"
+            style={formLabelStyle}
+          >
+            Require a replacement? *
           </Label>
           <Radio
             name="replacementRequired"
@@ -244,56 +499,202 @@ export default function UpdateEquipment() {
             ]}
             value={replacementRequired}
             onChange={e => setReplacementRequired(e.target.value)}
+            required
           />
         </FormGroup>
 
         <FormGroup>
-          <Label for="file-upload-input">
+          <Label for="file-upload-input" style={formLabelStyle}>
             Upload latest picture of this tool or equipment. (optional)
+            <small className="text-muted ms-2">Accepted: PNG, JPG, JPEG, GIF, WEBP</small>
           </Label>
-          <DragAndDrop uploadedFiles={uploadedFiles} updateUploadedFiles={setUploadedFiles} />
+
+          {uploadedFiles.length > 0 && (
+            <Alert color="info" className="mb-3">
+              <i className="fas fa-info-circle me-2"></i>
+              {uploadedFiles.length} image{uploadedFiles.length > 1 ? 's' : ''} uploaded and ready
+              for preview
+            </Alert>
+          )}
+
+          <DragAndDrop updateUploadedFiles={handleFileUpload} />
+
+          {uploadedFilesPreview.length > 0 && (
+            <div className="mt-3">
+              <Label style={formLabelStyle}>Uploaded Images Preview:</Label>
+              <div className="d-flex flex-wrap gap-3 mt-2">
+                {uploadedFilesPreview.map((file, index) => (
+                  <div
+                    key={`file-${index}-${file.uploadedAt || Date.now()}`}
+                    className="border rounded p-2 position-relative"
+                    style={{ maxWidth: '200px', borderColor: '#dee2e6' }}
+                  >
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-danger position-absolute"
+                      style={{ top: '-10px', right: '-10px', zIndex: 1 }}
+                      onClick={() => handleRemoveFile(index)}
+                      title="Remove image"
+                    >
+                      X
+                    </button>
+
+                    {file.preview ? (
+                      <>
+                        <img
+                          src={file.preview}
+                          alt={`Preview ${index + 1}`}
+                          style={{
+                            width: '100%',
+                            height: '120px',
+                            objectFit: 'cover',
+                            borderRadius: '4px',
+                          }}
+                          className="mb-2"
+                          onError={e => {
+                            console.error('Failed to load preview for:', file.name);
+                            e.target.style.display = 'none';
+                            const fallback = e.target.parentElement.querySelector(
+                              '.preview-fallback',
+                            );
+                            if (fallback) {
+                              fallback.style.display = 'flex';
+                            }
+                          }}
+                        />
+                        <div
+                          className="preview-fallback text-center mb-2 d-none align-items-center justify-content-center"
+                          style={{
+                            height: '120px',
+                            backgroundColor: '#f8f9fa',
+                            borderRadius: '4px',
+                          }}
+                        >
+                          <div>
+                            <i className="fas fa-file-image fa-2x text-muted"></i>
+                            <div className="small mt-1">Preview unavailable</div>
+                          </div>
+                        </div>
+                      </>
+                    ) : (
+                      <div
+                        className="text-center mb-2 d-flex align-items-center justify-content-center"
+                        style={{
+                          height: '120px',
+                          backgroundColor: '#f8f9fa',
+                          borderRadius: '4px',
+                        }}
+                      >
+                        <div>
+                          <i className="fas fa-file-image fa-2x text-muted"></i>
+                          <div className="small mt-1">No Preview</div>
+                        </div>
+                      </div>
+                    )}
+
+                    <div className="text-truncate" title={file.name} style={{ color: '#212529' }}>
+                      <strong>{file.name}</strong>
+                    </div>
+                    <div className="small" style={{ color: '#6c757d' }}>
+                      {formatFileSize(file.size)} •{' '}
+                      {file.type.split('/')[1]?.toUpperCase() || 'IMAGE'}
+                    </div>
+                    <div className="small">
+                      {file.status === 'uploaded' && (
+                        <span className="text-success">
+                          <i className="fas fa-check-circle me-1"></i>
+                          Ready for preview
+                        </span>
+                      )}
+                      {file.status === 'local-only' && (
+                        <span className="text-info">
+                          <i className="fas fa-save me-1"></i>
+                          Stored locally
+                        </span>
+                      )}
+                      {file.status === 'not-saved' && (
+                        <span className="text-warning">
+                          <i className="fas fa-exclamation-triangle me-1"></i>
+                          Preview only
+                        </span>
+                      )}
+                    </div>
+                    {file.message && (
+                      <div className="small" style={{ color: '#6c757d', marginTop: '4px' }}>
+                        {file.message}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-3">
+                <Alert
+                  color={
+                    uploadedFilesPreview.some(f => f.status === 'not-saved') ? 'warning' : 'info'
+                  }
+                >
+                  <small>
+                    <i className="fas fa-info-circle me-1"></i>
+                    {uploadedFilesPreview.some(f => f.status === 'not-saved')
+                      ? 'Images are shown for preview purposes only and are not saved to the database.'
+                      : 'Images are uploaded for preview. Form data will be saved to database.'}
+                  </small>
+                </Alert>
+              </div>
+            </div>
+          )}
         </FormGroup>
 
         <FormGroup>
-          <Label for="notes">Additional Description (optional)</Label>
+          <Label for="description" style={formLabelStyle}>
+            Additional Description (optional)
+          </Label>
           <Input
             type="textarea"
             name="description"
             id="description"
-            placeholder="Provide detail description if need."
+            placeholder="Provide detail description if needed."
             rows="3"
             value={description}
             onChange={e => setDescription(e.target.value)}
+            style={formInputStyle}
           />
         </FormGroup>
 
         <FormGroup>
-          <Label className="form-control-label" for="sendNote-yes">
+          <Label className="form-control-label" for="sendNote-yes" style={formLabelStyle}>
             Do you want to send a note for this update?
           </Label>
           <Radio
             name="sendNote"
             options={[
-              { label: 'Yes', value: 'yes' },
-              { label: 'No', value: 'no' },
+              { label: 'Yes', value: 'yes', id: 'sendNote-yes' },
+              { label: 'No', value: 'no', id: 'sendNote-no' },
             ]}
             value={sendNote}
             onChange={e => setSendNote(e.target.value)}
           />
         </FormGroup>
 
-        <FormGroup>
-          <Label for="notes">Note (All the managers in this project can see this)</Label>
-          <Input
-            type="textarea"
-            name="notes"
-            id="notes"
-            placeholder="A short note as a notice or reminder for your co-workers to learn about this update."
-            rows="3"
-            value={notes}
-            onChange={e => setNotes(e.target.value)}
-          />
-        </FormGroup>
+        {sendNote === 'yes' && (
+          <FormGroup>
+            <Label for="notes" style={formLabelStyle}>
+              Note (All the managers in this project can see this) *
+            </Label>
+            <Input
+              type="textarea"
+              name="notes"
+              id="notes"
+              placeholder="A short note as a notice or reminder for your co-workers to learn about this update."
+              rows="3"
+              value={notes}
+              onChange={e => setNotes(e.target.value)}
+              required={sendNote === 'yes'}
+              style={formInputStyle}
+            />
+          </FormGroup>
+        )}
 
         <FormGroup>
           <div className="inv-form-btn-group">
@@ -301,11 +702,39 @@ export default function UpdateEquipment() {
               color="secondary"
               className="bm-dashboard__button btn btn-secondary"
               onClick={handleCancel}
+              disabled={isSubmitting}
+              style={{ backgroundColor: '#6c757d', borderColor: '#6c757d' }}
             >
               Cancel
             </Button>
-            <Button color="primary" onClick={handleSubmit}>
-              Submit
+            <Button
+              color="primary"
+              type="submit"
+              disabled={isSubmitting}
+              className="position-relative"
+              style={{ backgroundColor: '#0d6efd', borderColor: '#0d6efd' }}
+            >
+              {isSubmitting ? (
+                <>
+                  <span
+                    className="spinner-border spinner-border-sm me-2"
+                    role="status"
+                    aria-hidden="true"
+                  ></span>
+                  Updating...
+                </>
+              ) : (
+                <>
+                  <i className="fas fa-save me-2"></i>
+                  Update Status
+                  {uploadedFiles.length > 0 && (
+                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
+                      <i className="fas fa-image me-1"></i>
+                      {uploadedFiles.length}
+                    </span>
+                  )}
+                </>
+              )}
             </Button>
           </div>
         </FormGroup>
diff --git a/src/components/BMDashboard/Equipment/Update/UpdateEquipment.module.css b/src/components/BMDashboard/Equipment/Update/UpdateEquipment.module.css
index 980f3e3cc4..c7bf743797 100644
--- a/src/components/BMDashboard/Equipment/Update/UpdateEquipment.module.css
+++ b/src/components/BMDashboard/Equipment/Update/UpdateEquipment.module.css
@@ -1,46 +1,69 @@
-.dragDropContainer {
-  border: 2px dashed #ccc;
-  text-align: center;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.updateConfirmText {
-  color: red;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.cancelButton {
-  width: 100%;
-}
+/* UpdateEquipment.module.css - Minimal and Working */
 
-.submitButton {
-  width: 100%;
+.readOnlyDiv {
+  padding: 10px 12px;
+  background-color: #ffffff !important;
+  border-radius: 6px;
+  border: 1px solid #ced4da !important;
+  color: #212529 !important;
+  font-size: 1rem;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+  font-weight: 500;
 }
 
+/* Image */
 .squareImage {
-  width: 100%;
-  height: auto;
-  max-width: 250px;
-  max-height: 250px;
+  width: 280px;
+  height: 280px;
   object-fit: cover;
-  border-radius: 4px;
+  border-radius: 8px;
+  border: 2px solid #dee2e6 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.squareImage {
-  width: 100%;
-  height: auto;
-  max-width: 250px;
-  max-height: 250px;
-  object-fit: cover;
-  border-radius: 4px;
+/* Confirmation text */
+.updateConfirmText {
+  color: #0d6efd !important;
+  font-weight: 600;
+  margin: 20px 0;
+  padding: 12px 16px;
+  background-color: #f8f9fa !important;
+  border: 1px solid #cfe2ff !important;
+  border-radius: 6px;
+  font-size: 1rem;
 }
 
-.readOnlyDiv {
-  padding: 8px;
-  background-color: #e6f5f2;
-  border-radius: 4px;
-  border: 1px solid #dee2e6;
-  color: #495057;
+/* Additional styling for form labels in light mode */
+:global(.form-label) {
+  color: #212529 !important;
+  font-weight: 600 !important;
 }
+
+/* =========================
+   DARK MODE - Only change what's needed
+   ========================= */
+@media (prefers-color-scheme: dark) {
+  .readOnlyDiv {
+    background-color: #2d2d2d !important;
+    border-color: #444444 !important;
+    color: #e9ecef !important;
+  }
+  
+  .squareImage {
+    border-color: #444444 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+  
+  .updateConfirmText {
+    color: #0dcaf0 !important;
+    background-color: #1a2a3a !important;
+    border-color: #0dcaf0 !important;
+  }
+  
+  :global(.form-label) {
+    color: #e9ecef !important;
+  }
+}
\ No newline at end of file
diff --git a/src/components/common/DragAndDrop/DragAndDrop.css b/src/components/common/DragAndDrop/DragAndDrop.css
deleted file mode 100644
index 447edca7d0..0000000000
--- a/src/components/common/DragAndDrop/DragAndDrop.css
+++ /dev/null
@@ -1,60 +0,0 @@
-#file-upload-form{
-  height: 16rem;
-  width: 100%;
-  text-align: center;
-  position: relative;
-}
-
-#file-upload-input{
-    display: none;
-}
-
-#file-upload-label{
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-width: 2px;
-  border-radius: 1rem;
-  border-style: dashed;
-  border-color: #cbd5e1;
-  background-color: #ffffff;
-}
-
-#file-upload-label.drag-active{
-  background-color: #f8fafc;
-}
-
-#drag-file-element {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 1rem;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
-
-.upload-button {
-  cursor: pointer;
-  padding: 0.25rem;
-  font-size: 1rem;
-  border: none;
-  font-family: 'Oswald', sans-serif;
-  background-color: transparent;
-}
-
-.upload-button:hover {
-  text-decoration-line: underline;
-}
-
-/* .file-preview-container{
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  width: 100%;
-  height: 10vh; 
-} */
\ No newline at end of file
diff --git a/src/components/common/DragAndDrop/DragAndDrop.jsx b/src/components/common/DragAndDrop/DragAndDrop.jsx
index e2948c09ee..645db808ea 100644
--- a/src/components/common/DragAndDrop/DragAndDrop.jsx
+++ b/src/components/common/DragAndDrop/DragAndDrop.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/function-component-definition */
 import { useState } from 'react';
-import './DragAndDrop.css';
+import styles from './DragAndDrop.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faImage } from '@fortawesome/free-solid-svg-icons';
 
@@ -22,46 +22,50 @@ const DragAndDrop = ({ updateUploadedFiles }) => {
     e.stopPropagation();
     setDragActive(false);
     const droppedFiles = e.dataTransfer.files;
-    if (droppedFiles && droppedFiles[0]) {
+    if (droppedFiles && droppedFiles.length > 0) {
       const newFiles = Array.from(droppedFiles);
-      updateUploadedFiles(prev => [...prev, ...newFiles]);
+      updateUploadedFiles(newFiles);
     }
   };
 
   const handleChange = function handleFileChange(e) {
     e.preventDefault();
     const selectedFiles = e.target.files;
-    if (selectedFiles && selectedFiles[0]) {
+    if (selectedFiles && selectedFiles.length > 0) {
       const newFiles = Array.from(selectedFiles);
-      updateUploadedFiles(prev => [...prev, ...newFiles]);
+      updateUploadedFiles(newFiles);
+      e.target.value = '';
     }
   };
 
   return (
-    <div id="file-upload-form" onDragEnter={handleDrag} onSubmit={e => e.preventDefault()}>
+    <div
+      className={styles.fileUploadForm}
+      onDragEnter={handleDrag}
+      onSubmit={e => e.preventDefault()}
+    >
       <input
         id="file-upload-input"
+        className={styles.fileUploadInput}
         type="file"
         name="file-upload-input"
         multiple={false}
-        accept="image/jpeg, image/jpg, image/png"
+        accept="image/jpeg, image/jpg, image/png, image/gif, image/webp"
         onChange={handleChange}
       />
       <label
         htmlFor="file-upload-input"
-        id="file-upload-label"
-        className={dragActive ? 'drag-active' : ''}
+        className={`${styles.fileUploadLabel} ${dragActive ? styles.dragActive : ''}`}
       >
         <div>
-          <FontAwesomeIcon icon={faImage} className="file-upload-icon" />
-          <p>Drag and drop your picture here </p>
+          <FontAwesomeIcon icon={faImage} className={styles.fileUploadIcon} />
+          <p>Drag and drop your picture here</p>
+          <p className="text-muted small mt-2">or click to browse</p>
         </div>
-        <input type="file" id="file-upload-input" className="file-upload-input" />
       </label>
-      {/* invisible element to cover the entire form when dragActive is true so that dragleave event is not triggeredwhen drag goes over other elements in the form. */}
       {dragActive && (
         <div
-          id="drag-file-element"
+          className={styles.dragFileElement}
           onDragEnter={handleDrag}
           onDragLeave={handleDrag}
           onDragOver={handleDrag}
diff --git a/src/components/common/DragAndDrop/DragAndDrop.module.css b/src/components/common/DragAndDrop/DragAndDrop.module.css
new file mode 100644
index 0000000000..31b9dd2971
--- /dev/null
+++ b/src/components/common/DragAndDrop/DragAndDrop.module.css
@@ -0,0 +1,153 @@
+.fileUploadForm {
+  height: 16rem;
+  width: 100%;
+  text-align: center;
+  position: relative;
+  margin-top: 0.5rem;
+}
+
+.fileUploadInput {
+  display: none;
+}
+
+/* LIGHT MODE - Use class to force light mode */
+.lightMode .fileUploadLabel,
+body:not(.darkMode) .fileUploadLabel,
+html:not([data-theme="dark"]) .fileUploadLabel,
+[data-theme="light"] .fileUploadLabel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #6c757d;
+  border-radius: 1rem;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.lightMode .fileUploadLabel p,
+body:not(.darkMode) .fileUploadLabel p,
+html:not([data-theme="dark"]) .fileUploadLabel p,
+[data-theme="light"] .fileUploadLabel p {
+  margin-top: 10px;
+  margin-bottom: 0;
+  color: #343a40;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.lightMode .fileUploadIcon,
+body:not(.darkMode) .fileUploadIcon,
+html:not([data-theme="dark"]) .fileUploadIcon,
+[data-theme="light"] .fileUploadIcon {
+  font-size: 2.5rem;
+  color: #495057;
+  transition: all 0.3s ease;
+}
+
+.lightMode .fileUploadLabel:hover,
+.lightMode .fileUploadLabel.dragActive,
+body:not(.darkMode) .fileUploadLabel:hover,
+body:not(.darkMode) .fileUploadLabel.dragActive {
+  border-color: #0d6efd;
+  background-color: #e7f5ff;
+  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
+  transform: translateY(-2px);
+}
+
+.lightMode .fileUploadLabel:hover p,
+.lightMode .fileUploadLabel.dragActive p,
+body:not(.darkMode) .fileUploadLabel:hover p,
+body:not(.darkMode) .fileUploadLabel.dragActive p {
+  color: #0a58ca;
+}
+
+.lightMode .fileUploadLabel:hover .fileUploadIcon,
+.lightMode .fileUploadLabel.dragActive .fileUploadIcon,
+body:not(.darkMode) .fileUploadLabel:hover .fileUploadIcon,
+body:not(.darkMode) .fileUploadLabel.dragActive .fileUploadIcon {
+  color: #0a58ca;
+  transform: scale(1.1);
+}
+
+.dragFileElement {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.darkMode .fileUploadLabel,
+[data-theme="dark"] .fileUploadLabel,
+@media (prefers-color-scheme: dark) {
+  .fileUploadLabel {
+    border-color: #6c757d;
+    background-color: #2d2d2d;
+  }
+  
+  .fileUploadLabel p {
+    color: #e9ecef;
+  }
+  
+  .fileUploadIcon {
+    color: #adb5bd;
+  }
+  
+  .fileUploadLabel:hover,
+  .fileUploadLabel.dragActive {
+    border-color: #0d6efd;
+    background-color: #1a2a3a;
+  }
+  
+  .fileUploadLabel:hover p,
+  .fileUploadLabel.dragActive p {
+    color: #0d6efd;
+  }
+  
+  .fileUploadLabel:hover .fileUploadIcon,
+  .fileUploadLabel.dragActive .fileUploadIcon {
+    color: #0d6efd;
+  }
+}
+
+.uploadButton {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: 2px solid #0d6efd;
+  border-radius: 6px;
+  font-family: 'Oswald', sans-serif;
+  background-color: #0d6efd;
+  color: white;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.uploadButton:hover {
+  background-color: #0a58ca;
+  border-color: #0a58ca;
+  text-decoration-line: none;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(10, 88, 202, 0.2);
+}
+
+/* Dark mode button styles */
+@media (prefers-color-scheme: dark) {
+  .uploadButton {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+  }
+  
+  .uploadButton:hover {
+    background-color: #0a58ca;
+    border-color: #0a58ca;
+  }
+}
\ No newline at end of file
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 1569bb1d52..2038191b76 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -328,6 +328,7 @@ ENHANCED_POPULARITY: (range, roles, start, end, includeLowVolume) => {
     `${APIEndpoint}/tools/availability?toolId=${toolId}&projectId=${projectId}`,
   BM_LOG_TOOLS: `${APIEndpoint}/bm/tools/log`,
   BM_EQUIPMENT_BY_ID: singleEquipmentId => `${APIEndpoint}/bm/equipment/${singleEquipmentId}`,
+  BM_EQUIPMENT_STATUS_UPDATE: (equipmentId) => `${APIEndpoint}/bm/equipment/${equipmentId}/status`,
   BM_EQUIPMENTS: `${APIEndpoint}/bm/equipments`,
   BM_INVTYPE_TYPE: type => `${APIEndpoint}/bm/invtypes/${type}`,
   BM_ISSUE_CHART: `${APIEndpoint}/bm/issue/issue-chart`,