diff --git a/src/components.d.ts b/src/components.d.ts
index 84bf403d8a..6304aecb5b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     AdminMultiLineChart: typeof import('./components/admin/AdminMultiLineChart.vue')['default']
     AdminStatsCard: typeof import('./components/admin/AdminStatsCard.vue')['default']
     AdminTrendChart: typeof import('./components/admin/AdminTrendChart.vue')['default']
+    AppNotFoundModal: typeof import('./components/AppNotFoundModal.vue')['default']
     AppSetting: typeof import('./components/dashboard/AppSetting.vue')['default']
     AppTable: typeof import('./components/tables/AppTable.vue')['default']
     AuditLogTable: typeof import('./components/tables/AuditLogTable.vue')['default']
@@ -80,6 +81,7 @@ declare global {
   const AdminMultiLineChart: typeof import('./components/admin/AdminMultiLineChart.vue')['default']
   const AdminStatsCard: typeof import('./components/admin/AdminStatsCard.vue')['default']
   const AdminTrendChart: typeof import('./components/admin/AdminTrendChart.vue')['default']
+  const AppNotFoundModal: typeof import('./components/AppNotFoundModal.vue')['default']
   const AppSetting: typeof import('./components/dashboard/AppSetting.vue')['default']
   const AppTable: typeof import('./components/tables/AppTable.vue')['default']
   const AuditLogTable: typeof import('./components/tables/AuditLogTable.vue')['default']
diff --git a/src/components/AppNotFoundModal.vue b/src/components/AppNotFoundModal.vue
new file mode 100644
index 0000000000..1e2213f280
--- /dev/null
+++ b/src/components/AppNotFoundModal.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import IconAlertCircle from '~icons/lucide/alert-circle'
+
+const { t } = useI18n()
+const router = useRouter()
+
+function goToApps() {
+  router.push('/app')
+}
+</script>
+
+<template>
+  <div class="flex absolute inset-0 z-10 flex-col justify-center items-center bg-white/60 dark:bg-gray-900/60">
+    <div class="p-8 text-center bg-white rounded-xl border shadow-xl dark:bg-gray-800 border-red-200 dark:border-red-700">
+      <div class="flex justify-center mb-4">
+        <div class="flex justify-center items-center w-16 h-16 bg-red-100 rounded-full dark:bg-red-900/30">
+          <IconAlertCircle class="w-8 h-8 text-red-500" />
+        </div>
+      </div>
+      <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
+        {{ t('app-not-found') }}
+      </h2>
+      <p class="mb-6 max-w-sm text-gray-600 dark:text-gray-400">
+        {{ t('app-not-found-description') }}
+      </p>
+      <button
+        class="inline-flex gap-2 items-center px-6 py-3 text-white bg-primary rounded-lg transition-colors cursor-pointer hover:bg-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+        @click="goToApps"
+      >
+        <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+        </svg>
+        {{ t('back-to-apps') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/dashboard/BundleUploadsCard.vue b/src/components/dashboard/BundleUploadsCard.vue
index 3ef08207f6..63179859eb 100644
--- a/src/components/dashboard/BundleUploadsCard.vue
+++ b/src/components/dashboard/BundleUploadsCard.vue
@@ -94,9 +94,6 @@ const currentCacheOrgId = ref<string | null>(null)
 // Cache for single app name to avoid refetching
 const singleAppNameCache = new Map<string, string>()
 
-// Check if we have real data
-const hasRealData = computed(() => total.value > 0)
-
 // Generate consistent demo data where total is derived from per-app breakdown
 const consistentDemoData = computed(() => {
   const days = getDemoDayCount(props.useBillingPeriod, bundleData.value.length)
@@ -106,8 +103,18 @@ const consistentDemoData = computed(() => {
 const demoBundleData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode detection - also force demo when forceDemo is true
-const isDemoMode = computed(() => props.forceDemo || (!hasRealData.value && !isLoading.value))
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  const dashboardAppsStore = useDashboardAppsStore()
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 // Effective values for display
 const effectiveBundleData = computed(() => isDemoMode.value ? demoBundleData.value : bundleData.value)
@@ -116,7 +123,7 @@ const effectiveAppNames = computed(() => isDemoMode.value ? DEMO_APP_NAMES : app
 const effectiveTotal = computed(() => isDemoMode.value ? calculateDemoTotal(demoBundleData.value) : total.value)
 const effectiveLastDayEvolution = computed(() => isDemoMode.value ? calculateDemoEvolution(demoBundleData.value) : lastDayEvolution.value)
 
-const hasData = computed(() => effectiveBundleData.value.length > 0)
+const hasData = computed(() => effectiveTotal.value > 0 || isDemoMode.value)
 
 async function calculateStats(forceRefetch = false) {
   const startTime = Date.now()
diff --git a/src/components/dashboard/DeploymentStatsCard.vue b/src/components/dashboard/DeploymentStatsCard.vue
index 1c6cee6d9c..e1a4ae7a1e 100644
--- a/src/components/dashboard/DeploymentStatsCard.vue
+++ b/src/components/dashboard/DeploymentStatsCard.vue
@@ -95,9 +95,6 @@ const deploymentDataByApp = ref<{ [appId: string]: number[] }>({})
 const appNames = ref<{ [appId: string]: string }>({})
 const isLoading = ref(true)
 
-// Check if we have real data
-const hasRealData = computed(() => totalDeployments.value > 0)
-
 // Generate consistent demo data where total is derived from per-app breakdown
 const consistentDemoData = computed(() => {
   const days = getDemoDayCount(props.useBillingPeriod, deploymentData.value.length)
@@ -107,8 +104,17 @@ const consistentDemoData = computed(() => {
 const demoDeploymentData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode detection - also force demo when forceDemo is true
-const isDemoMode = computed(() => props.forceDemo || (!hasRealData.value && !isLoading.value))
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 // Effective values for display
 const effectiveDeploymentData = computed(() => isDemoMode.value ? demoDeploymentData.value : deploymentData.value)
diff --git a/src/components/dashboard/DevicesStats.vue b/src/components/dashboard/DevicesStats.vue
index 80be5e4f6d..e10ab1ce1a 100644
--- a/src/components/dashboard/DevicesStats.vue
+++ b/src/components/dashboard/DevicesStats.vue
@@ -13,6 +13,7 @@ import { useChartData } from '~/services/chartDataService'
 import { createTooltipConfig, todayLinePlugin, verticalLinePlugin } from '~/services/chartTooltip'
 import { generateChartDayLabels, getChartDateRange, normalizeToStartOfDay } from '~/services/date'
 import { useSupabase } from '~/services/supabase'
+import { useDashboardAppsStore } from '~/stores/dashboardApps'
 import { useOrganizationStore } from '~/stores/organization'
 import ChartCard from './ChartCard.vue'
 
@@ -421,7 +422,20 @@ const processedChartData = computed<ChartData<'line'> | null>(() => {
   }
 })
 
-const hasData = computed(() => !!(processedChartData.value && processedChartData.value.datasets.length > 0))
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const dashboardAppsStore = useDashboardAppsStore()
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
+
+const hasData = computed(() => !!(processedChartData.value && processedChartData.value.datasets.length > 0) || isDemoMode.value)
 
 const todayLineOptions = computed(() => {
   if (!props.useBillingPeriod || !currentRange.value)
@@ -513,7 +527,7 @@ async function loadData(forceRefetch = false) {
     return
   }
 
-  // If forceDemo is true, use demo data instead of fetching
+  // If forceDemo is true (payment failed), use demo data instead of fetching
   if (props.forceDemo) {
     const { startDate, endDate } = getDateRange()
     const days = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
@@ -647,6 +661,7 @@ watch(
     :title="t('active_users_by_version')"
     :is-loading="isLoading"
     :has-data="hasData"
+    :is-demo-data="isDemoMode"
   >
     <template #header>
       <div class="flex items-start justify-between flex-1 gap-2">
diff --git a/src/components/dashboard/LineChartStats.vue b/src/components/dashboard/LineChartStats.vue
index 2476d880d9..e1fac72e19 100644
--- a/src/components/dashboard/LineChartStats.vue
+++ b/src/components/dashboard/LineChartStats.vue
@@ -383,12 +383,46 @@ const todayLineOptions = computed(() => {
   }
 })
 
+// Calculate appropriate Y-axis max based on actual data values
+const dataMax = computed(() => {
+  const allValues: number[] = []
+
+  // Collect values from main data
+  const mainData = accumulateData.value.filter((v): v is number => typeof v === 'number' && Number.isFinite(v))
+  allValues.push(...mainData)
+
+  // Collect values from per-app data
+  Object.values(props.dataByApp || {}).forEach((appData: any) => {
+    if (Array.isArray(appData)) {
+      const filtered = appData.filter((v): v is number => typeof v === 'number' && Number.isFinite(v))
+      allValues.push(...filtered)
+    }
+  })
+
+  if (allValues.length === 0)
+    return undefined
+
+  const max = Math.max(...allValues)
+  // Add 20% padding to the max so the line isn't at the very top
+  // Also ensure a minimum visible range
+  if (max <= 0)
+    return undefined
+
+  return max * 1.2
+})
+
 const chartOptions = computed<ChartOptions & { plugins: { inlineAnnotationPlugin: AnnotationOptions, todayLine?: any } }>(() => {
   const hasAppData = Object.keys(props.dataByApp || {}).length > 0
+  const scales = createStackedChartScales(isDark.value, hasAppData)
+
+  // If we have a calculated max, use it to ensure small values are visible
+  if (dataMax.value !== undefined) {
+    (scales.y as any).suggestedMax = dataMax.value
+  }
 
   return {
     maintainAspectRatio: false,
-    scales: createStackedChartScales(isDark.value, hasAppData),
+    scales,
     plugins: {
       inlineAnnotationPlugin: generateAnnotations.value,
       legend: createLegendConfig(isDark.value, hasAppData),
diff --git a/src/components/dashboard/UpdateStatsCard.vue b/src/components/dashboard/UpdateStatsCard.vue
index 99f1fbe924..eb5a9ffe08 100644
--- a/src/components/dashboard/UpdateStatsCard.vue
+++ b/src/components/dashboard/UpdateStatsCard.vue
@@ -79,16 +79,20 @@ const actionDisplayNames = computed(() => ({
   fail: capitalize(t('failed')),
 }))
 
-// Check if we have real data (at least one non-zero value)
-const hasRealData = computed(() => {
-  return totalInstalled.value > 0 || totalFailed.value > 0 || totalRequested.value > 0
-})
-
-// Generate demo data when no real data
+// Generate demo data when forceDemo is true
 const demoStats = computed(() => generateDemoUpdateStatsData(30))
 
-// Demo mode detection - also force demo when forceDemo is true
-const isDemoMode = computed(() => props.forceDemo || (!hasRealData.value && !isLoading.value))
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 // Effective values for display
 const effectiveChartData = computed(() => isDemoMode.value ? demoStats.value.total : chartUpdateData.value)
@@ -108,7 +112,7 @@ const effectiveTotalRequested = computed(() => isDemoMode.value ? calculateDemoT
 const effectiveTotalUpdates = computed(() => effectiveTotalInstalled.value + effectiveTotalFailed.value + effectiveTotalRequested.value)
 const effectiveLastDayEvolution = computed(() => isDemoMode.value ? calculateDemoEvolution(demoStats.value.total) : lastDayEvolution.value)
 
-const hasData = computed(() => effectiveChartData.value?.length > 0)
+const hasData = computed(() => effectiveTotalUpdates.value > 0 || isDemoMode.value)
 
 async function calculateStats(forceRefetch = false) {
   const startTime = Date.now()
diff --git a/src/components/dashboard/Usage.vue b/src/components/dashboard/Usage.vue
index d8d6620ded..b16cb6c8ea 100644
--- a/src/components/dashboard/Usage.vue
+++ b/src/components/dashboard/Usage.vue
@@ -182,9 +182,14 @@ function clearDashboardParams() {
 // Function to reload all chart data
 async function reloadAllCharts() {
   // Force reload of main dashboard data
+  // End date should be tomorrow at midnight to include all of today's data
   const last30DaysEnd = new Date()
+  last30DaysEnd.setHours(0, 0, 0, 0)
+  last30DaysEnd.setDate(last30DaysEnd.getDate() + 1) // Tomorrow midnight
+  // Start date should be 29 days ago at midnight (to get 30 days total including today)
   const last30DaysStart = new Date()
-  last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
+  last30DaysStart.setHours(0, 0, 0, 0)
+  last30DaysStart.setDate(last30DaysStart.getDate() - 29)
 
   const orgId = organizationStore.currentOrganization?.gid
   if (orgId) {
@@ -285,11 +290,15 @@ function filterToBillingPeriod(fullData: { mau: number[], storage: number[], ban
 }
 
 async function getUsages(forceRefetch = false) {
-  // Always work with last 30 days of data - normalize first for consistency
+  // Always work with last 30 days of data
+  // End date should be tomorrow at midnight to include all of today's data
   const last30DaysEnd = new Date()
   last30DaysEnd.setHours(0, 0, 0, 0)
-  const last30DaysStart = new Date(last30DaysEnd)
-  last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
+  last30DaysEnd.setDate(last30DaysEnd.getDate() + 1) // Tomorrow midnight
+  // Start date should be 29 days ago at midnight (to get 30 days total including today)
+  const last30DaysStart = new Date()
+  last30DaysStart.setHours(0, 0, 0, 0)
+  last30DaysStart.setDate(last30DaysStart.getDate() - 29)
 
   // Get billing period dates for filtering
   const billingStart = new Date(organizationStore.currentOrganization?.subscription_start ?? new Date())
@@ -725,6 +734,7 @@ onMounted(() => {
       :data="mauData" :data-by-app="mauDataByApp" :app-names="appNames" :title="`${t('monthly-active')}`" :unit="t('units-users')"
       :use-billing-period="useBillingPeriod"
       :is-loading="isLoading"
+      :force-demo="forceDemo"
       class="col-span-full sm:col-span-6 xl:col-span-4"
     />
     <UsageCard
@@ -732,6 +742,7 @@ onMounted(() => {
       :title="t('Storage')" :unit="storageUnit"
       :use-billing-period="useBillingPeriod"
       :is-loading="isLoading"
+      :force-demo="forceDemo"
       class="col-span-full sm:col-span-6 xl:col-span-4"
     />
     <UsageCard
@@ -739,6 +750,7 @@ onMounted(() => {
       :title="t('Bandwidth')" :unit="t('units-gb')"
       :use-billing-period="useBillingPeriod"
       :is-loading="isLoading"
+      :force-demo="forceDemo"
       class="col-span-full sm:col-span-6 xl:col-span-4"
     />
     <DevicesStats v-show="appId" :use-billing-period="useBillingPeriod" :accumulated="useBillingPeriod && showCumulative" :reload-trigger="reloadTrigger" :force-demo="forceDemo" class="col-span-full sm:col-span-6 xl:col-span-4" />
diff --git a/src/components/dashboard/UsageCard.vue b/src/components/dashboard/UsageCard.vue
index e25232998a..8556992df9 100644
--- a/src/components/dashboard/UsageCard.vue
+++ b/src/components/dashboard/UsageCard.vue
@@ -10,6 +10,7 @@ import {
   generateDemoStorageData,
   getDemoDayCount,
 } from '~/services/demoChartData'
+import { useDashboardAppsStore } from '~/stores/dashboardApps'
 import ChartCard from './ChartCard.vue'
 import LineChartStats from './LineChartStats.vue'
 
@@ -46,18 +47,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
-
-// Check if we have real data
-const hasRealData = computed(() => {
-  const dataArray = props.data as number[]
-  // Has data if there's at least one defined, non-zero value
-  const hasDefinedData = dataArray.some(val => val !== undefined && val !== null && val > 0)
-  // Or has data by app with at least one defined value
-  const hasAppData = props.dataByApp && Object.values(props.dataByApp).some((appValues: any) =>
-    appValues.some((val: any) => val !== undefined && val !== null && val > 0),
-  )
-  return hasDefinedData || hasAppData
+  // When true, show demo data (payment failed state)
+  forceDemo: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // Get the appropriate data generator based on chart type
@@ -88,8 +82,18 @@ const consistentDemoData = computed(() => {
 const demoData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Use real data or demo data
-const isDemoMode = computed(() => !hasRealData.value && !props.isLoading)
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const dashboardAppsStore = useDashboardAppsStore()
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 const effectiveData = computed(() => isDemoMode.value ? demoData.value : props.data as number[])
 const effectiveDataByApp = computed(() => isDemoMode.value ? demoDataByApp.value : props.dataByApp)
 const effectiveAppNames = computed(() => isDemoMode.value ? DEMO_APP_NAMES : props.appNames)
@@ -134,7 +138,15 @@ const lastDayEvolution = computed(() => {
   return ((lastValue - previousValue) / previousValue) * 100
 })
 
-const hasData = computed(() => effectiveData.value.length > 0)
+// Check if there's actual chart data (values in the array), not just a total
+// This handles cases like Storage where total can be > 0 but no activity in current period
+const hasChartData = computed(() => {
+  if (isDemoMode.value)
+    return true
+  const dataArray = effectiveData.value
+  // Check if any value in the array is defined and > 0
+  return dataArray.some(val => typeof val === 'number' && val > 0)
+})
 </script>
 
 <template>
@@ -143,7 +155,7 @@ const hasData = computed(() => effectiveData.value.length > 0)
     :total="total"
     :unit="unit"
     :last-day-evolution="lastDayEvolution"
-    :has-data="hasData"
+    :has-data="hasChartData"
     :is-loading="isLoading"
     :is-demo-data="isDemoMode"
   >
diff --git a/src/pages/app/[package].vue b/src/pages/app/[package].vue
index 2ed8c6c367..ea7c8a0bf2 100644
--- a/src/pages/app/[package].vue
+++ b/src/pages/app/[package].vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { Database } from '~/types/supabase.types'
 import { computed, ref, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import IconAlertCircle from '~icons/lucide/alert-circle'
+import AppNotFoundModal from '~/components/AppNotFoundModal.vue'
 import BundleUploadsCard from '~/components/dashboard/BundleUploadsCard.vue'
 import DeploymentBanner from '~/components/dashboard/DeploymentBanner.vue'
 import DeploymentStatsCard from '~/components/dashboard/DeploymentStatsCard.vue'
@@ -13,8 +12,6 @@ import { useDisplayStore } from '~/stores/display'
 import { useMainStore } from '~/stores/main'
 import { useOrganizationStore } from '~/stores/organization'
 
-const { t } = useI18n()
-
 const id = ref('')
 const route = useRoute('/app/[package]')
 const lastPath = ref('')
@@ -30,6 +27,7 @@ const supabase = useSupabase()
 const displayStore = useDisplayStore()
 const app = ref<Database['public']['Tables']['apps']['Row']>()
 const usageComponent = ref()
+const appNotFound = ref(false)
 
 // Check if user lacks security compliance (2FA or password)
 const lacksSecurityAccess = computed(() => {
@@ -44,14 +42,25 @@ const paymentFailed = computed(() => {
   return organizationStore.currentOrganizationFailed && !lacksSecurityAccess.value
 })
 
+// Should show blurred content with modal (either payment failed or app not found)
+const shouldBlurContent = computed(() => paymentFailed.value || appNotFound.value)
+
 async function loadAppInfo() {
   try {
-    const { data: dataApp } = await supabase
+    const { data: dataApp, error } = await supabase
       .from('apps')
       .select()
       .eq('app_id', id.value)
       .single()
-    app.value = dataApp || app.value
+
+    if (error || !dataApp) {
+      appNotFound.value = true
+      app.value = undefined
+      return
+    }
+
+    appNotFound.value = false
+    app.value = dataApp
     const promises = []
     capgoVersion.value = await getCapgoVersion(id.value, app.value?.last_version)
     updatesNb.value = await main.getTotalStatsByApp(id.value, organizationStore.currentOrganization?.subscription_start)
@@ -84,6 +93,8 @@ async function loadAppInfo() {
   }
   catch (error) {
     console.error(error)
+    appNotFound.value = true
+    app.value = undefined
   }
 }
 
@@ -112,15 +123,15 @@ watchEffect(async () => {
 
 <template>
   <div>
-    <div v-if="app || isLoading">
+    <div v-if="app || isLoading || appNotFound">
       <div class="relative w-full h-full px-4 pt-4 mb-8 overflow-x-hidden overflow-y-auto sm:px-6 lg:px-8 max-h-fit">
         <!-- Only show FailedCard for security access issues (2FA/password) -->
         <FailedCard v-if="lacksSecurityAccess" />
 
-        <!-- Content - blurred when payment failed -->
-        <div :class="{ 'blur-sm pointer-events-none select-none': paymentFailed }">
-          <DeploymentBanner v-if="!paymentFailed" :app-id="id" @deployed="refreshData" />
-          <Usage v-if="!lacksSecurityAccess" ref="usageComponent" :app-id="id" :force-demo="paymentFailed" />
+        <!-- Content - blurred when payment failed or app not found -->
+        <div :class="{ 'blur-sm pointer-events-none select-none': shouldBlurContent }">
+          <DeploymentBanner v-if="!shouldBlurContent" :app-id="id" @deployed="refreshData" />
+          <Usage v-if="!lacksSecurityAccess" ref="usageComponent" :app-id="id" :force-demo="shouldBlurContent" />
 
           <!-- Charts section -->
           <div class="grid grid-cols-1 gap-6 mb-6 sm:grid-cols-12 xl:grid-cols-12">
@@ -128,21 +139,21 @@ watchEffect(async () => {
               :app-id="id"
               :use-billing-period="usageComponent?.useBillingPeriod ?? true"
               :accumulated="(usageComponent?.useBillingPeriod ?? true) && (usageComponent?.showCumulative ?? false)"
-              :force-demo="paymentFailed"
+              :force-demo="shouldBlurContent"
               class="col-span-full sm:col-span-6 xl:col-span-4"
             />
             <UpdateStatsCard
               :app-id="id"
               :use-billing-period="usageComponent?.useBillingPeriod ?? true"
               :accumulated="(usageComponent?.useBillingPeriod ?? true) && (usageComponent?.showCumulative ?? false)"
-              :force-demo="paymentFailed"
+              :force-demo="shouldBlurContent"
               class="col-span-full sm:col-span-6 xl:col-span-4"
             />
             <DeploymentStatsCard
               :app-id="id"
               :use-billing-period="usageComponent?.useBillingPeriod ?? true"
               :accumulated="(usageComponent?.useBillingPeriod ?? true) && (usageComponent?.showCumulative ?? false)"
-              :force-demo="paymentFailed"
+              :force-demo="shouldBlurContent"
               class="col-span-full sm:col-span-6 xl:col-span-4"
             />
           </div>
@@ -150,20 +161,11 @@ watchEffect(async () => {
 
         <!-- Payment required overlay -->
         <PaymentRequiredModal v-if="paymentFailed" />
+
+        <!-- App not found overlay -->
+        <AppNotFoundModal v-if="appNotFound && !paymentFailed" />
       </div>
     </div>
-    <div v-else class="flex flex-col justify-center items-center min-h-[50vh]">
-      <IconAlertCircle class="w-16 h-16 mb-4 text-destructive" />
-      <h2 class="text-xl font-semibold text-foreground">
-        {{ t('app-not-found') }}
-      </h2>
-      <p class="mt-2 text-muted-foreground">
-        {{ t('app-not-found-description') }}
-      </p>
-      <button class="mt-4 text-white d-btn d-btn-primary" @click="$router.push(`/app`)">
-        {{ t('back-to-apps') }}
-      </button>
-    </div>
   </div>
 </template>
 
diff --git a/src/services/chartConfig.ts b/src/services/chartConfig.ts
index b664696ef3..9a8ece6c26 100644
--- a/src/services/chartConfig.ts
+++ b/src/services/chartConfig.ts
@@ -5,6 +5,12 @@
 interface AxisConfig {
   grid?: {
     color: string
+    drawBorder?: boolean
+    borderColor?: string
+  }
+  border?: {
+    display?: boolean
+    color?: string
   }
   ticks?: {
     color: string
@@ -34,9 +40,14 @@ interface LegendConfig {
  * Creates standardized x-axis configuration
  */
 export function createXAxisConfig(isDark: boolean, options: { stacked?: boolean } = {}) {
+  const gridColor = isDark ? '#323e4e' : '#cad5e2'
   const config: AxisConfig = {
     grid: {
-      color: isDark ? '#323e4e' : '#cad5e2',
+      color: gridColor,
+    },
+    // Hide the axis border line (first vertical line) to match grid lines
+    border: {
+      display: false,
     },
     ticks: {
       color: isDark ? 'white' : 'black',
@@ -64,10 +75,15 @@ export function createYAxisConfig(
     tickCallback?: (value: string | number) => string
   } = {},
 ) {
+  const gridColor = isDark ? '#424e5f' : '#bfc9d6'
   const config: AxisConfig = {
     beginAtZero: true,
     grid: {
-      color: isDark ? '#424e5f' : '#bfc9d6',
+      color: gridColor,
+    },
+    // Hide the axis border line (bottom horizontal line) to match grid lines
+    border: {
+      display: false,
     },
     ticks: {
       color: isDark ? 'white' : 'black',
diff --git a/src/services/chartTooltip.ts b/src/services/chartTooltip.ts
index 7e182a1091..69fe667291 100644
--- a/src/services/chartTooltip.ts
+++ b/src/services/chartTooltip.ts
@@ -186,8 +186,37 @@ export function createCustomTooltip(context: TooltipContext, isAccumulated: bool
 
     // Calculate the formatted date title from the data index
     const dataIndex = dataPoints[0]?.dataIndex ?? 0
-    const tooltipDate = getDateFromIndex(dataIndex, dateStartOrUseBillingPeriod)
-    const formattedTitle = formatDateForTooltip(tooltipDate)
+    // Use the actual label from the chart for the tooltip title
+    // This ensures alignment between what's shown on the X-axis and the tooltip
+    const chartLabels = chart.data?.labels || []
+    const labelAtIndex = chartLabels[dataIndex]
+    let formattedTitle: string
+    // Declare tooltipDate at higher scope so it's accessible for click handler
+    let tooltipDate: Date
+
+    if (labelAtIndex !== undefined && dateStartOrUseBillingPeriod instanceof Date) {
+      // Create date using the day number from the label and the month/year from billing start
+      tooltipDate = new Date(dateStartOrUseBillingPeriod)
+      const dayNumber = typeof labelAtIndex === 'number' ? labelAtIndex : Number.parseInt(String(labelAtIndex), 10)
+      if (!Number.isNaN(dayNumber)) {
+        // Handle month transitions - if label day is less than billing start day, it's next month
+        const billingStartDay = dateStartOrUseBillingPeriod.getDate()
+        if (dayNumber < billingStartDay) {
+          // Next month
+          tooltipDate.setMonth(tooltipDate.getMonth() + 1)
+        }
+        tooltipDate.setDate(dayNumber)
+        formattedTitle = formatDateForTooltip(tooltipDate)
+      }
+      else {
+        formattedTitle = String(labelAtIndex)
+      }
+    }
+    else {
+      // Fallback to original calculation
+      tooltipDate = getDateFromIndex(dataIndex, dateStartOrUseBillingPeriod)
+      formattedTitle = formatDateForTooltip(tooltipDate)
+    }
 
     // Create an array of items with their values, colors, and labels
     const items: ProcessedTooltipItem[] = dataPoints.map((dataPoint, index) => {
@@ -308,35 +337,37 @@ export function createCustomTooltip(context: TooltipContext, isAccumulated: bool
  * @param tooltip Chart.js tooltip object
  */
 function positionTooltip(tooltipEl: HTMLElement, canvas: HTMLCanvasElement, tooltip: any) {
-  const canvasPosition = canvas.getBoundingClientRect()
-  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+  // Position relative to the canvas parent (which is where tooltip is appended)
+  // Use tooltip.caretX/Y directly since they're relative to the canvas
+  let left = tooltip.caretX
+  let top = tooltip.caretY
 
-  // Calculate preferred position
-  let left = canvasPosition.left + scrollLeft + tooltip.caretX
-  let top = canvasPosition.top + scrollTop + tooltip.caretY
+  // Get canvas dimensions for bounds checking
+  const canvasWidth = canvas.offsetWidth
+  const canvasHeight = canvas.offsetHeight
 
-  // Adjust position to keep tooltip in viewport
+  // Get tooltip dimensions
   const tooltipRect = tooltipEl.getBoundingClientRect()
-  const viewportWidth = window.innerWidth
-  const viewportHeight = window.innerHeight
-
-  // Horizontal positioning
-  if (left + tooltipRect.width / 2 > viewportWidth - 10) {
-    left = viewportWidth - tooltipRect.width - 10
-    tooltipEl.style.transform = 'translate(0, 0)'
+  const tooltipWidth = tooltipRect.width
+  const tooltipHeight = tooltipRect.height
+
+  // Horizontal positioning - keep tooltip within canvas bounds
+  // Center the tooltip on the caret position
+  if (left + tooltipWidth / 2 > canvasWidth - 10) {
+    // Too close to right edge - align right edge with canvas
+    left = canvasWidth - tooltipWidth / 2 - 10
   }
-  else if (left - tooltipRect.width / 2 < 10) {
-    left = 10
-    tooltipEl.style.transform = 'translate(0, 0)'
-  }
-  else {
-    tooltipEl.style.transform = 'translate(-50%, 0)'
+  else if (left - tooltipWidth / 2 < 10) {
+    // Too close to left edge - align left edge with padding
+    left = tooltipWidth / 2 + 10
   }
 
-  // Vertical positioning
-  if (top + tooltipRect.height > scrollTop + viewportHeight - 10) {
-    top = canvasPosition.top + scrollTop + tooltip.caretY - tooltipRect.height - 10
+  // Always use centered transform
+  tooltipEl.style.transform = 'translate(-50%, 0)'
+
+  // Vertical positioning - if tooltip would go below canvas, show above caret
+  if (top + tooltipHeight > canvasHeight - 10) {
+    top = tooltip.caretY - tooltipHeight - 10
   }
 
   // Apply position
diff --git a/src/services/conversion.ts b/src/services/conversion.ts
index 21bcfa3cfc..1e55cd6a90 100644
--- a/src/services/conversion.ts
+++ b/src/services/conversion.ts
@@ -30,6 +30,9 @@ export function getDaysBetweenDates(date1: string | Date, date2: string | Date)
   const oneDay = 24 * 60 * 60 * 1000
   const firstDate = new Date(date1)
   const secondDate = new Date(date2)
+  // Normalize both dates to midnight (start of day) to avoid timezone/time-of-day issues
+  firstDate.setHours(0, 0, 0, 0)
+  secondDate.setHours(0, 0, 0, 0)
   const res = Math.round(Math.abs((firstDate.valueOf() - secondDate.valueOf()) / oneDay))
   return res
 }
diff --git a/src/stores/organization.ts b/src/stores/organization.ts
index edcbdcfd1e..8481089434 100644
--- a/src/stores/organization.ts
+++ b/src/stores/organization.ts
@@ -106,8 +106,12 @@ export const useOrganizationStore = defineStore('organization', () => {
     }
 
     // Always fetch last 30 days of data and filter client-side for billing period
+    // End date should be tomorrow at midnight to include all of today's data
     const last30DaysEnd = new Date()
+    last30DaysEnd.setHours(0, 0, 0, 0)
+    last30DaysEnd.setDate(last30DaysEnd.getDate() + 1) // Tomorrow midnight
     const last30DaysStart = new Date()
+    last30DaysStart.setHours(0, 0, 0, 0)
     last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
     try {
       await main.updateDashboard(currentOrganizationRaw.gid, last30DaysStart.toISOString(), last30DaysEnd.toISOString())