diff --git a/public/index.css b/public/index.css
index 04756f7f6f..b9729fbeac 100644
--- a/public/index.css
+++ b/public/index.css
@@ -16,7 +16,7 @@ body.bm-dashboard-dark #root {
 /* Enhanced text visibility for dark mode */
 body.dark-mode *,
 body.bm-dashboard-dark * {
-  color: #ffffff !important;
+  color: #ffffff;
 }
 
 body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
@@ -31,7 +31,7 @@ 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;
+  color: #ffffff;
 }
 
 body.dark-mode .text-muted,
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index f20e0eacbf..b2f1868c2c 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -176,7 +176,7 @@ function LeaderBoard({
 
   useEffect(() => {
     const checkAbbreviatedView = () => {
-      const isAbbrev = window.innerWidth < window.screen.width * 0.75;
+      const isAbbrev = window.innerWidth < 1300;
       setIsAbbreviatedView(isAbbrev);
     };
 
@@ -674,7 +674,10 @@ function LeaderBoard({
               </div>
             </Alert>
           )}
-          <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y mb-5">
+          <div
+            id="leaderboard"
+            className={`${styles['my-custom-scrollbar']} ${styles['table-wrapper-scroll-y']} mb-5`}
+          >
             <div className="search-container mx-1">
               <input
                 className={`form-control col-12 mb-2 ${
@@ -688,12 +691,11 @@ function LeaderBoard({
             </div>
             <Table
               data-testid="dark-mode-table"
-              className={`leaderboard table-fixed ${
+              className={`${styles.leaderboard} ${styles['table-fixed']} ${
                 darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
-              } ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
-              style={{ minWidth: '500px' }}
+              } ${isAbbreviatedView ? styles['abbreviated-mode'] : ''}`}
             >
-              <thead className="responsive-font-size">
+              <thead className={styles['responsive-font-size']}>
                 <tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>
                   <th style={darkModeStyle}>
                     <span>{isAbbreviatedView ? 'Stat.' : 'Status'}</span>
@@ -743,11 +745,17 @@ function LeaderBoard({
                   </th>
                 </tr>
               </thead>
-              <tbody className="my-custome-scrollbar responsive-font-size">
-                <tr className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}>
+              <tbody
+                className={`${styles['my-custom-scrollbar']} ${styles['responsive-font-size']}`}
+              >
+                <tr
+                  className={
+                    darkMode ? styles['dark-leaderboard-row'] : styles['light-leaderboard-row']
+                  }
+                >
                   {isAbbreviatedView ? (
                     <td colSpan={2}>
-                      <div className="leaderboard-totals-container text-center">
+                      <div className={`${styles['leaderboard-totals-container']} text-center`}>
                         <span>{stateOrganizationData.name}</span>
                         {viewZeroHouraMembers(loggedInUser.role) && (
                           <span className="leaderboard-totals-title">
@@ -761,10 +769,10 @@ function LeaderBoard({
                   ) : (
                     <>
                       <td aria-label="Placeholder" />
-                      <td className="leaderboard-totals-container">
+                      <td className={`${styles['leaderboard-totals-container']}`}>
                         <span>{stateOrganizationData.name}</span>
                         {viewZeroHouraMembers(loggedInUser.role) && (
-                          <span className="leaderboard-totals-title">
+                          <span className={`${styles['leaderboard-totals-title']}`}>
                             0 hrs Totals:{' '}
                             {filteredUsers.filter(user => user.weeklycommittedHours === 0).length}{' '}
                             Members
@@ -798,7 +806,7 @@ function LeaderBoard({
                       color="primary"
                     />
                   </td>
-                  <td className="align-middle">
+                  <td className="align-middle" colSpan={2}>
                     <span title="Tangible + Intangible time = Total time">
                       {filteredUsers
                         .reduce((total, user) => total + parseFloat(user.totaltime), 0)
@@ -809,7 +817,6 @@ function LeaderBoard({
                         .toFixed(2)}
                     </span>
                   </td>
-                  <td aria-label="Placeholder" />
                 </tr>
                 {filteredUsers.map(item => {
                   const { hasTimeOff, isCurrentlyOff, additionalWeeks } = getTimeOffStatus(
@@ -823,7 +830,9 @@ function LeaderBoard({
                   return (
                     <tr
                       key={item.personId}
-                      className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}
+                      className={
+                        darkMode ? styles['dark-leaderboard-row'] : styles['light-leaderboard-row']
+                      }
                     >
                       <td className="align-middle">
                         <div>
@@ -942,7 +951,7 @@ function LeaderBoard({
                               ((isAllowedOtherThanOwner || isOwner || item.personId === userId) &&
                                 userOnTimeOff[item.personId]?.isInTimeOff === true)
                                 ? `${darkMode ? '#9499a4' : 'rgba(128, 128, 128, 0.5)'}` // Gray out the name if on time off
-                                : '#007BFF', // Default color
+                                : `${darkMode ? '#48edff' : '#007BFF'}`, // Default color
                           }}
                         >
                           {item.name}
@@ -1072,7 +1081,11 @@ function LeaderBoard({
                           title={mouseoverTextValue}
                           id="Total time"
                           className={
-                            item.totalintangibletime_hrs > 0 ? 'leaderboard-totals-title' : null
+                            item.totalintangibletime_hrs > 0
+                              ? darkMode
+                                ? styles['leaderboard-totals-title-dark']
+                                : styles['leaderboard-totals-title']
+                              : null
                           }
                         >
                           {item.totaltime}
diff --git a/src/components/LeaderBoard/Leaderboard.module.css b/src/components/LeaderBoard/Leaderboard.module.css
index 7188bf03b7..e53aad67fb 100644
--- a/src/components/LeaderBoard/Leaderboard.module.css
+++ b/src/components/LeaderBoard/Leaderboard.module.css
@@ -52,6 +52,7 @@
 @media (max-width: 544px) {
   .leaderboard {
     font-size: 0.7rem;
+    min-width: 400px;
   } /*1rem = 16px*/
 
   .my-custom-scrollbar {
@@ -67,6 +68,10 @@
     border-top-style: solid;
     border-top-color: rgb(222, 226, 230);
   }
+
+  .responsive-font-size {
+    font-size: 0.75rem !important;
+  }
 }
 .row {
   width: 97%;
@@ -94,7 +99,12 @@
 }
 
 .leaderboard-totals-title {
-  color: #339cff;
+  color: #339cff !important;
+  font-weight: bold;
+}
+
+.leaderboard-totals-title-dark {
+  color: #48edff !important;
   font-weight: bold;
 }
 
@@ -103,20 +113,16 @@
   flex-direction: column;
 }
 
-@media screen and (max-width: 544px) {
+@media (max-width: 1300px) {
+  .leaderboard thead th {
+    font-size: 0.75rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0.5rem 0.3rem;
+    vertical-align: middle;
+  }
   .responsive-font-size {
     font-size: 0.75rem !important;
   }
-}
-
-
-.leaderboard.abbreviated-mode thead th {
-  font-size: 0.75rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 120px;
-  min-width: 70px;
-  padding: 0.5rem 0.3rem;
-  vertical-align: middle;
 }
\ No newline at end of file
diff --git a/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx b/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
index 5529f485d1..252a32037a 100644
--- a/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
+++ b/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
@@ -139,7 +139,7 @@ describe('Leaderboard page structure', () => {
 
   it('displays correct Total Time label and value', () => {
     renderWithProvider(<Leaderboard {...props} />);
-    const header = screen.getByText('Total Time');
+    const header = screen.getByText(content => content === 'Total Time' || content === 'Tot. Time');
     expect(header).toBeInTheDocument();
 
     const timeValue = screen.getByTitle('Tangible + Intangible time = Total time');
diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
index f251ca71e8..44f559b3bb 100644
--- a/src/components/TeamMemberTasks/TeamMemberTask.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTask.jsx
@@ -380,7 +380,7 @@ const TeamMemberTask = React.memo(
                                     moment(user.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                                   )
                                     ? 'rgba(128, 128, 128, 0.5)'
-                                    : darkMode && '#339CFF',
+                                    : darkMode && '#48edff',
                                 fontSize: '20px',
                               }}
                             >{`${user.name}`}</Link>
diff --git a/src/components/TeamMemberTasks/style.module.css b/src/components/TeamMemberTasks/style.module.css
index c2b6e7224f..07ec02baf3 100644
--- a/src/components/TeamMemberTasks/style.module.css
+++ b/src/components/TeamMemberTasks/style.module.css
@@ -243,7 +243,7 @@
 }
 
 .dashboard-team-clocks {
-  color: #339CFF !important;
+  color: #48edff !important;
 }
 
 .team-clocks-header {