diff --git a/src/App.css b/src/App.css
index c695958f9b..51acf7c7d5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -109,6 +109,10 @@ body {
   background-color: #3A506B !important;
 }
 
+.bg-yinmn-blue-light{
+  background-color:#2f4157;
+}
+
 .bg-azure{
   background-color: #007BFF !important;
 }
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 30d4ee6bcc..9329ac62d7 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -58,6 +58,11 @@
   align-items: center;
 }
 
+.dropdown-item-hover:hover{
+  background-color: #2f4157 !important;
+  color: white;
+}
+
 @media (max-width: 1400px) {
   .nav-links{
     flex-direction: column !important;
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 61a48745ce..97b9ded9f7 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -263,6 +263,8 @@ export function Header(props) {
     }
   }, [lastDismissed, userId, userDashboardProfile]);
 
+  const fontColor = darkMode ? 'text-light dropdown-item-hover' : '';
+
   return (
     <div className="header-wrapper">
       <Navbar className="py-3 navbar" color="dark" dark expand="md">
@@ -311,18 +313,18 @@ export function Header(props) {
                     <DropdownToggle nav caret>
                       <span className="dashboard-text-link">{REPORTS}</span>
                     </DropdownToggle>
-                    <DropdownMenu>
+                    <DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
                       {canGetReports &&
-                        <DropdownItem tag={Link} to="/reports">
+                        <DropdownItem tag={Link} to="/reports" className={`${fontColor}`}>
                           {REPORTS}
                         </DropdownItem>
                       }
                       {canGetWeeklySummaries &&
-                        <DropdownItem tag={Link} to="/weeklysummariesreport">
+                        <DropdownItem tag={Link} to="/weeklysummariesreport" className={fontColor}>
                           {WEEKLY_SUMMARIES_REPORT}
                         </DropdownItem>
                       }
-                      <DropdownItem tag={Link} to="/teamlocations">
+                      <DropdownItem tag={Link} to="/teamlocations" className={fontColor}>
                         {TEAM_LOCATIONS}
                       </DropdownItem>
                     </DropdownMenu>
@@ -354,40 +356,40 @@ export function Header(props) {
                       <DropdownToggle nav caret>
                         <span className="dashboard-text-link">{OTHER_LINKS}</span>
                       </DropdownToggle>
-                      <DropdownMenu>
+                      <DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
                         {canAccessUserManagement ? (
-                          <DropdownItem tag={Link} to="/usermanagement">
+                          <DropdownItem tag={Link} to="/usermanagement" className={fontColor}>
                             {USER_MANAGEMENT}
                           </DropdownItem>
                         ) : (
                           <React.Fragment></React.Fragment>
                         )}
                         {canAccessBadgeManagement ? (
-                          <DropdownItem tag={Link} to="/badgemanagement">
+                          <DropdownItem tag={Link} to="/badgemanagement" className={fontColor}>
                             {BADGE_MANAGEMENT}
                           </DropdownItem>
                         ) : (
                           <React.Fragment></React.Fragment>
                         )}
                         {(canAccessProjects) && (
-                          <DropdownItem tag={Link} to="/projects">
+                          <DropdownItem tag={Link} to="/projects" className={fontColor}>
                             {PROJECTS}
                           </DropdownItem>
                         )}
                         {(canAccessTeams) && (
-                          <DropdownItem tag={Link} to="/teams">
+                          <DropdownItem tag={Link} to="/teams" className={fontColor}>
                             {TEAMS}
                           </DropdownItem>
                         )}
                         {(canAccessPermissionsManagement) && (
-                          <DropdownItem tag={Link} to="/announcements">
+                          <DropdownItem tag={Link} to="/announcements" className={fontColor}>
                             {SEND_EMAILS}
                           </DropdownItem>
                         )}
                         {canAccessPermissionsManagement && (
                           <>
                             <DropdownItem divider />
-                            <DropdownItem tag={Link} to="/permissionsmanagement">
+                            <DropdownItem tag={Link} to="/permissionsmanagement" className={fontColor}>
                               {PERMISSIONS_MANAGEMENT}
                             </DropdownItem>
                           </>
@@ -411,19 +413,19 @@ export function Header(props) {
                       {WELCOME}, {firstName}
                     </span>
                   </DropdownToggle>
-                  <DropdownMenu>
-                    <DropdownItem header>Hello {firstName}</DropdownItem>
+                  <DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
+                    <DropdownItem header className={darkMode ? 'text-light' : ''}>Hello {firstName}</DropdownItem>
                     <DropdownItem divider />
-                    <DropdownItem tag={Link} to={`/userprofile/${displayUserId}`}>
+                    <DropdownItem tag={Link} to={`/userprofile/${displayUserId}`} className={fontColor}>
                       {VIEW_PROFILE}
                     </DropdownItem>
                     {!cantUpdateDevAdminDetails(props.userProfile.email, props.userProfile.email) && (
-                      <DropdownItem tag={Link} to={`/updatepassword/${displayUserId}`}>
+                      <DropdownItem tag={Link} to={`/updatepassword/${displayUserId}`} className={fontColor}>
                         {UPDATE_PASSWORD}
                       </DropdownItem>
                     )}
                     <DropdownItem divider />
-                    <DropdownItem onClick={openModal}>{LOGOUT}</DropdownItem>
+                    <DropdownItem onClick={openModal} className={fontColor}>{LOGOUT}</DropdownItem>
                   </DropdownMenu>
                 </UncontrolledDropdown>
               </div>
diff --git a/src/components/Projects/Project/Project.jsx b/src/components/Projects/Project/Project.jsx
index 7312700a5b..70d1742502 100644
--- a/src/components/Projects/Project/Project.jsx
+++ b/src/components/Projects/Project/Project.jsx
@@ -66,7 +66,7 @@ const Project = props => {
             onChange={e => {
               setCategory(e.target.value);
             }}
-            className={darkMode ? 'bg-yinmn-blue border-primary text-light' : ''}
+            className={darkMode ? 'border-primary' : ''}
           >
             <option default value="Unspecified">Unspecified</option>
             <option value="Food">Food</option>