diff --git a/website/resources/ts/Components/Marketing/ComparisonTable.vue b/website/resources/ts/Components/Marketing/ComparisonTable.vue
new file mode 100644
index 0000000..062e888
--- /dev/null
+++ b/website/resources/ts/Components/Marketing/ComparisonTable.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+interface ComparisonRow {
+  feature: string
+  ours: string
+  theirs: string
+  oursIsWin?: boolean
+}
+
+interface Props {
+  rows: ComparisonRow[]
+  ourLabel?: string
+  theirLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  ourLabel: 'EZSCALE',
+  theirLabel: 'Typical big-cloud VPS',
+})
+</script>
+
+<template>
+  <div class="comparison">
+    <div class="comparison__head" role="rowheader">
+      <div class="comparison__cell comparison__cell--feature">What you get</div>
+      <div class="comparison__cell comparison__cell--ours">{{ ourLabel }}</div>
+      <div class="comparison__cell comparison__cell--theirs">{{ theirLabel }}</div>
+    </div>
+    <div
+      v-for="(row, idx) in rows"
+      :key="idx"
+      class="comparison__row"
+    >
+      <div class="comparison__cell comparison__cell--feature">{{ row.feature }}</div>
+      <div class="comparison__cell comparison__cell--ours">
+        <VIcon icon="tabler-check" size="18" color="success" class="me-2" />
+        <span>{{ row.ours }}</span>
+      </div>
+      <div class="comparison__cell comparison__cell--theirs">
+        <VIcon icon="tabler-x" size="18" color="error" class="me-2" />
+        <span>{{ row.theirs }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.comparison {
+  max-width: 980px;
+  margin: 0 auto;
+  border-radius: 16px;
+  overflow: hidden;
+  background: rgba(var(--v-theme-surface), 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.comparison__head {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr;
+  gap: 0;
+  background: rgba(var(--v-theme-on-surface), 0.04);
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+
+  .comparison__cell {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: rgba(var(--v-theme-on-surface), 0.6);
+  }
+
+  .comparison__cell--ours {
+    color: rgb(var(--v-theme-primary));
+  }
+}
+
+.comparison__row {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr;
+  gap: 0;
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.comparison__cell {
+  display: flex;
+  align-items: center;
+  padding: 16px 22px;
+  font-size: 14px;
+  color: rgba(var(--v-theme-on-surface), 0.85);
+
+  @media (max-width: 600px) {
+    padding: 12px 14px;
+    font-size: 13px;
+  }
+}
+
+.comparison__cell--feature {
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.95);
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.comparison__cell--ours {
+  background: rgba(var(--v-theme-primary), 0.05);
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.comparison__cell--theirs {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+</style>
diff --git a/website/resources/ts/Components/Marketing/Faq.vue b/website/resources/ts/Components/Marketing/Faq.vue
new file mode 100644
index 0000000..d7939fc
--- /dev/null
+++ b/website/resources/ts/Components/Marketing/Faq.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface FaqItem {
+  question: string
+  answer: string
+}
+
+interface Props {
+  items: FaqItem[]
+}
+
+defineProps<Props>()
+
+const open = ref<number | null>(null)
+
+function toggle(idx: number): void {
+  open.value = open.value === idx ? null : idx
+}
+</script>
+
+<template>
+  <div class="faq">
+    <div
+      v-for="(item, idx) in items"
+      :key="idx"
+      class="faq__item"
+      :class="{ 'faq__item--open': open === idx }"
+    >
+      <button
+        type="button"
+        class="faq__question"
+        :aria-expanded="open === idx"
+        @click="toggle(idx)"
+      >
+        <span class="faq__question-text">{{ item.question }}</span>
+        <VIcon
+          :icon="open === idx ? 'tabler-minus' : 'tabler-plus'"
+          size="20"
+          class="faq__icon"
+        />
+      </button>
+      <VExpandTransition>
+        <div v-show="open === idx" class="faq__answer">
+          <div class="faq__answer-text" v-html="item.answer" />
+        </div>
+      </VExpandTransition>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.faq {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 820px;
+  margin: 0 auto;
+}
+
+.faq__item {
+  border-radius: 14px;
+  background: rgba(var(--v-theme-surface), 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  transition: border-color 0.15s ease;
+
+  &:hover {
+    border-color: rgba(var(--v-theme-on-surface), 0.14);
+  }
+}
+
+.faq__item--open {
+  border-color: rgba(var(--v-theme-primary), 0.4);
+}
+
+.faq__question {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 22px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: rgba(var(--v-theme-on-surface), 0.95);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.faq__question-text {
+  flex-grow: 1;
+}
+
+.faq__icon {
+  color: rgb(var(--v-theme-primary));
+  flex-shrink: 0;
+}
+
+.faq__answer {
+  padding: 0 22px 18px;
+}
+
+.faq__answer-text {
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: 14px;
+  line-height: 1.6;
+
+  :deep(a) {
+    color: rgb(var(--v-theme-primary));
+    text-decoration: none;
+    border-bottom: 1px dotted rgba(var(--v-theme-primary), 0.5);
+
+    &:hover {
+      border-bottom-style: solid;
+    }
+  }
+
+  :deep(strong) {
+    color: rgba(var(--v-theme-on-surface), 0.92);
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/website/resources/ts/Components/Marketing/PlanCard.vue b/website/resources/ts/Components/Marketing/PlanCard.vue
new file mode 100644
index 0000000..521731f
--- /dev/null
+++ b/website/resources/ts/Components/Marketing/PlanCard.vue
@@ -0,0 +1,235 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+interface PlanFeatures {
+  cpu?: string | number
+  ram?: string | number
+  storage?: string | number
+  bandwidth?: string | number
+  [key: string]: string | number | undefined
+}
+
+interface Plan {
+  id: number
+  name: string
+  slug: string
+  price: string
+  features: PlanFeatures | null
+}
+
+interface Props {
+  plan: Plan
+  popular?: boolean
+  orderUrl: string
+  variant?: 'standard' | 'storage'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  popular: false,
+  variant: 'standard',
+})
+
+const emit = defineEmits<{
+  estimate: [planId: number]
+}>()
+
+const formattedPrice = computed<string>(() => {
+  const price = parseFloat(props.plan.price) || 0
+  return price % 1 === 0 ? `${price}` : price.toFixed(2)
+})
+
+const cpu = computed<string>(() => String(props.plan.features?.cpu ?? '—'))
+const ram = computed<string>(() => String(props.plan.features?.ram ?? '—'))
+const storage = computed<string>(() => String(props.plan.features?.storage ?? '—'))
+const bandwidth = computed<string>(() => String(props.plan.features?.bandwidth ?? 'Unmetered'))
+</script>
+
+<template>
+  <div
+    class="plan-card"
+    :class="{ 'plan-card--popular': popular, 'plan-card--storage': variant === 'storage' }"
+  >
+    <div v-if="popular" class="plan-card__badge">Most popular</div>
+
+    <div class="plan-card__head">
+      <div class="plan-card__name">{{ plan.name }}</div>
+      <div class="plan-card__price-row">
+        <span class="plan-card__currency">$</span>
+        <span class="plan-card__price">{{ formattedPrice }}</span>
+        <span class="plan-card__period">/mo</span>
+      </div>
+    </div>
+
+    <div class="plan-card__specs">
+      <div class="plan-card__spec">
+        <VIcon icon="tabler-cpu" size="18" />
+        <span>{{ cpu }}</span>
+      </div>
+      <div class="plan-card__spec">
+        <VIcon icon="tabler-device-sd-card" size="18" />
+        <span>{{ ram }} RAM</span>
+      </div>
+      <div class="plan-card__spec">
+        <VIcon icon="tabler-database" size="18" />
+        <span>{{ storage }}</span>
+      </div>
+      <div class="plan-card__spec">
+        <VIcon icon="tabler-arrows-right-left" size="18" />
+        <span>{{ bandwidth }}</span>
+      </div>
+    </div>
+
+    <div class="plan-card__actions">
+      <a :href="orderUrl" class="text-decoration-none">
+        <VBtn block color="primary" size="default" rounded="lg">
+          Order Now
+          <VIcon icon="tabler-arrow-right" end size="small" />
+        </VBtn>
+      </a>
+      <button
+        type="button"
+        class="plan-card__estimate"
+        @click="emit('estimate', plan.id)"
+      >
+        Estimate this plan →
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.plan-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 22px 22px;
+  border-radius: 16px;
+  background: rgba(var(--v-theme-surface), 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(var(--v-theme-primary), 0.4);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  }
+}
+
+.plan-card--popular {
+  border-color: rgba(var(--v-theme-primary), 0.5);
+  background: linear-gradient(180deg, rgba(var(--v-theme-primary), 0.10), rgba(var(--v-theme-surface), 0.6));
+  box-shadow: 0 8px 28px rgba(var(--v-theme-primary), 0.18);
+}
+
+.plan-card--storage {
+  border-color: rgba(var(--v-theme-success), 0.25);
+
+  &:hover {
+    border-color: rgba(var(--v-theme-success), 0.5);
+  }
+}
+
+.plan-card__badge {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 14px;
+  border-radius: 999px;
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.4);
+}
+
+.plan-card__head {
+  margin-bottom: 18px;
+}
+
+.plan-card__name {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: rgba(var(--v-theme-on-surface), 0.95);
+  margin-bottom: 6px;
+}
+
+.plan-card__price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  color: rgb(var(--v-theme-primary));
+}
+
+.plan-card__currency {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.plan-card__price {
+  font-size: 38px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.plan-card__period {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  margin-left: 4px;
+}
+
+.plan-card__specs {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 22px;
+  padding: 14px 0;
+  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.06);
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.06);
+}
+
+.plan-card__spec {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: rgba(var(--v-theme-on-surface), 0.85);
+
+  .v-icon {
+    color: rgba(var(--v-theme-on-surface), 0.55);
+    flex-shrink: 0;
+  }
+}
+
+.plan-card__actions {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.plan-card__estimate {
+  background: transparent;
+  border: none;
+  color: rgb(var(--v-theme-primary));
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgba(var(--v-theme-primary), 0.06);
+  }
+}
+</style>
diff --git a/website/resources/ts/Pages/Marketing/VpsHosting.vue b/website/resources/ts/Pages/Marketing/VpsHosting.vue
index 0645faf..a29b60b 100644
--- a/website/resources/ts/Pages/Marketing/VpsHosting.vue
+++ b/website/resources/ts/Pages/Marketing/VpsHosting.vue
@@ -6,6 +6,9 @@ import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
 import HeroSection from '@/Components/Marketing/HeroSection.vue'
 import VpsHero from '@/Components/Marketing/VpsHero.vue'
 import EstimatorSection from '@/Components/Marketing/Estimator/EstimatorSection.vue'
+import PlanCard from '@/Components/Marketing/PlanCard.vue'
+import ComparisonTable from '@/Components/Marketing/ComparisonTable.vue'
+import Faq from '@/Components/Marketing/Faq.vue'
 import { useEstimatorStore, type EstimatorPlan, type EstimatorAddOnGroup, type WorkloadEntry, type AppExample } from '@/stores/estimator'
 import { crossDomainUrl } from '@/utils/resolvers'
 
@@ -19,7 +22,7 @@ interface PageProps {
   domains: { marketing: string; account: string; admin: string }
 }
 
-interface Feature {
+interface Differentiator {
   icon: string
   title: string
   description: string
@@ -46,13 +49,51 @@ const startingPrice = computed<string>(() => {
   return lowest % 1 === 0 ? lowest.toString() : lowest.toFixed(2)
 })
 
-const features: Feature[] = [
-  { icon: 'tabler-database', title: 'RAID 10 SSD Storage', description: 'Redundant SSD arrays for fast read/write speeds and data protection.' },
-  { icon: 'tabler-server', title: 'KVM Virtualization', description: 'Full hardware virtualization for predictable, dedicated performance.' },
-  { icon: 'tabler-rocket', title: 'Near-Instant Provisioning', description: 'Your VPS is deployed seconds after ordering.' },
-  { icon: 'tabler-refresh', title: 'Free ZFS Snapshots', description: 'Built-in snapshots for quick rollbacks. Off-site backup add-ons available.' },
-  { icon: 'tabler-terminal', title: 'Full Root Access', description: 'Complete control over your server environment.' },
-  { icon: 'tabler-server', title: 'VirtFusion Panel', description: 'Out-of-band console + VNC access included.' },
+// Slug of the plan we want to flag as "Most popular" in the plan grid.
+const popularSlug = 'vps-4'
+
+// Plans split into standard VPS (1-32) and storage-focused tiers, so the grid
+// reads as a clean ladder of one shape rather than a jumble.
+const standardPlans = computed<EstimatorPlan[]>(() =>
+  plans.value.filter(p => !p.slug.startsWith('stor-')),
+)
+const storagePlans = computed<EstimatorPlan[]>(() =>
+  plans.value.filter(p => p.slug.startsWith('stor-')),
+)
+
+// Differentiators answer "why pick EZSCALE over Linode/Hetzner/Vultr" — distinct
+// from the Included With All Plans card below which lists *what's in the box*.
+const differentiators: Differentiator[] = [
+  {
+    icon: 'tabler-headset',
+    title: 'Real US-based humans',
+    description: 'Atlanta-based ops team. Tickets answered by engineers, not chatbots. Same hands fix the server and reply to your ticket.',
+  },
+  {
+    icon: 'tabler-history',
+    title: 'ZFS-backed reliability',
+    description: 'Free snapshots and instant rollbacks built into the storage layer — no bolt-on services to wire up or pay extra for.',
+  },
+  {
+    icon: 'tabler-receipt-2',
+    title: 'Predictable billing',
+    description: 'No surprise egress fees on fair-use traffic. Monthly, quarterly, or annual — your call. The price you see is the price you pay.',
+  },
+  {
+    icon: 'tabler-plane-tilt',
+    title: 'Optional Pilot tier',
+    description: 'Hand off the ops work at $99/mo. We run patching, monitoring, and deploys; you keep root access on a co-admin model.',
+  },
+  {
+    icon: 'tabler-shield-check',
+    title: '14-day money-back',
+    description: 'Try it for two weeks. If it isn’t the right fit, we refund the first cycle, no questions asked.',
+  },
+  {
+    icon: 'tabler-users',
+    title: 'Owner-operated',
+    description: 'Small US team. No 3-tier outsourced support maze. Direct line to the people who built it and run it.',
+  },
 ]
 
 const includedFeatures: IncludedItem[] = [
@@ -72,30 +113,74 @@ const includedFeatures: IncludedItem[] = [
   { text: 'DDoS protection', comingSoon: true },
 ]
 
-// Keys from features JSON that should not be shown as table columns
-const internalKeys = new Set([
-  'control_panel',
-  'os',
-  'ipv4',
-  'ipv6',
-  'tier',
-])
+const comparisonRows = [
+  {
+    feature: 'Free snapshots & rollbacks',
+    ours: 'ZFS-backed, included',
+    theirs: '$0.05/GB add-on',
+  },
+  {
+    feature: 'Talk to engineers, not chatbots',
+    ours: 'Direct line to ops team',
+    theirs: 'Tier-1 outsourced',
+  },
+  {
+    feature: 'Predictable monthly bill',
+    ours: 'No egress fees on fair-use',
+    theirs: 'Per-GB egress overages',
+  },
+  {
+    feature: 'Optional managed (you keep root)',
+    ours: 'Pilot tier at $99/mo',
+    theirs: 'Often $200+/mo or unavailable',
+  },
+  {
+    feature: 'Money-back guarantee',
+    ours: '14 days, no questions',
+    theirs: '7 days or none',
+  },
+]
 
-function getFeature(plan: EstimatorPlan, key: string): string {
-  return String(plan.features?.[key] ?? '-')
-}
-
-function formatPrice(plan: EstimatorPlan): string {
-  const price = parseFloat(plan.price) || 0
-  return price % 1 === 0 ? `$${price}` : `$${price.toFixed(2)}`
-}
+const faqs = [
+  {
+    question: 'How quickly is my VPS provisioned?',
+    answer: 'Within seconds of completing checkout. You’ll get the root password (or your SSH key gets installed) on the same screen, and the VPS is bootable immediately. No queue, no manual approval.',
+  },
+  {
+    question: 'Which operating systems can I install?',
+    answer: 'Ubuntu (20.04, 22.04, 24.04), Debian (11, 12), Rocky Linux 9, AlmaLinux 9, CentOS Stream, and Windows Server 2019/2022 with your own license. Custom ISO uploads are supported via the VirtFusion panel.',
+  },
+  {
+    question: 'Can I upgrade or downgrade my plan later?',
+    answer: 'Yes. Upgrades resize on the next reboot; downgrades happen at the next billing cycle. Resizes preserve your data and IP. <a href="/contact">Contact us</a> if you need a custom build between tiers.',
+  },
+  {
+    question: 'What’s your refund policy?',
+    answer: '14-day money-back guarantee on the first cycle, no questions asked. After that, refunds are pro-rated against unused time on annual plans.',
+  },
+  {
+    question: 'Do you offer DDoS protection?',
+    answer: 'Volumetric DDoS protection is on the roadmap and will be free for all VPS plans when it ships. In the meantime, the network has standard upstream filtering and you can request null-routing of attack targets via support.',
+  },
+  {
+    question: 'Can I get rDNS / PTR control on my IPv4?',
+    answer: 'Yes — every VPS plan includes self-service rDNS / PTR record control through the VirtFusion panel. Useful if you’re running a mail server or anything that needs forward-confirmed DNS.',
+  },
+  {
+    question: 'Where are the servers physically located?',
+    answer: 'All VPS plans are hosted in our Atlanta, GA datacenter. EU and West Coast regions are on the roadmap.',
+  },
+  {
+    question: 'Do you help with migrations from another provider?',
+    answer: 'Yes. <a href="/contact">Open a ticket before you order</a> and we’ll help size the right plan and transfer your existing setup. Pilot-tier customers get migration assistance included; Self/Basic/Pro plans get free guidance, paid hands-on labor.',
+  },
+]
 
 function prefillEstimator(planId: number): void {
   estimator.setPlan(planId)
   if (typeof window !== 'undefined') {
     const url = estimator.shareUrl
     window.history.replaceState({}, '', url)
-    // Smooth-scroll up to the estimator
     const el = document.querySelector('.estimator-section')
     if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
@@ -113,7 +198,7 @@ function prefillEstimator(planId: number): void {
           Virtual Private <span class="hero-gradient-text">Servers</span>
         </h1>
         <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
-          High-performance VPS hosting with RAID 10 SSD storage, dedicated resources, and full root access from our Atlanta, GA datacenter.
+          Atlanta-based VPS hosting from a small team that picks up the phone. ZFS-backed reliability, predictable billing, and real root access.
         </p>
         <p class="text-body-1 text-medium-emphasis mb-8">
           Starting at just <span class="text-primary font-weight-bold">${{ startingPrice }}/mo</span>
@@ -140,82 +225,82 @@ function prefillEstimator(planId: number): void {
       :account-url="accountUrl"
     />
 
-    <!-- Features -->
+    <!-- Differentiators -->
     <VContainer class="marketing-section">
       <SectionHeader
-        label="Features"
-        title="Why Choose EZSCALE VPS?"
-        highlight-word="EZSCALE"
-        subtitle="Enterprise-grade infrastructure with the simplicity you deserve."
+        label="Why EZSCALE"
+        title="Built different on purpose"
+        highlight-word="different"
+        subtitle="Six things that separate us from the multi-region mega-clouds — and from the race-to-the-bottom budget hosts."
       />
       <VRow>
-        <VCol v-for="(feature, index) in features" :key="feature.title" cols="12" sm="6" md="4">
+        <VCol
+          v-for="(item, index) in differentiators"
+          :key="item.title"
+          cols="12"
+          sm="6"
+          md="4"
+        >
           <div :class="['d-flex ga-3 mb-4 feature-card-hover pa-3 rounded-lg', `fade-in-up stagger-${index + 1}`]">
             <VAvatar color="primary" variant="tonal" size="44">
-              <VIcon :icon="feature.icon" size="22" />
+              <VIcon :icon="item.icon" size="22" />
             </VAvatar>
             <div>
-              <h3 class="text-subtitle-1 font-weight-bold">{{ feature.title }}</h3>
-              <p class="text-body-2 text-medium-emphasis mb-0">{{ feature.description }}</p>
+              <h3 class="text-subtitle-1 font-weight-bold">{{ item.title }}</h3>
+              <p class="text-body-2 text-medium-emphasis mb-0">{{ item.description }}</p>
             </div>
           </div>
         </VCol>
       </VRow>
     </VContainer>
 
-    <!-- Plans Table -->
+    <!-- Plans grid -->
     <div class="section-alt-bg marketing-section">
       <VContainer>
         <SectionHeader
           label="Pricing"
           title="VPS Plans"
           highlight-word="Plans"
-          subtitle="All plans hosted in our Atlanta, GA datacenter. DDoS protection, full root access, and VirtFusion panel included."
+          subtitle="All plans hosted in our Atlanta, GA datacenter. Free ZFS snapshots, full root access, and the VirtFusion panel are included on every tier."
         />
 
-        <VCard class="feature-card-hover">
-          <div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
-          <VTable>
-            <thead>
-              <tr>
-                <th>Plan</th>
-                <th>CPU</th>
-                <th>RAM</th>
-                <th>Storage</th>
-                <th>Bandwidth</th>
-                <th>Price</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="plan in plans" :key="plan.id">
-                <td class="font-weight-bold">{{ plan.name }}</td>
-                <td>{{ getFeature(plan, 'cpu') }}</td>
-                <td>{{ getFeature(plan, 'ram') }}</td>
-                <td>{{ getFeature(plan, 'storage') }}</td>
-                <td>{{ getFeature(plan, 'bandwidth') }}</td>
-                <td class="text-primary font-weight-bold">{{ formatPrice(plan) }}/mo</td>
-                <td>
-                  <div class="d-flex align-center ga-2">
-                    <a :href="accountUrl + '/checkout/' + plan.id" class="text-decoration-none">
-                      <VBtn color="primary" size="small" variant="tonal">Order Now</VBtn>
-                    </a>
-                    <VBtn
-                      size="small"
-                      variant="text"
-                      color="primary"
-                      class="text-caption"
-                      @click="prefillEstimator(plan.id)"
-                    >
-                      Estimate →
-                    </VBtn>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </VTable>
-          </div>
-        </VCard>
+        <h3 class="text-h6 font-weight-bold mb-4 plan-grid-heading">Standard VPS</h3>
+        <VRow class="mb-8">
+          <VCol
+            v-for="plan in standardPlans"
+            :key="plan.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+          >
+            <PlanCard
+              :plan="plan"
+              :popular="plan.slug === popularSlug"
+              :order-url="accountUrl + '/checkout/' + plan.id"
+              @estimate="prefillEstimator"
+            />
+          </VCol>
+        </VRow>
+
+        <h3 v-if="storagePlans.length" class="text-h6 font-weight-bold mb-4 plan-grid-heading">Storage-focused</h3>
+        <VRow v-if="storagePlans.length" class="mb-4">
+          <VCol
+            v-for="plan in storagePlans"
+            :key="plan.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+          >
+            <PlanCard
+              :plan="plan"
+              :order-url="accountUrl + '/checkout/' + plan.id"
+              variant="storage"
+              @estimate="prefillEstimator"
+            />
+          </VCol>
+        </VRow>
 
         <!-- Included with all plans -->
         <VCard class="mt-8 pa-6 feature-card-hover">
@@ -252,12 +337,36 @@ function prefillEstimator(planId: number): void {
       </VContainer>
     </div>
 
+    <!-- Comparison -->
+    <VContainer class="marketing-section">
+      <SectionHeader
+        label="Comparison"
+        title="EZSCALE vs the big-cloud playbook"
+        highlight-word="EZSCALE"
+        subtitle="A few honest differences — the kind that show up on a bill at the end of the month."
+      />
+      <ComparisonTable :rows="comparisonRows" />
+    </VContainer>
+
+    <!-- FAQ -->
+    <div class="section-alt-bg marketing-section">
+      <VContainer>
+        <SectionHeader
+          label="FAQ"
+          title="Common questions"
+          highlight-word="questions"
+          subtitle="The stuff people ask before signing up. Don't see yours? Hit us at /contact."
+        />
+        <Faq :items="faqs" />
+      </VContainer>
+    </div>
+
     <!-- CTA -->
     <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-primary), 0.12), rgb(var(--v-theme-surface)));">
       <VContainer class="text-center">
-        <h2 class="text-h4 font-weight-bold mb-3">Ready to Get Started?</h2>
+        <h2 class="text-h4 font-weight-bold mb-3">Ready to spin one up?</h2>
         <p class="text-body-1 text-medium-emphasis mb-6">
-          Deploy your VPS in seconds with full root access, DDoS protection, and expert support.
+          Deploy in seconds. Real humans on support. 14-day money-back if it's not the right fit.
         </p>
         <div class="d-flex ga-3 justify-center flex-wrap">
           <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
@@ -268,7 +377,7 @@ function prefillEstimator(planId: number): void {
           </a>
           <a href="/contact" class="text-decoration-none">
             <VBtn color="primary" variant="outlined" size="large" rounded="lg">
-              Contact Sales
+              Talk to a Human
             </VBtn>
           </a>
         </div>
@@ -276,3 +385,10 @@ function prefillEstimator(planId: number): void {
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.plan-grid-heading {
+  letter-spacing: -0.01em;
+  color: rgba(var(--v-theme-on-surface), 0.85);
+}
+</style>