diff --git a/public/404.html b/public/404.html
new file mode 100644
index 0000000..1406a83
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>tea &gt; 404</title>
+
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+  <link rel="apple-touch-icon-precomposed" href="/favicon-180.png">
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Prompt:wght@700&display=swap"
+    rel="stylesheet">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz)">
+  <meta name="twitter:title" content="tea.">
+  <meta name="twitter:description" content="something new is brewing.">
+  <meta name="twitter:image" content=" https://tea.xyz/cover.png">
+  <meta property="og:url" content="http://tea.xyz" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="tea.xyz" />
+  <meta property="og:description" content="Equitable Open&hyphen;Source for web3" />
+  <meta property="og:image" content="https://tea.xyz/cover.png" />
+  <meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" />
+</head>
+
+<body>
+  <style>
+    .gf-container {
+      width: 80px;
+      height: 80px;
+      border-radius: 60px;
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      right: 15px;
+      bottom: 15px;
+      cursor: pointer;
+      box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
+      animation: pulse 2s infinite;
+      z-index: 200;
+    }
+
+    .gf-container:hover {
+      animation: none;
+    }
+
+    @-webkit-keyframes pulse {
+      0% {
+        -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
+      }
+
+      70% {
+        -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
+      }
+
+      100% {
+        -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
+      }
+    }
+
+    @keyframes pulse {
+      0% {
+        -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
+        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
+      }
+
+      70% {
+        -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
+        box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
+      }
+
+      100% {
+        -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
+        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
+      }
+    }
+
+    .github-icon {
+      width: 60%;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
+    @media only screen and (max-width: 600px) {
+      .broken-tea{
+        width: 75% !important;
+      }
+    }
+  </style>
+
+  <a href="https://github.com/apps/tea-xyz/installations/new" class="gf-container" style="background-color:#8EC7BF;">
+    <img src="Images/github.svg" alt="" class="github-icon mx-auto">
+
+  </a>
+
+
+  <nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto">
+    <div class="container-fluid top-nav">
+      <a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span>
+          <input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
+          <label for="checkbox1">
+            <div class="hamburger hamburger1">
+              <span class="bar bar1"></span>
+              <span class="bar bar2"></span>
+              <span class="bar bar3"></span>
+              <span class="bar bar4"></span>
+            </div>
+          </label></span>
+      </button>
+      <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
+        <ul class="navbar-nav ms-auto me-4 my-auto">
+          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
+            <a class="nav-link" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#why-tea">Why tea?</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#features">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#community">Community</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://medium.com/teaxyz">Blog</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://linktr.ee/teaxyz">Linktree</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/white-paper/">White Paper</a>
+          </li>
+        </ul>
+        <a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4"
+          href="https://github.com/apps/tea-xyz/installations/new" role="button">Authenticate with tea<span
+            class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span></a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- 404 Page -->
+
+  <div class="container">
+    <div class="row" style="height:100vh;">
+      <div class="col my-auto">
+        <img class="broken-tea" src="Images/404.png" alt="broken teacup" style="width:30%; display:block; margin-left:auto; margin-right:auto;">
+        <h1 class="text-center display-1 mb-lg-5 mb-md-5 mb-sm-5 mb-3">Oops<br>Something Broke.</h1>
+        <p class="text-center lead">We couldn’t find the page you’re looking for.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <div class="container footer mb-5 mt-5">
+    <div class="row mb-5 mt-5">
+      <div class="col-lg-4">
+        <img src="Images/tea-light.svg" alt="tea.xyz logo" style="width:100px;">
+        <p class="boilerplate mt-3 small">tea is revolutionizing open&#8208;source by leveraging blockchain and web3 to
+          ensure fairness and equitability for the developers who power the internet. Now tell me, will you answer the
+          call? A shot’s been heard around the web, and the tea army wants you to join the cause.</p>
+      </div>
+
+      <div class="col-lg-2 col-sm-6 col-6 mt-3">
+        <h6>Quick Links</h6>
+        <ul class="nav flex-column small">
+          <li class="nav-item">
+            <a class="nav-link ps-0" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link ps-0" href="#why-tea">Why tea?</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link ps-0" href="#features">Features</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-lg-2 col-sm-6 col-6 mt-3 mb-3">
+        <h6>tea Links</h6>
+        <ul class="nav flex-column small">
+          <li class="nav-item">
+            <a class="nav-link ps-0" href="https://linktr.ee/teaxyz">Linktree</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link ps-0" href="mailto:hello@tea.xyz">Careers</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-lg-4 mt-3">
+        <h6 class=" mb-4">Get updates to your inbox</h6>
+        <form action="https://xyz.us14.list-manage.com/subscribe/post?u=5ecf36ba3d22ddd88d09708e6&amp;id=4af8bd918a"
+          method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
+          target="_blank" novalidate autocomplete="off">
+          <input type="hidden" name="tags" value="7137169">
+          <input class="email-field mb-2" placeholder="Email" name="EMAIL" type="email" />
+          <input class="email-submit btn-primary mb-3" type="submit" value="subscribe" />
+        </form>
+        <p style="font-size: 16px; color: gray;">You can also share our <a href="https://linktr.ee/teaxyz">Linktree</a>.
+        </p>
+      </div>
+    </div>
+    <div class="row">
+      <p class="text-center" style="font-size:12px; color:#B7C7C8;">© 2022 tea inc.</p>
+    </div>
+  </div>
+
+  <!-- JavaScript Bundle with Popper -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
+  </script>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+  <script>
+    try {
+      fetch('https://app.tea.xyz/api/signups')
+        .then(res => res.json())
+        .then(res => {
+          if (!(localStorage['signup'] || '').match(/:::/)) {
+            $('#count').html(res.signups)
+          }
+          $('#count1').html(res.signups)
+          $('#count2').html(res.signups)
+        })
+    } catch (e) {
+      console.error(e)
+    }
+  </script>
+
+  <script>
+    $(window).scroll(function () {
+      $('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
+    });
+
+    if (localStorage['signup'].match(/:::/)) {
+      const [username, serial] = localStorage.signup.split(':::');
+      $('.box-auth-true').show();
+      $('.box-auth-false').hide();
+      $('#auth-username').html(username);
+      $('#count').html(serial);
+      $('#count-sub-text').html('YOUR AUTHENTICATION NUMBER');
+      $('#communitea').html('Thanks for joining our communi&#39;<span style="color:#54BAAB;">tea</span>');
+      $('#revolution-text').html(
+        'Now stay tuned! As an early authenticator, you’ll be entitled to a variety of exciting rewards, including minted NFT certificates.'
+      );
+      $('#auth-body-text').hide();
+      $('.rounded-pill').hide();
+      $('.auth-btn').html('Configure GitHub App');
+    }
+  </script>
+
+</body>
+
+</html>
+
+
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3M5LVH76F"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'G-Q3M5LVH76F');
+</script>
diff --git a/public/Images/404.png b/public/Images/404.png
new file mode 100644
index 0000000..dd470e8
Binary files /dev/null and b/public/Images/404.png differ
