diff --git a/.web/docs/.vitepress/config.ts b/.web/docs/.vitepress/config.ts
index 1901d70..b643318 100644
--- a/.web/docs/.vitepress/config.ts
+++ b/.web/docs/.vitepress/config.ts
@@ -84,10 +84,10 @@ export default defineConfig({
         },
 
         nav: [
-            {text: 'Guide', link: '/guide/'},
             {text: 'Quick Start', link: '/guide/quick-start'},
             {text: 'Connectors', link: '/guide/connectors/'},
             {text: 'Downloads', link: '/guide/connectors/plugin#downloading-the-connect-plugin'},
+            {text: 'Pricing', link: '/plans'},
             {text: 'Changelog', link: '/guide/changelog'},
             ...projects,
         ],
diff --git a/.web/docs/.vitepress/theme/components/LogoCloud.vue b/.web/docs/.vitepress/theme/components/LogoCloud.vue
index eb28515..9e6c84d 100644
--- a/.web/docs/.vitepress/theme/components/LogoCloud.vue
+++ b/.web/docs/.vitepress/theme/components/LogoCloud.vue
@@ -11,8 +11,7 @@
           </p>
           <div class="mt-8 flex items-center gap-x-6">
             <a class="rounded-md bg-[--vp-button-brand-bg] px-3.5 py-2.5 text-sm font-semibold text-[--vp-button-brand-text] shadow-sm hover:bg-[--vp-button-brand-hover-bg] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--vp-button-brand-active-bg]"
-               href="https://app.minekube.com/">Dashboard
-              App</a>
+               href="https://app.minekube.com/">Dashboard App</a>
             <a class="text-sm font-semibold text-[--vp-button-brand-text]" href="https://minekube.com/discord">Discord
               <span aria-hidden="true">&rarr;</span></a>
           </div>
diff --git a/.web/docs/.vitepress/theme/components/plans/PlansLanding.vue b/.web/docs/.vitepress/theme/components/plans/PlansLanding.vue
new file mode 100644
index 0000000..a82e406
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/PlansLanding.vue
@@ -0,0 +1,13 @@
+<script setup>
+import Two_tiers_with_emphasized_tier from "./two_tiers_with_emphasized_tier.vue";
+import With_comparison_table_on_dark from "./with_comparison_table_on_dark.vue";
+import Faq_two_columns from "./faq_two_columns.vue";
+</script>
+
+<template>
+
+  <two_tiers_with_emphasized_tier/>
+  <with_comparison_table_on_dark/>
+  <faq_two_columns/>
+
+</template>
diff --git a/.web/docs/.vitepress/theme/components/plans/README.md b/.web/docs/.vitepress/theme/components/plans/README.md
new file mode 100644
index 0000000..bcdb859
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/README.md
@@ -0,0 +1,14 @@
+// please design a nice saas plans landing page
+// with 1 free plan and 1 paid plan called "Minekube Plus"
+// the page has a prominent header "Plan Pricing" and a subheader, following the plans.
+// below the plans is a section explaining our pricing philosophy, and a call to action to contact us for custom plans.
+// use tailwind classes
+
+copies:
+
+subheader:
+Use Minekube for free with your whole team.
+Upgrade to enable Browser opt-outs, and additional features.
+
+free plan: title: Free, subheader: Free for everyone
+plus plan: title: Minekube Plus,
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/plans/faq_two_columns.vue b/.web/docs/.vitepress/theme/components/plans/faq_two_columns.vue
new file mode 100644
index 0000000..b7115ed
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/faq_two_columns.vue
@@ -0,0 +1,79 @@
+<template>
+  <div >
+    <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+      <div class="mx-auto max-w-2xl text-center">
+        <h2 class="text-2xl font-bold leading-10 tracking-tight text-[--vp-c-text-1]">Frequently asked questions</h2>
+        <p class="mt-6 text-base leading-7 text-[--vp-c-text-2]">Have a different question and can’t find the answer you’re looking for? Reach out to us on <a href="https://minekube.com/discord" class="hover:text-indigo-30 font-semibold text-indigo-400 hover:text-indigo-300">Discord</a> and we or the community will get back to you as soon as possible.</p>
+      </div>
+      <div class="mt-20">
+        <dl class="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:gap-x-10">
+          <div v-for="faq in faqs" :key="faq.id">
+            <dt class="text-xl font-semibold leading-7 text-[--vp-c-text-1]">{{ faq.question }}</dt>
+            <dd class="mt-2 text-base leading-7 text-[--vp-c-text-2]">{{ faq.answer }}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const faqs = [
+  {
+    id: 0,
+    question: "What is your pricing philosophy?",
+    // answer: "We hate limits. At Minekube, our core philosophy centers around empowering developers, ensuring that Connect goes out of your way to be a truly empowering platform for creators. We believe in fostering an environment where users can thrive without the constraints of unnecessary limitations, akin to Cloudflare's model. Our free tier is designed to empower the ecosystem and users to grow and innovate, while our paid plan offers enhanced features and customizations for those wanting to opt out of the ecosystem. This approach ensures that the core functionalities remain accessible to everyone, supporting both burgeoning communities and larger. We're committed to creating a happy user base, driven by a robust ecosystem free from stupid limits, where developers feel supported in their creative and technical endeavors."
+    answer: "We hate limits. At Minekube, our philosophy is to empower developers by making Connect a platform that transcends ordinary constraints, inspired by Cloudflare's model. Our free tier enables users and the ecosystem to flourish and innovate, while our paid plan provides advanced features for those seeking further customization outside the standard ecosystem. This strategy ensures core functionalities are universally accessible, nurturing both emerging and established communities. Our commitment is to a satisfied community, upheld by an ecosystem that supports developers' creative and technical projects without unnecessary restrictions."
+  },
+  {
+    id: 1,
+    question: "What does 'Prevent Fallback to Browser Hub' mean?",
+    answer: "This option controls whether players should be redirected to the Browser Hub when the endpoint players are trying to connect to is offline or when a player is disconnected from the endpoint. Enabling this option could lead to players being unable to connect when the endpoint is offline."
+  },
+  {
+    id: 2,
+    question: "What does 'Prevent Browser Endpoint Listing' mean?",
+    answer: "This option controls whether the endpoint should be listed on the Browser for advertising purposes. Enabling this option could reduce the visibility of the endpoint to potential players."
+  },
+  {
+    id: 3,
+    question: "What does 'Prevent /browser Command' mean?",
+    answer: "This option controls whether the /browser command should be available for players on the endpoint. Enabling this option could limit the commands available to players on the endpoint."
+  },
+  {
+    id: 4,
+    question: "What does 'Prevent Fallback Motd' mean?",
+    answer: "This option controls whether the default fallback Message of the Day (Motd) should be displayed to players when the endpoint is offline. Enabling this option could leave players without important information when the endpoint is offline."
+  },
+  {
+    id: 5,
+    question: "What does 'Prevent Default Tablist' mean?",
+    answer: "This option controls whether a default tablist should be set for players when they connect to or switch to the endpoint. Enabling this option could affect the user interface for players on the endpoint."
+  },
+  {
+    id: 6,
+    question: "What are the MOTD Customizations in the paid plan?",
+    answer: "Paid users will have access to advanced dashboard functionalities, including the ability to edit MOTDs directly within the dashboard. This feature enhances control over server messages and announcements."
+  },
+  {
+    id: 7,
+    question: "Are there any Player Capacity Considerations?",
+    answer: "We hate stupid limits. See our philosophy answer earlier. Hence, any limits introduced would be generous to support community growth and development needs."
+  },
+  {
+    id: 8,
+    question: "What is the Bedrock Support feature?",
+    answer: "Plans to support Bedrock players by enabling a simple option in the dashboard to integrate GeyserMC without management overhead. This would allow Bedrock players to join Java servers, expanding the server's reach and inclusivity."
+  },
+  {
+    id: 9,
+    question: "Can I setup a custom domain?",
+    answer: "Yes, you can setup a custom domain for your Connect endpoint. This feature is available to all users, including free tier users."
+  },
+  {
+    id: 10,
+    question: "Can you implement a feature for me?",
+    answer: "We are always open to feedback and suggestions. If you have a feature request, please reach out to us on Discord and we will consider it for future development if it aligns with our vision and we believe it will benefit the whole community."
+  },
+];
+</script>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue b/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue
new file mode 100644
index 0000000..a6a733a
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="relative isolate px-6 py-24 sm:py-32 lg:px-8">
+    <div class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl" aria-hidden="true">
+      <div class="mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[--vp-c-brand-1] to-[#ff80b5] opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+    </div>
+    <div class="mx-auto max-w-2xl text-center lg:max-w-4xl">
+      <h2 class="text-base font-semibold leading-7 text-[--vp-c-brand-2]">Minekube Connect</h2>
+      <p class="mt-2 text-4xl font-bold tracking-tight text-[--vp-c-text-1] sm:text-5xl">Pricing Plans</p>
+    </div>
+    <p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-[--vp-c-text-1]">Use Minekube for free with your whole team. Upgrade to opt out of Browser ecosystem, and enable additional features.</p>
+    <div class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
+      <div v-for="(tier, tierIdx) in tiers" :key="tier.id" :class="[tier.featured ? 'dark relative bg-red-950 shadow-2xl' : 'dark:bg-transparent/60 bg-[--vp-c-default-soft] sm:mx-8 lg:mx-0', tier.featured ? '' : tierIdx === 0 ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl' : 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none', 'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10']">
+        <h3 :id="tier.id" :class="[tier.featured ? 'text-[--vp-c-brand-2]' : 'text-[--vp-c-brand-2]', 'text-base font-semibold leading-7']">{{ tier.name }}</h3>
+        <p class="mt-4 flex items-baseline gap-x-2">
+          <span :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-1]', 'text-5xl font-bold tracking-tight']">{{ tier.priceMonthly }}</span>
+          <span :class="[tier.featured ? 'text-[--vp-c-text-2]' : 'text-[--vp-c-text-3]', 'text-base']">/month</span>
+        </p>
+        <p :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-6 text-base leading-7']">{{ tier.description }}</p>
+        <ul role="list" :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-8 space-y-3 text-sm leading-6 sm:mt-10']">
+          <li v-for="feature in tier.features" :key="feature" class="flex gap-x-3">
+            <svg :class="[tier.featured ? 'text-[--vp-c-brand-2]' : 'text-[--vp-c-brand-2]', 'h-6 w-5 flex-none']" class="h-6 w-5 flex-none text-[--vp-c-brand-2]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+            </svg>
+            {{ feature }}
+          </li>
+        </ul>
+        <a :href="tier.href" :aria-describedby="tier.id" :class="[tier.featured ? 'bg-white text-black shadow-sm hover:bg-red-600 hover:text-white focus-visible:outline-indigo-500' : 'bg-[--vp-button-brand-bg] text-[--vp-button-brand-text] hover:bg-[--vp-button-brand-hover-bg] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--vp-button-brand-active-bg]', 'mt-8 block rounded-md py-2.5 px-3.5 text-center text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 sm:mt-10']">{{ tier.ctaText || 'Get started today' }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const tiers = [
+  {
+    name: 'Free for everyone forever',
+    id: 'tier-free',
+    ctaText: 'Speedrun: Connect quick start',
+    href: '/guide/quick-start',
+    priceMonthly: '$0',
+    description: "Great for side projects, or projects with a small team. Build DDoS protected Minecraft networks close to your users.",
+    features: [
+      'Unlimited endpoints & players',
+      'DDoS protected global edge',
+      'Unlimited org members',
+      'Custom domains',
+    ],
+    featured: false,
+  },
+  {
+    name: 'Plus',
+    id: 'tier-plus',
+    href: 'https://minekube.com/discord',
+    ctaText: 'Plus is coming soon',
+    priceMonthly: '$5',
+    description: 'Enhance branding and unlock features to scale your project. Everything in Free, plus:',
+    features: [
+      'Opt-out of Browser Hub fallback',
+      'Opt-out of the default tablist',
+      'Opt-out of fallback motd',
+      'Custom fallback motd',
+      'Priority support',
+      'Automated chat moderation',
+    ],
+    featured: true,
+  },
+]
+</script>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue b/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue
new file mode 100644
index 0000000..a25f9da
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-base font-semibold leading-7 text-[--vp-c-brand-2]">Plans Comparison</h2>
+        <p class="mt-2 text-4xl font-bold tracking-tight text-[--vp-c-text-1] sm:text-5xl">Plans for projects of&nbsp;all&nbsp;sizes</p>
+      </div>
+      <p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-[--vp-c-text-1]">Not ready for Plus? Every organization starts on the generous Free forever plan. It’s great for side projects, or learning how to use Minekube</p>
+
+      <!-- xs to lg -->
+      <div class="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
+        <section v-for="tier in tiers" :key="tier.id" :class="[tier.mostPopular ? 'rounded-xl bg-white/5 ring-1 ring-inset ring-white/10' : '', 'p-8']">
+          <h3 :id="tier.id" class="text-sm font-semibold leading-6 text-[--vp-c-text-1]">{{ tier.name }}</h3>
+          <p class="mt-2 flex items-baseline gap-x-1">
+            <span class="text-4xl font-bold text-[--vp-c-text-1]">{{ tier.priceMonthly }}</span>
+            <span class="text-sm font-semibold text-[--vp-c-text-1]">/month</span>
+          </p>
+          <a :href="tier.href" :aria-describedby="tier.id" :class="[tier.mostPopular ? 'bg-indigo-500 text-[--vp-c-text-1] hover:bg-indigo-400 focus-visible:outline-indigo-500' : 'bg-white/10 text-[--vp-c-text-1] hover:bg-white/20 focus-visible:outline-white', 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2']">Buy plan</a>
+          <ul role="list" class="mt-10 space-y-4 text-sm leading-6 text-[--vp-c-text-1]">
+            <li v-for="section in sections" :key="section.name">
+              <ul role="list" class="space-y-4">
+                <template v-for="feature in section.features" :key="feature.name">
+                  <li v-if="feature.tiers[tier.name]" class="flex gap-x-3">
+<!--                    <CheckIcon class="h-6 w-5 flex-none text-[--vp-c-brand-2]" aria-hidden="true" />-->
+                    <svg class="h-6 w-5 flex-none text-[--vp-c-brand-2]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                    </svg>
+                    <span>
+                      {{ feature.name }}
+                      {{ ' ' }}
+                      <span v-if="typeof feature.tiers[tier.name] === 'string'" class="text-sm leading-6 text-gray-400">({{ feature.tiers[tier.name] }})</span>
+                    </span>
+                  </li>
+                </template>
+              </ul>
+            </li>
+          </ul>
+        </section>
+      </div>
+
+      <!-- lg+ -->
+      <div class="isolate mt-20 hidden lg:block">
+        <div class="relative -mx-8">
+          <div v-if="tiers.some((tier) => tier.mostPopular)" class="absolute inset-x-4 inset-y-0 -z-10 flex">
+            <div class="flex w-1/4 px-4" aria-hidden="true" :style="{ marginLeft: `${(tiers.findIndex((tier) => tier.mostPopular) + 1) * 25}%` }">
+              <div class="w-full rounded-t-xl border-x border-t border-[--vp-button-brand-border]/10 dark:border-white/10 dark:bg-white/5 bg-gray-500/5" />
+            </div>
+          </div>
+          <table class="w-full table-fixed border-separate border-spacing-x-8 text-left">
+            <caption class="sr-only">
+              Pricing plan comparison
+            </caption>
+            <colgroup>
+              <col class="w-1/4" />
+              <col class="w-1/4" />
+              <col class="w-1/4" />
+              <col class="w-1/4" />
+            </colgroup>
+            <thead>
+              <tr>
+                <td />
+                <th v-for="tier in tiers" :key="tier.id" scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
+                  <div class="text-sm font-semibold leading-7 text-[--vp-c-text-1]">{{ tier.name }}</div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row"><span class="sr-only">Price</span></th>
+                <td v-for="tier in tiers" :key="tier.id" class="px-6 pt-2 xl:px-8">
+                  <div class="flex items-baseline gap-x-1 text-[--vp-c-text-1]">
+                    <span class="text-4xl font-bold">{{ tier.priceMonthly }}</span>
+                    <span class="text-sm font-semibold leading-6">/month</span>
+                  </div>
+                  <a :href="tier.href" :class="[tier.mostPopular ? 'bg-black text-white dark:bg-white dark:text-black dark:hover:bg-red-600 hover:bg-red-600 dark:hover:text-[--vp-c-text-1] focus-visible:outline-indigo-600' : 'bg-[--vp-button-brand-bg] text-[--vp-button-brand-text] hover:bg-[--vp-button-brand-hover-bg] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--vp-button-brand-active-bg]', 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 text-[--vp-c-text-1] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2']">{{ tier.ctaText || 'Buy plan' }}</a>
+                </td>
+              </tr>
+              <template v-for="(section, sectionIdx) in sections" :key="section.name">
+                <tr>
+                  <th scope="colgroup" colspan="4" :class="[sectionIdx === 0 ? 'pt-8' : 'pt-16', 'pb-4 text-sm font-semibold leading-6 text-[--vp-c-text-1]']">
+                    {{ section.name }}
+                    <div class="absolute inset-x-8 mt-4 h-px dark:bg-white/10 bg-gray-500/10" />
+                  </th>
+                </tr>
+                <tr v-for="feature in section.features" :key="feature.name">
+                  <th scope="row" class="py-4 text-sm font-normal leading-6 text-[--vp-c-text-1]">
+                    {{ feature.name }}
+                    <div class="absolute inset-x-8 mt-4 h-px dark:bg-white/5 bg-gray-500/5" />
+                  </th>
+                  <td v-for="tier in tiers" :key="tier.id" class="px-6 py-4 xl:px-8">
+                    <div v-if="typeof feature.tiers[tier.name] === 'string'" class="text-center text-sm leading-6 text-[--vp-c-text-1]">{{ feature.tiers[tier.name] }}</div>
+                    <template v-else>
+                      <svg v-if="feature.tiers[tier.name] === true" class="mx-auto h-5 w-5 flex-none text-[--vp-c-brand-2]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                      </svg>
+<!--                      <CheckIcon v-if="feature.tiers[tier.name] === true" class="mx-auto h-5 w-5 text-[--vp-c-brand-2]" aria-hidden="true" />-->
+                      <svg v-else class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
+                      </svg>
+<!--                      <MinusIcon v-else class="mx-auto h-5 w-5 text-gray-500" aria-hidden="true" />-->
+                      <span class="sr-only">{{ feature.tiers[tier.name] === true ? 'Included' : 'Not included' }} in {{ tier.name }}</span>
+                    </template>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// import { CheckIcon, MinusIcon } from '@vue-hero-icons/solid/icons'
+
+const tiers = [
+  {
+    name: 'Free',
+    id: 'tier-free-table',
+    ctaText: 'Quick start',
+    href: '/guide/quick-start',
+    priceMonthly: '$0',
+    description: 'Quis suspendisse ut fermentum neque vivamus non tellus.',
+    mostPopular: false,
+  },
+  {
+    name: 'Plus',
+    id: 'tier-plus-table',
+    ctaText: 'Coming soon',
+    href: 'https://minekube.com/discord',
+    priceMonthly: '$5',
+    description: 'Quis eleifend a tincidunt pellentesque. A tempor in sed.',
+    mostPopular: true,
+  },
+  // {
+  //   name: 'Enterprise',
+  //   id: 'tier-enterprise',
+  //   href: '#',
+  //   priceMonthly: '$59',
+  //   description: 'Orci volutpat ut sed sed neque, dui eget. Quis tristique non.',
+  //   mostPopular: false,
+  // },
+]
+const sections = [
+  {
+    name: 'Platform Features',
+    features: [
+      { name: 'DDoS protected global edge', tiers: { Free: true, Plus: true } },
+      { name: 'Custom domains', tiers: { Free: true, Plus: true } },
+      { name: 'Unlimited endpoints & connectors', tiers: { Free: true, Plus: true } },
+      { name: 'Unlimited players', tiers: { Free: true, Plus: true } },
+      { name: 'Unlimited org members', tiers: { Free: true, Plus: true } },
+      { name: 'Activity Tracking', tiers: { Free: true, Plus: true } },
+      { name: 'Custom fallback motd', tiers: { Free: false, Plus: true } },
+      // { name: 'Team members', tiers: { Free: 'Up to 20 users', Plus: 'Up to 50 users' } },
+    ],
+  },
+  {
+    name: 'Opt-out ecosystem default options',
+    features: [
+      { name: 'Prevent Fallback to Browser Hub', tiers: { Free: false, Plus: true } },
+      { name: 'Prevent Browser Endpoint Listing', tiers: { Free: false, Plus: true } },
+      { name: 'Prevent /browser Command', tiers: { Free: false, Plus: true } },
+      { name: 'Prevent Fallback Motd', tiers: { Free: false, Plus: true } },
+      { name: 'Prevent Default Tablist', tiers: { Free: false, Plus: true } },
+    ],
+  },
+  {
+    name: 'Support',
+    features: [
+      { name: '24/7 online community support', tiers: { Free: true, Plus: true } },
+      { name: 'Developer response within 24 hours', tiers: { Free: false, Plus: true } },
+      { name: '1:1 onboarding tour', tiers: { Free: false, Plus: true } },
+      { name: 'Early access to new features', tiers: { Free: false, Plus: true } },
+    ],
+  }
+  // {
+  //   name: 'Reporting',
+  //   features: [
+  //     { name: 'Advanced analytics', tiers: { Basic: true, Essential: true, Premium: true } },
+  //     { name: 'Basic reports', tiers: { Essential: true, Premium: true } },
+  //     { name: 'Professional reports', tiers: { Premium: true } },
+  //     { name: 'Custom report builder', tiers: { Premium: true } },
+  //   ],
+  // },
+  // {
+  //   name: 'Support',
+  //   features: [
+  //     { name: '24/7 online support', tiers: { Basic: true, Essential: true, Premium: true } },
+  //     { name: 'Quarterly product workshops', tiers: { Essential: true, Premium: true } },
+  //     { name: 'Priority phone support', tiers: { Essential: true, Premium: true } },
+  //     { name: '1:1 onboarding tour', tiers: { Premium: true } },
+  //   ],
+  // },
+]
+</script>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/index.ts b/.web/docs/.vitepress/theme/index.ts
index c7b71b7..03e350a 100644
--- a/.web/docs/.vitepress/theme/index.ts
+++ b/.web/docs/.vitepress/theme/index.ts
@@ -5,6 +5,7 @@ import './styles/vars.css'
 import VPBadge from 'vitepress/dist/client/theme-default/components/VPBadge.vue'
 import MeetTeam from "./components/MeetTeam.vue";
 import Layout from "./components/Layout.vue";
+import PlansLanding from "./components/plans/PlansLanding.vue";
 
 export default {
   extends: DefaultTheme,
@@ -13,5 +14,6 @@ export default {
     // app.component('TextAndImage', SvgImage)
     app.component('VPBadge', VPBadge)
     app.component('MeetTeam', MeetTeam)
+    app.component('PlansLanding', PlansLanding)
   }
 } satisfies Theme
diff --git a/.web/docs/guide/connectors/index.md b/.web/docs/guide/connectors/index.md
index 5026a95..2626894 100644
--- a/.web/docs/guide/connectors/index.md
+++ b/.web/docs/guide/connectors/index.md
@@ -60,7 +60,7 @@ join a Minecraft server running in Singapore.
 This process, utilizing both local and player-nearby Edge servers, ensures a high-quality connection for players
 globally, effectively reducing latency and securing the data path.
 
-![https://mermaid.live/edit#pako:eNptkrtuwzAMRX9F0BwvHjV46WMrWiAdvbASmwq1KYeSWgRB_r2ymcgpEg9-yIfUuTaP2gaH2uiI-4xk8dHDjmHsSZVjAk7e-gkoqbcBDsi3609uhwqiXD24-0RbkejpFnkIRGhTuNN_i_yDvJSTm4KnJIz4NF03dzWXDioFRQi87CWgnOfnM9ya0pScihijD6QmDlOIMKxgW8iqZNRz4F_gewVSUtGm6US3-hRcmNVkpavOa04fIRellMu7QRJgTSBKzTnpuzD2aoOriE0nH-a_gd7oEXkE78qvPs54r9MXjthrU24d8HevezoVDnIK2wNZbRJn3Og8OUiXsdDmE4ZYVtH5kuBFZmcZodMfAHfFrw](diagram.svg)
+![https://mermaid.live/edit#pako:eNptkj1vgzAQhv-K5TksjAws_diqVkpHlqt9Sq2Gs3u2W0VR_nsNF0yqwMCHee78vHBnbbxF3emI3xnJ4KODA8M4kCpHAE7OuACU1NsRTsj360_2gAqiXB3YbaKtSHR0jzx4IjTJb_TfI_8gz-Vkg3eUhBGfpu-nrt3SQSWvCIHnvQSU8_R8hduuNCWrIsboPKnAPvgIxxVsC1mVOvXs-Rd4q0BKKto0vehWn4ILs5qsdNV5zenD56KUcnl3lARYE4hSc036Loy52eAmYtPLh_lvoHd6RB7B2fKrzxM-6PSJIw66K7cW-GvQA10KBzn5_YmM7hJn3OkcLKRlLJZFtK4EeJHRmSfo8gc8E8Vk](diagram.svg)
 
 ::: info When the Player and Connector are in the same region
 Note that if both the Player and Connector are in the same region, they will likely be routed to the same Edge, thus
diff --git a/.web/docs/plans.md b/.web/docs/plans.md
new file mode 100644
index 0000000..63d6667
--- /dev/null
+++ b/.web/docs/plans.md
@@ -0,0 +1,7 @@
+---
+layout: page
+title: Plan Pricing
+description: Minekube Connect plans and pricing philosophy.
+---
+
+<PlansLanding />
diff --git a/.web/tailwind.config.js b/.web/tailwind.config.js
index 999c3af..a9a3ba0 100644
--- a/.web/tailwind.config.js
+++ b/.web/tailwind.config.js
@@ -2,5 +2,6 @@
 export default {
     content: ['./docs/.vitepress/**/*.{js,ts,vue}'],
     safelist: ['html', 'body'],
+    darkMode: 'class',
 }