diff --git a/Website/addrabbitimage b/Website/addrabbitimage
new file mode 100644
index 0000000..170430b
--- /dev/null
+++ b/Website/addrabbitimage
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hacktoberfest Contributors</title>
+  <link rel="stylesheet" href="./1.css">
+  
+  <!-- Google API for Google Sign-In -->
+  <script src="https://apis.google.com/js/platform.js" async defer></script>
+  <meta name="google-signin-client_id" content="YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com">
+
+  <!-- Facebook SDK -->
+  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
+  
+  <style>
+    /* Ensure navbar elements are styled properly */
+    nav {
+      background-color: #333;
+      padding: 10px;
+    }
+
+    .nav-links {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    .nav-links li {
+      float: left;
+      margin-right: 15px;
+    }
+
+    .nav-links li a {
+      color: white;
+      text-decoration: none;
+      padding: 14px 16px;
+      display: block;
+    }
+
+    .nav-links li a:hover {
+      background-color: #575757;
+    }
+
+    /* Ensure login buttons are visible and aligned properly */
+    #login-buttons {
+      float: right;
+    }
+
+    #login-buttons button, #g-signin2 {
+      background-color: #4CAF50;
+      border: none;
+      color: white;
+      padding: 10px 20px;
+      margin-right: 10px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      cursor: pointer;
+    }
+
+    #login-buttons button:hover {
+      background-color: #45a049;
+    }
+
+    /* Contributor grid and hover effect */
+    .contributor-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+
+    .contributor {
+      width: 200px;
+      text-align: center;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      background-color: #f9f9f9;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      position: relative;
+    }
+
+    .contributor:hover {
+      transform: translateY(-15px);  /* Float up effect */
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Enhance shadow */
+    }
+
+    .contributor img {
+      width: 100%;
+      border-radius: 50%;
+    }
+
+    .contributor a {
+      text-decoration: none;
+      color: #333;
+      font-weight: bold;
+    }
+
+    .contributor a:hover {
+      color: #007BFF;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Navbar -->
+  <nav>
+    <ul class="nav-links">
+      <li><a href="#">Dashboard</a></li>
+      <li class="center"><a href="#contributors">Contributors</a></li>
+      <li class="upward"><a href="#kittens">Kittens</a></li>
+      <li class="forward"><a href="#puppies">Puppies</a></li>
+      <li class="forward"><a href="./pet.html">Name Your Pet</a></li>
+
+      <!-- Login buttons (Google and Facebook) -->
+      <li id="login-buttons">
+        <button onclick="fbLogin()">Login with Facebook</button> <!-- Facebook login button -->
+      </li>
+
+      <!-- Display logged-in user name -->
+      <li id="user-name" style="float: right; margin-right: 20px;"></li>
+    </ul>
+
+    <!-- Dark Mode Toggle
+    <button id="dark-mode-toggle" class="dark-mode-toggle">
+      🌙/☀️
+    </button> -->
+  </nav>
+
+  <!-- Contributors Section -->
+  <section id="contributors">
+    <h2>Hacktoberfest Contributors</h2>
+    <div class="contributor-grid" id="contributor-grid">
+      <!-- Contributors will be dynamically injected here by JavaScript -->
+    </div>
+  </section>
+
+  <!-- Kittens Section -->
+  <section id="kittens">
+    <h2>Adorable Kittens</h2>
+    <div class="contributor-grid">
+      <div class="contributor">
+        <img src="https://shorturl.at/FYbUg" alt="Kitten">
+        <a href="https://www.dspca.ie/kitten-season/">Learn More About Kittens</a>
+      </div>
+      <div class="contributor">
+        <img src="https://shorturl.at/NLjcO" alt="Kitten">
+        <a href="https://www.adverts.ie/results/kittens">Cute Kitten Gallery</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Puppies Section -->
+  <section id="pet">
+    <h2>Cute Pet</h2>
+    <div class="contributor-grid">
+      <div class="contributor">
+        <img src="https://placedog.net/400/300" alt="Puppy">
+        <a href="https://dogs.ie/">Meet the cute dog</a>
+      </div>
+      <div class="contributor">
+        <img src="cutest-rabbit-breeds.webp" alt="rabbit">
+        <a href="https://www.dogstrust.ie/">rabbit Cuteness Overload</a>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <p> &copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
+  </footer>
+
+  <!-- JavaScript for Contributors and Dark Mode -->
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Fetch the contributor list JSON file
+      fetch('./Contributor_list.json')
+        .then(response => response.json())
+        .then(data => {
+          const contributorGrid = document.getElementById('contributor-grid');
+
+          data.forEach(contributor => {
+            const contributorElement = document.createElement('div');
+            contributorElement.className = 'contributor';
+            
+            const githubUrl = contributor.github_url;
+            const username = githubUrl.match(/https:\/\/github\.com\/([^\/]+)/)[1];
+
+            if (username) {
+              fetch(`https://api.github.com/users/${username}`)
+                .then(response => response.json())
+                .then(data => {
+                  if (data && data.avatar_url) {
+                    const avatar_img = data.avatar_url;
+                    contributorElement.innerHTML = `
+                      <img src="${avatar_img}" alt="Contributor Avatar">
+                      <a href="${contributor.github_url}" target="_blank">${contributor.name}</a>
+                      <br>
+                      <p id="action">${contributor.action}</p>
+                    `;
+                  }
+                });
+            }
+
+            contributorGrid.appendChild(contributorElement);
+          });
+        });
+
+      // Set year in the footer
+      document.getElementById('year').textContent = new Date().getFullYear();
+
+      // Dark Mode Toggle
+      const darkModeToggle = document.getElementById('dark-mode-toggle');
+      const body = document.body;
+
+      darkModeToggle.addEventListener('click', () => {
+        body.classList.toggle('dark-mode');
+        const isDarkMode = body.classList.contains('dark-mode');
+        darkModeToggle.textContent = isDarkMode ? '☀️  Light Mode' : '🌙  Dark Mode';
+      });
+    });
+  </script>
+
+  <!-- Facebook Login Logic -->
+  <script>
+    window.fbAsyncInit = function() {
+      FB.init({
+        appId      : 'YOUR_FACEBOOK_APP_ID',
+        cookie     : true,
+        xfbml      : true,
+        version    : 'v16.0'
+      });
+
+      FB.AppEvents.logPageView();   
+    };
+
+    function fbLogin() {
+      FB.login(function(response) {
+        if (response.status === 'connected') {
+          // Logged into your webpage and Facebook.
+          FB.api('/me', { fields: 'first_name' }, function(response) {
+            var firstName = response.first_name;
+
+            // Display the user's first name in the navbar
+            document.getElementById('user-name').innerHTML = `Welcome, ${firstName}`;
+            
+            // Hide the Facebook login button after successful login
+            document.querySelector('button[onclick="fbLogin()"]').style.display = 'none';
+          });
+        } else {
+          console.log('User cancelled login or did not fully authorize.');
+        }
+      });
+    }
+  </script>
+</body>
+</html>
