diff --git a/index.html b/index.html
index b667b341..99a5dd48 100644
--- a/index.html
+++ b/index.html
@@ -113,19 +113,22 @@ <h2>Loading<span class="dots"></span></h2>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                 <li class="nav-item">
-                    <a class="nav-link" aria-current="page" href="#top">Home</a>
+                    <a class="nav-link" aria-current="page" href="#top"><i class="fa-solid fa-house"></i>Home</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="#challengeSection">Challenges</a>
+                            <a class="nav-link" href="#challengeSection"><i class="fas fa-tasks"></i>
+Challenges</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
+                            <a class="nav-link" href="#leaderboardSection"><i class="fas fa-trophy"></i>
+Leaderboard</a>
+                           
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="#aboutSection">About</a>
+                            <a class="nav-link" href="#aboutSection"><i class="fas fa-info-circle"></i>About</a>
                         </li>
                         <li class="nav-item">
-                    <a class="nav-link" href="#contactFooter">Contact</a>
+                    <a class="nav-link" href="#contactFooter"><i class="fa-solid fa-id-badge"></i>Contact</a>
                   </li>
                 </ul>
           </div>
diff --git a/styles.css b/styles.css
index 6128375c..c931eca4 100644
--- a/styles.css
+++ b/styles.css
@@ -112,7 +112,7 @@ body {
 
 /* Header Styles */
 .header {
-  background: #ffffff;
+  background: #000;
   border-bottom: 1px solid #e2e8f0;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   position: sticky;
@@ -137,7 +137,7 @@ body {
 }
 
 .header__nav {
-  display: flex;
+  display: flex;ss
 }
 
 .nav__list {
diff --git a/styles/main.css b/styles/main.css
index cfbf1794..35e90b28 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -20,18 +20,17 @@ html {
 .navbar-brand {
   font-size: 2.1rem;
   font-weight: 900;
-  color: #2563eb;
+  color: #2575fc;
 }
 
 .navbar-brand,.nav-link:hover {   /*========added for issue #605========*/
-  color: #2563eb;
+  color: #0000ff;
   nav {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1000;
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(243, 238, 238, 0.1);
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
   }
 
@@ -42,18 +41,20 @@ html {
     justify-content: flex-end;
     align-items: center;
     gap: 1rem;
+    background-color: #ffffff;
   }
   .nav .container,
   .navbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    background-color: #ffff;
   }
 
   .container .navbar-brand {
     font-size: 2.1rem;
     font-weight: 900;
-    color: #2563eb;
+    color: blue;
     text-shadow: 2px 2px 5px rgba(37, 99, 235, 0.5),
       2px 2px 8px rgba(0, 0, 0, 0.3), 1px 1px 3px rgba(255, 255, 255, 0.6);
     display: inline-block;
@@ -83,11 +84,11 @@ html {
   /* added gap in nav links */
   .navbar-nav {
     display: flex;
-    gap: 1rem;
+    gap: 1.5rem;
   }
   /* added shadow box and hover effact in nav-links */
   .nav-item a {
-    color: #1e2c44;
+    color: black;
     /* adding box hover effact */
     text-decoration: none;
     font-weight: 700;
@@ -101,12 +102,12 @@ html {
     background: linear-gradient(90deg, #1e2c44 40%, #2563eb 100%);
     border-color: #2563eb;
     transform: translateY(-2px) scale(1.02);
-    box-shadow: 0 8px 20px rgba(33, 136, 56, 0.4);
+    box-shadow: 0 8px 20px rgba(15, 15, 15, 0.4);
     color: white;
     font-size: 1.1rem;
 
     .nav-item a {
-      color: #1e2c44;
+      color: black;
       text-decoration: none;
       font-weight: 700;
       font-size: 1rem;
@@ -199,7 +200,7 @@ html {
     /* ================== Hero Styles Start Here ================== */
     .heroSection {
       margin-top: 56px;
-      background-color: #f8fafc;
+      background-color: #ffffff;
       padding: 2rem 0;
     }
 
@@ -309,7 +310,7 @@ html {
       text-align: center;
       padding: 7px 60px !important;
       border-radius: 40px !important;
-      background: white !important;
+      background:white !important;
       color: #2563eb !important;
       border: 1px solid #2563eb !important;
       transition: all 0.3s ease-in-out;
diff --git a/styles/themes.css b/styles/themes.css
index 99494d5a..ca072fba 100644
--- a/styles/themes.css
+++ b/styles/themes.css
@@ -1,14 +1,14 @@
 :root {
     --bg-color: #ffffff;
-    --text-color: #000000;
-    --header-bg: #f0f0f0;
+    --text-color: #0000;
+    --header-bg: #fff;
     --card-bg: #ffffff;
   }
   
   [data-theme="dark"] {
     --bg-color: #121212;
     --text-color: #f1f1f1;
-    --header-bg: #1e1e1e;
+    --header-bg: #ffff;
     --card-bg: #232323;
   } 
   
@@ -40,7 +40,7 @@
   
   /* #theme-toggle:hover {
     background-color: var(--text-color);
-    color: var(--bg-color);
+    color: var(--bg-color);s
   } */
 
   #theme-toggle:focus {