From 97374f736e72e9932d4ae3ff39dfea7b59cbded1 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Thu, 19 Feb 2026 12:45:18 -0600
Subject: [PATCH] feat: update billing display to show monthly pricing for
 additional servers

- Modified the billing section to clarify that users can add more servers at the specified monthly rate.
- Added monthly pricing display for both Hobby and Startup tiers when the annual plan is selected.
- Enhanced user experience by providing clearer pricing information based on server quantity.
---
 .../settings/billing/show-billing.tsx         | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
index 0fe3c2a07..cdb127880 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
@@ -685,10 +685,18 @@ export const ShowBilling = () => {
 													/{isAnnual ? "yr" : "mo"}
 												</p>
 												<p className="text-xs text-muted-foreground mt-0.5">
-													{isAnnual ? "$45.90/yr" : "$4.50/mo"} per server (add
-													as many as you&apos;d like for{" "}
-													{isAnnual ? "$45.90/yr" : "$4.50/mo"})
+													Add more servers as you&apos;d like for{" "}
+													{isAnnual ? "$45.90/yr" : "$4.50/mo"}
 												</p>
+												{isAnnual && (
+													<p className="text-xs text-muted-foreground mt-2">
+														$
+														{(
+															calculatePriceHobby(serverQuantity, true) / 12
+														).toFixed(2)}
+														/mo
+													</p>
+												)}
 											</div>
 											<ul className="mt-5 flex flex-col gap-2 text-sm text-muted-foreground">
 												{[
@@ -807,6 +815,15 @@ export const ShowBilling = () => {
 													Add more servers as you&apos;d like for{" "}
 													{isAnnual ? "$45.90/yr" : "$4.50/mo"}
 												</p>
+												{isAnnual && (
+													<p className="text-xs text-muted-foreground mt-2">
+														$
+														{(
+															calculatePriceStartup(serverQuantity, true) / 12
+														).toFixed(2)}
+														/mo
+													</p>
+												)}
 											</div>
 											<ul className="mt-5 flex flex-col gap-2 text-sm text-muted-foreground">
 												<li className="flex items-start gap-2 font-medium text-foreground">