diff --git a/mirascope-ui/blocks/lilypad-pricing.stories.tsx b/mirascope-ui/blocks/lilypad-pricing.stories.tsx
index bd3ce48..a7a80be 100644
--- a/mirascope-ui/blocks/lilypad-pricing.stories.tsx
+++ b/mirascope-ui/blocks/lilypad-pricing.stories.tsx
@@ -1,4 +1,5 @@
 import { LilypadPricing } from "@/mirascope-ui/blocks/lilypad-pricing";
+import { ButtonLink } from "@/mirascope-ui/ui/button-link";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   createMemoryHistory,
@@ -55,36 +56,48 @@ type Story = StoryObj<typeof meta>;
 const defaultActions = {
   hosted: {
     free: {
-      buttonText: "Get Started Free",
-      buttonLink: "/signup",
-      variant: "default" as const,
+      button: (
+        <ButtonLink href="/signup" variant="default">
+          Get Started Free
+        </ButtonLink>
+      ),
     },
     pro: {
-      buttonText: "Join Waitlist",
-      buttonLink: "/waitlist",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/waitlist" variant="outline">
+          Join Waitlist
+        </ButtonLink>
+      ),
     },
     team: {
-      buttonText: "Contact Sales",
-      buttonLink: "/contact",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/contact" variant="outline">
+          Contact Sales
+        </ButtonLink>
+      ),
     },
   },
   selfHosted: {
     free: {
-      buttonText: "Download",
-      buttonLink: "/download",
-      variant: "default" as const,
+      button: (
+        <ButtonLink href="/download" variant="default">
+          Download
+        </ButtonLink>
+      ),
     },
     pro: {
-      buttonText: "Request Access",
-      buttonLink: "/request-access",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/request-access" variant="outline">
+          Request Access
+        </ButtonLink>
+      ),
     },
     team: {
-      buttonText: "Contact Sales",
-      buttonLink: "/contact",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/contact" variant="outline">
+          Contact Sales
+        </ButtonLink>
+      ),
     },
   },
 };
@@ -100,36 +113,48 @@ export const WithExternalLinks: Story = {
     actions: {
       hosted: {
         free: {
-          buttonText: "Sign Up Now",
-          buttonLink: "https://app.lilypad.com/signup",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="https://app.lilypad.com/signup" variant="default">
+              Sign Up Now
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Join Beta",
-          buttonLink: "https://forms.lilypad.com/beta",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://forms.lilypad.com/beta" variant="outline">
+              Join Beta
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Schedule Demo",
-          buttonLink: "https://calendly.com/lilypad-team",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://calendly.com/lilypad-team" variant="outline">
+              Schedule Demo
+            </ButtonLink>
+          ),
         },
       },
       selfHosted: {
         free: {
-          buttonText: "GitHub Release",
-          buttonLink: "https://github.com/mirascope/lilypad/releases",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="https://github.com/mirascope/lilypad/releases" variant="default">
+              GitHub Release
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Enterprise Inquiry",
-          buttonLink: "https://forms.lilypad.com/enterprise",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://forms.lilypad.com/enterprise" variant="outline">
+              Enterprise Inquiry
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Book Consultation",
-          buttonLink: "https://calendly.com/lilypad-enterprise",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://calendly.com/lilypad-enterprise" variant="outline">
+              Book Consultation
+            </ButtonLink>
+          ),
         },
       },
     },
@@ -148,36 +173,48 @@ export const AllPrimaryButtons: Story = {
     actions: {
       hosted: {
         free: {
-          buttonText: "Start Free",
-          buttonLink: "/start",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/start" variant="default">
+              Start Free
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Upgrade to Pro",
-          buttonLink: "/upgrade-pro",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/upgrade-pro" variant="default">
+              Upgrade to Pro
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Get Team Plan",
-          buttonLink: "/upgrade-team",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/upgrade-team" variant="default">
+              Get Team Plan
+            </ButtonLink>
+          ),
         },
       },
       selfHosted: {
         free: {
-          buttonText: "Download Free",
-          buttonLink: "/download",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/download" variant="default">
+              Download Free
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Get Pro License",
-          buttonLink: "/license-pro",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/license-pro" variant="default">
+              Get Pro License
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Get Team License",
-          buttonLink: "/license-team",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/license-team" variant="default">
+              Get Team License
+            </ButtonLink>
+          ),
         },
       },
     },
