diff --git a/internal/config/config.go b/internal/config/config.go
index ea657cef..8013622e 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -87,10 +87,24 @@ func InitConfig(logger *otelzap.Logger) Config {
 	viper.SetDefault("config.require_teams", false)
 	viper.SetDefault("config.subscriptions_enabled", false)
 
-	viper.SetDefault("subscription.checkout_link", "")
-	viper.SetDefault("subscription.manage_link", "")
 	viper.SetDefault("subscription.account_secret", "")
 	viper.SetDefault("subscription.webhook_secret", "")
+	viper.SetDefault("subscription.manage_link", "https://billing.stripe.com/p/login/5kA5lKeb7eU9bp6cMM")
+	viper.SetDefault("subscription.individual.enabled", true)
+	viper.SetDefault("subscription.individual.month_price", "5")
+	viper.SetDefault("subscription.individual.year_price", "50")
+	viper.SetDefault("subscription.individual.month_checkout_link", "https://buy.stripe.com/7sIcP8gdhc3nc6YeUU")
+	viper.SetDefault("subscription.individual.year_checkout_link", "https://buy.stripe.com/14kcP8e590kFb2UdQR")
+	viper.SetDefault("subscription.team.enabled", false)
+	viper.SetDefault("subscription.team.month_price", "20")
+	viper.SetDefault("subscription.team.year_price", "200")
+	viper.SetDefault("subscription.team.month_checkout_link", "https://buy.stripe.com/28o6qK5yD4AV3As5ks")
+	viper.SetDefault("subscription.team.year_checkout_link", "https://buy.stripe.com/aEUg1kaSX4AV7QI14d")
+	viper.SetDefault("subscription.organization.enabled", false)
+	viper.SetDefault("subscription.organization.month_price", "50")
+	viper.SetDefault("subscription.organization.year_price", "500")
+	viper.SetDefault("subscription.organization.month_checkout_link", "https://buy.stripe.com/8wM6qK2mr0kF5IA8wC")
+	viper.SetDefault("subscription.organization.year_checkout_link", "https://buy.stripe.com/eVa02m2mr7N74EwcMT")
 
 	viper.SetDefault("admin.email", "")
 
diff --git a/internal/config/types.go b/internal/config/types.go
index 65939570..295a5cc3 100644
--- a/internal/config/types.go
+++ b/internal/config/types.go
@@ -1,5 +1,7 @@
 package config
 
+import "github.com/StevenWeathers/thunderdome-planning-poker/thunderdome"
+
 type Config struct {
 	Http
 	Analytics
@@ -10,7 +12,7 @@ type Config struct {
 	Config AppConfig
 	Feature
 	Auth
-	Subscription
+	Subscription thunderdome.SubscriptionConfig
 }
 
 type Http struct {
@@ -124,10 +126,3 @@ type AuthLdap struct {
 	MailAttr string `mapstructure:"mail_attr"`
 	CnAttr   string `mapstructure:"cn_attr"`
 }
-
-type Subscription struct {
-	CheckoutLink  string `mapstructure:"checkout_link"`
-	ManageLink    string `mapstructure:"manage_link"`
-	AccountSecret string `mapstructure:"account_secret"`
-	WebhookSecret string `mapstructure:"webhook_secret"`
-}
diff --git a/main.go b/main.go
index c5b94b85..3a35ad0f 100644
--- a/main.go
+++ b/main.go
@@ -231,8 +231,7 @@ func main() {
 				FeatureStoryboard:         c.Feature.Storyboard,
 				RequireTeams:              c.Config.RequireTeams,
 				SubscriptionsEnabled:      c.Config.SubscriptionsEnabled,
-				SubscriptionCheckoutLink:  c.Subscription.CheckoutLink,
-				SubscriptionManageLink:    c.Subscription.ManageLink,
+				Subscription:              c.Subscription,
 				RepoURL:                   repoURL,
 			},
 		},
diff --git a/thunderdome/app.go b/thunderdome/app.go
index 24b7890b..0e96c3e2 100644
--- a/thunderdome/app.go
+++ b/thunderdome/app.go
@@ -1,5 +1,22 @@
 package thunderdome
 
+type SubscriptionPlanConfig struct {
+	Enabled           bool   `mapstructure:"enabled"`
+	MonthPrice        string `mapstructure:"month_price"`
+	YearPrice         string `mapstructure:"year_price"`
+	MonthCheckoutLink string `mapstructure:"month_checkout_link"`
+	YearCheckoutLink  string `mapstructure:"year_checkout_link"`
+}
+
+type SubscriptionConfig struct {
+	ManageLink    string                 `mapstructure:"manage_link"`
+	AccountSecret string                 `mapstructure:"account_secret" json:"-"`
+	WebhookSecret string                 `mapstructure:"webhook_secret" json:"-"`
+	Individual    SubscriptionPlanConfig `mapstructure:"individual"`
+	Team          SubscriptionPlanConfig `mapstructure:"team"`
+	Organization  SubscriptionPlanConfig `mapstructure:"organization"`
+}
+
 type AppConfig struct {
 	AllowedPointValues        []string
 	DefaultPointValues        []string
@@ -29,10 +46,9 @@ type AppConfig struct {
 	FeatureRetro              bool
 	FeatureStoryboard         bool
 	RequireTeams              bool
-	SubscriptionsEnabled      bool
-	SubscriptionCheckoutLink  string
-	SubscriptionManageLink    string
 	RepoURL                   string
+	SubscriptionsEnabled      bool
+	Subscription              SubscriptionConfig
 }
 
 type UIConfig struct {
diff --git a/ui/src/components/icons/ArrowRight.svelte b/ui/src/components/icons/ArrowRight.svelte
new file mode 100644
index 00000000..f202515a
--- /dev/null
+++ b/ui/src/components/icons/ArrowRight.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  let klass = '';
+  export { klass as class };
+</script>
+
+<svg
+  fill="none"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  class="w-4 h-4 ml-auto {klass}"
+  viewBox="0 0 24 24"
+>
+  <path d="M5 12h14M12 5l7 7-7 7"></path>
+</svg>
diff --git a/ui/src/components/pricing/Checkmark.svelte b/ui/src/components/pricing/Checkmark.svelte
new file mode 100644
index 00000000..fb92ab26
--- /dev/null
+++ b/ui/src/components/pricing/Checkmark.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import CheckCircleIcon from '../icons/CheckCircleIcon.svelte';
+</script>
+
+<span
+  class="inline-flex items-center justify-center text-lime-500 dark:text-lime-400 rounded-full flex-shrink-0"
+>
+  <CheckCircleIcon />
+</span>
diff --git a/ui/src/components/pricing/Crossmark.svelte b/ui/src/components/pricing/Crossmark.svelte
new file mode 100644
index 00000000..8d52a693
--- /dev/null
+++ b/ui/src/components/pricing/Crossmark.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import CloseIcon from '../icons/CloseIcon.svelte';
+</script>
+
+<span class="text-gray-500 dark:text-gray-400">
+  <CloseIcon />
+</span>
diff --git a/ui/src/components/pricing/PayPeriodToggle.svelte b/ui/src/components/pricing/PayPeriodToggle.svelte
new file mode 100644
index 00000000..79f9f777
--- /dev/null
+++ b/ui/src/components/pricing/PayPeriodToggle.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  export let selectedPaymentPeriod = 'month';
+  export let togglePaymentPeriod = () => {};
+</script>
+
+<style>
+  .toggle {
+    @apply relative;
+    @apply whitespace-nowrap;
+    @apply rounded-md;
+    @apply py-2;
+    @apply px-6;
+    @apply text-sm;
+    @apply font-medium;
+    @apply border;
+    @apply border-transparent;
+    @apply text-violet-200;
+  }
+
+  .toggle:hover {
+    @apply bg-violet-800;
+  }
+
+  .toggle:focus {
+    @apply z-10;
+    @apply outline-none;
+    @apply ring-2;
+    @apply ring-white;
+    @apply ring-offset-2;
+    @apply ring-offset-violet-700;
+  }
+
+  .active {
+    @apply border-violet-700;
+    @apply bg-white;
+    @apply text-violet-700;
+    @apply shadow-sm;
+  }
+
+  .active:hover {
+    @apply bg-violet-50;
+  }
+</style>
+
+<div class="flex rounded-lg bg-violet-700 p-0.5">
+  <button
+    on:click="{togglePaymentPeriod}"
+    type="button"
+    class="toggle {selectedPaymentPeriod === 'month' ? 'active' : ''}"
+  >
+    Monthly billing
+  </button>
+  <button
+    on:click="{togglePaymentPeriod}"
+    type="button"
+    class="toggle ml-0.5 {selectedPaymentPeriod === 'year' ? 'active' : ''}"
+  >
+    Yearly billing
+  </button>
+</div>
diff --git a/ui/src/components/pricing/SubscribeButton.svelte b/ui/src/components/pricing/SubscribeButton.svelte
new file mode 100644
index 00000000..6686eaf0
--- /dev/null
+++ b/ui/src/components/pricing/SubscribeButton.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { user } from '../../stores.ts';
+  import { appRoutes } from '../../config';
+  import ArrowRight from '../icons/ArrowRight.svelte';
+
+  export let subscribeLink = '';
+  export let planEnabled = false;
+</script>
+
+<div>
+  {#if planEnabled}
+    {#if !$user.name || !$user.rank || $user.rank === 'GUEST'}
+      <p class="bg-yellow-thunder text-gray-900 p-2 rounded">
+        <a class="underline font-bold" href="{appRoutes.login}/subscription"
+          >Login</a
+        >
+        or
+        <a class="underline font-bold" href="{appRoutes.register}/subscription"
+          >Register</a
+        > to subscribe
+      </p>
+    {:else if $user.subscribed}
+      <p class="text-lime-500 dark:text-lime-400 p-2 font-bold">
+        Already subscribed, thank you!
+      </p>
+    {:else}
+      <a
+        href="{subscribeLink}?prefilled_email={$user.email}&client_reference_id={$user.id}"
+        class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded"
+      >
+        Subscribe Today
+        <ArrowRight />
+      </a>
+      <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">
+        Payments processed by Stripe.
+      </p>
+    {/if}
+  {:else}
+    <p class="text-blue-500 dark:text-cyan-400 p-2 font-bold text-lg">
+      Coming soon!
+    </p>
+  {/if}
+</div>
diff --git a/ui/src/config.ts b/ui/src/config.ts
index fb548a3a..dc383269 100644
--- a/ui/src/config.ts
+++ b/ui/src/config.ts
@@ -22,6 +22,7 @@ const AppConfig =
     : {
         PathPrefix: '',
         DefaultLocale: 'en',
+        Subscription: {},
       };
 const {
   PathPrefix,
diff --git a/ui/src/pages/subscription/Pricing.svelte b/ui/src/pages/subscription/Pricing.svelte
index 1761261d..4da5939e 100644
--- a/ui/src/pages/subscription/Pricing.svelte
+++ b/ui/src/pages/subscription/Pricing.svelte
@@ -1,201 +1,478 @@
 <script lang="ts">
   import PageLayout from '../../components/global/PageLayout.svelte';
-  import HollowButton from '../../components/global/HollowButton.svelte';
-  import { AppConfig, appRoutes } from '../../config';
-  import { user } from '../../stores';
+  import Checkmark from '../../components/pricing/Checkmark.svelte';
+  import SubscribeButton from '../../components/pricing/SubscribeButton.svelte';
+  import Crossmark from '../../components/pricing/Crossmark.svelte';
+  import { user } from '../../stores.ts';
+  import { AppConfig, appRoutes } from '../../config.ts';
+  import ArrowRight from '../../components/icons/ArrowRight.svelte';
+  import PayPeriodToggle from '../../components/pricing/PayPeriodToggle.svelte';
 
-  const { SubscriptionCheckoutLink } = AppConfig;
+  let selectedPaymentPeriod = 'month';
+
+  function togglePaymentPeriod() {
+    selectedPaymentPeriod =
+      selectedPaymentPeriod === 'month' ? 'year' : 'month';
+  }
+
+  const Plans = [
+    {
+      Name: 'Starter',
+      Enabled: true,
+      Popular: false,
+      Price: {
+        Free: true,
+        Month: 'Free',
+        Year: 'Free',
+        Subtext: 'All the primary features at no cost forever.',
+      },
+      Subscribe: {
+        MonthLink: '',
+        YearLink: '',
+      },
+      Features: [
+        {
+          Name: 'Primary Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-yellow-thunder',
+        },
+        {
+          Name: 'Poker Planning',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Import stories from Jira XML or CSV files',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Sprint Retrospective',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Story Mapping (Storyboards)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Async Daily Stand-up (Team Checkins)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Organize by Organization, Departments & Teams',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'No user limits',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Premium Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-lime-500 dark:text-lime-400',
+        },
+        {
+          Name: 'Import Poker Stories from Jira',
+          Included: false,
+          Header: false,
+        },
+        {
+          Name: 'Future premium features',
+          Included: false,
+          Header: false,
+        },
+        {
+          Name: 'Compensating development efforts',
+          Included: false,
+          Header: false,
+        },
+      ],
+    },
+    {
+      Name: 'Individual',
+      Enabled: AppConfig.Subscription.Individual.Enabled,
+      Popular: false,
+      Price: {
+        Free: false,
+        Month: AppConfig.Subscription.Individual.MonthPrice,
+        Year: AppConfig.Subscription.Individual.YearPrice,
+        Subtext: 'Premium Features for your account only.',
+      },
+      Subscribe: {
+        MonthLink: AppConfig.Subscription.Individual.MonthCheckoutLink,
+        YearLink: AppConfig.Subscription.Individual.YearCheckoutLink,
+      },
+      Features: [
+        {
+          Name: 'Primary Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-yellow-thunder',
+        },
+        {
+          Name: 'Poker Planning',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Import stories from Jira XML or CSV files',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Sprint Retrospective',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Story Mapping (Storyboards)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Async Daily Stand-up (Team Checkins)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Organize by Organization, Departments & Teams',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'No user limits',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Premium Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-lime-500 dark:text-lime-400',
+        },
+        {
+          Name: 'Import Poker Stories from Jira',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Future premium features',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Compensating development efforts',
+          Included: true,
+          Header: false,
+        },
+      ],
+    },
+    {
+      Name: 'Team',
+      Enabled: AppConfig.Subscription.Team.Enabled,
+      Popular: false,
+      Price: {
+        Free: false,
+        Month: AppConfig.Subscription.Team.MonthPrice,
+        Year: AppConfig.Subscription.Team.YearPrice,
+        Subtext: 'Premium Features for all Team members.',
+      },
+      Subscribe: {
+        MonthLink: AppConfig.Subscription.Team.MonthCheckoutLink,
+        YearLink: AppConfig.Subscription.Team.YearCheckoutLink,
+      },
+      Features: [
+        {
+          Name: 'Primary Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-yellow-thunder',
+        },
+        {
+          Name: 'Poker Planning',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Import stories from Jira XML or CSV files',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Sprint Retrospective',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Story Mapping (Storyboards)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Async Daily Stand-up (Team Checkins)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Organize by Organization, Departments & Teams',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'No user limits',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Premium Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-lime-500 dark:text-lime-400',
+        },
+        {
+          Name: 'Import Poker Stories from Jira',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Future premium features',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Compensating development efforts',
+          Included: true,
+          Header: false,
+        },
+      ],
+    },
+    {
+      Name: 'Organization',
+      Enabled: AppConfig.Subscription.Organization.Enabled,
+      Popular: false,
+      Price: {
+        Free: false,
+        Month: AppConfig.Subscription.Organization.MonthPrice,
+        Year: AppConfig.Subscription.Organization.YearPrice,
+        Subtext: 'Premium Features for all Organization members.',
+      },
+      Subscribe: {
+        MonthLink: AppConfig.Subscription.Organization.MonthCheckoutLink,
+        YearLink: AppConfig.Subscription.Organization.YearCheckoutLink,
+      },
+      Features: [
+        {
+          Name: 'Primary Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-yellow-thunder',
+        },
+        {
+          Name: 'Poker Planning',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Import stories from Jira XML or CSV files',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Sprint Retrospective',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Story Mapping (Storyboards)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Async Daily Stand-up (Team Checkins)',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Organize by Organization, Departments & Teams',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'No user limits',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Premium Features',
+          Included: true,
+          Header: true,
+          ColorClass: 'text-lime-500 dark:text-lime-400',
+        },
+        {
+          Name: 'Import Poker Stories from Jira',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Future premium features',
+          Included: true,
+          Header: false,
+        },
+        {
+          Name: 'Compensating development efforts',
+          Included: true,
+          Header: false,
+        },
+      ],
+    },
+  ];
 </script>
 
 <PageLayout>
   <div
-    class="space-y-8 lg:w-3/4 lg:grid lg:grid-cols-2 sm:gap-6 xl:gap-10 lg:space-y-0 mx-auto"
+    class="relative mx-auto max-w-2xl px-6 text-center lg:max-w-7xl lg:px-8 pt-8"
   >
-    <div
-      class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white"
-    >
-      <h3 class="mb-4 text-2xl font-semibold">Starter</h3>
-      <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
-        All the primary features at no cost.
-      </p>
-      <div class="flex justify-center items-baseline my-8">
-        <span class="mr-2 text-5xl font-extrabold">Free</span>
-      </div>
-      <ul class="mb-8 space-y-4 text-left">
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Agile Poker Planning</span>
-        </li>
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Poker planning import stories from Jira XML or CSV files</span>
-        </li>
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Agile Sprint Retrospective</span>
-        </li>
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Team Check-ins or asynchronous stand ups</span>
-        </li>
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Agile Story Mapping (Storyboards)</span>
-        </li>
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Team organization</span>
-        </li>
-      </ul>
-    </div>
+    <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+      <span class="block lg:inline">Simple pricing,</span>
+      <span class="block lg:inline">no commitment.</span>
+    </h1>
+    <p class="mt-4 text-xl text-indigo-100">
+      Everything you need, nothing you don't. Pick a plan that best suits your
+      needs.
+    </p>
+  </div>
 
-    <div
-      class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white"
-    >
-      <h3 class="mb-4 text-2xl font-semibold">Premium</h3>
-      <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
-        Primary features plus enhanced ones.
-      </p>
-      <div class="flex justify-center items-baseline my-8">
-        <span class="mr-2 text-5xl font-extrabold">$5</span>
-        <span class="text-gray-500 dark:text-gray-400" dark:text-gray-400
-          >/month</span
+  <h2 class="sr-only">Plans</h2>
+
+  <div class="relative mt-12 flex justify-center sm:mt-16">
+    <PayPeriodToggle
+      selectedPaymentPeriod="{selectedPaymentPeriod}"
+      togglePaymentPeriod="{togglePaymentPeriod}"
+    />
+  </div>
+
+  <section class="text-gray-700 dark:text-gray-300">
+    <div class="container px-5 pb-24 pt-12 mx-auto flex flex-wrap">
+      <div class="lg:w-1/4 mt-48 hidden lg:block">
+        <div
+          class="mt-px border-t border-gray-300 dark:border-gray-700 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden"
         >
+          {#each Plans[0].Features as feature, idx}
+            <p
+              class="{idx % 2
+                ? 'text-gray-900 dark:text-gray-300'
+                : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-300'} h-12 px-4 flex items-center justify-start"
+            >
+              {#if feature.Header}
+                <span class="text-lg font-semibold {feature.ColorClass}"
+                  >{feature.Name}</span
+                >
+              {:else}
+                {feature.Name}
+              {/if}
+            </p>
+          {/each}
+        </div>
       </div>
-
-      <ul class="mb-8 space-y-4 text-left">
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span
-            >Poker planning import stories from Jira Cloud using JQL search</span
-          >
-        </li>
-      </ul>
-      <ul class="mb-8 space-y-4 text-left">
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 dark:border-gray-700 rounded-lg"
+      >
+        {#each Plans as plan, pidx}
+          <div
+            class="lg:w-1/4 lg:mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg relative {pidx %
+            2
+              ? 'border-gray-300 dark:border-gray-700 lg:border-transparent dark:lg:border-transparent lg:rounded-none'
+              : 'border-gray-700'} {plan.Popular ? 'border-indigo-500' : ''}"
           >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Future premium features</span>
-        </li>
-      </ul>
-      <ul class="mb-8 space-y-4 text-left">
-        <li class="flex items-center space-x-3">
-          <svg
-            class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Supporting the developer and hosting costs</span>
-        </li>
-      </ul>
-      {#if !$user.name || !$user.rank || $user.rank === 'GUEST'}
-        <p class="bg-yellow-thunder text-gray-900 px-4 py-6 rounded">
-          Must <a
-            class="underline font-bold"
-            href="{appRoutes.register}/subscription">register</a
-          >
-          or
-          <a class="underline font-bold" href="{appRoutes.login}/subscription"
-            >login</a
-          > to subscribe
-        </p>
-      {:else if $user.subscribed}
-        <p class="bg-lime-300 text-green-800 px-4 py-6 rounded font-bold">
-          Already subscribed, thank you!
-        </p>
-      {:else}
-        <HollowButton
-          color="green"
-          href="{SubscriptionCheckoutLink}?prefilled_email={$user.email}&client_reference_id={$user.id}"
-        >
-          <span class="block py-2 uppercase">Subscribe today</span>
-        </HollowButton>
-      {/if}
+            {#if plan.Popular}
+              <span
+                class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl uppercase"
+                >Popular</span
+              >
+            {/if}
+            <div
+              class="px-2 text-center h-48 flex flex-col items-center justify-center"
+            >
+              <h3 class="tracking-widest uppercase">{plan.Name}</h3>
+              <h2
+                class="text-5xl text-gray-600 dark:text-gray-100 font-medium leading-none mb-4 mt-2"
+              >
+                {#if plan.Price.Free}
+                  Free
+                {:else}
+                  {#if selectedPaymentPeriod === 'month'}${plan.Price
+                      .Month}{:else}
+                    ${plan.Price.Year}{/if}
+                  <span class="text-gray-600 dark:text-gray-300 text-base ml-1"
+                    >{#if selectedPaymentPeriod === 'month'}/mo{:else}/yr{/if}</span
+                  >
+                {/if}
+              </h2>
+              <span class="text-sm text-gray-600 dark:text-gray-300"
+                >{plan.Price.Subtext}</span
+              >
+            </div>
+            <div>
+              {#each plan.Features as feature, idx}
+                <p
+                  class="{idx % 2
+                    ? 'text-gray-600 dark:text-gray-300'
+                    : 'bg-gray-100 dark:bg-gray-800'} h-12 px-2 flex items-center justify-start text-center justify-center {idx ===
+                  0
+                    ? '-mt-px border-t border-gray-300 dark:border-gray-700'
+                    : ''}"
+                >
+                  {#if feature.Header}
+                    <span
+                      class="text-lg font-semibold {feature.ColorClass} lg:hidden"
+                      >{feature.Name}</span
+                    >
+                  {:else}
+                    {#if feature.Included}
+                      <Checkmark />
+                    {:else}
+                      <Crossmark />
+                    {/if}
+                    <span class="lg:hidden ml-2">{feature.Name}</span>
+                  {/if}
+                </p>
+              {/each}
+            </div>
+            <div
+              class="border-t border-gray-300 dark:border-gray-700 p-6 text-center rounded-bl-lg"
+            >
+              {#if plan.Price.Free}
+                {#if $user.rank && $user.rank !== 'GUEST'}
+                  <p class="text-lime-500 dark:text-lime-400 p-2 font-bold">
+                    Already registered.
+                  </p>
+                {:else}
+                  <a
+                    href="{appRoutes.register}/subscription"
+                    class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded"
+                    >Register
+                    <ArrowRight />
+                  </a>
+                {/if}
+              {:else}
+                <SubscribeButton
+                  planEnabled="{plan.Enabled}"
+                  subscribeLink="{selectedPaymentPeriod === 'month'
+                    ? plan.Subscribe.MonthLink
+                    : plan.Subscribe.YearLink}"
+                />
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
     </div>
-  </div>
+  </section>
 </PageLayout>
diff --git a/ui/src/pages/user/UserProfile.svelte b/ui/src/pages/user/UserProfile.svelte
index e5994989..a3cd93ca 100644
--- a/ui/src/pages/user/UserProfile.svelte
+++ b/ui/src/pages/user/UserProfile.svelte
@@ -32,7 +32,7 @@
     LdapEnabled,
     HeaderAuthEnabled,
     SubscriptionsEnabled,
-    SubscriptionManageLink,
+    Subscription,
   } = AppConfig;
 
   function toggleUpdatePassword() {
@@ -339,7 +339,7 @@
                 {#if $user.subscribed}
                   <SolidButton
                     color="green"
-                    href="{SubscriptionManageLink}"
+                    href="{Subscription.ManageLink}"
                     options="{{ target: '_blank' }}"
                     >Manage subscription
                   </SolidButton>