diff --git a/src/pages/web-check-api/index.astro b/src/pages/web-check-api/index.astro
new file mode 100644
index 0000000..74720d3
--- /dev/null
+++ b/src/pages/web-check-api/index.astro
@@ -0,0 +1,281 @@
+---
+import BaseLayout from '@layouts/Base.astro';
+import NavBar from '@components/scafold/Nav.astro';
+import Footer from '@components/scafold/Footer.astro';
+import Icon from '@components/molecules/Icon.svelte';
+
+---
+
+<BaseLayout
+  title="API | Web Check"
+  description="Get started with the Web Check API."
+>
+  <div class="web-check-page">
+    <NavBar />
+    <main>
+      <h1>Web Check API</h1>
+      <p class="intro">
+        The Web Check API gives you programatic access to over 30 categories of web metrics.<br />
+        Integrate into your own workflows and applications, to monitor any website's performance, SEO, security, and more.
+      </p>
+    
+      <div class="option-cards">
+
+        <div class="card">
+          <h3>API Documentation</h3>
+          <p>
+            View listing of all available endpoints, their usage, output and examples.
+          </p>
+          <div class="buttons">
+            <a href="/web-check-api/spec">
+              <img src="/assets/images/swagger.svg" />
+              OpenAPI Spec
+            </a>
+          </div>
+        </div>
+        <div class="card">
+          <h3>API Key</h3>
+          <p>
+            Get your API key, and start using the API.
+          </p>
+          <div class="buttons">
+            <a href="/account">
+              <img src="/assets/images/webauthn.svg" />
+              Sign Up
+            </a>
+          </div>
+        </div>
+        <div class="card">
+          <h3>API Source</h3>
+          <p>
+            View, edit, download or deploy the API from source.
+          </p>
+          <div class="buttons">
+            <a href="https://github.com/xray-web/web-check-api">
+              <img src="/assets/images/github.svg" />
+              GitHub
+            </a>
+          </div>
+        </div>
+
+
+        <!-- { cardData.map((card, cardIndex) => (
+          <div class="card">
+            <span class="option">Option #{cardIndex + 1}</span>
+            <h3>{card.title}</h3>
+            <p>{card.description}</p>
+            { card.buttons && (
+              <div class="buttons">
+                { card.buttons.map(button => (
+                  <a href={button.link}>
+                    <img src={button.image} />
+                    {button.name}
+                  </a>
+                ))}
+              </div>
+            )}
+            { card.command && (
+              <div class="shaddow docker-command">
+                <code>{card.command}</code>
+                <button><Icon name="copy" size={0.8} /></button>
+              </div>
+            )}
+          </div>
+        ))} -->
+    </div>
+    </main>
+    <Footer />
+  </div>
+</BaseLayout>
+
+
+<style lang="scss">
+  @import '@styles/global.scss';
+  .web-check-page {
+    padding-top: 2rem;
+    margin: 0 auto;
+    min-height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-image: url('/assets/images/background-dots.svg');
+    @include mobile-down {
+      padding: 0.5rem;
+    }
+    main {
+      width: 80vw;
+      margin: 0 auto;
+      min-height: 100%;
+      flex-grow: 1;
+      padding: 5rem 0 2rem 0;
+      max-width: 1200px;
+      @include mobile-down {
+        padding: 1rem 0;
+      }
+      .intro {
+        font-size: 1.2rem;
+        line-height: 1.5;
+        margin-top: 1rem;
+      }
+    }
+    .option-cards {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: repeat(2, 1fr);
+      margin-top: 2.5rem;
+      .card:first-child {
+        grid-column: span 2;
+      }
+      @include tablet-landscape-down {
+        grid-template-columns: 1fr;
+        .card:first-child {
+          grid-column: span 1;
+        }
+      }
+      .card {
+        padding: 0.5rem 1rem;
+        background-color: var(--background);
+        color: var(--text-color);
+        border-radius: 4px;
+        border: 1px solid var(--primary-transparent);
+        .option {
+          color: var(--primary);
+          font-size: 0.8rem;
+        }
+        h3 {
+          margin-top: 1rem;
+        }
+        p {
+          line-height: 1.3;
+        }
+        .docker-command {
+          display: flex;
+          margin: 1rem 0;
+          position: relative;
+          button {
+            background: var(--background);
+            border: none;
+            color: var(--text-color);
+            position: absolute;
+            right: 0.5rem;
+            top: 0.5rem;
+            z-index: 2;
+            opacity: 0.5;
+          }
+          code {
+            background-color: var(--background);
+            padding: 0.5rem 2rem 0.5rem 0.5rem;
+            display: block;
+            font-family: PTMono, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+            z-index: 2;
+            border-radius: 3px;
+            width: fit-content;
+          }
+        }
+
+        .buttons {
+          display: flex;
+          gap: 1rem;
+          flex-wrap: wrap;
+          margin-bottom: 0.5rem;
+          a {
+            padding: 0.5rem 1rem;
+            background-color: var(--primary);
+            color: var(--background);
+            border-radius: 4px;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            &:hover {
+              background-color: var(--text-color);
+              color: var(--background);
+            }
+            img {
+              width: 1rem;
+              filter: grayscale(100%);
+            }
+          }
+        }
+      }
+      
+    }
+  }
+  .shaddow {
+    --c0: #f4ffc7;
+    --c1: #d6fb41;
+    --c2: #c2f300;
+    --c3: #a8d200;
+    --c4: #5e7500;
+
+    --gradient-shadow: linear-gradient(
+      45deg,
+      var(--c0),
+      var(--c1),
+      var(--c2),
+      var(--c3),
+      var(--c4),
+      var(--c0),
+      var(--c1),
+      var(--c2),
+      var(--c3),
+      var(--c4),
+      var(--c3),
+      var(--c2),
+      var(--c1)
+    );
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+    width: fit-content;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      background: var(--gradient-shadow);
+      background-size: 400%;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      z-index: -1;
+      animation: animate 10s linear infinite;
+      transition: all 0.3s ease;
+    }
+
+    &:before {
+      opacity: 0.1;
+    }
+
+    &:after {
+      filter: blur(3px);
+      opacity: 0.3;
+    }
+
+    &:hover {
+      &:before,
+      &:after {
+        animation: animate 40s linear infinite;
+      }
+      &:after {
+        opacity: 0.7;
+      }
+    }
+
+    @keyframes animate {
+      0% {
+        background-position: 0 0;
+      }
+      50% {
+        background-position: 120% 0;
+      }
+      100% {
+        background-position: 0 0;
+      }
+    }
+  }
+
+
+</style>
diff --git a/src/pages/web-check-api/spec.astro b/src/pages/web-check-api/spec.astro
new file mode 100644
index 0000000..0b95924
--- /dev/null
+++ b/src/pages/web-check-api/spec.astro
@@ -0,0 +1,51 @@
+---
+import BaseLayout from '@layouts/Base.astro';
+import NavBar from '@components/scafold/Nav.astro';
+// import Footer from '@components/scafold/Footer.astro';
+// import config from '../site-config';
+
+---
+
+<BaseLayout
+  title="API Docs | Web Check"
+  description="API documentation for the Web Check backend REST endpoints"
+>
+  <Fragment slot="head">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui.css">
+    <link rel="stylesheet" href="https://rawcdn.githack.com/Amoenus/SwaggerDark/2064ccd45b571865a64c731fa6bfddfbf2a01fe1/SwaggerDark.css">
+  </Fragment>
+  <main>
+    <NavBar />
+    <div id="swagger-ui"></div>
+  </main>
+</BaseLayout>
+
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui-bundle.js"></script>
+<script type="module" is:inline>
+  window.onload = () => {
+    SwaggerUIBundle({
+      url: '/resources/openapi-spec.yml',
+      dom_id: '#swagger-ui',
+      deepLinking: true,
+      presets: [
+        SwaggerUIBundle.presets.apis,
+        SwaggerUIBundle.SwaggerUIStandalonePreset
+      ],
+    });
+  }
+</script>
+
+<style lang="scss">
+  @import '@styles/global.scss';
+  main {
+    padding: 2rem;
+    margin: 0 auto;
+    height: 100vh;
+    width: 100vw;
+    max-width: 1600px;
+    @include mobile-down {
+      padding: 0;
+    }
+  }
+
+</style>