diff --git a/Website/index.html b/Website/index.html
index 8ad76b4d6..ff8867768 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -117,8 +117,76 @@ <h1 class="contri-heading">Our Contributors</h1>
                 <!-- Contributors will be loaded here by JavaScript -->
             </div>
         </section>
+        <section id="milestones-progress">
+            <h2>Milestones Progress</h2>
+            <div class="milestones-grid">
+                <div class="milestone-card">
+                    <h3>Algorithms and Deep Learning Models</h3>
+                    <p>This milestone enhances the website's performance and design by integrating advanced algorithms and Deep Learning models.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 100%;"></div>
+                    </div>
+                    <p>34 closed / 34 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>Classification Models</h3>
+                    <p>This Milestone focuses on improving the website's performance and design by implementing and optimizing various classification models.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 100%;"></div>
+                    </div>
+                    <p>23 closed / 23 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>Data Analysis</h3>
+                    <p>This milestone is dedicated to enhancing the website's performance and design through the integration and application of data analysis techniques.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 100%;"></div>
+                    </div>
+                    <p>20 closed / 20 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>NLP Models</h3>
+                    <p>This milestone focuses on integrating NLP models to enhance website functionality and user interaction, improving performance and design through advanced natural language processing techniques.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 50%;"></div>
+                    </div>
+                    <p>5 closed / 10 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>Computer Vision Models</h3>
+                    <p>This milestone focuses on integrating computer vision models to improve website performance and design by enabling advanced image and video analysis capabilities.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 50%;"></div>
+                    </div>
+                    <p>10 closed / 20 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>Detection Models</h3>
+                    <p>This milestone involves improving the website's performance and design by implementing advanced detection models to enhance functionality and accuracy.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 100%;"></div>
+                    </div>
+                    <p>34 closed / 34 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>Prediction Models</h3>
+                    <p>This milestone aims to integrate advanced prediction models to boost website performance and user experience with cutting-edge algorithms and machine learning techniques.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 100%;"></div>
+                    </div>
+                    <p>60 closed / 60 total</p>
+                </div>
+                <div class="milestone-card">
+                    <h3>Recommendation Models</h3>
+                    <p>This milestone focuses on integrating advanced recommendation models to improve website performance and deliver personalized user experiences.</p>
+                    <div class="progress-bar">
+                        <div class="progress" style="width: 100%;"></div>
+                    </div>
+                    <p>4 closed / 4 total</p>
+                </div>
+            </div>
+        </section>
         
-
     </main>
 
     <!-- Chatbot Button -->
@@ -145,13 +213,10 @@ <h1 class="contri-heading">Our Contributors</h1>
             <button id="chatbot-send">Send</button>
         </div>
     </div>
-
     <button id="go-to-top">TOP▶️</button> <!-- Go to top button -->
-
     <footer class="footer">
         <p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</p>
     </footer>
-
     <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/Website/styles.css b/Website/styles.css
index ff4c6ddda..12b35db2b 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -659,6 +659,74 @@ button#toggle-languages:hover {
 }
 
 
+/* Milestones Progress Section */
+#milestones-progress {
+    margin: 50px 0;
+    padding: 20px;
+    background-color: #f9f9f9;
+}
+
+#milestones-progress h2 {
+    text-align: center;
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.milestones-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.milestone-card {
+    background-color: rgb(87, 251, 248);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-left: 5px solid #054ffd;
+    transition: transform 0.3s ease;
+}
+
+.milestone-card:hover {
+    transform: translateY(-5px);
+}
+
+.milestone-card h3 {
+    color: #333;
+    font-size: 1.25em;
+    margin-bottom: 10px;
+}
+
+.milestone-card p {
+    color: #666;
+    font-size: 0.9em;
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.progress-bar {
+    background-color: rgb(116, 243, 209);
+    border-radius: 5px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    height: 8px;
+}
+
+.progress {
+    height: 100%;
+    background-color: #0366d6;
+    transition: width 0.4s ease;
+}
+
+/* Optional: Media Query for Responsive Design */
+@media (max-width: 600px) {
+    .milestones-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+
 /* Loading Animation CSS */
 .loading-container {
     position: fixed;
@@ -757,3 +825,4 @@ body.dark-mode {
 
 
 
+