diff --git a/mirascope-ui/blocks/lilypad-pricing.tsx b/mirascope-ui/blocks/lilypad-pricing.tsx
index 4fcef72..21dc8f8 100644
--- a/mirascope-ui/blocks/lilypad-pricing.tsx
+++ b/mirascope-ui/blocks/lilypad-pricing.tsx
@@ -1,20 +1,16 @@
-import { Check, X } from "lucide-react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/mirascope-ui/ui/tabs";
-import { ButtonLink } from "@/mirascope-ui/ui/button-link";
 import { cn } from "@/mirascope-ui/lib/utils";
+import { ButtonLink } from "@/mirascope-ui/ui/button-link";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/mirascope-ui/ui/tabs";
+import { Check, X } from "lucide-react";
 
-// Feature row component for displaying features with the same value across tiers
-const FeatureRow = ({
-  feature,
-  free,
-  pro,
-  team,
-}: {
+interface FeatureRowProps {
   feature: string;
   free: string | boolean;
   pro: string | boolean;
   team: string | boolean;
-}) => {
+}
+// Feature row component for displaying features with the same value across tiers
+const FeatureRow = ({ feature, free, pro, team }: FeatureRowProps) => {
   // If all tiers have the exact same value (and it's not a boolean)
   const allSameNonBoolean = free === pro && pro === team && typeof free === "string" && free !== "";
 
@@ -85,25 +81,16 @@ const FeatureRow = ({
   );
 };
 
-// Pricing tier component
-const PricingTier = ({
-  name,
-  price,
-  description,
-  buttonText,
-  buttonLink,
-  badge,
-  variant = "default",
-}: {
+interface PricingTierProps {
   name: string;
   price: string;
   description: string;
-  buttonText: string;
-  buttonLink: string;
+  button: React.ReactNode;
   badge?: "Open Beta" | "Closed Beta";
-  variant?: "default" | "outline";
-}) => (
-  <div className="bg-background border-border overflow-hidden rounded-lg border shadow-sm">
+}
+// Pricing tier component
+const PricingTier = ({ name, price, description, button, badge }: PricingTierProps) => (
+  <div className="border-border bg-background overflow-hidden rounded-lg border shadow-sm">
     <div className={cn("bg-background px-6 py-8")}>
       <div className="mb-2 flex items-center gap-2">
         <h3 className={cn("text-foreground text-xl font-semibold")}>{name}</h3>
@@ -127,26 +114,15 @@ const PricingTier = ({
           <span className="text-muted-foreground ml-1 text-sm">/ month</span>
         )}
       </div>
-      <ButtonLink href={buttonLink} className="w-full" variant={variant}>
-        {buttonText}
-      </ButtonLink>
+      {button}
     </div>
   </div>
 );
 
 // Feature comparison table component
-const FeatureComparisonTable = ({
-  features,
-}: {
-  features: Array<{
-    feature: string;
-    free: string | boolean;
-    pro: string | boolean;
-    team: string | boolean;
-  }>;
-}) => (
-  <div className="bg-background border-border overflow-hidden rounded-lg border shadow-sm">
-    <div className="bg-accent border-border border-b px-4 py-5 sm:px-6">
+export const FeatureComparisonTable = ({ features }: { features: FeatureRowProps[] }) => (
+  <div className="border-border bg-background overflow-hidden rounded-lg border shadow-sm">
+    <div className="border-border bg-accent border-b px-4 py-5 sm:px-6">
       <h3 className="text-accent-foreground text-lg font-medium">Feature Comparison</h3>
     </div>
     <div className="bg-background overflow-x-auto px-4 py-5 sm:p-6">
@@ -160,22 +136,14 @@ const FeatureComparisonTable = ({
 
       {/* Table rows */}
       {features.map((feat, i) => (
-        <FeatureRow
-          key={i}
-          feature={feat.feature}
-          free={feat.free}
-          pro={feat.pro}
-          team={feat.team}
-        />
+        <FeatureRow key={i} {...feat} />
       ))}
     </div>
   </div>
 );
 
 interface TierAction {
-  buttonText: string;
-  buttonLink: string;
-  variant?: "default" | "outline";
+  button: React.ReactNode;
 }
 
 interface PricingActions {
@@ -191,48 +159,47 @@ interface PricingActions {
   };
 }
 
+// Cloud hosted features
+export const cloudHostedFeatures = [
+  { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
+  { feature: "Users", free: "2", pro: "10", team: "Unlimited" },
+  {
+    feature: "Tracing",
+    free: "30k spans / month",
+    pro: "100k spans / month (thereafter $1 per 10k)",
+    team: "1M spans / month (thereafter $1 per 10k)",
+  },
+  { feature: "Data Retention", free: "30 days", pro: "90 days", team: "180 days" },
+  { feature: "Versioned Functions", free: true, pro: true, team: true },
+  { feature: "Playground", free: true, pro: true, team: true },
+  { feature: "Comparisons", free: true, pro: true, team: true },
+  { feature: "Annotations", free: true, pro: true, team: true },
+  { feature: "Support (Community)", free: true, pro: true, team: true },
+  { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
+  { feature: "Support (Private Slack)", free: false, pro: false, team: true },
+  { feature: "API Rate Limits", free: "10 / minute", pro: "100 / minute", team: "1000 / minute" },
+];
+
+// Self-hosted features
+export const selfHostedFeatures = [
+  { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
+  { feature: "Users", free: "Unlimited", pro: "As licensed", team: "As licensed" },
+  { feature: "Tracing", free: "No limits", pro: "No limits", team: "No limits" },
+  { feature: "Data Retention", free: "No limits", pro: "No limits", team: "No limits" },
+  { feature: "Versioned Functions", free: true, pro: true, team: true },
+  { feature: "Playground", free: false, pro: true, team: true },
+  { feature: "Comparisons", free: false, pro: true, team: true },
+  { feature: "Annotations", free: false, pro: true, team: true },
+  { feature: "Support (Community)", free: true, pro: true, team: true },
+  { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
+  { feature: "Support (Private Slack)", free: false, pro: false, team: true },
+  { feature: "API Rate Limits", free: "No limits", pro: "No limits", team: "No limits" },
+];
 interface LilypadPricingProps {
   actions: PricingActions;
 }
 
 export function LilypadPricing({ actions }: LilypadPricingProps) {
-  // Cloud hosted features
-  const cloudHostedFeatures = [
-    { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
-    { feature: "Users", free: "2", pro: "10", team: "Unlimited" },
-    {
-      feature: "Tracing",
-      free: "30k spans / month",
-      pro: "100k spans / month (thereafter $1 per 10k)",
-      team: "1M spans / month (thereafter $1 per 10k)",
-    },
-    { feature: "Data Retention", free: "30 days", pro: "90 days", team: "180 days" },
-    { feature: "Versioned Functions", free: true, pro: true, team: true },
-    { feature: "Playground", free: true, pro: true, team: true },
-    { feature: "Comparisons", free: true, pro: true, team: true },
-    { feature: "Annotations", free: true, pro: true, team: true },
-    { feature: "Support (Community)", free: true, pro: true, team: true },
-    { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
-    { feature: "Support (Private Slack)", free: false, pro: false, team: true },
-    { feature: "API Rate Limits", free: "10 / minute", pro: "100 / minute", team: "1000 / minute" },
-  ];
-
-  // Self-hosted features
-  const selfHostedFeatures = [
-    { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
-    { feature: "Users", free: "Unlimited", pro: "As licensed", team: "As licensed" },
-    { feature: "Tracing", free: "No limits", pro: "No limits", team: "No limits" },
-    { feature: "Data Retention", free: "No limits", pro: "No limits", team: "No limits" },
-    { feature: "Versioned Functions", free: true, pro: true, team: true },
-    { feature: "Playground", free: false, pro: true, team: true },
-    { feature: "Comparisons", free: false, pro: true, team: true },
-    { feature: "Annotations", free: false, pro: true, team: true },
-    { feature: "Support (Community)", free: true, pro: true, team: true },
-    { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
-    { feature: "Support (Private Slack)", free: false, pro: false, team: true },
-    { feature: "API Rate Limits", free: "No limits", pro: "No limits", team: "No limits" },
-  ];
-
   return (
     <div className="px-4 py-4">
       <div className="mx-auto max-w-4xl">
@@ -256,35 +223,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
 
           {/* Hosted By Us Tab Content */}
           <TabsContent value="hosted">
-            <div className="mb-10 grid gap-8 md:grid-cols-3">
-              <PricingTier
-                name="Free"
-                price="$0"
-                description="For individuals just getting started"
-                buttonText={actions.hosted.free.buttonText}
-                buttonLink={actions.hosted.free.buttonLink}
-                badge="Open Beta"
-                variant={actions.hosted.free.variant}
-              />
-              <PricingTier
-                name="Pro"
-                price="TBD"
-                description="For teams with more advanced needs"
-                buttonText={actions.hosted.pro.buttonText}
-                buttonLink={actions.hosted.pro.buttonLink}
-                badge="Closed Beta"
-                variant={actions.hosted.pro.variant || "outline"}
-              />
-              <PricingTier
-                name="Team"
-                price="TBD"
-                description="For larger teams requiring dedicated support"
-                buttonText={actions.hosted.team.buttonText}
-                buttonLink={actions.hosted.team.buttonLink}
-                badge="Closed Beta"
-                variant={actions.hosted.team.variant || "outline"}
-              />
-            </div>
+            <LilypadCloudPricing hostedActions={actions.hosted} />
 
             {/* Feature comparison table */}
             <FeatureComparisonTable features={cloudHostedFeatures} />
@@ -297,28 +236,22 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
                 name="Free"
                 price="$0"
                 description="For individuals just getting started"
-                buttonText={actions.selfHosted.free.buttonText}
-                buttonLink={actions.selfHosted.free.buttonLink}
                 badge="Open Beta"
-                variant={actions.selfHosted.free.variant}
+                button={actions.selfHosted.free.button}
               />
               <PricingTier
                 name="Pro"
                 price="TBD"
                 description="For teams with more advanced needs"
-                buttonText={actions.selfHosted.pro.buttonText}
-                buttonLink={actions.selfHosted.pro.buttonLink}
                 badge="Closed Beta"
-                variant={actions.selfHosted.pro.variant || "outline"}
+                button={actions.selfHosted.pro.button}
               />
               <PricingTier
                 name="Team"
                 price="TBD"
                 description="For larger teams requiring dedicated support"
-                buttonText={actions.selfHosted.team.buttonText}
-                buttonLink={actions.selfHosted.team.buttonLink}
                 badge="Closed Beta"
-                variant={actions.selfHosted.team.variant || "outline"}
+                button={actions.selfHosted.team.button}
               />
             </div>
 
@@ -328,7 +261,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
         </Tabs>
 
         {/* FAQ Section */}
-        <div className="bg-card border-border mt-16 rounded-lg border p-8">
+        <div className="border-border bg-card mt-16 rounded-lg border p-8">
           <h2 className="text-foreground mb-4 text-2xl font-semibold">
             Frequently Asked Questions
           </h2>
@@ -338,8 +271,8 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
                 How long will the open beta last?
               </h3>
               <p className="text-muted-foreground">
-                The open beta period is ongoing, and we'll provide advance notice before moving to
-                paid plans.
+                The open beta period is ongoing, and we&apos;ll provide advance notice before moving
+                to paid plans.
               </p>
             </div>
             <div>
@@ -361,7 +294,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
           <p className="text-muted-foreground">
             Join our{" "}
             <ButtonLink
-              href="https://join.slack.com/t/mirascope-community/shared_invite/zt-2ilqhvmki-FB6LWluInUCkkjYD3oSjNA"
+              href="https://mirascope.com/slack-invite?"
               variant="link"
               className="h-auto p-0"
             >
@@ -374,3 +307,44 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
     </div>
   );
 }
+
+export const LilypadCloudPricing = ({
+  hostedActions,
+}: {
+  hostedActions: {
+    free: TierAction;
+    pro: TierAction;
+    team: TierAction;
+  };
+}) => {
+  const pricingTiers: PricingTierProps[] = [
+    {
+      name: "Free",
+      price: "$0",
+      description: "For individuals just getting started",
+      badge: "Open Beta",
+      button: hostedActions.free.button,
+    },
+    {
+      name: "Pro",
+      price: "TBD",
+      description: "For teams with more advanced needs",
+      badge: "Closed Beta",
+      button: hostedActions.pro.button,
+    },
+    {
+      name: "Team",
+      price: "TBD",
+      description: "For larger teams requiring dedicated support",
+      badge: "Closed Beta",
+      button: hostedActions.team.button,
+    },
+  ];
+  return (
+    <div className="mb-10 grid gap-8 md:grid-cols-3">
+      {pricingTiers.map((tier) => (
+        <PricingTier key={tier.name} {...tier} />
+      ))}
+    </div>
+  );
+};