diff --git a/index.html b/index.html
index 09d607df..fb60b518 100644
--- a/index.html
+++ b/index.html
@@ -46,15 +46,26 @@
 <link rel="stylesheet" href="styles/owl.carousel.min.css" />
 <link rel="stylesheet" href="styles/owl.theme.default.min.css" />
 <link rel="stylesheet" href="styles/fontawesome.css" />
-
-<!-- Custom CSS -->
+<!-- Custom CSS & External Libraries -->
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
 />
+<!-- Global / Main Styles -->
 <link rel="stylesheet" href="styles/main.css" />
+<link rel="stylesheet" href="./styles.css" />
+
+<!-- External Libraries -->
 <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
+<!-- Optional: Challenge-specific styles -->
+<!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
+
+<!-- === SMART PROGRESS DASHBOARD FEATURE START === -->
+<link rel="stylesheet" href="./styles/progress-dashboard.css" />
+<!-- === SMART PROGRESS DASHBOARD FEATURE END === -->
+
+<!-- Inline custom tweaks -->
 <style>
   .icon-container {
     display: flex;
@@ -62,9 +73,9 @@
     margin: 8px 0;
     font-size: 24px;
   }
-  .icon-container i {
-    transition: transform 0.2s ease;
-  }
+.icon-container i {
+  transition: transform 0.2s ease;
+}
   .icon-container i:hover {
     transform: scale(1.2);
   }
diff --git a/styles/main.css b/styles/main.css
index b301c5f2..903fa5e3 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -421,6 +421,13 @@ nav {
   font-weight: 700;
 }
 
+.secHeader {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
+  color: #131212b1;
+}
+
 #leaderboardSection p {
   font-size: 1rem;
   color: #374151;
@@ -450,6 +457,14 @@ nav {
   box-shadow: 0 14px 32px rgba(0,0,0,0.18);
 }
 
+.leaderboard-Para {
+  text-align: center;
+  opacity: 0.8;
+  color: #131212b1;
+  width: 50%;
+  font-size: 1.2rem;
+}
+
 /* ===== Rows ===== */
 .leaderboard-row {
   display: flex;