diff --git a/Website/index.html b/Website/index.html
index bab28d29a..8896e154f 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -5,37 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Machine Learning Repositories</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
 </head>
 <body>
     <header>
-        <h1>Machine Learning Repos</h1>
-        <nav>
-            <ul>
+        <nav class="navbar">
+            <div class="logo-container">
+                <img src="logo.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
+                <span class="brand-name">RecodeHive</span>
+            </div>
+            <ul class="nav-links">
                 <li><a href="#">Home</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Organization</a></li>
                 <li><a href="#">FAQ</a></li>
                 <li><a href="#">Contact</a></li>
+                <li>
+                    <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
+                        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
+                    </a>
+                </li>
             </ul>
         </nav>
     </header>
-    
+
     <main>
-        <section>
+        <section class="welcome-section">
             <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>
+            <p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
+        </section>
+
+        <!-- Toggle button for Repository Statistics -->
+        <section>
+            <button id="toggle-stats">Show/Hide Repository Statistics</button>
         </section>
 
         <!-- Statistics Cards -->
@@ -44,44 +46,36 @@ <h2>Repository Statistics</h2>
             <div class="stats-grid">
                 <div class="stat-card">
                     <h3>Total Stars</h3>
-                    <div id="total-stars">0</div>
+                    <p id="total-stars">Loading...</p>
                 </div>
                 <div class="stat-card">
                     <h3>Total Forks</h3>
-                    <div id="total-forks">0</div>
+                    <p id="total-forks">Loading...</p>
                 </div>
                 <div class="stat-card">
                     <h3>Open Issues</h3>
-                    <div id="open-issues">0</div>
+                    <p id="open-issues">Loading...</p>
                 </div>
                 <div class="stat-card">
                     <h3>License</h3>
-                    <div id="license">No License</div>
+                    <p id="license">Loading...</p>
                 </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>
+                    <p id="repo-size">Loading...</p>
                 </div>
                 <div class="stat-card">
                     <h3>Most Used Language</h3>
-                    <div id="most-used-language">N/A</div>
+                    <p id="most-used-language">Loading...</p>
                 </div>
             </div>
         </section>
 
-                <!-- Languages -->
-                <section id="languages">
-                    <h2>Languages Used</h2>
-                    <ul id="language-list"></ul>
-                </section>
+        <!-- Languages -->
+        <section id="languages">
+            <h2>Languages Used</h2>
+            <ul id="language-list"></ul>
+        </section>
 
         <section id="repo-list">
             <h2>Repositories</h2>
@@ -91,71 +85,114 @@ <h2>Repositories</h2>
 
     </main>
 
-    <footer>
+    <footer class="footer">
         <p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
     </footer>
 
+    <!-- Existing JavaScript code -->
     <script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const directoriesList = document.getElementById('directories');
+
+        async function fetchDirectories() {
+            try {
+                const response = await fetch('/api/github/repos');
 
-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 };
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const data = await response.json();
+
+                const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website');
+
+                directories.forEach(directory => {
+                    const li = document.createElement('li');
+                    li.classList.add('card');
+
+                    const h3 = document.createElement('h3');
+                    h3.textContent = directory.name;
+
+                    const a = document.createElement('a');
+                    a.href = directory.html_url;
+                    a.textContent = 'View Repository';
+                    a.classList.add('btn-view-repo');
+
+                    li.appendChild(h3);
+                    li.appendChild(a);
+                    directoriesList.appendChild(li);
+                });
+            } catch (error) {
+                console.error('Error fetching directories:', error);
+                directoriesList.innerHTML = '<li class="card">Failed to load directories.</li>';
             }
         }
 
