diff --git a/index.html b/index.html
index b667b34..7521933 100644
--- a/index.html
+++ b/index.html
@@ -5,685 +5,1348 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CodeClip</title>
 
-    <!-- ================ Favicon ================  -->
-    <link
-      rel="shortcut icon"
-      href="assets/favicon/codeClip-favicon.png"
-      type="image/png"
-    />
-
-    <!-- ================ Meta Tags ================  -->
-    <meta
-      name="keywords"
-      content="CodeClip, Coding Challenges, Open Source, GSSoC, Frontend Practice, JavaScript Logics, GitHub Contributions, Web Development Tasks"
-    />
-    <meta
-      name="description"
-      content="CodeClip is a browser-based platform where developers solve real-world coding challenges, practice frontend and logic tasks, and contribute to open source. Proudly built for GSSoC 2025."
-    />
-    <meta name="robots" content="index, follow" />
-
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="CodeClip - Code, Run & Contribute" />
-    <meta
-      property="og:description"
-      content="Solve coding challenges, contribute to open source, and climb the leaderboard on CodeClip. A GSSoC 2025 project for developers."
-    />
-
-    <meta
-      property="twitter:title"
-      content="CodeClip - Code, Run & Contribute"
-    />
-    <meta
-      property="twitter:description"
-      content="Solve coding challenges, contribute to open source, and climb the leaderboard on CodeClip. A GSSoC 2025 project for developers."
-    />
-
-    <!-- ================ Vendor CSS ================  -->
-
-<!-- ================ Vendor CSS ================ -->
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-<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 & 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;
-    gap: 6px;
-    margin: 8px 0;
-    font-size: 24px;
-  }
-.icon-container i {
-  transition: transform 0.2s ease;
-}
-  .icon-container i:hover {
-    transform: scale(1.2);
-  }
-  .navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-</style>
+    <!-- ================ Vendor CSS ================ -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
+    <style>
+      :root {
+        --primary-color: #0d6efd;
+        --secondary-color: #00bfff;
+        --dark-bg: #121212;
+        --dark-card: #1e1e1e;
+        --dark-text: #e0e0e0;
+        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      html {
+        scroll-behavior: smooth;
+      }
+
+      body {
+        transition: var(--transition);
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+
+      /* Loading Screen */
+      #loading-screen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        transition: opacity 0.5s ease;
+      }
+
+      #loading-screen.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .loader i {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        animation: spin 1.5s linear infinite;
+        color: white;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      /* Navbar */
+      .navbar {
+        background-color: white !important;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.1);
+        transition: var(--transition);
+        backdrop-filter: blur(10px);
+      }
+
+      .navbar-brand {
+        font-weight: bold;
+        font-size: 1.5rem;
+      }
+
+      .navbar-nav .nav-link {
+        position: relative;
+        font-weight: 500;
+        margin: 0 12px;
+        transition: var(--transition);
+        color: rgba(0, 0, 0, 0.8) !important;
+        padding: 8px 16px !important;
+        border-radius: 25px;
+      }
+
+      .navbar-nav .nav-link::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        border-radius: 25px;
+        opacity: 0;
+        transition: var(--transition);
+        z-index: -1;
+      }
+
+      .navbar-nav .nav-link:hover::before,
+      .navbar-nav .nav-link.active::before {
+        opacity: 1;
+      }
+
+      .navbar-nav .nav-link:hover,
+      .navbar-nav .nav-link.active {
+        color: white !important;
+        transform: translateY(-2px);
+      }
+
+      /* Beautiful Dark Mode Toggle */
+      .dark-mode-toggle {
+        margin-left: 1.5rem;
+      }
+
+      .toggle-wrapper {
+        position: relative;
+        display: inline-block;
+      }
+
+      .toggle-input {
+        display: none;
+      }
+
+      .toggle-slider {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 70px;
+        height: 35px;
+        background: linear-gradient(145deg, #667eea, #764ba2);
+        border-radius: 50px;
+        cursor: pointer;
+        transition: var(--transition);
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        overflow: hidden;
+      }
+
+      .toggle-slider::before {
+        content: '';
+        position: absolute;
+        left: 3px;
+        width: 29px;
+        height: 29px;
+        background: white;
+        border-radius: 50%;
+        transition: var(--transition);
+        z-index: 2;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      }
+
+      .toggle-icons {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        z-index: 1;
+      }
+
+      .toggle-icons i {
+        color: white;
+        font-size: 14px;
+        transition: var(--transition);
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+      }
+
+      .toggle-icons .sun { opacity: 1; }
+      .toggle-icons .moon { opacity: 0; }
+
+      .toggle-input:checked + .toggle-slider {
+        background: linear-gradient(145deg, #2c3e50, #3498db);
+      }
+
+      .toggle-input:checked + .toggle-slider::before {
+        transform: translateX(35px);
+        background: #ffd700;
+      }
+
+      .toggle-input:checked + .toggle-slider .sun { opacity: 0; }
+      .toggle-input:checked + .toggle-slider .moon { opacity: 1; }
+
+      /* Scroll Progress Bar */
+      .scroll-progress {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 3px;
+        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+        z-index: 1000;
+        transition: width 0.1s ease;
+      }
+
+      /* Scroll Buttons */
+      .scroll-buttons {
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        z-index: 100;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .scroll-btn {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: var(--transition);
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      .scroll-btn.show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .scroll-btn:hover {
+        transform: translateY(-3px) scale(1.1);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+      }
+
+      .scroll-btn i {
+        font-size: 1.2rem;
+      }
+
+      /* Hero Section */
+      .heroSection {
+        padding: 140px 0 100px;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .heroSection::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        right: -50%;
+        width: 100%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, transparent 70%);
+        animation: float 6s ease-in-out infinite;
+      }
+
+      @keyframes float {
+        0%, 100% { transform: translateY(0px) rotate(0deg); }
+        50% { transform: translateY(-20px) rotate(180deg); }
+      }
+
+      .heroSection h1 {
+        font-size: 3.5rem;
+        font-weight: 800;
+        margin-bottom: 1.5rem;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .blueCol {
+        color: transparent;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        -webkit-background-clip: text;
+        background-clip: text;
+      }
+
+      .heroDescription {
+        font-size: 1.1rem;
+        line-height: 1.7;
+        margin-bottom: 2rem;
+      }
+
+      .ctaBtn-Container {
+        display: flex;
+        gap: 1.5rem;
+        flex-wrap: wrap;
+      }
+
+      .heroSectionBtn {
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        border: none;
+        padding: 14px 30px;
+        border-radius: 50px;
+        font-weight: 600;
+        transition: var(--transition);
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+      }
+
+      .heroSectionBtn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+        transition: left 0.5s;
+      }
+
+      .heroSectionBtn:hover::before {
+        left: 100%;
+      }
+
+      .heroSectionBtn:hover {
+        transform: translateY(-5px) scale(1.05);
+        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+      }
+
+      /* Card Styles */
+      .icon-container {
+        display: flex;
+        gap: 6px;
+        margin: 8px 0;
+        font-size: 24px;
+      }
+
+      .icon-container i {
+        transition: transform 0.2s ease;
+      }
+
+      .icon-container i:hover {
+        transform: scale(1.2);
+      }
+
+      /* Section spacing */
+      #challengeSection {
+        padding: 2rem 0;
+      }
+
+      /* Bootstrap row gap fix */
+      .challengeContainer {
+        row-gap: 1.5rem;
+      }
+
+      /* Card styles */
+      .challengeContainer .card {
+        box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
+        border: none;
+        border-radius: 15px;
+        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        height: 100%;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        cursor: pointer;
+      }
+
+      /* Card hover */
+      .challengeContainer .card:hover {
+        transform: translateY(-3px) scale(1.01);
+        box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
+      }
+
+      /* Card top container */
+      .card-TopContainer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      /* Header */
+      .card-Header {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 0;
+        flex: 1 1 auto;
+        min-width: 120px;
+      }
+
+      /* Difficulty badge */
+      .card-Level {
+        font-size: 12px;
+        padding: 4px 20px;
+        border-radius: 17px;
+        font-weight: 700;
+        margin: 0 7px 0 0;
+        white-space: nowrap;
+      }
+
+      .medium-Col {
+        background-color: #fff3cd;
+        color: #a88825;
+      }
+
+      .hard-Col {
+        background-color: #f8d7da;
+        color: #7d1c1c;
+      }
+
+      /* Participation info */
+      .card-Participate {
+        font-size: 13px;
+        color: #666;
+        margin: 6px 0;
+        opacity: 0.9;
+        line-height: 1.4;
+      }
+
+      /* Description text */
+      .card-Text {
+        font-size: 14px;
+        opacity: 0.85;
+        text-align: justify;
+        line-height: 1.6;
+        hyphens: auto;
+      }
+
+      /* Button */
+      .card-CTAButton {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .card-Btn {
+        text-decoration: none;
+        font-size: 13px;
+        padding: 8px 28px;
+        border-radius: 5px;
+        background-color: #2563eb;
+        color: white;
+        font-weight: 700;
+        transition: all 0.2s ease-in-out;
+        display: inline-block;
+      }
+
+      .card-Btn:hover {
+        background-color: #1d4ed8;
+        box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
+        color: white;
+        text-decoration: none;
+      }
+
+      /* Leaderboard Section */
+      .leaderboard-wrapper {
+        padding: 100px 0;
+        background: #f8f9fa;
+      }
+
+      .leaderboard-list {
+        max-width: 700px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 25px;
+        padding: 40px;
+        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .leaderboard-list::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 8px;
+        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      }
+
+      .leaderboard-list h2 {
+        text-align: center;
+        margin-bottom: 1.5rem;
+        font-size: 2.2rem;
+        font-weight: 700;
+      }
+
+      .highlight {
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .leaderboard-list p {
+        text-align: center;
+        margin-bottom: 2.5rem;
+        color: #6c757d;
+        font-size: 1.1rem;
+      }
+
+      .leaderboard-row {
+        display: flex;
+        align-items: center;
+        padding: 18px 20px;
+        border-radius: 15px;
+        margin-bottom: 12px;
+        transition: var(--transition);
+        background: #f8f9fa;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .leaderboard-row::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 0;
+        background: linear-gradient(90deg, rgba(102,126,234,0.1), transparent);
+        transition: var(--transition);
+      }
+
+      .leaderboard-row:hover::before {
+        width: 100%;
+      }
+
+      .leaderboard-row:hover {
+        transform: translateX(10px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      }
+
+      .rank-1, .rank-2, .rank-3, .rank-4 {
+        background: linear-gradient(135deg, #fff9e6, #ffffff);
+        border: 2px solid #ffd700;
+      }
+
+      .rank-2 { border-color: #c0c0c0; }
+      .rank-3 { border-color: #cd7f32; }
+      .rank-4 { border-color:chocolate  ; }
+
+      .rank {
+        font-weight: 800;
+        width: 50px;
+        font-size: 1.2rem;
+        color: var(--primary-color);
+      }
+
+      .leaderboard-Img {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        margin: 0 20px;
+        border: 3px solid var(--primary-color);
+        transition: var(--transition);
+      }
+
+      .leaderboard-row:hover .leaderboard-Img {
+        transform: scale(1.1) rotate(5deg);
+      }
+
+      .userName {
+        flex: 1;
+        font-weight: 600;
+        font-size: 1.1rem;
+      }
+
+      .points {
+        font-weight: 700;
+        color: var(--primary-color);
+        font-size: 1.1rem;
+      }     
+             /* Add leaderboard CSS section */
+      .leaderboard-row:last-child {
+      background: #f8f9fa;
+      border: 2px solid transparent;
+      transition: var(--transition);
+      }
+
+      .leaderboard-row:last-child:hover {
+      transform: translateX(10px);
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      }
+
+      /* About Section */
+      #aboutSection {
+        padding: 80px 0;
+      }
+
+      .secHeader {
+        font-size: 2.5rem;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 3rem;
+      }
+
+      .secHeader span {
+        color: var(--primary-color);
+      }
+
+      .aboutContainer p {
+        font-size: 1.1rem;
+        line-height: 1.7;
+        margin-bottom: 2rem;
+      }
+
+      .aboutCTA-Btn {
+        display: inline-block;
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        text-decoration: none;
+        font-weight: 600;
+        padding: 12px 30px;
+        border-radius: 30px;
+        transition: all 0.3s ease;
+      }
+
+      .aboutCTA-Btn:hover {
+        background: linear-gradient(45deg, #0056b3, #0099cc);
+        transform: translateY(-3px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        color: white;
+        text-decoration: none;
+      }
+
+      /* Footer */
+      footer {
+        background: #f8f9fa;
+        padding: 50px 0 20px;
+      }
+
+      .footer-logo-col .navbar-brand {
+        font-size: 1.8rem;
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      .footer-desc {
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .footer-title {
+        font-weight: 600;
+        margin-bottom: 1.5rem;
+        text-align: center;
+      }
+
+      .footer-contact-btn {
+        width: 100%;
+        max-width: 250px;
+        margin-bottom: 1rem;
+      }
+
+      .footerNote {
+        color: #6c757d;
+        padding-top: 20px;
+      }
+    
+      /* Dark Mode Styles */
+      body.dark-mode {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+      }
+
+      body.dark-mode .navbar {
+        background-color: #1a1a1a !important;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.5);
+      }
+
+      body.dark-mode .navbar-nav .nav-link {
+        color: var(--dark-text) !important;
+      }
+
+      body.dark-mode .navbar-nav .nav-link:hover,
+      body.dark-mode .navbar-nav .nav-link.active {
+        color: white !important;
+      }
+
+      body.dark-mode .heroSection {
+        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+      }
+
+      body.dark-mode .card {
+        background-color: var(--dark-card);
+        color: var(--dark-text);
+        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
+      }
+
+      body.dark-mode .card-Header {
+        color: var(--secondary-color);
+      }
+
+      body.dark-mode .medium-Col {
+        background-color: #3a2e05;
+        color: #ffd54f;
+      }
+
+      body.dark-mode .hard-Col {
+        background-color: #3a0a0a;
+        color: #ff8a8a;
+      }
+
+      body.dark-mode .card-Participate {
+        color: #aaa;
+      }
+
+      body.dark-mode .leaderboard-wrapper {
+        background: var(--dark-bg);
+      }
+
+      body.dark-mode .leaderboard-list {
+        background: var(--dark-card);
+        color: var(--dark-text);
+      }
+
+      body.dark-mode .leaderboard-row {
+        background: #2a2a2a;
+      }
+
+      body.dark-mode .rank-1, 
+      body.dark-mode .rank-2, 
+      body.dark-mode .rank-3 {
+        background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
+      }
+
+      body.dark-mode #aboutSection {
+        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+      }
+
+      body.dark-mode footer {
+        background: #1f1f1f;
+        color: var(--dark-text);
+      }
+
+      body.dark-mode .footer-desc {
+        color: #aaa !important;
+      }
+
+      body.dark-mode .text-muted {
+        color: #aaa !important;
+      }
+
+      body.dark-mode .btn-primary {
+        background-color: #2563eb;
+        border-color: #2563eb;
+      }
+
+      body.dark-mode .btn-primary:hover {
+        background-color: #1d4ed8;
+        border-color: #1d4ed8;
+      }
+
+      body.dark-mode hr {
+        border-color: #444;
+      }
+      
+      body.dark-mode .navbar-brand {
+      color: var(--dark-text) !important;
+      }
+
+      body.dark-mode .navbar-brand span {
+      color: var(--secondary-color) !important;
+     }
+      /* Responsive */
+      @media (max-width: 768px) {
+        .heroSection h1 {
+          font-size: 2.5rem;
+        }
+        
+        .ctaBtn-Container {
+          flex-direction: column;
+        }
+        
+        .heroSectionBtn {
+          width: 100%;
+          margin-bottom: 10px;
+        }
+
+        .navbar-nav .nav-link {
+          margin: 5px 0;
+          text-align: center;
+        }
+
+        .dark-mode-toggle {
+          margin: 15px auto 0;
+          justify-content: center;
+        }
+
+        .scroll-buttons {
+          right: 15px;
+          bottom: 15px;
+        }
+        
+        .scroll-btn {
+          width: 45px;
+          height: 45px;
+        }
+      }
+    </style>
   </head>
 
   <body>
+    <!-- Scroll Progress Bar -->
+    <div class="scroll-progress"></div>
+
     <!-- Loading Screen -->
     <div id="loading-screen">
-        <div class="loader">
-            <i class="fa-solid fa-spinner"></i>
-            <h2>Loading<span class="dots"></span></h2>
+        <div class="loader text-center text-white">
+            <i class="fas fa-spinner"></i>
+            <h2>Loading your experience...</h2>
         </div>
     </div>
-    <a id="top"></a>  <!--added for issue 260 -->
-    <!-- ================================ Header Section Start Here ================================ -->
+
+    <!-- Header -->
     <header>
       <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
         <div class="container">
           <a class="navbar-brand" href="#top">Code<span>Clip</span></a>
-          <button
-            class="navbar-toggler"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                  aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
-          <!-- ================================ issue #605 Starts Here ================================ -->
-           <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>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#challengeSection">Challenges</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#aboutSection">About</a>
-                        </li>
-                        <li class="nav-item">
-                    <a class="nav-link" href="#contactFooter">Contact</a>
-                  </li>
-                </ul>
+          
+          <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" href="#top">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#challengeSection">Challenges</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#aboutSection">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#contactFooter">Contact</a>
+              </li>
+            </ul>
+            
+            <!-- Beautiful Dark Mode Toggle -->
+            <div class="dark-mode-toggle">
+              <div class="toggle-wrapper">
+                <input type="checkbox" class="toggle-input" id="darkModeToggle">
+                <label class="toggle-slider" for="darkModeToggle">
+                  <div class="toggle-icons">
+                    <i class="fas fa-sun sun"></i>
+                    <i class="fas fa-moon moon"></i>
+                  </div>
+                </label>
+              </div>
+            </div>
           </div>
-          <!-- ================================ issue #605 Ends Here ================================ -->
         </div>
       </nav>
     </header>
-    <!-- ================================ Header Section Start Here ================================ -->
- <main>
-    <!-- ================================ Hero Section Start Here ================================ -->
-    <section id="top" class="heroSection">
-      <div class="container">
-        <div class="row heroSection-Container">
-          <div class="col-12 col-md-6 heroSection-Left">
-            <div  data-aos="fade-right" data-aos-duration="650" class="gssocContainer shinning-effect">
-              <img 
+
+    <main>
+      <!-- Hero Section -->
+      <section id="top" class="heroSection">
+        <div class="container">
+          <div class="row align-items-center min-vh-100">
+            <div class="col-12 col-md-6">
+              <div class="gssocContainer mb-4">
+                  <img 
                 src="assets/images/hero-section/gssoc-log.png"
                 class="img-fluid gssoc-logo"
                 alt="gssoc logo"
               />
-              <p>GSSOC 2025</p>
-            </div>
+                <h4 class="text-primary fw-bold">GSSoC 2025</h4>
+              </div>
 
-            <h1 data-aos="fade-right" data-aos-duration="650">
-              Code Run <br />
-              <span class="blueCol">Contribute</span>
-            </h1>
-            <p data-aos="fade-right" data-aos-duration="650" class="heroDescription text-muted">
-              CodeClip is a lightweight, browser-based platform designed to make
-              coding practice simple, accessible, and collaborative. Whether
-              you're a beginner looking to sharpen your skills or an aspiring
-              contributor to open source, CodeClip offers a clean interface
-              where you can solve real-world coding challenges, run your code
-              live, and share your solutions — all without any setup, Built
-              entirely with HTML, CSS, and JavaScript, CodeClip is not just a
-              tool but a learning experience itself. It’s an open-source project
-              proudly developed as part of
-              <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at
-              empowering developers through hands-on practice and meaningful
-              contributions.
-            </p>
+              <h1 data-aos="fade-right" data-aos-duration="650">
+                Code Run <br />
+                <span class="blueCol">Contribute</span>
+              </h1>
+              <p class="heroDescription text-muted">
+                CodeClip is a lightweight, browser-based platform designed to make
+                coding practice simple, accessible, and collaborative. Whether
+                you're a beginner looking to sharpen your skills or an aspiring
+                contributor to open source, CodeClip offers a clean interface
+                where you can solve real-world coding challenges, run your code
+                live, and share your solutions — all without any setup.
+              </p>
 
-            <!-- ==== Do Changes According to requirements === -->
-            <div class="ctaBtn-Container">
-              <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn">
-                <i class="fa-solid fa-gear"></i> Code
-              </button>
-              <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn">
-                <i class="fa-solid fa-cloud"></i> Run
-              </button>
+              <div class="ctaBtn-Container">
+                <button class="btn heroSectionBtn">
+                  <i class="fas fa-code me-2"></i> Start Coding
+                </button>
+                <button class="btn heroSectionBtn">
+                  <i class="fas fa-rocket me-2"></i> Explore Challenges
+                </button>
+              </div>
             </div>
-          </div>
 
-          <div class="col-12 col-md-6 heroSection-Right d-none d-md-block">
-            <img  data-aos="zoom-in-left"
-              src="assets/images/hero-section/hero-Img.png"
-              class="img-fluid"
-              alt="hero section image"
-            />
+            <div class="col-12 col-md-6 d-none d-md-block text-center">
+              <img 
+                src="assets/images/hero-section/hero-Img.png"
+                class="img-fluid rounded-3 shadow-lg"
+                alt="CodeClip Hero Image"
+                data-aos="zoom-in"
+                data-aos-delay="300"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-    <!-- ================================ Hero Section End Here ================================ -->
+      </section>
 
-    <!-- ================================ Challenge Section Start Here ================================ -->
-    <section id="challengeSection">
-      <div class="container">
-        <div class="row challengeContainer">
-          <!-- ==== Card 1 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">Frontend Challenges</h5>
-                  <p class="card-Level medium-Col">EASY</p>
-                  <div class="icon-container">
-                    <i class="devicon-html5-plain colored" title="HTML5"></i>
-                    <i class="devicon-css3-plain colored" title="CSS3"></i>
-                    <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+      <!-- Challenge Section -->
+      <section id="challengeSection">
+        <div class="container">
+          <div class="row challengeContainer">
+            <!-- All 6 Cards -->
+            <!-- Card 1 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">Frontend Challenges</h5>
+                    <p class="card-Level medium-Col">EASY</p>
+                    <div class="icon-container">
+                      <i class="devicon-html5-plain colored" title="HTML5"></i>
+                      <i class="devicon-css3-plain colored" title="CSS3"></i>
+                      <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+                    </div>
                   </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 135 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Build real UI components using HTML, CSS, and JavaScript.
-                  These tasks help you improve your layout, styling,
-                  responsiveness, and interactivity,no frameworks, just clean
-                  frontend skills.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of frontend challenge and add link here === -->
-                  <a href="frontendChallenges.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 135 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Build real UI components using HTML, CSS, and JavaScript.
+                    These tasks help you improve your layout, styling,
+                    responsiveness, and interactivity.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="frontendChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- ==== Card 2 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">JavaScript Logics</h5>
-                  <p class="card-Level medium-Col">MEDIUM</p>
-                  <div class="icon-container">
-                    <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+            <!-- Card 2 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">JavaScript Logics</h5>
+                    <p class="card-Level medium-Col">MEDIUM</p>
+                    <div class="icon-container">
+                      <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+                    </div>
                   </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 189 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Master the core of JavaScript by solving logic-based problems
-                  that boost your thinking and problem-solving skills. Perfect
-                  for beginners and intermediates.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of javascript logics and add link here === -->
-                  <a href="jslogics.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 189 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Master the core of JavaScript by solving logic-based problems
+                    that boost your thinking and problem-solving skills.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="jslogics.html" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- ==== Card 3 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">Backend Basics</h5>
-                  <p class="card-Level hard-Col">HARD</p>
-                  <div class="icon-container">
-                    <i class="devicon-nodejs-plain colored" title="Node.js"></i>
-                    <i class="devicon-express-original colored" title="Express.js"></i>
+            <!-- Card 3 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">Backend Basics</h5>
+                    <p class="card-Level hard-Col">HARD</p>
+                    <div class="icon-container">
+                      <i class="devicon-nodejs-plain colored" title="Node.js"></i>
+                      <i class="devicon-express-original colored" title="Express.js"></i>
+                    </div>
                   </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 150 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Learn the fundamentals of backend development through simple
-                  tasks using APIs, data handling, and server-side logic. A
-                  great start for aspiring full-stack developers.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of backend bbasic and add link here === -->
-                  <a href="backendChallenges.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 150 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Learn the fundamentals of backend development through simple
+                    tasks using APIs, data handling, and server-side logic.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="backendChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- ==== Card 4 ==== -->
-          <div data-aos-duration="800" data-aos="fade-up" class="col-12 col-md-4">
-            <div class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">UI Design Tasks</h5>
-                  <p class="card-Level">EASY</p>
-                  <div class="icon-container">
-                    <i class="devicon-html5-plain colored" title="HTML5"></i>
-                    <i class="devicon-css3-plain colored" title="CSS3"></i>
+            <!-- Card 4 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">UI Design Tasks</h5>
+                    <p class="card-Level">EASY</p>
+                    <div class="icon-container">
+                      <i class="devicon-html5-plain colored" title="HTML5"></i>
+                      <i class="devicon-css3-plain colored" title="CSS3"></i>
+                    </div>
                   </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 120 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Practice building beautiful and functional UI components using
-                  HTML and CSS. Perfect for improving your design sense and
-                  layout skills.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of ui design challenge and add link here === -->
-                  <a href="uiChallenges.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 120 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Practice building beautiful and functional UI components using
+                    HTML and CSS. Perfect for improving your design sense and
+                    layout skills.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="uiChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- ==== Card 5 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">Open Source Challenges</h5>
-                  <p class="card-Level medium-Col">MEDIUM</p>
-                  <div class="icon-container">
-                    <i class="devicon-git-plain colored" title="Git"></i>
-                    <i class="devicon-github-original colored" title="GitHub"></i>
+            <!-- Card 5 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">Open Source Challenges</h5>
+                    <p class="card-Level medium-Col">MEDIUM</p>
+                    <div class="icon-container">
+                      <i class="devicon-git-plain colored" title="Git"></i>
+                      <i class="devicon-github-original colored" title="GitHub"></i>
+                    </div>
                   </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 200 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Practice real world contribution workflows using Git and
-                  GitHub. You'll learn how to contribute to projects, manage
-                  pull requests.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpages of open source challenge and add link here === -->
-                  <a href="gitChallenges.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 200 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Practice real world contribution workflows using Git and
+                    GitHub. You'll learn how to contribute to projects, manage
+                    pull requests.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="gitChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <!-- added card 6 -->
-          <!-- === Card 6 === -->
-           <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">JavaScript Mini Projects</h5>
-                  <p class="card-Level medium-Col">Easy</p>
-                  <div class="icon-container">
-                    <i class="devicon-javascript-plain colored" title="JavaScript"></i>
-                    <i class="devicon-css3-plain colored" title="CSS3"></i>
+
+            <!-- Card 6 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">JavaScript Mini Projects</h5>
+                    <p class="card-Level medium-Col">Easy</p>
+                    <div class="icon-container">
+                      <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+                      <i class="devicon-css3-plain colored" title="CSS3"></i>
+                    </div>
                   </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 300 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like auto-focus, clear input after add, and animation.
-                </p>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 300 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like auto-focus, clear input after add, and animation.
+                  </p>
 
-                <div class="card-CTAButton">
-                  <!-- === Create webpages of open source challenge and add link here === -->
-                  <a href="#" class="card-Btn">Join Now</a>
+                  <div class="card-CTAButton">
+                    <a href="#" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <style>
-      /* Section spacing */
-#challengeSection {
-  padding: 2rem 0;
-}
-
-/* Bootstrap row gap fix */
-.challengeContainer {
-  row-gap: 1.5rem; /* vertical spacing between rows */
-}
-
-/* Card styles */
-.challengeContainer .card {
-  box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
-  border: none;
-  border-radius: 15px;
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  height: 100%;
-  word-wrap: break-word;   /* prevent long words from breaking layout */
-  overflow-wrap: break-word;
-}
-
-/* Card hover */
-.challengeContainer .card:hover {
-  transform: translateY(-3px) scale(1.01);
-  box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
-}
-
-/* Card top container */
-.card-TopContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;   /* makes sure text + icons don’t overlap */
-  gap: 8px;
-}
-
-/* Header */
-.card-Header {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 0;
-  flex: 1 1 auto;
-  min-width: 120px;
-}
-
-/* Difficulty badge */
-.card-Level {
-  font-size: 12px;
-  padding: 4px 20px;
-  border-radius: 17px;
-  font-weight: 700;
-  margin: 0 7px 0 0;
-  white-space: nowrap; /* keeps badge text on one line */
-}
-.medium-Col {
-  background-color: #fff3cd;
-  color: #a88825;
-}
-.hard-Col {
-  background-color: #f8d7da;
-  color: #7d1c1c;
-}
-
-/* Participation info */
-.card-Participate {
-  font-size: 13px;
-  color: #666;
-  margin: 6px 0;
-  opacity: 0.9;
-  line-height: 1.4;
-}
-
-/* Description text */
-.card-Text {
-  font-size: 14px;
-  opacity: 0.85;
-  text-align: justify;
-  line-height: 1.6;
-  hyphens: auto;  /* breaks long words cleanly */
-}
-
-/* Button */
-.card-CTAButton {
-  display: flex;
-  justify-content: flex-end;
-}
-.card-Btn {
-  text-decoration: none;
-  font-size: 13px;
-  padding: 8px 28px;
-  border-radius: 5px;
-  background-color: #2563eb;
-  color: white;
-  font-weight: 700;
-  transition: all 0.2s ease-in-out;
-}
-.card-Btn:hover {
-  background-color: #1d4ed8;
-  box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
-}
+      </section>
 
-    </style>
-    <!-- ================================ Challenge Section End Here ================================ -->
-
-    <!-- ================================ Leaderboard Section Starts Here ================================ -->
-  <section id="leaderboardSection" class="leaderboard-wrapper">
-  <div class="leaderboard-list">
-    <h2>
-      <span class="highlight">Top Coder</span> of the Week
-    </h2>
-    <p>
-      Meet our top coders who accepted challenges, wrote great code,
-      contributed to open source, and stood out as the best performers of the week.
-    </p>
-
-    <div class="leaderboard-row rank-1">
-      <span class="rank">#1</span>
-      <img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
-      <span class="userName">Rahul <span class="badge gold">🏆</span></span>
-      <span class="points">1250 pts</span>
-    </div>
+      <!-- Leaderboard Section -->
+      <section id="leaderboardSection" class="leaderboard-wrapper">
+        <div class="container">
+          <div class="leaderboard-list" data-aos="zoom-in">
+            <h2>
+              <span class="highlight">Top Coder</span> of the Week
+            </h2>
+            <p>
+              Meet our top coders who accepted challenges, wrote great code,
+              contributed to open source, and stood out as the best performers of the week.
+            </p>
 
-    <div class="leaderboard-row rank-2">
-      <span class="rank">#2</span>
-      <img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
-      <span class="userName">Manisha <span class="badge silver">🥈</span></span>
-      <span class="points">1180 pts</span>
-    </div>
+            <div class="leaderboard-row rank-1" data-aos="fade-right" data-aos-delay="100">
+              <span class="rank">#1</span>
+              <img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
+              <span class="userName">Rahul <span class="badge gold">🏆</span></span>
+              <span class="points">1250 pts</span>
+            </div>
 
-    <div class="leaderboard-row rank-3">
-      <span class="rank">#3</span>
-      <img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
-      <span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
-      <span class="points">1100 pts</span>
-    </div>
+            <div class="leaderboard-row rank-2" data-aos="fade-right" data-aos-delay="200">
+              <span class="rank">#2</span>
+              <img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
+              <span class="userName">Manisha <span class="badge silver">🥈</span></span>
+              <span class="points">1180 pts</span>
+            </div>
 
-    <div class="leaderboard-row">
-      <span class="rank">#4</span>
-      <img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
-      <span class="userName">Simran</span>
-      <span class="points">980 pts</span>
-    </div>
-  </div>
-</section>
+            <div class="leaderboard-row rank-3" data-aos="fade-right" data-aos-delay="300">
+              <span class="rank">#3</span>
+              <img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
+              <span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
+              <span class="points">1100 pts</span>
+            </div>
 
-    <!-- ================================ Leaderboard Section End Here ================================ -->
+            <div class="leaderboard-row rank-4" data-aos="fade-right" data-aos-delay="400">
+              <span class="rank">#4</span>
+              <img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
+              <span class="userName">Simran</span>
+              <span class="points">980 pts</span>
+            </div>
+          </div>
+        </div>
+      </section>
 
-    <!-- ================================ About Section Start Here ================================ -->
-    <section id="aboutSection">
-      <div class="container">
-        <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</span> CodeClip</h3>
-        <div class="row aboutContainer">
-          <div class="col-10">
-            <p data-aos-duration="650" data-aos="fade-up text-muted">
-              CodeClip is a lightweight, browser-based platform designed to make
-              coding practice simple, accessible, and collaborative. Whether
-              you're a beginner looking to sharpen your skills or an aspiring
-              contributor to open source, CodeClip offers a clean interface
-              where you can solve real-world coding challenges, run your code
-              live, and share your solutions — all without any setup, Built
-              entirely with HTML, CSS, and JavaScript, CodeClip is not just a
-              tool but a learning experience itself. It’s an open-source project
-              proudly developed as part of
-              <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at
-              empowering developers through hands-on practice and meaningful
-              contributions.
-            </p>
+      <!-- About Section -->
+      <section id="aboutSection">
+        <div class="container">
+          <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</span> CodeClip</h3>
+          <div class="row aboutContainer">
+            <div class="col-10">
+              <p data-aos-duration="650" data-aos="fade-up" class="text-muted">
+                CodeClip is a lightweight, browser-based platform designed to make
+                coding practice simple, accessible, and collaborative. Whether
+                you're a beginner looking to sharpen your skills or an aspiring
+                contributor to open source, CodeClip offers a clean interface
+                where you can solve real-world coding challenges, run your code
+                live, and share your solutions — all without any setup.
+              </p>
 
-            <p data-aos-duration="650" data-aos="fade-up" class="ctaBtn">
-              <a
-                href="https://github.com/opensource-society/CodeClip"
-                target="_blank"
-                title="click here to start contributing in CodeClip Project under GSSoC'25"
-                class="aboutCTA-Btn"
-                >Contribute to CodeClip</a
-              >
-            </p>
+              <p data-aos-duration="650" data-aos="fade-up" class="ctaBtn">
+                <a
+                  href="https://github.com/opensource-society/CodeClip"
+                  target="_blank"
+                  class="aboutCTA-Btn"
+                >
+                  Contribute to CodeClip
+                </a>
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
     </main>
 
-    <!-- ================================ Footer Section Start Here ================================ -->
+    <!-- Footer -->
     <footer id="contactFooter">
       <div class="container">
         <div class="row align-items-start justify-content-between py-4">
-          <div data-aos-duration="650" data-aos="fade-up" class="col-12 col-md-3 mb-4 mb-md-0 footer-logo-col">
-            <a class="navbar-brand mb-2" id="homeSection"
-              >Code<span>Clip</span></a
-            > 
-            <p class="footer-desc mb-0 text-dark">
+          <div data-aos-duration="650" data-aos="fade-up" class="col-12 col-md-4 mb-4 mb-md-0 footer-logo-col">
+            <a class="navbar-brand mb-2">Code<span>Clip</span></a>
+            <p class="footer-desc mb-0">
               CodeClip is a open source project under GirlScript Summer of Code
               (GSSoC) 2025 to open for contribution
-            </p> 
+            </p>
           </div>
-          <!-- Removed footer nav links when navbar is sticky issue #610 -->
-          <div class="col-12 col-md-6 footer-contact-col-main">
-            <h5 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us</h5>
+          
+          <div class="col-12 col-md-7 footer-contact-col-main">
+            <h2 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us</h2>
             <div class="footer-contact-row d-flex justify-content-center">
               <div data-aos-duration="650" data-aos="fade-right"
-                class="footer-contact-col d-flex flex-column gap-3 w-100"
-              >
-                <a
-                  href="https://github.com/opensource-society/CodeClip"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
+                class="footer-contact-col d-flex flex-column gap-3 w-100">
+                <a href="https://github.com/opensource-society/CodeClip" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn" style="max-width: 250px">
                   <i class="fab fa-github me-2"></i> GitHub
                 </a>
-                <a
-                  href="https://discord.gg/NmGyBWAE3b"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
+                <a href="https://discord.gg/NmGyBWAE3b" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn" style="max-width: 250px">
                   <i class="fab fa-discord me-2"></i> Discord
                 </a>
               </div>
               <div data-aos-duration="650" data-aos="fade-left"
-                class="footer-contact-col d-flex flex-column align-items-center"
-              >
-              <!-- margin added -->
-                <a
-                  href="https://github.com/opensource-society/CodeClip/issues"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
+                class="footer-contact-col d-flex flex-column align-items-center">
+                <a href="https://github.com/opensource-society/CodeClip/issues" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn" style="max-width: 250px">
                   <i class="fas fa-exclamation-circle me-2"></i> Open an Issue
                 </a>
-                <!-- Added linkdin social connection -->
-                <a
-                  href="https://www.linkedin.com/in/adityai0"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn mt-3 "
-                  style="max-width: 250px"
-                >
+                <a href="https://www.linkedin.com" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn mt-3" style="max-width: 250px">
                   <i class="fab fa-linkedin-in me-2"></i> LinkedIn
                 </a>
-                
               </div>
             </div>
           </div>
-        </div> 
-      </div> 
+        </div>
+        <hr />
+        <p data-aos-duration="650" data-aos="fade-up" class="footerNote text-center mb-0">
+          &copy; CodeClip | Open Source Project 2025
+        </p>
+      </div>
+    </footer>
+
+    <!-- Scroll Buttons -->
+    <div class="scroll-buttons">
+      <button class="scroll-btn scroll-up" onclick="scrollToSection('top')">
+        <i class="fas fa-chevron-up"></i>
+      </button>
+      <button class="scroll-btn scroll-down" onclick="scrollToNextSection()">
+        <i class="fas fa-chevron-down"></i>
+      </button>
     </div>
-    <hr />
-    <p data-aos-duration="650" data-aos="fade-up" class="footerNote text-center mb-0">
-      &copy; CodeClip | Open Source Project 2025
-    </p>
-  </div>
-</footer>
-    <!--AOS Animations-->
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
     <script>
+      // Initialize AOS
       AOS.init({
         duration: 650,
         once: true
       });
-    </script>
+      
 
-    <!-- ================================ Footer Section End Here ================================ -->
-   <!--add scroll to top button -->
-    <a href="#top" class="scroll_to_top" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></a>
-    <!-- ================ Vendor JS ================  -->
-    <script src="scripts/jquery.min.js"></script>
-    <script src="scripts/owl.carousel.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+      // Loading screen
+      document.addEventListener("DOMContentLoaded", function () {
+        setTimeout(function() {
+          document.getElementById("loading-screen").classList.add("hidden");
+        }, 2000);
+      });
 
-    <!-- ================ Custom JS ================  -->
-    <script src="scripts/main.js"></script>
+      // Dark mode toggle
+      const toggle = document.getElementById("darkModeToggle");
+      const body = document.body;
 
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-    const loadingScreen = document.getElementById("loading-screen");
-    const loadingHeading = loadingScreen.querySelector("h2");
-
-    const sentences = [
-        "Loading your experience...",
-        "Almost ready, please wait..."
-    ];
-
-    let index = 0;
-    loadingHeading.innerHTML = sentences[index]; // show first sentence
-
-    // Change sentence every 4 seconds
-    const textInterval = setInterval(() => {
-        index = (index + 1) % sentences.length;
-        loadingHeading.innerHTML = sentences[index];
-        // inside setInterval
-        loadingHeading.classList.add("fade-out");
-setTimeout(() => {
-    loadingHeading.innerHTML = sentences[index];
-    loadingHeading.classList.remove("fade-out");
-}, 500);
-
-    }, 4000);
-
-    // Hide loading screen after 8 seconds
-    setTimeout(() => {
-        clearInterval(textInterval);
-        loadingScreen.classList.add("hidden");
-    }, 8000);
+      if (localStorage.getItem("darkMode") === "enabled") {
+        body.classList.add("dark-mode");
+        toggle.checked = true;
+      }
+
+      toggle.addEventListener("change", function() {
+        if (this.checked) {
+          body.classList.add("dark-mode");
+          localStorage.setItem("darkMode", "enabled");
+        } else {
+          body.classList.remove("dark-mode");
+          localStorage.setItem("darkMode", "disabled");
+        }
+      });
+
+     // Scroll progress bar
+window.addEventListener("scroll", function() {
+  const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+  const scrolled = (winScroll / height) * 100;
+  document.querySelector(".scroll-progress").style.width = scrolled + "%";
+});
+
+// Scroll buttons visibility
+const scrollButtons = document.querySelectorAll('.scroll-btn');
+
+window.addEventListener('scroll', function() {
+  const scrollPosition = window.pageYOffset;
+  
+  // Show/hide scroll up button
+  if (scrollPosition > 300) {
+    document.querySelector('.scroll-up').classList.add('show');
+  } else {
+    document.querySelector('.scroll-up').classList.remove('show');
+  }
+  
+  // Show/hide scroll down button (hide when near bottom)
+  if (scrollPosition < document.documentElement.scrollHeight - window.innerHeight - 100) {
+    document.querySelector('.scroll-down').classList.add('show');
+  } else {
+    document.querySelector('.scroll-down').classList.remove('show');
+  }
 });
 
+// Scroll to section function
+function scrollToSection(sectionId) {
+  document.getElementById(sectionId).scrollIntoView({
+    behavior: 'smooth'
+  });
+}
+
+// Scroll to next section
+function scrollToNextSection() {
+  const sections = ['top', 'challengeSection', 'leaderboardSection', 'aboutSection', 'contactFooter'];
+  const currentScroll = window.pageYOffset;
+  
+  for (let i = 0; i < sections.length - 1; i++) {
+    const section = document.getElementById(sections[i]);
+    const nextSection = document.getElementById(sections[i + 1]);
+    
+    if (currentScroll >= section.offsetTop && currentScroll < nextSection.offsetTop) {
+      nextSection.scrollIntoView({ behavior: 'smooth' });
+      return;
+    }
+  }
+  
+  // If at the last section, scroll to top
+  document.getElementById('top').scrollIntoView({ behavior: 'smooth' });
+}
+
+// FIXED: Active nav link on scroll - includes footer contact section
+const sections = document.querySelectorAll("section, footer");
+const navLinks = document.querySelectorAll(".navbar-nav .nav-link");
+
+window.addEventListener("scroll", function() {
+  let current = "";
+  const scrollPosition = window.scrollY + 100;
+
+  sections.forEach(section => {
+    const sectionTop = section.offsetTop;
+    const sectionHeight = section.clientHeight;
+    
+    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+      current = section.getAttribute("id");
+    }
+  });
+
+  navLinks.forEach(link => {
+    link.classList.remove("active");
+    if (link.getAttribute("href") === `#${current}`) {
+      link.classList.add("active");
+    }
+  });
+
+  // Special case for top of page
+  if (scrollPosition < 100) {
+    navLinks.forEach(link => {
+      link.classList.remove("active");
+      if (link.getAttribute("href") === "#top") {
+        link.classList.add("active");
+      }
+    });
+  }
+});
+    
     </script>
+    <!-- ================ Custom JS ================  -->
+    <script src="scripts/main.js"></script>
+    
   </body>
-</html>
\ No newline at end of file
+</html>