diff --git a/apps/web/config/billing.config.ts b/apps/web/config/billing.config.ts
index a43e45f91..e3954ccce 100644
--- a/apps/web/config/billing.config.ts
+++ b/apps/web/config/billing.config.ts
@@ -28,6 +28,22 @@ export default createBillingSchema({
               cost: 9.99,
               type: 'base',
             },
+            {
+              id: 'price_1NNwYHI1i3VnbZTqI2UzaHIe6',
+              name: 'Per Seat',
+              description: 'Add-on plan',
+              cost: 1.99,
+              type: 'per-seat',
+            },
+            {
+              id: 'price_1NNwYHI1i3VnbZTqI2UzaHIe7',
+              name: 'Metered',
+              description: 'Metered plan',
+              cost: 0.99,
+              type: 'metered',
+              unit: 'GB',
+              included: 10,
+            },
           ],
         },
         {
diff --git a/packages/billing-gateway/src/components/plan-picker.tsx b/packages/billing-gateway/src/components/plan-picker.tsx
index 8d1b4a250..29a57d298 100644
--- a/packages/billing-gateway/src/components/plan-picker.tsx
+++ b/packages/billing-gateway/src/components/plan-picker.tsx
@@ -302,7 +302,78 @@ export function PlanPicker(
               </p>
             </div>
 
-            <div className={'flex flex-col'}>
+            <div className={'flex flex-col space-y-1'}>
+              <span className={'font-semibold'}>Details</span>
+
+              <div className={'flex flex-col divide-y'}>
+                {selectedPlan?.lineItems.map((item) => {
+                  switch (item.type) {
+                    case 'base':
+                      return (
+                        <div
+                          key={item.id}
+                          className={
+                            'flex items-center justify-between py-1.5 text-sm'
+                          }
+                        >
+                          <span>{item.name}</span>
+                          <span className={'font-semibold'}>
+                            {formatCurrency(
+                              selectedProduct?.currency.toLowerCase(),
+                              item.cost,
+                            )}
+                          </span>
+                        </div>
+                      );
+
+                    case 'per-seat':
+                      return (
+                        <div
+                          key={item.id}
+                          className={
+                            'flex items-center justify-between py-1.5 text-sm'
+                          }
+                        >
+                          <span>Per team member</span>
+                          <span className={'font-semibold'}>
+                            {formatCurrency(
+                              selectedProduct?.currency.toLowerCase(),
+                              item.cost,
+                            )}
+                          </span>
+                        </div>
+                      );
+
+                    case 'metered':
+                      return (
+                        <div
+                          key={item.id}
+                          className={
+                            'flex items-center justify-between py-1.5 text-sm'
+                          }
+                        >
+                          <span>
+                            Per {item.unit}
+                            {item.included
+                              ? ` (${item.included} included)`
+                              : ''}
+                          </span>
+                          <span className={'font-semibold'}>
+                            {formatCurrency(
+                              selectedProduct?.currency.toLowerCase(),
+                              item.cost,
+                            )}
+                          </span>
+                        </div>
+                      );
+                  }
+                })}
+              </div>
+            </div>
+
+            <div className={'flex flex-col space-y-2'}>
+              <span className={'font-semibold'}>Features</span>
+
               {selectedProduct?.features.map((item) => {
                 return (
                   <div
@@ -316,8 +387,6 @@ export function PlanPicker(
                 );
               })}
             </div>
-
-            <Separator />
           </div>
         </If>
       </div>
diff --git a/packages/billing/src/create-billing-schema.ts b/packages/billing/src/create-billing-schema.ts
index 1ac902466..748f0facf 100644
--- a/packages/billing/src/create-billing-schema.ts
+++ b/packages/billing/src/create-billing-schema.ts
@@ -40,10 +40,6 @@ export const PlanSchema = z
     message: 'Plans must have at least one line item',
     path: ['lineItems'],
   })
-  .refine((data) => data.lineItems.some((item) => item.type === 'base'), {
-    message: 'Plans must include a base line item',
-    path: ['lineItems'],
-  })
   .refine(
     (data) => data.paymentType !== 'one-time' || data.interval === undefined,
     {