diff --git a/src/pages/self-hosted-setup.astro b/src/pages/self-hosted-setup.astro
new file mode 100644
index 0000000..343f0d4
--- /dev/null
+++ b/src/pages/self-hosted-setup.astro
@@ -0,0 +1,277 @@
+---
+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';
+
+const cardData = [
+  {
+    title: 'Deploy with Docker',
+    description: 'Just one command, and you\'ll have your own Web Check instance running on your server in minutes.',
+    command: 'docker run -p 3000:3000 lissy93/web-check',
+  },
+  {
+    title: '1-Click Deploy',
+    description: 'Don\'t have a server? Not a problem! Deploy Web Check with one click on Vercel or Netlify.',
+    buttons: [
+      {
+        name: 'Vercel',
+        image: '/assets/images/vercel.svg',
+        link: 'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.'
+        +'com%2Fxray-web%2Fweb-check-free&project-name=web-check-free&repository'
+        + '-name=web-check-free&demo-title=Web%20Check&demo-description=Try%20ou'
+        + 't%20the%20live%20demo&demo-url=https%3A%2F%2Fweb-check.xyz%2F&demo-ima'
+        + 'ge=https%3A%2F%2Fi.ibb.co%2Fr0jXN6s%2Fweb-check.png'
+      },
+      {
+        name: 'Netlify',
+        image: '/assets/images/netlify.svg',
+        link: 'https://app.netlify.com/start/deploy?repository='
+        + 'https://github.com/xray-web/web-check-free',
+      }
+    ]
+  },
+  {
+    title: 'Deploy from Source',
+    description: 'Want to customize Web Check? Clone the repository and deploy it on your server.',
+    buttons: [
+      {
+        name: 'GitHub',
+        image: '/assets/images/github.svg',
+        link: '',
+      }
+    ]
+  }
+];
+
+---
+
+<BaseLayout
+  title="Self-Hosted Setup | Web Check"
+  description="Get started with running Web Check locally or on your own server."
+>
+  <div class="web-check-page">
+    <NavBar />
+    <main>
+      <h1>Self-Hosted Setup</h1>
+      <p>
+        Get your own free instance of Web Check, running locally or on your server.
+      </p>
+    
+      <div class="option-cards">
+
+        { 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;
+    max-width: 1600px;
+    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;
+      @include mobile-down {
+      padding: 1rem 0;
+    }
+    }
+    .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>