diff --git a/about.css b/about.css
index c863695..c5f5af9 100644
--- a/about.css
+++ b/about.css
@@ -1,48 +1,97 @@
-body {
-    font-family: 'Arial', sans-serif;
+* {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
-    background-color: #f4f4f4;
-    color: #333;
 }
 
-.container {
-    width: 80%;
-    margin: 20px auto;
-    padding: 20px;
-    background: white;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+body {
+    font-family: 'Arial', sans-serif;
+    line-height: 1.6;
+    background-color: #f7f9fc;
+    color: #333;
 }
 
-h1,
-h2 {
+header {
+    background: #4a4e69;
+    color: white;
+    padding: 20px 0;
     text-align: center;
-    color: #2C3E50;
 }
 
-p {
-    line-height: 1.6;
-    margin-bottom: 20px;
-    text-align: justify;
+header nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+header nav ul li {
+    display: inline;
+    margin: 0 15px;
 }
 
-.banner {
-    background-color: #7ab7df;
+header nav ul li a {
     color: white;
-    padding: 10px 0;
-    margin-bottom: 20px;
-    text-align: center;
-    border-radius: 8px 8px 0 0;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+header nav ul li a:hover {
+    text-decoration: underline;
+    color: #d9d9d9;
 }
 
-.banner h1 {
+h1 {
     margin: 0;
-    font-size: 2em;
+    font-size: 2.5em;
+}
+
+.intro, .benefits, .features, .testimonials, .cta {
+    padding: 20px;
+    background: #ffffff;
+    margin: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.intro:hover, .benefits:hover, .features:hover, .testimonials:hover, .cta:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+.intro {
+    border-left: 5px solid #4a4e69;
+}
+
+h2, h3 {
+    margin-bottom: 15px;
+    color: #4a4e69;
 }
 
-.section {
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+ul li {
+    margin-bottom: 10px;
+    padding-left: 20px;
+    position: relative;
+}
+
+ul li:before {
+    content: "✔";
+    color: #4a4e69;
+    position: absolute;
+    left: 0;
+}
+
+blockquote {
     margin: 20px 0;
+    padding: 10px;
+    background: #f0f4f8;
+    border-left: 5px solid #4a4e69;
+    font-style: italic;
 }
 
 .section p{
@@ -55,44 +104,62 @@ p {
     justify-content: space-around;
     margin-top: 20px;
 }
+blockquote p {
+    margin: 0;
+}
 
-.card {
-    background: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 20px;
-    width: 30%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.cta {
     text-align: center;
-    margin: 0 10px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    background: #4a4e69;
+    color: white;
+    border-radius: 5px;
 }
 
-.card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+.cta-button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 15px;
+    background: #ffffff;
+    color: #4a4e69;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background 0.3s, color 0.3s, transform 0.3s;
 }
 
+.cta-button:hover {
+    background: #4a4e69;
+    color: white;
+    transform: translateY(-2px);
+}
 
-.card h3 {
-    color: #2C3E50;
-    margin-bottom: 10px;
+footer {
+    text-align: center;
+    padding: 10px 0;
+    background: #4a4e69;
+    color: white;
+    position: relative;
+    bottom: 0;
+    width: 100%;
 }
 
-.card p {
-    color: #555;
-    font-size: 1em;
+footer nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+footer nav ul li {
+    display: inline;
+    margin: 0 15px;
 }
 
-/* Responsive design for smaller screens */
-@media (max-width: 768px) {
-    .cards {
-        flex-direction: column;
-        align-items: center;
-    }
+footer nav ul li a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s;
+}
 
-    .card {
-        width: 80%;
-        margin-bottom: 20px;
-    }
-}
\ No newline at end of file
+footer nav ul li a:hover {
+    text-decoration: underline;
+    color: #d9d9d9;
+}
diff --git a/about.html b/about.html
index f3be635..8783740 100644
--- a/about.html
+++ b/about.html
@@ -1,23 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <title>About Math 4 Python</title>
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
-    <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
-
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" 
-          integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" 
-          crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         body {
-            font-family: 'Arial', sans-serif;
+            font-family: 'Roboto', sans-serif;
             margin: 0;
             padding: 0;
             background-color: #f4f4f4;
@@ -62,19 +59,120 @@
         .section {
             margin: 20px 0;
         }
+        .cards {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+        .card {
+            background: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            flex: 1;
+            text-align: center;
+        }
+        .footer-content {
+            display: flex;
+            justify-content: space-between;
+            padding: 20px;
+            background: #2C3E50;
+            color: #fff;
+            border-radius: 0 0 8px 8px;
+        }
+        .footer-section {
+            flex: 1;
+            padding: 10px;
+        }
+        .footer-section h3 {
+            margin-bottom: 15px;
+            font-size: 18px;
+        }
+        .footer-section a {
+            color: #3498DB;
+        }
+        .footer-bottom {
+            background: #1A252F;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+        }
+        #nav-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: #2980B9;
+            color: white;
+            border: none;
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+            display: none;
+        }
+        #nav-top:hover {
+            background: #3498DB;
+        }
     </style>
-    <link rel="stylesheet" href="hamburger_menu.css">  
-
-    <link rel="stylesheet" href="about.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
-        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 </head>
+
 <body>
+    <header>
+        <h1>About Math4Python</h1>
+        <nav>
+            <ul>
+                <li><a href="#intro">Why Math4Python</a></li>
+                <li><a href="#benefits">Benefits</a></li>
+                <li><a href="#features">Features</a></li>
+                <li><a href="#testimonials">Testimonials</a></li>
+                <li><a href="#cta">Get Started</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section id="intro" class="intro">
+            <h2>Why Math4Python Matters</h2>
+            <p>In today’s data-driven world, understanding the synergy between math and programming is vital. Math4Python bridges this gap by offering:</p>
+        </section>
+
+        <section id="benefits" class="benefits">
+            <h3>Benefits of Math4Python</h3>
+            <ul>
+                <li><strong>Simplified Learning:</strong> Breaking down complex math concepts into easy-to-understand lessons that cater to both beginners and those sharpening their skills.</li>
+                <li><strong>Real-World Applications:</strong> Showing how math operations are used in real-life programming scenarios like data processing and analysis.</li>
+                <li><strong>Engaging Challenges:</strong> Offering interactive coding exercises that allow learners to apply their knowledge and build confidence.</li>
+            </ul>
+        </section>
+
+        <section id="features" class="features">
+            <h3>Features</h3>
+            <ul>
+                <li><strong>Interactive Tutorials:</strong> Step-by-step lessons focused on core mathematical operations and their implementation in Python.</li>
+                <li><strong>Practical Examples:</strong> Real-world coding examples that demonstrate the application of math in data-related tasks.</li>
+                <li><strong>Quizzes & Challenges:</strong> Engaging exercises to solidify learners' understanding of Python's math operations.</li>
+                <li><strong>Integrated Code Editor:</strong> A built-in coding environment that enables learners to practice right inside the lessons.</li>
+            </ul>
+        </section>
+
+        <section id="testimonials" class="testimonials">
+            <h3>What Our Learners Say</h3>
+            <blockquote>
+                <p>"Math4Python transformed the way I understand programming! The tutorials are clear and engaging." - <strong>Jane D.</strong></p>
+            </blockquote>
+            <blockquote>
+                <p>"As a beginner, I found the step-by-step approach incredibly helpful. I feel more confident in my coding skills!" - <strong>Mark S.</strong></p>
+            </blockquote>
+        </section>
+
+        <section id="cta" class="cta">
+            <h3>Ready to Start Your Learning Journey?</h3>
+            <p>Join Math4Python today and unlock the power of Python programming through mathematical concepts!</p>
+            <a href="signup.html" class="cta-button">Get Started Now</a>
+        </section>
+    </main>
 
     <div class="navbar"> 
-        
         <h1 class="title">MathPyLearn</h1>
         <div class="theme-toggle-wrapper">
             <button style="cursor: pointer;" id="theme-toggle">
@@ -82,18 +180,6 @@ <h1 class="title">MathPyLearn</h1>
                 <i class="fas fa-moon"></i>
             </button>
         </div>
-
-        <div class="nav-links">
-
-    <div class="navbar">
-        <!-- Hamburger Menu for Mobile -->
-        <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-
-        <!-- Hamburger Menu for Desktop -->
         <div class="nav-links" id="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html" class="active">About</a>
@@ -101,34 +187,20 @@ <h1 class="title">MathPyLearn</h1>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        
-        <!-- <a href="learn.html" class="active">Learn</a>
-        <a href="challenge.html">Challenge</a> -->
     </div>
 
-
-
     <div class="container">
-
-    <div class="about-container">
-
         <div class="banner">
-            <h1 class="about-h1">About Math 4 Python</h1>
+            <h1>About Math 4 Python</h1>
         </div>
-
         <div class="section">
             <h2>Our Mission</h2>
-            <p>At Math 4 Python, we are dedicated to combining the power of Python programming with key mathematical
-                concepts. Our platform focuses on helping learners enhance their problem-solving skills through
-                interactive coding experiences that emphasize math applications.</p>
+            <p>At Math 4 Python, we are dedicated to combining the power of Python programming with key mathematical concepts. Our platform focuses on helping learners enhance their problem-solving skills through interactive coding experiences that emphasize math applications.</p>
         </div>
         <div class="section">
             <h2>Who Is It For?</h2>
-            <p>Whether you are a beginner in Python or a math enthusiast looking to apply coding to real-world problems,
-                Math 4 Python offers an engaging and structured learning path. Our platform caters to students,
-                professionals, and hobbyists aiming to build or enhance their coding and mathematical skills.</p>
+            <p>Whether you are a beginner in Python or a math enthusiast looking to apply coding to real-world problems, Math 4 Python offers an engaging and structured learning path. Our platform caters to students, professionals, and hobbyists aiming to build or enhance their coding and mathematical skills.</p>
         </div>
-
         <div class="section">
             <h2>What We Offer</h2>
             <div class="cards">
@@ -146,30 +218,16 @@ <h3>Real-time Feedback</h3>
                 </div>
             </div>
         </div>
-
         <div class="section">
             <h2>Why Choose Math 4 Python?</h2>
-            <p>We provide a unique approach to learning by blending coding with math, offering practical, real-world
-                challenges that make the learning process engaging and effective.</p>
-
-        <div class="about-section">
-            <h2 class="about-h2">Our Mission</h2>
-            <p class="about-p">Welcome to Math 4 Python, where we blend the art of Python programming with the science of mathematics. Our mission is to provide a comprehensive learning platform that enhances your coding skills while deepening your understanding of mathematical concepts and problem-solving techniques.</p>
-        </div>
-        <div class="about-section">
-            <h2 class="about-h2">What We Offer</h2>
-            <p class="about-p">At Math 4 Python, we offer a structured learning path that starts with the basics of Python programming and gradually incorporates complex mathematical problems. Our content includes interactive lessons, practical exercises, and real-world applications to help you master both coding and math.</p>
-        </div>
-        <div class="about-section">
-            <h2 class="about-h2">Why Learn With Us?</h2>
-            <p class="about-p">Our unique approach combines theoretical knowledge with hands-on practice. By learning Python through mathematical problems, you gain a dual advantage: proficiency in a powerful programming language and a solid foundation in math. This combination is essential for careers in data science, engineering, finance, and more.</p>
+            <p>We provide a unique approach to learning by blending coding with math, offering practical, real-world challenges that make the learning process engaging and effective.</p>
         </div>
-        <div class="about-section">
-            <h2 class="about-h2">Contact Us</h2>
-            <p class="about-p">If you have any questions or would like more information, feel free to reach out to us at <a class="about-link" href="https://magicmath.co/">https://magicmath.co/</a>.</p>
-
+        <div class="section">
+            <h2>Contact Us</h2>
+            <p>If you have any questions or would like more information, feel free to reach out to us at <a href="https://magicmath.co/">https://magicmath.co/</a>.</p>
         </div>
     </div>
+
     <footer>
         <div class="footer-content">
             <div class="footer-section about">
@@ -178,7 +236,6 @@ <h3>Math 4 Python</h3>
                 <p><i class="fas fa-envelope"></i> contact@math4python.com</p>
                 <p><i class="fas fa-phone"></i> +123 456 7890</p>
             </div>
-    
             <div class="footer-section links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -189,7 +246,6 @@ <h3>Quick Links</h3>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>
-    
             <div class="footer-section social">
                 <h3>Follow Us</h3>
                 <a href="#"><i class="fab fa-facebook"></i></a>
@@ -198,12 +254,14 @@ <h3>Follow Us</h3>
                 <a href="#"><i class="fab fa-github"></i></a>
             </div>
         </div>
-    
         <div class="footer-bottom">
             <p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
         </div>
     </footer>
-    <button onclick="topFunction()" id="nav-top"><i class = "material-icons">arrow_upward</i>  </button>
+
+    <button onclick="topFunction()" id="nav-top">
+        <i class="material-icons">arrow_upward</i>
+    </button>
 
     <script src="script.js"></script>
 
@@ -225,7 +283,5 @@ <h3>Follow Us</h3>
             });
         }
     </script>
-
 </body>
-
 </html>
diff --git a/challenge.html b/challenge.html
index b9930ab..3f7861f 100644
--- a/challenge.html
+++ b/challenge.html
@@ -9,33 +9,19 @@
     <link rel="stylesheet" href="hamburger_menu.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
-
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
 </head>
 <body id="challenge">
 
-    <div class="navbar"> 
-        
+    <div class="navbar">
         <h1 class="title">MathPyLearn</h1>
         <div class="theme-toggle-wrapper">
-            <button style="cursor: pointer;" id="theme-toggle">
+            <button id="theme-toggle" style="cursor: pointer;">
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
         </div>
-
-        <div class="nav-links">
-
-    <div class="navbar">
-        <!-- Hamburger Menu for Mobile -->
-        <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-
-        <!-- Hamburger Menu for Desktop -->
         <div class="nav-links" id="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
@@ -43,16 +29,18 @@ <h1 class="title">MathPyLearn</h1>
             <a href="challenge.html" class="active">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        
-        <!-- <a href="learn.html" class="active">Learn</a>
-        <a href="challenge.html">Challenge</a> -->
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
     </div>
 
-
+    <!-- Main Content -->
     <div class="content">
         <h2><i class="fas fa-trophy"></i> Python Challenges</h2>
         <p>Welcome to the challenges section! Test your skills with various coding challenges.</p>
-        
         <div class="progress-container">
             <h3>Challenge Progress</h3>
             <div class="progress-bar">
@@ -60,7 +48,6 @@ <h3>Challenge Progress</h3>
             </div>
             <button id="challenge-reset-btn" class="reset-btn">Reset Progress</button>
         </div>
-        
         <div class="challenge-container">
             <ul id="challenge-list">
                 <li><a href="#" onclick="viewChallenge('Basic Math Challenge')"><i class="fas fa-calculator"></i> Basic Math Challenge</a></li>
@@ -75,13 +62,14 @@ <h3>Challenge Progress</h3>
                 <li><a href="#" onclick="viewChallenge('Array')"><i class="fas fa-list-ol"></i> Array Challenge</a></li>
                 <li><a href="#" onclick="viewChallenge('Graph')"><i class="fas fa-project-diagram"></i> Graph Algorithm Challenge</a></li>
             </ul>
-
             <section class="challenge-description" id="challenge-description">
                 <h3>Challenge Description</h3>
                 <p>Select a challenge from the list to view its description and instructions.</p>
             </section>
         </div>
     </div>
+
+    <!-- Footer -->
     <footer>
         <div class="footer-content">
             <div class="footer-section about">
@@ -90,7 +78,6 @@ <h3>Math 4 Python</h3>
                 <p><i class="fas fa-envelope"></i> contact@math4python.com</p>
                 <p><i class="fas fa-phone"></i> +123 456 7890</p>
             </div>
-    
             <div class="footer-section links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -101,7 +88,6 @@ <h3>Quick Links</h3>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>
-    
             <div class="footer-section social">
                 <h3>Follow Us</h3>
                 <a href="#"><i class="fab fa-facebook"></i></a>
@@ -110,24 +96,27 @@ <h3>Follow Us</h3>
                 <a href="#"><i class="fab fa-github"></i></a>
             </div>
         </div>
-    
         <div class="footer-bottom">
             <p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
         </div>
     </footer>
-    <button onclick="topFunction()" id="nav-top"><i class = "material-icons">arrow_upward</i>  </button>
 
+
+    <!-- Scroll to Top Button -->
+    <button onclick="topFunction()" id="nav-top"><i class="material-icons">arrow_upward</i></button>
+
+    <!-- External JavaScript -->
     <script src="script.js"></script>
+
     <script>
         let mybutton = document.getElementById("nav-top");
         window.onscroll = function() {scrollFunction()};
-
         function scrollFunction() {
-        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-            mybutton.style.display = "block";
-        } else {
-            mybutton.style.display = "none";
-                }
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                mybutton.style.display = "block";
+            } else {
+                mybutton.style.display = "none";
+            }
         }
         function topFunction() {
             window.scrollTo({
@@ -136,6 +125,6 @@ <h3>Follow Us</h3>
             });
         }
     </script>
-    
+
 </body>
 </html>
diff --git a/index.html b/index.html
index 9db6f6d..b3d7e80 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Math 4 Python - Learn and Challenge Your Math Skills</title>
     <meta name="description" content="A platform to learn mathematical concepts for Python programming and engage in coding challenges.">
     <meta name="keywords" content="math, python, learning, challenges, programming">
-    <link rel="icon" href="newfavicon.svg" type="image/svg+xml">
+    <link rel="icon" href="Untitled design1.ico" type="image/svg+xml">
    <!-- <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">-->
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@@ -72,7 +72,7 @@ <h3>Math 4 Python</h3>
     
             <div class="footer-section links">
                 <h3>Quick Links</h3>
-                <ul>
+                <ul>l
                     <li><a href="index.html">Home</a></li>
                     <li><a href="about.html">About</a></li>
                     <li><a href="learn.html">Learn</a></li>
diff --git a/learn.html b/learn.html
index 65e3852..0178663 100644
--- a/learn.html
+++ b/learn.html
@@ -13,47 +13,35 @@
     <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
-    <style>
-        
-    </style>
-
 </head>
 <body id="learn" onload="showEditor('Untitled')">
-
     <div class="navbar">
         <h1 class="title">MathPyLearn</h1>
-        <div class="navbar">
-            <!-- Hamburger Menu for Mobile -->
-            <div class="hamburger" id="hamburger">
-                <div></div>
-                <div></div>
-                <div></div>
-            </div>
-
-            <!-- Navbar Links -->
-            <div class="nav-links" id="nav-links">
-                <a href="index.html">Home</a>
-                <a href="about.html">About</a>
-                <a href="learn.html" class="active">Learn</a>
-                <a href="challenge.html">Challenge</a>
-                <a href="faq.html">FAQs</a>
-            </div>
-
-            <!-- Theme Toggle -->
-            <div class="theme-toggle-wrapper">
-                <button style="cursor: pointer;" id="theme-toggle">
-                    <i class="fas fa-sun"></i>
-                    <i class="fas fa-moon"></i>
-                </button>
-            </div>
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        <!-- Navbar Links -->
+        <div class="nav-links" id="nav-links">
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+            <a href="learn.html" class="active">Learn</a>
+            <a href="challenge.html">Challenge</a>
+            <a href="faq.html">FAQs</a>
+        </div>
+        <!-- Theme Toggle -->
+        <div class="theme-toggle-wrapper">
+            <button style="cursor: pointer;" id="theme-toggle">
+                <i class="fas fa-sun"></i>
+                <i class="fas fa-moon"></i>
+            </button>
         </div>
     </div>
-
     <div class="content">
         <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
     </div>
-    
     <div class="content">
         <h2>Python Lessons</h2>
         <p>Welcome to the Python lessons! Choose a lesson below to get started.</p>
@@ -61,7 +49,6 @@ <h2>Python Lessons</h2>
             <button id="generate-question-button" onclick="generateQuestion()">Click For Practice Question</button>
             <p id="random-question"></p>
         </div>
-        
         <div class="learn-container">
             <div class="lesson-list">
                 <ul>
@@ -76,15 +63,13 @@ <h2>Python Lessons</h2>
                     <li><a href="#" onclick="showEditor('Dictionary')">Dictionary</a></li>
                 </ul>
             </div>
-
             <div class="editor-area">
                 <div id="editor-container">
                     <div id="editor-controls">
                         <button id="reset-code">Reset Code</button>
                         <button id="copy-code">Copy Code</button>
-                        <p id="copy-message" style="display: none; color: black;">Copied!</p>                  
-                    </div>  
-
+                        <p id="copy-message" style="display: none; color: black;">Copied!</p>
+                    </div>
                     <h2>Code Input :</h2>
                     <div id="editor"></div>
                     <h2>Output :</h2>
@@ -92,7 +77,6 @@ <h2>Output :</h2>
                         <div id="terminal"></div>
                     </div>
                 </div>
-                
                 <div id="button-container">
                     <button id="run-button" onclick="runCode()">Run Code</button>
                     <button id="clear-button" onclick="clearTerminal()">Clear Terminal</button>
@@ -101,7 +85,6 @@ <h2>Output :</h2>
                 </div>
             </div>
         </div>
-
         <div class="progress-container">
             <h3>Lesson Progress</h3>
             <div class="progress-bar">
@@ -110,7 +93,6 @@ <h3>Lesson Progress</h3>
             <button id="lesson-reset-btn" class="reset-btn">Reset Progress</button>
         </div>
     </div>
-
     <footer>
         <div class="footer-content">
             <div class="footer-section about">
@@ -119,7 +101,6 @@ <h3>Math 4 Python</h3>
                 <p><i class="fas fa-envelope"></i> contact@math4python.com</p>
                 <p><i class="fas fa-phone"></i> +123 456 7890</p>
             </div>
-    
             <div class="footer-section links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -130,7 +111,6 @@ <h3>Quick Links</h3>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>
-    
             <div class="footer-section social">
                 <h3>Follow Us</h3>
                 <a href="#"><i class="fab fa-facebook"></i></a>
@@ -139,18 +119,15 @@ <h3>Follow Us</h3>
                 <a href="#"><i class="fab fa-github"></i></a>
             </div>
         </div>
-    
         <div class="footer-bottom">
             <p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
         </div>
     </footer>
     <button onclick="topFunction()" id="nav-top"><i class="material-icons">arrow_upward</i></button>
-
     <script src="script.js"></script>
     <script>
         let mybutton = document.getElementById("nav-top");
         window.onscroll = function() {scrollFunction()};
-
         function scrollFunction() {
             if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                 mybutton.style.display = "block";
@@ -158,7 +135,6 @@ <h3>Follow Us</h3>
                 mybutton.style.display = "none";
             }
         }
-
         function topFunction() {
             window.scrollTo({
                 top: 0,
diff --git a/styles.css b/styles.css
index c5a2b25..5c299de 100644
--- a/styles.css
+++ b/styles.css
@@ -506,4 +506,128 @@ body.dark-theme .cta-button:hover {
   
   #nav-top:hover {
     background-color: #555; 
-  }
\ No newline at end of file
+  }
+
+  /* challenge.css*/
+  /* General Styling */
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #f4f4f4;
+}
+
+h1, h2, h3 {
+    font-family: 'Lobster', cursive;
+}
+
+/* Navigation Bar */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #333;
+    color: white;
+    padding: 10px 20px;
+}
+
+.nav-links {
+    display: flex;
+    gap: 15px;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+}
+
+.nav-links a.active {
+    border-bottom: 2px solid #ffd700;
+}
+
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+}
+
+.hamburger div {
+    width: 25px;
+    height: 2px;
+    background-color: white;
+}
+
+/* Content Area */
+.content {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+}
+
+.progress-container {
+    margin-bottom: 20px;
+}
+
+.progress-bar {
+    background-color: #ddd;
+    border-radius: 10px;
+    width: 100%;
+    height: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.progress {
+    background-color: #00cc66;
+    height: 100%;
+    width: 0%;
+    transition: width 0.5s ease;
+}
+
+/* Challenge List */
+.challenge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+#challenge-list {
+    width: 45%;
+    list-style: none;
+    padding: 0;
+}
+
+#challenge-list li {
+    margin: 10px 0;
+}
+
+#challenge-list a {
+    text-decoration: none;
+    font-weight: bold;
+    color: #333;
+    transition: color 0.3s ease;
+}
+
+#challenge-list a:hover {
+    color: #00cc66;
+}
+
+/* Challenge Description */
+.challenge-description {
+    width: 50%;
+    padding: 20px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+footer {
+    background-color: #333;
+    color: white;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+/* Responsive Design */
+