diff --git a/server/routers/status-page-router.js b/server/routers/status-page-router.js
index 3b164b136..41d3c5445 100644
--- a/server/routers/status-page-router.js
+++ b/server/routers/status-page-router.js
@@ -126,13 +126,18 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
                     ping: null
                 }));
 
-                // Calculate uptime for the configured range
-                if (heartbeatBarDays <= 1) {
-                    uptime = uptimeCalculator.get24Hour().uptime;
-                } else if (heartbeatBarDays <= 30) {
-                    uptime = uptimeCalculator.get30Day().uptime;
-                } else {
-                    uptime = uptimeCalculator.get1Year().uptime;
+                // Calculate uptime for the exact configured range
+                try {
+                    uptime = uptimeCalculator.getDataByDuration(`${heartbeatBarDays}d`).uptime;
+                } catch (e) {
+                    // Fall back to available ranges if duration exceeds limits
+                    if (heartbeatBarDays <= 1) {
+                        uptime = uptimeCalculator.get24Hour().uptime;
+                    } else if (heartbeatBarDays <= 30) {
+                        uptime = uptimeCalculator.get30Day().uptime;
+                    } else {
+                        uptime = uptimeCalculator.get1Year().uptime;
+                    }
                 }
             }
 
@@ -149,7 +154,14 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
         // Populate the response objects
         for (const result of monitorResults) {
             heartbeatList[result.monitorID] = result.heartbeats;
+
+            // Always populate 24h uptime for compatibility
             uptimeList[`${result.monitorID}_24`] = result.uptime;
+
+            // Add dynamic uptime key for the exact range
+            if (heartbeatBarDays > 0) {
+                uptimeList[`${result.monitorID}_${heartbeatBarDays}d`] = result.uptime;
+            }
         }
 
         response.json({
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 4bbeed283..c0af949a0 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -38,7 +38,7 @@
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
-                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            <Uptime :monitor="monitor.element" :type="uptimeType" :pill="true" />
                                             <a
                                                 v-if="showLink(monitor)"
                                                 :href="monitor.element.url"
@@ -129,6 +129,19 @@ export default {
     computed: {
         showGroupDrag() {
             return (this.$root.publicGroupList.length >= 2);
+        },
+        /**
+         * Get the uptime type based on heartbeatBarDays
+         * Returns the exact type for dynamic uptime calculation
+         * @returns {string} The uptime type
+         */
+        uptimeType() {
+            const days = Number(this.heartbeatBarDays);
+            if (days === 0 || days === 1) {
+                return "24"; // 24 hours (for compatibility)
+            } else {
+                return `${days}d`; // Dynamic days format (e.g., "7d", "14d", "30d")
+            }
         }
     },
     created() {
diff --git a/src/components/Uptime.vue b/src/components/Uptime.vue
index 64bbd4e51..66820c275 100644
--- a/src/components/Uptime.vue
+++ b/src/components/Uptime.vue
@@ -90,6 +90,14 @@ export default {
             if (this.type === "720") {
                 return `30${this.$t("-day")}`;
             }
+            if (this.type === "24") {
+                return `24${this.$t("-hour")}`;
+            }
+            // Handle dynamic day formats (e.g., "7d", "14d", "30d")
+            const dayMatch = this.type.match(/^(\d+)d$/);
+            if (dayMatch) {
+                return `${dayMatch[1]}${this.$t("-day")}`;
+            }
             return `24${this.$t("-hour")}`;
         }
     },