diff --git a/package.json b/package.json
index d5bb690084..20a7294a40 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/package.json",
   "name": "hgnreactapp",
   "version": "0.1.0",
   "license": "GPL-2.0",
diff --git a/public/index.css b/public/index.css
index 423500b7b8..339428ae6c 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,4 +1,325 @@
 /* public/index.css */
+
+/* Global Dark Mode Styles */
+body.dark-mode,
+body.bm-dashboard-dark {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+body.dark-mode #root,
+body.bm-dashboard-dark #root {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+/* Enhanced text visibility for dark mode */
+body.dark-mode *,
+body.bm-dashboard-dark * {
+  color: #ffffff !important;
+}
+
+body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
+body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
+body.bm-dashboard-dark h1, body.bm-dashboard-dark h2, body.bm-dashboard-dark h3,
+body.bm-dashboard-dark h4, body.bm-dashboard-dark h5, body.bm-dashboard-dark h6 {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode p, body.dark-mode span, body.dark-mode div,
+body.dark-mode label, body.dark-mode a, body.dark-mode li,
+body.bm-dashboard-dark p, body.bm-dashboard-dark span, body.bm-dashboard-dark div,
+body.bm-dashboard-dark label, body.bm-dashboard-dark a, body.bm-dashboard-dark li {
+  color: #ffffff !important;
+}
+
+body.dark-mode .text-muted,
+body.bm-dashboard-dark .text-muted {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .text-secondary,
+body.bm-dashboard-dark .text-secondary {
+  color: #d1d8e0 !important;
+}
+
+body.dark-mode .text-primary,
+body.bm-dashboard-dark .text-primary {
+  color: #66b3ff !important;
+}
+
+body.dark-mode .text-success,
+body.bm-dashboard-dark .text-success {
+  color: #66ff99 !important;
+}
+
+body.dark-mode .text-warning,
+body.bm-dashboard-dark .text-warning {
+  color: #ffcc66 !important;
+}
+
+body.dark-mode .text-danger,
+body.bm-dashboard-dark .text-danger {
+  color: #ff6666 !important;
+}
+
+body.dark-mode .text-info,
+body.bm-dashboard-dark .text-info {
+  color: #66ffff !important;
+}
+
+/* Dark mode for common elements */
+body.dark-mode .container,
+body.dark-mode .container-fluid,
+body.bm-dashboard-dark .container,
+body.bm-dashboard-dark .container-fluid {
+  background-color: #1b2a41;
+  color: #ffffff;
+}
+
+body.dark-mode .card,
+body.bm-dashboard-dark .card {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff;
+}
+
+body.dark-mode .card-body,
+body.bm-dashboard-dark .card-body {
+  color: #ffffff;
+}
+
+body.dark-mode .card-title,
+body.bm-dashboard-dark .card-title {
+  color: #ffffff !important;
+}
+
+body.dark-mode .card-text,
+body.bm-dashboard-dark .card-text {
+  color: #ffffff !important;
+}
+
+body.dark-mode .card-header,
+body.bm-dashboard-dark .card-header {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .form-control,
+body.bm-dashboard-dark .form-control {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .form-control::placeholder,
+body.bm-dashboard-dark .form-control::placeholder {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .form-control:focus,
+body.bm-dashboard-dark .form-control:focus {
+  background-color: #2e5061;
+  border-color: #4a6072;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(74, 96, 114, 0.25);
+}
+
+body.dark-mode .form-label,
+body.bm-dashboard-dark .form-label {
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-primary,
+body.bm-dashboard-dark .btn-primary {
+  background-color: #3a506b;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-primary:hover,
+body.bm-dashboard-dark .btn-primary:hover {
+  background-color: #4a6072;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-secondary,
+body.bm-dashboard-dark .btn-secondary {
+  background-color: #2e5061;
+  border-color: #2e5061;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-secondary:hover,
+body.bm-dashboard-dark .btn-secondary:hover {
+  background-color: #3a506b;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn,
+body.bm-dashboard-dark .btn {
+  color: #ffffff !important;
+}
+
+body.dark-mode .table,
+body.bm-dashboard-dark .table {
+  color: #ffffff !important;
+}
+
+body.dark-mode .table th,
+body.dark-mode .table td,
+body.bm-dashboard-dark .table th,
+body.bm-dashboard-dark .table td {
+  color: #ffffff !important;
+  border-color: #3a506b;
+}
+
+body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
+body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: rgba(46, 80, 97, 0.5);
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-content,
+body.bm-dashboard-dark .modal-content {
+  background-color: #2e5061;
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-header,
+body.bm-dashboard-dark .modal-header {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-title,
+body.bm-dashboard-dark .modal-title {
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-body,
+body.bm-dashboard-dark .modal-body {
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-footer,
+body.bm-dashboard-dark .modal-footer {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .nav-tabs .nav-link,
+body.bm-dashboard-dark .nav-tabs .nav-link {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .nav-tabs .nav-link.active,
+body.bm-dashboard-dark .nav-tabs .nav-link.active {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+/* Navigation and menu items */
+body.dark-mode .nav-link,
+body.bm-dashboard-dark .nav-link {
+  color: #ffffff !important;
+}
+
+body.dark-mode .navbar,
+body.bm-dashboard-dark .navbar {
+  background-color: #1b2a41 !important;
+}
+
+body.dark-mode .navbar-brand,
+body.bm-dashboard-dark .navbar-brand {
+  color: #ffffff !important;
+}
+
+body.dark-mode .dropdown-menu,
+body.bm-dashboard-dark .dropdown-menu {
+  background-color: #2e5061;
+  border-color: #3a506b;
+}
+
+body.dark-mode .dropdown-item,
+body.bm-dashboard-dark .dropdown-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .dropdown-item:hover,
+body.bm-dashboard-dark .dropdown-item:hover {
+  background-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* Alert components */
+body.dark-mode .alert,
+body.bm-dashboard-dark .alert {
+  color: #ffffff !important;
+}
+
+body.dark-mode .alert-primary,
+body.bm-dashboard-dark .alert-primary {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .alert-secondary,
+body.bm-dashboard-dark .alert-secondary {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* List groups */
+body.dark-mode .list-group-item,
+body.bm-dashboard-dark .list-group-item {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* Breadcrumbs */
+body.dark-mode .breadcrumb,
+body.bm-dashboard-dark .breadcrumb {
+  background-color: #2e5061;
+}
+
+body.dark-mode .breadcrumb-item,
+body.bm-dashboard-dark .breadcrumb-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .breadcrumb-item.active,
+body.bm-dashboard-dark .breadcrumb-item.active {
+  color: #b8c5d1 !important;
+}
+
+/* Pagination */
+body.dark-mode .page-link,
+body.bm-dashboard-dark .page-link {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .page-item.active .page-link,
+body.bm-dashboard-dark .page-item.active .page-link {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
 /* Fix the position of the header at the top */
 .top {
     position: fixed;
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 77df312e71..8cb7e9dfdc 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -12,6 +12,7 @@ import Loading from './common/Loading';
 import '../App.css';
 import { initMessagingSocket } from '../utils/messagingSocket';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import ThemeManager from './common/ThemeManager';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -228,6 +229,7 @@ class App extends Component {
           <QueryClientProvider client={queryClient}>
             <ModalProvider>
               <Router>
+                <ThemeManager />
                 <UpdateDocumentTitle />
                 {routes}
               </Router>
diff --git a/src/components/AutoUpdate/AutoUpdate.jsx b/src/components/AutoUpdate/AutoUpdate.jsx
index aed141eee0..4a5ad51c83 100644
--- a/src/components/AutoUpdate/AutoUpdate.jsx
+++ b/src/components/AutoUpdate/AutoUpdate.jsx
@@ -17,7 +17,15 @@ function AutoUpdate() {
     headers: noCacheHeaders,
   };
 
-  const hashRequest = new Request('/hash.txt');
+  // Create the hash request with proper URL handling for test environment
+  const hashRequest = (() => {
+    try {
+      return new Request('/hash.txt');
+    } catch (error) {
+      // In test environment, use a fallback URL
+      return new Request('http://localhost/hash.txt');
+    }
+  })();
 
   useEffect(() => {
     fetch(hashRequest, requestParams)
diff --git a/src/components/BMDashboard/BMDashboard.css b/src/components/BMDashboard/BMDashboard.css
deleted file mode 100644
index 7fde5210f5..0000000000
--- a/src/components/BMDashboard/BMDashboard.css
+++ /dev/null
@@ -1,171 +0,0 @@
-.bm-dashboard__header h1 {
-  font-size: 1.5em;
-  text-align: center;
-  margin-top: 2em;
-}
-
-.bm-dashboard__button.btn.btn-secondary {
-  background-color: #2e5061;
-}
-
-@media (min-width: 650px) {
-  .bm-dashboard__button.btn.btn-secondary {
-    padding-left: 0;
-    padding-right: 0;
-    max-height: 38px;
-  }
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1em;
-}
-
-.projects-list {
-  width: 100%;
-  max-width: 1200px;
-  list-style-type: none;
-  max-height: 80vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 0;
-  margin: 1em auto;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.project-summary {
-  background-color: #e8f4f9;
-  margin: 1em;
-  padding: 1em;
-  border-radius: 5px;
-  transition: transform 0.2s;
-}
-
-.project-summary:hover {
-  transform: scale(1.02);
-}
-
-.project-summary_header {
-  font-size: clamp(0.8em, 3vw, 1.3em);
-  font-weight: bold;
-  text-align: center;
-  justify-content: center;
-}
-
-.project-summary_content {
-  display: block;
-  flex-wrap: wrap;
-  text-align: start;
-  margin: 0;
-  font-size: clamp(0.9em, 2.5vw, 1em);
-}
-
-.project-summary_item {
-  padding: 8px;
-  align-items: center;
-}
-
-.project-summary_label {
-  margin-right: 1px;
-}
-
-.project-summary_span {
-  color: #3ea0cb;
-  font-weight: bold;
-  display: inline-block;
-  white-space: nowrap;
-}
-
-.bm-error-page {
-  width: 100%;
-  max-width: 1536px;
-  margin: 1rem auto;
-  padding: 0 1rem;
-}
-
-.bm-error-page section {
-  margin-top: 2rem;
-}
-
-.inv-form-page-container {
-  width: 100%;
-  max-width: 800px;
-  margin: 1rem auto;
-  padding: 2rem;
-  border: 1px solid #ccc;
-  border-radius: 40px;
-}
-
-.inv-form {
-  margin: 2rem auto;
-}
-
-.inv-form-info {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  margin: 1rem 0;
-}
-
-.inv-form-group {
-  margin: 1.5rem auto;
-}
-
-.inv-form input,
-.inv-form select,
-.inv-form textarea {
-  background-color: rgb(249, 249, 249);
-}
-
-.inv-form-btn-group {
-  display: flex;
-  gap: 1rem;
-  margin: 4rem auto 2rem;
-}
-
-.inv-form-btn-group button {
-  width: 50%;
-}
-
-.inv-form-required::after {
-  content: '*';
-  color: red;
-}
-
-@media screen and (max-width: 800px) {
-  .inv-form-page-container {
-    width: 95%;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .inv-form-page-container h2 {
-    font-size: 1.7rem;
-  }
-}
-
-.form-footer {
-  font-size: 0.875em;
-  margin-top: 3px;
-}
-
-.projects-list::-webkit-scrollbar {
-  width: 8px;
-}
-
-.projects-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-
-.projects-list::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 4px;
-}
-
-.projects-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
diff --git a/src/components/BMDashboard/BMDashboard.jsx b/src/components/BMDashboard/BMDashboard.jsx
index 56087ba420..bace0ae298 100644
--- a/src/components/BMDashboard/BMDashboard.jsx
+++ b/src/components/BMDashboard/BMDashboard.jsx
@@ -5,18 +5,19 @@ import { fetchBMProjects } from '../../actions/bmdashboard/projectActions';
 import ProjectsList from './Projects/ProjectsList';
 import ProjectSelectForm from './Projects/ProjectSelectForm';
 import BMError from './shared/BMError';
-import './BMDashboard.css';
+import './BMDashboard.module.css';
 
 export function BMDashboard() {
   const [isError, setIsError] = useState(false);
 
   const dispatch = useDispatch();
-  const errors = useSelector(state => state.errors);
+  const errors = useSelector(state => state.errors || {});
+  const darkMode = useSelector(state => state.theme?.darkMode || false);
 
   // fetch projects data on pageload
   useEffect(() => {
     dispatch(fetchBMProjects());
-  }, []);
+  }, [dispatch]);
 
   // trigger an error state if there is an errors object
   useEffect(() => {
@@ -25,12 +26,168 @@ export function BMDashboard() {
     }
   }, [errors]);
 
+  // Enhanced text visibility enforcement for both dark and light modes
+  useEffect(() => {
+    const ensureTextVisibility = () => {
+      const bmContainer = document.querySelector('.bm-dashboard-container');
+      if (bmContainer) {
+        // Target all text elements within BMDashboard
+        const textElements = bmContainer.querySelectorAll('*');
+        textElements.forEach(element => {
+          const hasText = element.textContent && element.textContent.trim().length > 0;
+          const isTextElement = [
+            'P',
+            'SPAN',
+            'DIV',
+            'H1',
+            'H2',
+            'H3',
+            'H4',
+            'H5',
+            'H6',
+            'LABEL',
+            'A',
+            'LI',
+            'TD',
+            'TH',
+            'BUTTON',
+          ].includes(element.tagName);
+
+          if (hasText && isTextElement) {
+            if (darkMode) {
+              // Dark mode: force white text with shadow
+              element.style.setProperty('color', '#ffffff', 'important');
+              element.style.setProperty('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.5)', 'important');
+            } else {
+              // Light mode: force dark text, remove shadow
+              element.style.setProperty('color', '#333333', 'important');
+              element.style.removeProperty('text-shadow');
+            }
+          }
+        });
+
+        // Handle containers
+        const containers = bmContainer.querySelectorAll(
+          '.container, .projects-list, .project-summary, .log-bar, .log-bar-dark',
+        );
+        containers.forEach(container => {
+          if (darkMode) {
+            container.style.setProperty('background-color', '#1b2a41', 'important');
+            container.style.setProperty('color', '#ffffff', 'important');
+          } else {
+            container.style.setProperty('background-color', '#ffffff', 'important');
+            container.style.setProperty('color', '#333333', 'important');
+          }
+        });
+
+        // Handle LogBar headings specifically
+        const logBarHeadings = bmContainer.querySelectorAll(
+          '.log-bar h2, .log-bar-dark h2, .log-bar__section h2',
+        );
+        logBarHeadings.forEach(heading => {
+          if (darkMode) {
+            heading.style.setProperty('color', '#ffffff', 'important');
+            heading.style.setProperty('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.5)', 'important');
+          } else {
+            heading.style.setProperty('color', '#333333', 'important');
+            heading.style.removeProperty('text-shadow');
+          }
+        });
+
+        // Handle input and form elements
+        const inputs = bmContainer.querySelectorAll('input, select, textarea');
+        inputs.forEach(input => {
+          if (darkMode) {
+            input.style.setProperty('background-color', '#2a3f5f', 'important');
+            input.style.setProperty('color', '#ffffff', 'important');
+            input.style.setProperty('border-color', '#3a506b', 'important');
+          } else {
+            input.style.setProperty('background-color', '#ffffff', 'important');
+            input.style.setProperty('color', '#333333', 'important');
+            input.style.setProperty('border-color', '#ced4da', 'important');
+          }
+        });
+
+        // Handle button styles
+        const buttons = bmContainer.querySelectorAll('button, .btn');
+        buttons.forEach(button => {
+          if (darkMode) {
+            button.style.setProperty('background-color', '#3a506b', 'important');
+            button.style.setProperty('color', '#ffffff', 'important');
+            button.style.setProperty('border-color', '#5a7a9b', 'important');
+          } else {
+            button.style.setProperty('background-color', '#007bff', 'important');
+            button.style.setProperty('color', '#ffffff', 'important');
+            button.style.setProperty('border-color', '#007bff', 'important');
+          }
+        });
+
+        // Handle project summary spans specifically
+        const summarySpans = bmContainer.querySelectorAll('.project-summary_span');
+        summarySpans.forEach(span => {
+          if (darkMode) {
+            span.style.setProperty('color', '#6af1ea', 'important');
+          } else {
+            span.style.setProperty('color', '#007bff', 'important');
+          }
+        });
+
+        // Handle project summary labels
+        const summaryLabels = bmContainer.querySelectorAll('.project-summary_label');
+        summaryLabels.forEach(label => {
+          if (darkMode) {
+            label.style.setProperty('color', '#b5bac5', 'important');
+          } else {
+            label.style.setProperty('color', '#6c757d', 'important');
+          }
+        });
+      }
+    };
+
+    // Run immediately
+    ensureTextVisibility();
+
+    // Set up observer to handle dynamic content
+    const observer = new MutationObserver(() => {
+      ensureTextVisibility();
+    });
+
+    const target = document.querySelector('.bm-dashboard-container');
+    if (target) {
+      observer.observe(target, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+
+    // Cleanup
+    return () => {
+      observer.disconnect();
+    };
+  }, [darkMode]);
+
   return (
-    <Container className="justify-content-center align-items-center">
-      <header className="bm-dashboard__header">
-        <h1>Building and Inventory Management Dashboard</h1>
+    <Container
+      className={`justify-content-center align-items-center bm-dashboard-container ${
+        darkMode ? 'bm-dashboard-dark' : 'bm-dashboard-light'
+      }`}
+    >
+      <header
+        className={`bm-dashboard__header ${
+          darkMode ? 'bm-dashboard__header-dark' : 'bm-dashboard__header-light'
+        }`}
+      >
+        <h1 className={darkMode ? 'text-light' : 'text-dark'}>
+          Building and Inventory Management Dashboard
+        </h1>
       </header>
-      <main>
+      <main
+        className={`bm-dashboard-main ${
+          darkMode ? 'bm-dashboard-main-dark' : 'bm-dashboard-main-light'
+        }`}
+      >
         {isError ? (
           <BMError errors={errors} />
         ) : (
diff --git a/src/components/BMDashboard/BMDashboard.module.css b/src/components/BMDashboard/BMDashboard.module.css
new file mode 100644
index 0000000000..0966a05740
--- /dev/null
+++ b/src/components/BMDashboard/BMDashboard.module.css
@@ -0,0 +1,643 @@
+/* BMDashboard Main Container */
+.bm-dashboard-container {
+  transition: background-color 0.3s ease, color 0.3s ease;
+  background-color: #ffffff;
+  color: #333333;
+}
+
+.bm-dashboard-container.bm-dashboard-light {
+  background-color: #ffffff;
+  color: #333333;
+}
+
+.bm-dashboard-container.bm-dashboard-dark {
+  background-color: #1b2a41;
+  color: #ffffff;
+}
+
+/* Header Styles */
+.bm-dashboard__header h1 {
+  font-size: 1.5em;
+  text-align: center;
+  margin-top: 2em;
+  transition: color 0.3s ease;
+  color: #333333;
+  font-weight: 600;
+}
+
+.bm-dashboard__header-light h1 {
+  color: #333333 !important;
+  text-shadow: none !important;
+}
+
+.bm-dashboard__header-dark h1 {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Main Content Styles */
+.bm-dashboard-main {
+  background-color: #ffffff;
+  color: #333333;
+}
+
+.bm-dashboard-main-light {
+  background-color: #ffffff;
+  color: #333333;
+}
+
+.bm-dashboard-main-dark {
+  background-color: #1b2a41;
+  color: #ffffff;
+}
+
+/* Light Mode Text Visibility - Ensure Dark Text */
+.bm-dashboard-container:not(.bm-dashboard-dark) * {
+  color: #333333 !important;
+}
+
+.bm-dashboard-container:not(.bm-dashboard-dark) h1, 
+.bm-dashboard-container:not(.bm-dashboard-dark) h2, 
+.bm-dashboard-container:not(.bm-dashboard-dark) h3,
+.bm-dashboard-container:not(.bm-dashboard-dark) h4, 
+.bm-dashboard-container:not(.bm-dashboard-dark) h5, 
+.bm-dashboard-container:not(.bm-dashboard-dark) h6 {
+  color: #333333 !important;
+  text-shadow: none !important;
+  font-weight: 600 !important;
+}
+
+.bm-dashboard-container:not(.bm-dashboard-dark) p, 
+.bm-dashboard-container:not(.bm-dashboard-dark) span, 
+.bm-dashboard-container:not(.bm-dashboard-dark) div,
+.bm-dashboard-container:not(.bm-dashboard-dark) label, 
+.bm-dashboard-container:not(.bm-dashboard-dark) a, 
+.bm-dashboard-container:not(.bm-dashboard-dark) li,
+.bm-dashboard-container:not(.bm-dashboard-dark) td,
+.bm-dashboard-container:not(.bm-dashboard-dark) th,
+.bm-dashboard-container:not(.bm-dashboard-dark) button,
+.bm-dashboard-container:not(.bm-dashboard-dark) .btn {
+  color: #333333 !important;
+  text-shadow: none !important;
+}
+
+/* Enhanced text visibility for all BMDashboard dark mode elements - NUCLEAR LEVEL */
+.bm-dashboard-dark *,
+.bm-dashboard-dark *:before,
+.bm-dashboard-dark *:after {
+  color: #ffffff !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
+}
+
+.bm-dashboard-dark h1, 
+.bm-dashboard-dark h2, 
+.bm-dashboard-dark h3,
+.bm-dashboard-dark h4, 
+.bm-dashboard-dark h5, 
+.bm-dashboard-dark h6 {
+  color: #ffffff !important;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
+  font-weight: 600 !important;
+}
+
+.bm-dashboard-dark p, 
+.bm-dashboard-dark span, 
+.bm-dashboard-dark div,
+.bm-dashboard-dark label, 
+.bm-dashboard-dark a, 
+.bm-dashboard-dark li,
+.bm-dashboard-dark td,
+.bm-dashboard-dark th,
+.bm-dashboard-dark button,
+.bm-dashboard-dark .btn {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
+}
+
+.bm-dashboard-dark .text-muted,
+.bm-dashboard-dark .text-secondary,
+.bm-dashboard-dark .text-light {
+  color: #ffffff !important;
+  opacity: 0.9 !important;
+}
+
+.bm-dashboard-dark .form-control {
+  background-color: #2e5061 !important;
+  border-color: #3a506b !important;
+  color: #ffffff !important;
+  text-shadow: none !important;
+}
+
+.bm-dashboard-dark .form-control::placeholder {
+  color: #ffffff !important;
+  opacity: 0.7 !important;
+}
+
+/* Button Styles */
+.bm-dashboard__button.btn.btn-secondary {
+  background-color: #6c757d;
+  color: #ffffff;
+  border-color: #6c757d;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.bm-dashboard__button.btn.btn-secondary:hover {
+  background-color: #545b62;
+  border-color: #545b62;
+}
+
+.bm-dashboard-dark .bm-dashboard__button.btn.btn-secondary {
+  background-color: #3a506b;
+  color: #ffffff;
+  border: 1px solid #5a7a9b;
+}
+
+.bm-dashboard-dark .bm-dashboard__button.btn.btn-secondary:hover {
+  background-color: #4a607b;
+  border-color: #6a8aab;
+}
+
+@media (min-width: 650px) {
+  .bm-dashboard__button.btn.btn-secondary {
+    padding-left: 0;
+    padding-right: 0;
+    max-height: 38px;
+  }
+}
+
+/* Container Styles */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1em;
+  transition: background-color 0.3s ease;
+}
+
+.bm-dashboard-dark .container {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+}
+
+/* Projects List Styles */
+.projects-list {
+  width: 100%;
+  max-width: 1200px;
+  list-style-type: none;
+  max-height: 80vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  margin: 1em auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  color: #333333;
+}
+
+.bm-dashboard-dark .projects-list {
+  background-color: #1c2541;
+  border-color: #3a506b;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  color: #ffffff;
+}
+
+/* Project Summary Styles */
+.project-summary {
+  background-color: #f8f9fa;
+  margin: 1em;
+  padding: 1em;
+  border-radius: 5px;
+  border: 1px solid #e9ecef;
+  transition: transform 0.2s, background-color 0.3s ease, color 0.3s ease;
+  color: #333333;
+}
+
+.bm-dashboard-dark .project-summary {
+  background-color: #2a3f5f;
+  color: #ffffff;
+  border: 1px solid #3a506b;
+}
+
+.project-summary:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.bm-dashboard-dark .project-summary:hover {
+  background-color: #3a506b;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* Project Summary Content Styles */
+.project-summary_header {
+  font-size: clamp(0.8em, 3vw, 1.3em);
+  font-weight: bold;
+  text-align: center;
+  justify-content: center;
+  transition: color 0.3s ease;
+  color: #333333;
+}
+
+.bm-dashboard-dark .project-summary_header {
+  color: #ffffff;
+}
+
+.project-summary_content {
+  display: block;
+  flex-wrap: wrap;
+  text-align: start;
+  margin: 0;
+  font-size: clamp(0.9em, 2.5vw, 1em);
+  transition: color 0.3s ease;
+  color: #495057;
+}
+
+.bm-dashboard-dark .project-summary_content {
+  color: #e0e0e0;
+}
+
+.project-summary_item {
+  padding: 8px;
+  align-items: center;
+}
+
+.project-summary_label {
+  margin-right: 1px;
+  transition: color 0.3s ease;
+  color: #6c757d;
+}
+
+.bm-dashboard-dark .project-summary_label {
+  color: #b5bac5;
+}
+
+.project-summary_span {
+  color: #007bff;
+  font-weight: bold;
+  display: inline-block;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.bm-dashboard-dark .project-summary_span {
+  color: #6af1ea;
+}
+
+/* Error Page Styles */
+.bm-error-page {
+  width: 100%;
+  max-width: 1536px;
+  margin: 1rem auto;
+  padding: 0 1rem;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.bm-dashboard-dark .bm-error-page {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+}
+
+.bm-error-page section {
+  margin-top: 2rem;
+}
+
+.bm-dashboard-dark .bm-error-page section {
+  color: #e0e0e0;
+}
+
+/* Form Styles */
+.inv-form-page-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 40px;
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+  background-color: #ffffff;
+  color: #333333;
+}
+
+.bm-dashboard-dark .inv-form-page-container {
+  background-color: #1c2541;
+  border-color: #3a506b;
+  color: #e0e0e0;
+}
+
+.inv-form {
+  margin: 2rem auto;
+}
+
+.inv-form-info {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin: 1rem 0;
+}
+
+.inv-form-group {
+  margin: 1.5rem auto;
+}
+
+.inv-form input,
+.inv-form select,
+.inv-form textarea {
+  background-color: #ffffff;
+  color: #333333;
+  border-color: #ced4da;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.bm-dashboard-dark .inv-form input,
+.bm-dashboard-dark .inv-form select,
+.bm-dashboard-dark .inv-form textarea {
+  background-color: #2a3f5f;
+  color: #e0e0e0;
+  border-color: #3a506b;
+}
+
+.inv-form input::placeholder,
+.inv-form textarea::placeholder {
+  color: #6c757d;
+}
+
+.bm-dashboard-dark .inv-form input::placeholder,
+.bm-dashboard-dark .inv-form textarea::placeholder {
+  color: #b5bac5;
+}
+
+.inv-form input:focus,
+.inv-form select:focus,
+.inv-form textarea:focus {
+  background-color: #ffffff;
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.bm-dashboard-dark .inv-form input:focus,
+.bm-dashboard-dark .inv-form select:focus,
+.bm-dashboard-dark .inv-form textarea:focus {
+  background-color: #3a506b;
+  border-color: #5a7a9b;
+  box-shadow: 0 0 0 0.2rem rgba(106, 241, 234, 0.25);
+}
+
+/* Form Button Styles */
+.inv-form-btn-group {
+  display: flex;
+  gap: 1rem;
+  margin: 4rem auto 2rem;
+}
+
+.inv-form-btn-group button {
+  width: 50%;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+  background-color: #007bff;
+  color: #ffffff;
+  border-color: #007bff;
+}
+
+.inv-form-btn-group button:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.bm-dashboard-dark .inv-form-btn-group button {
+  background-color: #3a506b;
+  color: #ffffff;
+  border-color: #5a7a9b;
+}
+
+.bm-dashboard-dark .inv-form-btn-group button:hover {
+  background-color: #4a607b;
+  border-color: #6a8aab;
+}
+
+.inv-form-required::after {
+  content: '*';
+  color: red;
+}
+
+.bm-dashboard-dark .inv-form-required::after {
+  color: #ff6b6b;
+}
+
+@media screen and (max-width: 800px) {
+  .inv-form-page-container {
+    width: 95%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .inv-form-page-container h2 {
+    font-size: 1.7rem;
+  }
+}
+
+/* Footer Styles */
+.form-footer {
+  font-size: 0.875em;
+  margin-top: 3px;
+  transition: color 0.3s ease;
+}
+
+.bm-dashboard-dark .form-footer {
+  color: #b5bac5;
+}
+
+/* Scrollbar Styles */
+.projects-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.projects-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  transition: background 0.3s ease;
+}
+
+.bm-dashboard-dark .projects-list::-webkit-scrollbar-track {
+  background: #1c2541;
+}
+
+.projects-list::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+.bm-dashboard-dark .projects-list::-webkit-scrollbar-thumb {
+  background: #5a7a9b;
+}
+
+.projects-list::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.bm-dashboard-dark .projects-list::-webkit-scrollbar-thumb:hover {
+  background: #6a8aab;
+}
+
+/* Projects specific dark mode styles */
+.bm-dashboard-dark .projects-list-dark {
+  color: #e0e0e0;
+}
+
+.bm-dashboard-dark .projects-list-dark .text-light {
+  color: #e0e0e0 !important;
+}
+
+.bm-dashboard-dark .project-select-form-dark .form-control-dark {
+  background-color: #2a3f5f;
+  border-color: #3a506b;
+  color: #e0e0e0;
+}
+
+.bm-dashboard-dark .project-select-form-dark .form-control-dark option {
+  background-color: #2a3f5f;
+  color: #e0e0e0;
+}
+
+.bm-dashboard-dark .project-select-form-dark .btn-dark-mode {
+  background-color: #3a506b !important;
+  border-color: #3a506b !important;
+}
+
+.bm-dashboard-dark .project-select-form-dark .btn-dark-mode:hover {
+  background-color: #5a7a9b !important;
+  border-color: #5a7a9b !important;
+}
+
+.bm-dashboard-dark .project-select-form-dark .btn-dark-mode:disabled {
+  background-color: #1c2541 !important;
+  border-color: #1c2541 !important;
+  opacity: 0.6;
+}
+
+/* ULTIMATE TEXT VISIBILITY OVERRIDE - NUCLEAR LEVEL */
+.bm-dashboard-dark,
+.bm-dashboard-dark > *,
+.bm-dashboard-dark > * > *,
+.bm-dashboard-dark > * > * > *,
+.bm-dashboard-dark > * > * > * > *,
+.bm-dashboard-dark > * > * > * > * > *,
+.bm-dashboard-dark .container,
+.bm-dashboard-dark .container *,
+.bm-dashboard-dark .projects-list,
+.bm-dashboard-dark .projects-list *,
+.bm-dashboard-dark .project-summary,
+.bm-dashboard-dark .project-summary *,
+.bm-dashboard-dark .project-select-form,
+.bm-dashboard-dark .project-select-form *,
+.bm-dashboard-dark header,
+.bm-dashboard-dark header *,
+.bm-dashboard-dark main,
+.bm-dashboard-dark main * {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
+}
+
+/* Force background colors for better contrast */
+.bm-dashboard-dark .container,
+.bm-dashboard-dark .projects-list,
+.bm-dashboard-dark .project-summary,
+.bm-dashboard-dark .inv-form-page-container,
+.bm-dashboard-dark .bm-error-page {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+/* Override any Bootstrap or other framework styles */
+.bm-dashboard-dark .text-primary,
+.bm-dashboard-dark .text-secondary,
+.bm-dashboard-dark .text-success,
+.bm-dashboard-dark .text-info,
+.bm-dashboard-dark .text-warning,
+.bm-dashboard-dark .text-danger,
+.bm-dashboard-dark .text-light,
+.bm-dashboard-dark .text-dark,
+.bm-dashboard-dark .text-body,
+.bm-dashboard-dark .text-muted {
+  color: #ffffff !important;
+}
+
+/* Force all buttons and interactive elements */
+.bm-dashboard-dark button,
+.bm-dashboard-dark .btn,
+.bm-dashboard-dark .btn-primary,
+.bm-dashboard-dark .btn-secondary,
+.bm-dashboard-dark .btn-success,
+.bm-dashboard-dark .btn-info,
+.bm-dashboard-dark .btn-warning,
+.bm-dashboard-dark .btn-danger,
+.bm-dashboard-dark .btn-light,
+.bm-dashboard-dark .btn-dark,
+.bm-dashboard-dark .btn-outline-primary,
+.bm-dashboard-dark .btn-outline-secondary {
+  background-color: #3a506b !important;
+  color: #ffffff !important;
+  border-color: #5a7a9b !important;
+}
+
+.bm-dashboard-dark button:hover,
+.bm-dashboard-dark .btn:hover {
+  background-color: #4a607b !important;
+  color: #ffffff !important;
+  border-color: #6a8aab !important;
+}
+
+/* LogBar specific overrides for BMDashboard */
+.bm-dashboard-dark .log-bar,
+.bm-dashboard-dark .log-bar-dark {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+.bm-dashboard-dark .log-bar h2,
+.bm-dashboard-dark .log-bar-dark h2,
+.bm-dashboard-dark .log-bar__section h2 {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
+}
+
+.bm-dashboard-dark .log-bar .button.btn,
+.bm-dashboard-dark .log-bar-dark .button.btn {
+  color: #ffffff !important;
+}
+
+/* Light mode LogBar overrides */
+.bm-dashboard-container:not(.bm-dashboard-dark) .log-bar h2,
+.bm-dashboard-container:not(.bm-dashboard-dark) .log-bar__section h2 {
+  color: #333333 !important;
+  text-shadow: none !important;
+}
+
+.bm-dashboard-container:not(.bm-dashboard-dark) .log-bar .button.btn {
+  color: #ffffff !important;
+}
+
+/* Image clarity improvements for BMDashboard */
+.bm-dashboard-container img,
+.bm-dashboard-dark img,
+.bm-dashboard-light img {
+  image-rendering: auto !important;
+  -webkit-filter: none !important;
+  filter: none !important;
+  backface-visibility: hidden !important;
+  transform: translateZ(0) !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.bm-dashboard-container .single-card__img img,
+.bm-dashboard-dark .single-card__img img,
+.bm-dashboard-light .single-card__img img {
+  object-fit: cover !important;
+  object-position: center !important;
+  max-width: 100% !important;
+  height: auto !important;
+  image-rendering: auto !important;
+}
+
+
diff --git a/src/components/BMDashboard/Equipment/Add/AddEquipmentType.jsx b/src/components/BMDashboard/Equipment/Add/AddEquipmentType.jsx
index 6f0b977880..f308c2c0a0 100644
--- a/src/components/BMDashboard/Equipment/Add/AddEquipmentType.jsx
+++ b/src/components/BMDashboard/Equipment/Add/AddEquipmentType.jsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { BsInfoCircle } from 'react-icons/bs';
 import BMError from '~/components/BMDashboard/shared/BMError';
-import '../../BMDashboard.css';
 import { Button } from 'reactstrap';
 import CheckTypesModal from '~/components/BMDashboard/shared/CheckTypesModal';
 import AddTypeForm from './AddTypeForm';
diff --git a/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx b/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx
index 92aaf3abf8..122b48fb89 100644
--- a/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx
+++ b/src/components/BMDashboard/Equipment/Update/UpdateEquipment.jsx
@@ -8,7 +8,6 @@ import Radio from '~/components/common/Radio';
 import DragAndDrop from '~/components/common/DragAndDrop/DragAndDrop';
 import Image from '~/components/common/Image/Image';
 import styles from './UpdateEquipment.module.css';
-import '../../BMDashboard.css';
 
 export default function UpdateEquipment() {
   const history = useHistory();
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx b/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx
index d436162910..16b92f23f8 100644
--- a/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx
+++ b/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx
@@ -1,6 +1,9 @@
 import { v4 as uuidv4 } from 'uuid';
 import { Button } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import styles from './ProjectDetails.module.css';
+
 // button styles for each section
 const buttonStyles = {
   dailyLogging: 'green',
@@ -10,6 +13,7 @@ const buttonStyles = {
 
 function LogBar(props) {
   const { projectId } = props;
+  const darkMode = useSelector(state => state.theme?.darkMode || false);
   const buttonLabels = {
     dailyLogging: {
       name: ['Time', 'Material', 'Tool/Equipment'],
@@ -31,10 +35,10 @@ function LogBar(props) {
   };
 
   return (
-    <div className="log-bar">
+    <div className={`${darkMode ? styles['log-bar-dark'] : styles['log-bar']}`}>
       {Object.keys(buttonStyles).map(section => (
-        <div key={uuidv4()} className="log-bar__section">
-          <h2>
+        <div key={uuidv4()} className={styles['log-bar__section']}>
+          <h2 style={{ color: darkMode ? '#ffffff' : '#333333' }}>
             {(() => {
               switch (section) {
                 case 'dailyLogging':
@@ -46,18 +50,26 @@ function LogBar(props) {
               }
             })()}
           </h2>
-          <ul className="log-bar__btn-group">
+          <ul className={styles['log-bar__btn-group']}>
             {buttonLabels[section].name.map((label, index) => (
               <li key={uuidv4()}>
                 {label !== 'Log Issue' ? (
                   <Link to={buttonLabels[section].url[index]}>
-                    <Button type="button" className={`button button--${buttonStyles[section]}`}>
+                    <Button
+                      type="button"
+                      className={`${styles.button} ${styles.btn} ${
+                        styles[`button--${buttonStyles[section]}`]
+                      }`}
+                    >
                       {label}
                     </Button>
                   </Link>
                 ) : (
                   <Link to={`/bmdashboard/issues/add/${projectId}`}>
-                    <Button type="button" className="button button--maroon">
+                    <Button
+                      type="button"
+                      className={`${styles.button} ${styles.btn} ${styles['button--maroon']}`}
+                    >
                       Log Issue
                     </Button>
                   </Link>
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx b/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx
index 9f85ab7006..3dcd2a2ab6 100644
--- a/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx
+++ b/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx
@@ -1,16 +1,25 @@
+import styles from '../ProjectDetails.module.css';
+
 function MaterialCard() {
   return (
-    <div className="single-card">
-      <div className="single-card__img">
+    <div className={styles['single-card']}>
+      <div className={styles['single-card__img']}>
         <img
-          alt=""
+          alt="Material"
           src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
           width="100%"
+          style={{
+            imageRendering: 'auto',
+            filter: 'none',
+            objectFit: 'cover',
+            maxWidth: '100%',
+            height: 'auto',
+          }}
         />
       </div>
-      <div className="single-card__body">
+      <div className={styles['single-card__body']}>
         <h3>Card title</h3>
-        <div className="single-card__info">Less than ___% left</div>
+        <div className={styles['single-card__info']}>Less than ___% left</div>
       </div>
     </div>
   );
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx
index 4a8e844088..cb6da7b4b8 100644
--- a/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx
+++ b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx
@@ -5,7 +5,7 @@ import LogBar from './LogBar';
 import RentedToolsDisplay from './RentedTools/RentedToolsDisplay';
 import MaterialsDisplay from './Materials/MaterialsDisplay';
 import ProjectLog from './ProjectLog';
-import './ProjectDetails.css';
+import styles from './ProjectDetails.module.css';
 
 function ProjectDetails() {
   const { projectId } = useParams();
@@ -15,7 +15,7 @@ function ProjectDetails() {
 
   if (!currProject) {
     return (
-      <Container className="project-details text-center mt-5">
+      <Container className={`${styles['project-details']} text-center mt-5`}>
         <h2 className="text-danger">Project Not Found</h2>
         <p>Please check if the project exists or try selecting another project.</p>
       </Container>
@@ -23,11 +23,16 @@ function ProjectDetails() {
   }
 
   return (
-    <Container fluid className={`${darkMode ? 'project-details-dark' : 'project-details'}  `}>
+    <Container
+      fluid
+      className={`${darkMode ? styles['project-details-dark'] : styles['project-details']}  `}
+    >
       <Row className="justify-content-center">
         <Col xs="12" lg="10">
           <h1
-            className={`${darkMode ? 'project-details-title-dark' : 'project-details-title'} mb-2 `}
+            className={`${
+              darkMode ? styles['project-details-title-dark'] : styles['project-details-title']
+            } mb-2 `}
           >
             {currProject.name} Dashboard{' '}
           </h1>
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.module.css
similarity index 85%
rename from src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css
rename to src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.module.css
index a6acd0542f..367b0cc739 100644
--- a/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css
+++ b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.module.css
@@ -36,8 +36,10 @@
   margin: 2em;
   padding: 1em 2em;
   width: 100%;
-background-color: white;
+  background-color: white;
+  color: #333333;
 }
+
 .log-bar-dark {
   display: flex;
   flex-direction: column;
@@ -45,7 +47,8 @@ background-color: white;
   margin: 2em;
   padding: 1em 2em;
   width: 100%;
-background-color: rgb(1, 1, 38);
+  background-color: #1b2a41;
+  color: #ffffff;
 }
 
 .log-bar__section {
@@ -58,6 +61,14 @@ background-color: rgb(1, 1, 38);
 .project-log h2 {
   font-size: 1em;
   font-weight: bold;
+  color: #333333;
+}
+
+.log-bar-dark .log-bar__section h2,
+.log-bar-dark .card.cards-container h2,
+.log-bar-dark .project-log h2 {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .log-bar__section ul {
@@ -69,29 +80,36 @@ background-color: rgb(1, 1, 38);
   border-radius: 10px;
   margin: 0.1em;
   width: 100%;
+  color: #ffffff !important;
+  font-weight: 500;
 }
 
 .button.btn:hover {
   outline: auto;
   filter: brightness(130%);
+  color: #ffffff !important;
 }
 
 /* buttons custom colors */
 .button.btn.button--green {
   background-color: #015d4a;
+  color: #ffffff !important;
 }
 
 .button.btn.button--blue {
   background-color: #0f6386;
+  color: #ffffff !important;
 }
 
 .button.btn.button--indigo {
   background-color: #203844;
+  color: #ffffff !important;
 }
 
 .button.btn.button--maroon {
   background-color: #980101;
   margin-top: 2em;
+  color: #ffffff !important;
 }
 
 @media (min-width: 550px) {
@@ -173,12 +191,19 @@ background-color: rgb(1, 1, 38);
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  background-color: #ffffff;
+  border-radius: 5px 5px 0 0;
 }
 
 .single-card__img img {
   max-width: 100%;
   height: auto;
-  object-fit: contain;
+  object-fit: cover;
+  image-rendering: auto;
+  filter: none;
+  -webkit-filter: none;
+  backface-visibility: hidden;
+  transform: translateZ(0);
 }
 
 .single-card:hover {
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx
index 38939e9fbb..556eabfb08 100644
--- a/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx
+++ b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx
@@ -1,16 +1,25 @@
+import styles from '../ProjectDetails.module.css';
+
 function ToolCard() {
   return (
-    <div className="single-card">
-      <div className="single-card__img">
+    <div className={styles['single-card']}>
+      <div className={styles['single-card__img']}>
         <img
-          alt=""
+          alt="Equipment"
           src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
           width="100%"
+          style={{
+            imageRendering: 'auto',
+            filter: 'none',
+            objectFit: 'cover',
+            maxWidth: '100%',
+            height: 'auto',
+          }}
         />
       </div>
-      <div className="single-card__body">
+      <div className={styles['single-card__body']}>
         <h3>Card title</h3>
-        <div className="single-card__info">Term ends in __ hours.</div>
+        <div className={styles['single-card__info']}>Term ends in __ hours.</div>
       </div>
     </div>
   );
diff --git a/src/components/BMDashboard/Projects/ProjectSelectForm.jsx b/src/components/BMDashboard/Projects/ProjectSelectForm.jsx
index 90051bc8ce..9a77562e8e 100644
--- a/src/components/BMDashboard/Projects/ProjectSelectForm.jsx
+++ b/src/components/BMDashboard/Projects/ProjectSelectForm.jsx
@@ -5,6 +5,7 @@ import { Row, Col, Button, Input } from 'reactstrap';
 
 function ProjectSelectForm() {
   const projects = useSelector(state => state.bmProjects) || [];
+  const darkMode = useSelector(state => state.theme?.darkMode || false);
 
   const [selectedProject, setSelectedProject] = useState('');
 
@@ -16,18 +17,31 @@ function ProjectSelectForm() {
     }
   };
 
+  const inputStyles = {
+    maxWidth: '300px',
+    marginRight: '1rem',
+    fontSize: '1rem',
+    backgroundColor: darkMode ? '#2a3f5f' : '',
+    borderColor: darkMode ? '#3a506b' : '',
+    color: darkMode ? '#e0e0e0' : '',
+  };
+
+  const buttonStyles = {
+    whiteSpace: 'nowrap',
+    backgroundColor: darkMode ? '#3a506b' : '#2F4F4F',
+    borderColor: darkMode ? '#3a506b' : '#2F4F4F',
+    color: '#fff',
+  };
+
   return (
-    <Row className="justify-content-center mt-4">
+    <Row className={`justify-content-center mt-4 ${darkMode ? 'project-select-form-dark' : ''}`}>
       <Col md="8" lg="6" className="d-flex align-items-center">
         <Input
           type="select"
           value={selectedProject}
           onChange={e => setSelectedProject(e.target.value)}
-          style={{
-            maxWidth: '300px',
-            marginRight: '1rem',
-            fontSize: '1rem',
-          }}
+          style={inputStyles}
+          className={darkMode ? 'form-control-dark' : ''}
         >
           <option value="">Select a project</option>
           {projects.map(p => (
@@ -40,12 +54,8 @@ function ProjectSelectForm() {
         <Button
           onClick={handleGo}
           disabled={!selectedProject}
-          style={{
-            whiteSpace: 'nowrap',
-            backgroundColor: '#2F4F4F',
-            borderColor: '#2F4F4F',
-            color: '#fff',
-          }}
+          style={buttonStyles}
+          className={darkMode ? 'btn-dark-mode' : ''}
         >
           Go to Project Dashboard
         </Button>
diff --git a/src/components/BMDashboard/Projects/ProjectsList.jsx b/src/components/BMDashboard/Projects/ProjectsList.jsx
index 8700e0b36e..e8b341243c 100644
--- a/src/components/BMDashboard/Projects/ProjectsList.jsx
+++ b/src/components/BMDashboard/Projects/ProjectsList.jsx
@@ -6,6 +6,7 @@ import ProjectSummary from './ProjectSummary';
 
 function ProjectsList() {
   const projects = useSelector(state => state.bmProjects) || [];
+  const darkMode = useSelector(state => state.theme?.darkMode || false);
   const [selectedProjects, setSelectedProjects] = useState([]);
 
   const projectOptions = projects.map(project => ({
@@ -21,14 +22,94 @@ function ProjectsList() {
     ? projects.filter(project => selectedProjects.some(selected => selected.value === project._id))
     : projects;
 
+  // Custom styles for react-select in dark mode
+  const selectStyles = {
+    control: (base, state) => ({
+      ...base,
+      backgroundColor: darkMode ? '#2a3f5f' : base.backgroundColor,
+      borderColor: darkMode ? '#3a506b' : base.borderColor,
+      color: darkMode ? '#e0e0e0' : base.color,
+      boxShadow: state.isFocused
+        ? darkMode
+          ? '0 0 0 1px #6af1ea'
+          : base.boxShadow
+        : base.boxShadow,
+      '&:hover': {
+        borderColor: darkMode
+          ? '#5a7a9b'
+          : base['&:hover']
+          ? base['&:hover'].borderColor
+          : base.borderColor,
+      },
+    }),
+    menu: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#1c2541' : base.backgroundColor,
+      border: darkMode ? '1px solid #3a506b' : base.border,
+    }),
+    option: (base, state) => {
+      let backgroundColor = base.backgroundColor;
+      if (state.isSelected) {
+        backgroundColor = darkMode ? '#3a506b' : base.backgroundColor;
+      } else if (state.isFocused) {
+        backgroundColor = darkMode ? '#2a3f5f' : base.backgroundColor;
+      } else {
+        backgroundColor = darkMode ? '#1c2541' : base.backgroundColor;
+      }
+
+      return {
+        ...base,
+        backgroundColor,
+        color: darkMode ? '#e0e0e0' : base.color,
+        '&:hover': {
+          backgroundColor: darkMode
+            ? '#3a506b'
+            : base['&:hover']
+            ? base['&:hover'].backgroundColor
+            : base.backgroundColor,
+        },
+      };
+    },
+    multiValue: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#3a506b' : base.backgroundColor,
+    }),
+    multiValueLabel: base => ({
+      ...base,
+      color: darkMode ? '#ffffff' : base.color,
+    }),
+    multiValueRemove: base => ({
+      ...base,
+      color: darkMode ? '#ffffff' : base.color,
+      '&:hover': {
+        backgroundColor: darkMode ? '#5a7a9b' : '#e9ecef',
+        color: darkMode ? '#ffffff' : '#495057',
+      },
+    }),
+    placeholder: base => ({
+      ...base,
+      color: darkMode ? '#b5bac5' : base.color,
+    }),
+    singleValue: base => ({
+      ...base,
+      color: darkMode ? '#e0e0e0' : base.color,
+    }),
+    input: base => ({
+      ...base,
+      color: darkMode ? '#e0e0e0' : base.color,
+    }),
+  };
+
   return (
-    <Row className="ml-0 text-center mt-5">
+    <Row className={`ml-0 text-center mt-5 ${darkMode ? 'projects-list-dark' : ''}`}>
       <Select
         isMulti
         options={projectOptions}
         onChange={handleSelectChange}
         className="mb-3"
         placeholder="Select Projects"
+        styles={selectStyles}
+        classNamePrefix="react-select"
       />
       {filteredProjects.length ? (
         <ul className="projects-list">
@@ -39,7 +120,7 @@ function ProjectsList() {
           ))}
         </ul>
       ) : (
-        <p>No projects data</p>
+        <p className={darkMode ? 'text-light' : ''}>No projects data</p>
       )}
     </Row>
   );
diff --git a/src/components/common/ThemeManager.jsx b/src/components/common/ThemeManager.jsx
new file mode 100644
index 0000000000..5b49fb2c7d
--- /dev/null
+++ b/src/components/common/ThemeManager.jsx
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+/**
+ * ThemeManager component handles global dark mode theme application
+ * by managing CSS classes on the document body element
+ */
+const ThemeManager = () => {
+  const darkMode = useSelector(state => state.theme?.darkMode || false);
+
+  useEffect(() => {
+    // Apply dark mode class to body for global styling
+    if (darkMode) {
+      document.body.classList.add('dark-mode');
+      document.body.classList.add('bm-dashboard-dark');
+      // Also apply to the root element for complete coverage
+      document.documentElement.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+      document.body.classList.remove('bm-dashboard-dark');
+      document.documentElement.classList.remove('dark-mode');
+    }
+
+    // Cleanup function to remove classes when component unmounts
+    return () => {
+      document.body.classList.remove('dark-mode');
+      document.body.classList.remove('bm-dashboard-dark');
+      document.documentElement.classList.remove('dark-mode');
+    };
+  }, [darkMode]);
+
+  // This component doesn't render anything visible
+  return null;
+};
+
+export default ThemeManager;
diff --git a/src/routes.jsx b/src/routes.jsx
index 3591508289..7918057b61 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -2,7 +2,6 @@ import { lazy } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import ApplicantsChart from './components/ApplicantsChart';
 import AutoUpdate from './components/AutoUpdate';
 import TaskEditSuggestions from './components/TaskEditSuggestions/TaskEditSuggestions';
 import RoutePermissions from './utils/routePermissions';
@@ -22,7 +21,7 @@ import UserProfileEdit from './components/UserProfile/UserProfileEdit';
 import EditableInfoModal from './components/UserProfile/EditableModal/EditableInfoModal';
 import RoleInfoCollections from './components/UserProfile/EditableModal/RoleInfoModal';
 import PRDashboard from './components/PRDashboard';
-import ApplicantsAgeChart from './components/ApplicantsChart';
+import ApplicantsChart from './components/ApplicantsChart';
 import ApplicationTimeChartPage from './components/ApplicationTimeChart';
 import ApplicationAnalyticsContainer from './components/ApplicationAnalytics';
 import UserSkillsProfile from './components/HGNSkillsDashboard/SkillsProfilePage/components/UserSkillsProfile';