-        document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
+        fetchDirectories();
+    });
+    </script>
+
+    <!-- JavaScript for toggling statistics section -->
+    <script>
+    document.addEventListener('DOMContentLoaded', async function () {
+        const repoOwner = 'recodehive';
+        const repoName = 'machine-learning-repos';
+        const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
+
+        try {
+            // Fetch repository data
+            const repoResponse = await fetch(apiUrl);
+            const repoData = await repoResponse.json();
+
+            // 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 };
+                }
+            }
 
-        // 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";
+            document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
 
+        } catch (error) {
+            console.error('Error fetching data from GitHub API:', error);
+        }
 
+        // Toggle statistics section
+        const toggleButton = document.getElementById('toggle-stats');
+        const statsSection = document.getElementById('statistics-cards');
+        statsSection.style.display = 'none';
 
-    } catch (error) {
-        console.error('Error fetching data from GitHub API:', error);
-    }
-});
+        toggleButton.addEventListener('click', function () {
+            if (statsSection.style.display === 'none') {
+                statsSection.style.display = 'block';
+            } else {
+                statsSection.style.display = 'none';
+            }
+        });
 
+    });
     </script>
+    <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/Website/js/script.js b/Website/js/script.js
index e052caea7..9b05ebe3e 100644
--- a/Website/js/script.js
+++ b/Website/js/script.js
@@ -36,4 +36,26 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     fetchDirectories();
-});
\ No newline at end of file
+});
+
+
+document.addEventListener('DOMContentLoaded', async function () {
+    // Existing code...
+
+    // Toggle languages section
+    const toggleLanguagesButton = document.createElement('button');
+    toggleLanguagesButton.id = 'toggle-languages';
+    toggleLanguagesButton.textContent = 'Show/Hide Languages Used';
+    document.getElementById('languages').insertBefore(toggleLanguagesButton, document.getElementById('language-list'));
+
+    const languagesList = document.getElementById('language-list');
+    languagesList.style.display = 'none';
+
+    toggleLanguagesButton.addEventListener('click', function () {
+        if (languagesList.style.display === 'none') {
+            languagesList.style.display = 'block';
+        } else {
+            languagesList.style.display = 'none';
+        }
+    });
+});
diff --git a/Website/logo.png b/Website/logo.png
new file mode 100644
index 000000000..668a6472b
Binary files /dev/null and b/Website/logo.png differ
diff --git a/Website/styles.css b/Website/styles.css
index b122f297e..b53627288 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -1,190 +1,160 @@
-body {
-    font-family: Arial, sans-serif;
+/* Ensure full height of the body and remove margin/padding */
+html, body {
+    height: 100%;
     margin: 0;
     padding: 0;
-    background-color: #f4f4f4;
-    overflow-y: auto; 
 }
 
+body {
+    background-color: #0a0a2e; /* Darkest blue */
+    color: #f1f1f1;
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+}
 
-/* Header Styles */
 header {
-    background-color: #333;
-    color: white;
-    padding: 20px 20px; 
+    background-color: #121245; /* Slightly lighter dark blue */
+    padding: 10px 20px;
+}
+
+.navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-header h1 {
-    margin: 0;
-    text-align: left;
+.logo-container {
+    display: flex;
+    align-items: center;
+    margin-right: 20px; /* Adds space between logo and links */
 }
 
-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
+.brand-name {
+    font-size: 1.5em;
+    color: #f1f1f1;
 }
 
-nav ul li {
-    margin: 0 15px;
+.nav-links {
+    list-style: none;
+    display: flex;
+    flex-grow: 1; /* Makes the nav links take up available space */
+    justify-content: flex-end; /* Align links to the left */
+    gap: 50px; /* Adds space between each link */
+    margin-left: 20px;
+    right: 10px; /* Adjust this value for the gap between logo and links */
 }
 
-nav ul li a {
-    color: white;
+.nav-links a {
     text-decoration: none;
+    color: #f1f1f1;
     font-weight: bold;
+    white-space: nowrap; /* Prevents wrapping of links */
 }
 
-/* Main Section Styles */
 main {
     padding: 20px;
-    text-align: center;
+    flex: 1; /* Makes main content take up the remaining space */
 }
 
-.cta-button {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #007bff;
-    color: white;
-    text-decoration: none;
-    border-radius: 5px;
-    margin-top: 20px;
+.welcome-section {
+    text-align: center;
+    margin-bottom: 30px;
 }
 
-/* Statistics Cards Styles */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr); 
-    gap: 1rem;
-    margin-top: 2rem;
-    padding: 20px;
+h2 {
+    font-size: 2em;
+    margin-bottom: 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);
+p {
+    font-size: 1.2em;
+    line-height: 1.6;
 }
 
-.stat-card h3 {
-    margin-bottom: 0.5rem;
-    color: #007bff;
+button#toggle-stats {
+    display: block;
+    margin: 0 auto 20px auto;
+    padding: 10px 20px;
+    font-size: 1.1em;
+    background-color: #1a1a5e; /* Dark blue button */
+    color: #f1f1f1;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-    .stats-grid,
-    .contributors-grid {
-        grid-template-columns: 1fr; 
-    }
+button#toggle-stats:hover {
+    background-color: #2a2a7e; /* Lighter blue on hover */
 }
 
-/* Language List Styles */
-#languages ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+#statistics-cards {
+    display: none;
+    text-align: center;
 }
 
-#languages li {
-    margin-bottom: 0.5rem;
+.stats-grid {
     display: flex;
-    align-items: center;
-}
-
-.language-bar {
-    flex-grow: 1;
-    height: 10px;
-    border-radius: 5px;
-    margin-left: 0.5rem;
-    background-color: #007bff;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
 }
 
-/* Footer Styles */
-footer {
-    background-color: #333;
-    color: white;
+.stat-card {
+    background-color: #121245; /* Dark blue for stat cards */
+    padding: 20px;
+    border-radius: 8px;
+    width: 150px;
     text-align: center;
-    padding: 10px 0;
-    position: fixed;
-    width: 100%;
-    bottom: 0;
+    margin-bottom: 20px;
 }
 
-footer a {
-    text-decoration: none;
-    color: #f4f4f4;
+.stat-card h3 {
+    font-size: 1.2em;
+    margin-bottom: 10px;
 }
 
-#repo-list {
-    margin: 20px auto;
-    max-width: 1200px;
-    padding: 0 20px;
+#languages {
+    text-align: center;
+    margin-bottom: 30px;
 }
 
-#directories {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
-    list-style-type: none;
+#language-list {
+    list-style: none;
     padding: 0;
-    margin-top: 50px;
-    margin-bottom: 100px;
-}
-
-.card {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    flex: 1 1 calc(33.333% - 20px); 
-    max-width: calc(33.333% - 20px);
-    padding: 20px;
-    box-sizing: border-box;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: inline-block;
+    text-align: center;
+    column-count: 4; /* Adjust this value to increase or decrease the number of columns */
+    column-gap: 40px; /* Space between columns */
 }
 
-.card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-.card .btn-view-repo {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    color: rgb(33, 16, 189);
-    text-decoration: none;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
+#language-list li {
+    margin: 10px 0;
+    text-align: left; /* Align text to the left within each column */
 }
 
 
-@media (max-width: 768px) {
-    .card {
-        flex: 1 1 calc(50% - 20px);
-        max-width: calc(50% - 20px);
-    }
+/* Footer stays at the bottom */
+.footer {
+    background-color: #121245; /* Dark blue for footer */
+    color: #f1f1f1;
+    padding: 20px;
+    text-align: center;
+    margin-top: auto;
 }
 
-@media (max-width: 480px) {
-    .card {
-        flex: 1 1 100%; 
-        max-width: 100%;
-    }
+button#toggle-languages {
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    font-size: 1.1em;
+    background-color: #1a1a5e; /* Dark blue button */
+    color: #f1f1f1;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
-/* 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));
-    }
+button#toggle-languages:hover {
+    background-color: #2a2a7e; /* Lighter blue on hover */
 }
