diff --git a/Website/index.html b/Website/index.html
index 95c417a93..bab28d29a 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -26,17 +26,136 @@ <h2>Welcome to the Machine Learning Repositories</h2>
             <p>This website provides an overview of various machine learning repositories available on GitHub, brought to you by the RecodeHive organization.</p>
             <a href="https://github.com/recodehive/machine-learning-repos" class="cta-button">Visit the Repository</a>
         </section>.
+
+        <!-- Repository Information -->
+        <section id="repository-info">
+            <h2>Repository Information</h2>
+            <div>
+                <h3 id="repo-name"></h3>
+                <p>Owner: <a id="repo-owner-link"><span id="repo-owner-name"></span></a></p>
+                <img id="repo-owner-avatar" src="" alt="Owner Avatar" width="100" />
+                <p><a id="repo-link">View on GitHub</a></p>
+            </div>
+        </section>
+
+        <!-- Statistics Cards -->
+        <section id="statistics-cards">
+            <h2>Repository Statistics</h2>
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <h3>Total Stars</h3>
+                    <div id="total-stars">0</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Total Forks</h3>
+                    <div id="total-forks">0</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Open Issues</h3>
+                    <div id="open-issues">0</div>
+                </div>
+                <div class="stat-card">
+                    <h3>License</h3>
+                    <div id="license">No License</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Repository Size</h3>
+                    <div id="repo-size">0 MB</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Total Contributors</h3>
+                    <div id="contributors-count">0</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Total Projects</h3>
+                    <div id="total-projects">10</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Most Used Language</h3>
+                    <div id="most-used-language">N/A</div>
+                </div>
+            </div>
+        </section>
+
+                <!-- Languages -->
+                <section id="languages">
+                    <h2>Languages Used</h2>
+                    <ul id="language-list"></ul>
+                </section>
+
         <section id="repo-list">
             <h2>Repositories</h2>
             <ul id="directories">
             </ul>
         </section>
+
     </main>
 
     <footer>
         <p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
     </footer>
 
-    <script src="js/script.js"></script>
+    <script>
+
+document.addEventListener('DOMContentLoaded', async function () {
+    const repoOwner = 'recodehive'; // Your GitHub username
+    const repoName = 'machine-learning-repos'; // The repository name
+    const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
+
+    try {
+        // Fetch repository data
+        const repoResponse = await fetch(apiUrl);
+        const repoData = await repoResponse.json();
+
+        // Populate repository info
+        document.getElementById('repo-name').innerText = repoData.name;
+        document.getElementById('repo-owner-name').innerText = repoData.owner.login;
+        document.getElementById('repo-owner-avatar').src = repoData.owner.avatar_url;
+        document.getElementById('repo-owner-link').href = repoData.owner.html_url;
+        document.getElementById('repo-link').href = repoData.html_url;
+
+        // Populate statistics cards
+        document.getElementById('total-stars').innerText = repoData.stargazers_count;
+        document.getElementById('total-forks').innerText = repoData.forks_count;
+        document.getElementById('open-issues').innerText = repoData.open_issues_count;
+        document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
+        document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';
+
+
+        // Fetch languages
+        const languagesResponse = await fetch(`${apiUrl}/languages`);
+        const languagesData = await languagesResponse.json();
+        const languageList = document.getElementById('language-list');
+        const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
+        let mostUsedLanguage = { name: '', bytes: 0 };
+
+        for (const [language, bytes] of Object.entries(languagesData)) {
+            const percentage = ((bytes / totalBytes) * 100).toFixed(2);
+            const listItem = document.createElement('li');
+            listItem.innerHTML = `
+                <span>${language}</span>
+                <div class="progress-bar" style="width: ${percentage}%;"></div>
+            `;
+            languageList.appendChild(listItem);
+
+            if (bytes > mostUsedLanguage.bytes) {
+                mostUsedLanguage = { name: language, bytes: bytes };
+            }
+        }
+
+        document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
+
+        // Populate total projects (assuming this is a static value)
+        // Replace this with a dynamic calculation if you have a method to determine the total number of projects
+        document.getElementById('total-projects').innerText = "10";
+
+
+
+    } catch (error) {
+        console.error('Error fetching data from GitHub API:', error);
+    }
+});
+
+    </script>
 </body>
 </html>
diff --git a/Website/styles.css b/Website/styles.css
index 413899aa5..b122f297e 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -3,34 +3,18 @@ body {
     margin: 0;
     padding: 0;
     background-color: #f4f4f4;
-    overflow-y: auto; /* Ensure vertical scrollbar appears if needed */
+    overflow-y: auto; 
 }
 
-::-webkit-scrollbar {
-    width: 10px; /* Set the width of the scrollbar */
-}
-
-::-webkit-scrollbar-track {
-    background: #f4f4f4; /* Background color of the track */
-}
-
-::-webkit-scrollbar-thumb {
-    background: #007bff; /* Color of the scrollbar thumb */
-    border-radius: 5px; /* Round the corners of the scrollbar thumb */
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #0056b3; /* Darker color on hover */
-}
 
+/* Header Styles */
 header {
     background-color: #333;
     color: white;
-    padding: 10px 0;
+    padding: 20px 20px; 
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 20px; 
 }
 
 header h1 {
@@ -55,6 +39,7 @@ nav ul li a {
     font-weight: bold;
 }
 
+/* Main Section Styles */
 main {
     padding: 20px;
     text-align: center;
@@ -70,6 +55,58 @@ main {
     margin-top: 20px;
 }
 
+/* Statistics Cards Styles */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); 
+    gap: 1rem;
+    margin-top: 2rem;
+    padding: 20px;
+}
+
+.stat-card {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card h3 {
+    margin-bottom: 0.5rem;
+    color: #007bff;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .stats-grid,
+    .contributors-grid {
+        grid-template-columns: 1fr; 
+    }
+}
+
+/* Language List Styles */
+#languages ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#languages li {
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.language-bar {
+    flex-grow: 1;
+    height: 10px;
+    border-radius: 5px;
+    margin-left: 0.5rem;
+    background-color: #007bff;
+}
+
+/* Footer Styles */
 footer {
     background-color: #333;
     color: white;
@@ -140,4 +177,14 @@ footer a {
         flex: 1 1 100%; 
         max-width: 100%;
     }
-}
\ No newline at end of file
+}
+/* Additional Styles for Responsiveness */
+@media (max-width: 768px) {
+    .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+
+    .contributors-grid {
+        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    }
+}