diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9079981
--- /dev/null
+++ b/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Wdiscordbot</title>
+  <style>
+    /* Global Styles */
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      background-color: #000;
+      color: #fff;
+      line-height: 1.6;
+    }
+    
+    /* Fixed Navigation Bar */
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 15px 0;
+      backdrop-filter: blur(5px);
+      z-index: 1000;
+    }
+    .navbar ul {
+      list-style: none;
+      display: flex;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+    }
+    .navbar ul li {
+      margin: 0 20px;
+    }
+    .navbar ul li a {
+      color: #fff;
+      text-decoration: none;
+      font-size: 18px;
+      transition: color 0.3s ease;
+    }
+    .navbar ul li a:hover {
+      color: #1abc9c;
+    }
+
+    /* Main Section Styles */
+    section {
+      min-height: 100vh;
+      padding: 80px 20px 20px; /* top padding accounts for the fixed navbar */
+    }
+    h1 {
+      margin-top: 60px;
+      font-size: 48px;
+      text-align: center;
+    }
+    p {
+      max-width: 800px;
+      margin: 20px auto;
+      font-size: 20px;
+      text-align: center;
+    }
+    
+    /* Button Styling */
+    .button-container {
+      text-align: center;
+      margin-top: 40px;
+    }
+    .btn {
+      background: #1abc9c;
+      color: #fff;
+      padding: 15px 25px;
+      margin: 10px;
+      border: none;
+      border-radius: 5px;
+      text-decoration: none;
+      font-size: 18px;
+      cursor: pointer;
+      transition: background 0.3s ease, transform 0.3s ease;
+    }
+    .btn:hover {
+      background: #16a085;
+      transform: scale(1.05);
+    }
+    
+    /* Fade-in Animation for Sections */
+    section {
+      opacity: 0;
+      transform: translateY(20px);
+      transition: opacity 1s ease-out, transform 1s ease-out;
+    }
+    section.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  </style>
+</head>
+<body>
+  <!-- Navigation Bar -->
+  <nav class="navbar">
+    <ul>
+      <li><a href="#home">Home</a></li>
+      <li><a href="#wiki">Wiki</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#credits">Credits</a></li>
+    </ul>
+  </nav>
+
+  <!-- Home Section -->
+  <section id="home">
+    <h1>W DIscord Bot</h1>
+    <p>Explore our repository and add our bot to your Discord!</p>
+    <div class="button-container">
+      <a class="btn" href="https://github.com/pancakes-proxy/codespaces-blank" target="_blank">View on GitHub</a>
+      <a class="btn" href="https://discord.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&scope=bot" target="_blank">Add to Discord</a>
+    </div>
+  </section>
+
+  <!-- Wiki Section -->
+  <section id="wiki">
+    <h1>Wiki</h1>
+    <p>Find detailed guides and documentation on how to contribute to our project.</p>
+  </section>
+
+  <!-- About Section -->
+  <section id="about">
+    <h1>About</h1>
+    <p>This project is developed to make a complex, feature packed yet open source discord bot.</p>
+  </section>
+
+  <!-- Credits Section -->
+  <section id="credits">
+    <h1>Credits</h1>
+    <p>Thanks to all our contributors, testers, and patrons for making this project possible.</p>
+    <b>Developer - Zacarias Posey</b>
+    <b>Developer - Izzy Perez</b>
+    <b>Contributor - Milly</b>
+    <b>Contributor - JW</b>
+  </section>
+
+  <script>
+    // Add "visible" class to sections when they come into view using IntersectionObserver.
+    const observerOptions = {
+      threshold: 0.1
+    };
+
+    const observerCallback = (entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          observer.unobserve(entry.target);
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+    const sections = document.querySelectorAll("section");
+    sections.forEach(section => {
+      observer.observe(section);
+    });
+  </script>
+</body>
+</html>
