From d9e3883d11db2a22a61ad29782307019eece02c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Wed, 5 Nov 2025 09:03:03 +0100
Subject: [PATCH] fix: simply billing

---
 apps/public/components/sections/faq.tsx       |   2 +-
 .../components/organization/billing-faq.tsx   |  10 +-
 .../organization/billing-prompt.tsx           | 201 +++++
 .../{usage.tsx => billing-usage.tsx}          |  89 +-
 .../src/components/organization/billing.tsx   | 616 ++++++--------
 .../organization/current-subscription.tsx     | 283 -------
 apps/start/src/modals/billing-success.tsx     |  47 ++
 apps/start/src/modals/index.tsx               |  10 +
 apps/start/src/modals/select-billing-plan.tsx | 309 +++++++
 apps/start/src/routeTree.gen.ts               | 786 +++++++++---------
 ... _app.$organizationId.$projectId.chat.tsx} |   2 +-
 ...$organizationId.$projectId.dashboards.tsx} |   2 +-
 ...d.$projectId.dashboards_.$dashboardId.tsx} |   2 +-
 ...d.$projectId.events._tabs.conversions.tsx} |   2 +-
 ...tionId.$projectId.events._tabs.events.tsx} |   2 +-
 ...ationId.$projectId.events._tabs.index.tsx} |   2 +-
 ...ationId.$projectId.events._tabs.stats.tsx} |   2 +-
 ...rganizationId.$projectId.events._tabs.tsx} |   2 +-
 .../_app.$organizationId.$projectId.index.tsx |  59 ++
 ....$projectId.notifications._tabs.index.tsx} |   2 +-
 ...tId.notifications._tabs.notifications.tsx} |   2 +-
 ....$projectId.notifications._tabs.rules.tsx} |   2 +-
 ...tionId.$projectId.notifications._tabs.tsx} |   2 +-
 ..._app.$organizationId.$projectId.pages.tsx} |   2 +-
 ...ctId.profiles.$profileId._tabs.events.tsx} |   2 +-
 ...ectId.profiles.$profileId._tabs.index.tsx} |   2 +-
 ....$projectId.profiles.$profileId._tabs.tsx} |   2 +-
 ...d.$projectId.profiles._tabs.anonymous.tsx} |   2 +-
 ....$projectId.profiles._tabs.identified.tsx} |   2 +-
 ...ionId.$projectId.profiles._tabs.index.tsx} |   2 +-
 ...$projectId.profiles._tabs.power-users.tsx} |   2 +-
 ...anizationId.$projectId.profiles._tabs.tsx} |   2 +-
 ...p.$organizationId.$projectId.realtime.tsx} |   2 +-
 ...$organizationId.$projectId.references.tsx} |   2 +-
 ...pp.$organizationId.$projectId.reports.tsx} |   2 +-
 ...ationId.$projectId.reports_.$reportId.tsx} |   2 +-
 ...p.$organizationId.$projectId.sessions.tsx} |   2 +-
 ...ionId.$projectId.sessions_.$sessionId.tsx} |   2 +-
 ...nId.$projectId.settings._tabs.clients.tsx} |   2 +-
 ...nId.$projectId.settings._tabs.details.tsx} |   2 +-
 ...onId.$projectId.settings._tabs.events.tsx} |   2 +-
 ...ionId.$projectId.settings._tabs.index.tsx} |   2 +-
 ...anizationId.$projectId.settings._tabs.tsx} |   2 +-
 .../_app.$organizationId.$projectId.tsx       |  81 +-
 .../routes/_app.$organizationId.billing.tsx   |  26 +-
 .../start/src/routes/_app.$organizationId.tsx |  36 +-
 apps/start/src/styles.css                     |  12 +
 packages/db/src/clickhouse/query-builder.ts   |  56 ++
 packages/db/src/prisma-client.ts              |  16 +
 packages/db/src/services/chart.service.ts     |  39 +-
 .../db/src/services/organization.service.ts   |  35 +-
 packages/db/src/services/overview.service.ts  |   4 +-
 packages/payments/src/prices.ts               |   2 +
 53 files changed, 1543 insertions(+), 1240 deletions(-)
 create mode 100644 apps/start/src/components/organization/billing-prompt.tsx
 rename apps/start/src/components/organization/{usage.tsx => billing-usage.tsx} (80%)
 delete mode 100644 apps/start/src/components/organization/current-subscription.tsx
 create mode 100644 apps/start/src/modals/billing-success.tsx
 create mode 100644 apps/start/src/modals/select-billing-plan.tsx
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.chat.tsx => _app.$organizationId.$projectId.chat.tsx} (98%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.dashboards.tsx => _app.$organizationId.$projectId.dashboards.tsx} (99%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.dashboards_.$dashboardId.tsx => _app.$organizationId.$projectId.dashboards_.$dashboardId.tsx} (99%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.events._tabs.conversions.tsx => _app.$organizationId.$projectId.events._tabs.conversions.tsx} (94%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.events._tabs.events.tsx => _app.$organizationId.$projectId.events._tabs.events.tsx} (95%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.events._tabs.index.tsx => _app.$organizationId.$projectId.events._tabs.index.tsx} (85%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.events._tabs.stats.tsx => _app.$organizationId.$projectId.events._tabs.stats.tsx} (98%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.events._tabs.tsx => _app.$organizationId.$projectId.events._tabs.tsx} (96%)
 create mode 100644 apps/start/src/routes/_app.$organizationId.$projectId.index.tsx
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.notifications._tabs.index.tsx => _app.$organizationId.$projectId.notifications._tabs.index.tsx} (84%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.notifications._tabs.notifications.tsx => _app.$organizationId.$projectId.notifications._tabs.notifications.tsx} (92%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.notifications._tabs.rules.tsx => _app.$organizationId.$projectId.notifications._tabs.rules.tsx} (97%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.notifications._tabs.tsx => _app.$organizationId.$projectId.notifications._tabs.tsx} (96%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.pages.tsx => _app.$organizationId.$projectId.pages.tsx} (99%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles.$profileId._tabs.events.tsx => _app.$organizationId.$projectId.profiles.$profileId._tabs.events.tsx} (94%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles.$profileId._tabs.index.tsx => _app.$organizationId.$projectId.profiles.$profileId._tabs.index.tsx} (98%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles.$profileId._tabs.tsx => _app.$organizationId.$projectId.profiles.$profileId._tabs.tsx} (98%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles._tabs.anonymous.tsx => _app.$organizationId.$projectId.profiles._tabs.anonymous.tsx} (95%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles._tabs.identified.tsx => _app.$organizationId.$projectId.profiles._tabs.identified.tsx} (94%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles._tabs.index.tsx => _app.$organizationId.$projectId.profiles._tabs.index.tsx} (85%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles._tabs.power-users.tsx => _app.$organizationId.$projectId.profiles._tabs.power-users.tsx} (94%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.profiles._tabs.tsx => _app.$organizationId.$projectId.profiles._tabs.tsx} (96%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.realtime.tsx => _app.$organizationId.$projectId.realtime.tsx} (98%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.references.tsx => _app.$organizationId.$projectId.references.tsx} (99%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.reports.tsx => _app.$organizationId.$projectId.reports.tsx} (92%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.reports_.$reportId.tsx => _app.$organizationId.$projectId.reports_.$reportId.tsx} (95%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.sessions.tsx => _app.$organizationId.$projectId.sessions.tsx} (96%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.sessions_.$sessionId.tsx => _app.$organizationId.$projectId.sessions_.$sessionId.tsx} (98%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.settings._tabs.clients.tsx => _app.$organizationId.$projectId.settings._tabs.clients.tsx} (89%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.settings._tabs.details.tsx => _app.$organizationId.$projectId.settings._tabs.details.tsx} (94%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.settings._tabs.events.tsx => _app.$organizationId.$projectId.settings._tabs.events.tsx} (93%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.settings._tabs.index.tsx => _app.$organizationId.$projectId.settings._tabs.index.tsx} (85%)
 rename apps/start/src/routes/{_app.$organizationId.$projectId_.settings._tabs.tsx => _app.$organizationId.$projectId.settings._tabs.tsx} (97%)

diff --git a/apps/public/components/sections/faq.tsx b/apps/public/components/sections/faq.tsx
index 54e6d666..1bdc2d88 100644
--- a/apps/public/components/sections/faq.tsx
+++ b/apps/public/components/sections/faq.tsx
@@ -13,7 +13,7 @@ const questions = [
   {
     question: 'Does OpenPanel have a free tier?',
     answer: [
-      'For our Cloud plan we offer a 14 days free trial, this is mostly for you to be able to try out OpenPanel before committing to a paid plan.',
+      'For our Cloud plan we offer a 30 days free trial, this is mostly for you to be able to try out OpenPanel before committing to a paid plan.',
       'OpenPanel is also open-source and you can self-host it for free!',
       '',
       'Why does OpenPanel not have a free tier?',
diff --git a/apps/start/src/components/organization/billing-faq.tsx b/apps/start/src/components/organization/billing-faq.tsx
index 28b52bf7..2ae71f51 100644
--- a/apps/start/src/components/organization/billing-faq.tsx
+++ b/apps/start/src/components/organization/billing-faq.tsx
@@ -10,7 +10,7 @@ const questions = [
   {
     question: 'Does OpenPanel have a free tier?',
     answer: [
-      'For our Cloud plan we offer a 14 days free trial, this is mostly for you to be able to try out OpenPanel before committing to a paid plan.',
+      'For our Cloud plan we offer a 30 days free trial, this is mostly for you to be able to try out OpenPanel before committing to a paid plan.',
       'OpenPanel is also open-source and you can self-host it for free!',
       '',
       'Why does OpenPanel not have a free tier?',
@@ -37,13 +37,19 @@ const questions = [
       'You can change your billing information by clicking the "Manage your subscription" button in the billing section.',
     ],
   },
+  {
+    question: 'We need a custom plan, can you help us?',
+    answer: [
+      'Yes, we can help you with that. Please contact us at hello@openpanel.com to request a quote.',
+    ],
+  },
 ];
 
 export function BillingFaq() {
   return (
     <Widget className="w-full">
       <WidgetHead className="flex items-center justify-between">
-        <span className="title">Usage</span>
+        <span className="title">Frequently asked questions</span>
       </WidgetHead>
       <Accordion
         type="single"
diff --git a/apps/start/src/components/organization/billing-prompt.tsx b/apps/start/src/components/organization/billing-prompt.tsx
new file mode 100644
index 00000000..ad361f6c
--- /dev/null
+++ b/apps/start/src/components/organization/billing-prompt.tsx
@@ -0,0 +1,201 @@
+import { PageHeader } from '@/components/page-header';
+import { Button, LinkButton } from '@/components/ui/button';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { useTRPC } from '@/integrations/trpc/react';
+import { op } from '@/utils/op';
+import type { IServiceOrganization } from '@openpanel/db';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  BarChart3Icon,
+  DollarSignIcon,
+  InfinityIcon,
+  type LucideIcon,
+  MapIcon,
+  ShieldCheckIcon,
+  TrendingUpIcon,
+} from 'lucide-react';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+const COPY = {
+  expired: {
+    title: 'Subscription expired',
+    description:
+      'Reactivate your subscription to regain access to your analytics data and insights.',
+    body: [
+      "Your subscription has expired, but your data is safe and waiting for you. Reactivate now to continue tracking your users' behavior and making data-driven decisions.",
+      "Don't let gaps in your analytics cost you valuable insights. Every day without data is a day of missed opportunities to understand and grow your audience.",
+    ],
+  },
+  trialEnded: {
+    title: 'Trial ended',
+    description:
+      'Upgrade now to keep the momentum going and continue optimizing your product.',
+    body: [
+      "You've experienced the power of OpenPanel. Keep the insights flowing and maintain continuity in your analytics data.",
+      "We'll still process all your incoming events for the coming 30 days.",
+    ],
+  },
+  freePlan: {
+    title: 'Free plan is removed',
+    description:
+      "We've removed the free plan to focus on delivering exceptional value to our paid customers.",
+    body: [
+      "We've evolved our offering to provide better features, faster performance, and dedicated support. Our paid plans ensure we can continue building the analytics platform you deserve.",
+      'Simple, transparent pricing with no hidden fees. Pay for what you use, and scale as you grow. Your investment in analytics pays for itself through better decisions and improved user experiences.',
+    ],
+  },
+};
+
+export default function BillingPrompt({
+  organization,
+  type,
+}: {
+  organization: IServiceOrganization;
+  type: keyof typeof COPY;
+}) {
+  const number = useNumber();
+  const trpc = useTRPC();
+  const { data: products, isLoading: isLoadingProducts } = useQuery(
+    trpc.subscription.products.queryOptions({
+      organizationId: organization.id,
+    }),
+  );
+  const checkout = useMutation(
+    trpc.subscription.checkout.mutationOptions({
+      onSuccess(data) {
+        if (data?.url) {
+          window.location.href = data.url;
+        } else {
+          toast.success('Subscription updated', {
+            description: 'It might take a few seconds to update',
+          });
+        }
+      },
+    }),
+  );
+  const { title, description, body } = COPY[type];
+
+  const bestProductFit = products?.find(
+    (product) =>
+      typeof product.metadata.eventsLimit === 'number' &&
+      product.metadata.eventsLimit >=
+        organization.subscriptionPeriodEventsCount,
+  );
+
+  useEffect(() => {
+    op.track('billing_prompt_viewed', {
+      type,
+    });
+  }, []);
+
+  const price = bestProductFit
+    ? new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'usd',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 1,
+      }).format(
+        bestProductFit.prices[0] && 'priceAmount' in bestProductFit.prices[0]
+          ? bestProductFit.prices[0].priceAmount / 100
+          : 0,
+      )
+    : null;
+
+  return (
+    <div className="p-4 md:p-20 max-w-7xl mx-auto">
+      <div className="border rounded-lg overflow-hidden bg-def-200 p-2 items-center">
+        <div className="md:row">
+          <div className="p-6 bg-background rounded-md border col gap-4 flex-1">
+            <PageHeader title={title} description={description} />
+            {body.map((paragraph) => (
+              <p key={paragraph}>
+                {paragraph.replace(
+                  '{{events}}',
+                  number.format(
+                    organization.subscriptionPeriodEventsCount ?? 0,
+                  ),
+                )}
+              </p>
+            ))}
+            <div className="col gap-2 mt-auto">
+              {bestProductFit && (
+                <div className="text-sm text-muted-foreground leading-normal">
+                  Based on your usage (
+                  {number.format(
+                    organization.subscriptionPeriodEventsCount ?? 0,
+                  )}{' '}
+                  events) we recommend upgrading <br />
+                  to the <strong>{bestProductFit.name}</strong> plan for{' '}
+                  <strong>{price}</strong> per month.
+                </div>
+              )}
+              <div className="col md:row gap-2">
+                <Button
+                  size="lg"
+                  loading={isLoadingProducts}
+                  disabled={!bestProductFit}
+                  onClick={() => {
+                    if (bestProductFit) {
+                      op.track('billing_prompt_upgrade_clicked', {
+                        type,
+                        price:
+                          bestProductFit.prices[0] &&
+                          'priceAmount' in bestProductFit.prices[0]
+                            ? bestProductFit.prices[0].priceAmount / 100
+                            : 0,
+                      });
+                      checkout.mutate({
+                        organizationId: organization.id,
+                        productPriceId: bestProductFit.prices[0].id,
+                        productId: bestProductFit.id,
+                      });
+                    }
+                  }}
+                >
+                  Upgrade to {price}
+                </Button>
+                <LinkButton
+                  size="lg"
+                  variant="outline"
+                  to="/$organizationId/billing"
+                  params={{ organizationId: organization.id }}
+                >
+                  View pricing
+                </LinkButton>
+              </div>
+            </div>
+          </div>
+          <div className="shrink-0 flex-1 p-6 gap-4 col min-w-[200px] max-w-[300px]">
+            <Point icon={DollarSignIcon}>Plans start at just $2.5/month</Point>
+            <Point icon={InfinityIcon}>
+              Unlimited reports, members and projects
+            </Point>
+            <Point icon={BarChart3Icon}>Advanced funnels and conversions</Point>
+            <Point icon={MapIcon}>Real-time analytics</Point>
+            <Point icon={TrendingUpIcon}>
+              Track KPIs and custom events (revenue soon)
+            </Point>
+            <Point icon={ShieldCheckIcon}>
+              Privacy-focused and GDPR compliant
+            </Point>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Point({
+  icon: Icon,
+  children,
+}: { icon: LucideIcon; children: React.ReactNode }) {
+  return (
+    <div className="row gap-2">
+      <div className="size-6 shrink-0 center-center rounded-full bg-amber-500 text-white">
+        <Icon className="size-4" />
+      </div>
+      <h3 className="font-medium mt-[1.5px]">{children}</h3>
+    </div>
+  );
+}
diff --git a/apps/start/src/components/organization/usage.tsx b/apps/start/src/components/organization/billing-usage.tsx
similarity index 80%
rename from apps/start/src/components/organization/usage.tsx
rename to apps/start/src/components/organization/billing-usage.tsx
index 778ed624..a387bf48 100644
--- a/apps/start/src/components/organization/usage.tsx
+++ b/apps/start/src/components/organization/billing-usage.tsx
@@ -18,7 +18,6 @@ import {
   BarChart,
   CartesianGrid,
   Tooltip as RechartTooltip,
-  ReferenceLine,
   ResponsiveContainer,
   XAxis,
   YAxis,
@@ -38,7 +37,7 @@ function Card({ title, value }: { title: string; value: string }) {
   );
 }
 
-export default function Usage({ organization }: Props) {
+export default function BillingUsage({ organization }: Props) {
   const number = useNumber();
   const trpc = useTRPC();
   const usageQuery = useQuery(
@@ -82,6 +81,7 @@ export default function Usage({ organization }: Props) {
       </div>,
     );
   }
+
   if (usageQuery.isError) {
     return wrapper(
       <div className="center-center p-8 font-medium">
@@ -90,6 +90,12 @@ export default function Usage({ organization }: Props) {
     );
   }
 
+  if (usageQuery.data?.length === 0) {
+    return wrapper(
+      <div className="center-center p-8 font-medium">No usage data yet</div>,
+    );
+  }
+
   const subscriptionPeriodEventsLimit = organization.hasSubscription
     ? organization.subscriptionPeriodEventsLimit
     : 0;
@@ -159,7 +165,7 @@ export default function Usage({ organization }: Props) {
 
   return wrapper(
     <>
-      <div className="border-b divide-x divide-border -m-4 mb-4 grid grid-cols-2 md:grid-cols-4">
+      <div className="-m-4 mb-4 grid grid-cols-2 [&>div]:shadow-[0_0_0_0.5px] [&_div]:shadow-border border-b">
         {organization.hasSubscription ? (
           <>
             <Card
@@ -171,14 +177,6 @@ export default function Usage({ organization }: Props) {
                   : '🤷‍♂️'
               }
             />
-            <Card
-              title="Limit"
-              value={number.format(subscriptionPeriodEventsLimit)}
-            />
-            <Card
-              title="Events count"
-              value={number.format(subscriptionPeriodEventsCount)}
-            />
             <Card
               title="Left to use"
               value={
@@ -192,6 +190,14 @@ export default function Usage({ organization }: Props) {
                     )
               }
             />
+            <Card
+              title="Events count"
+              value={number.format(subscriptionPeriodEventsCount)}
+            />
+            <Card
+              title="Limit"
+              value={number.format(subscriptionPeriodEventsLimit)}
+            />
           </>
         ) : (
           <>
@@ -238,67 +244,6 @@ export default function Usage({ organization }: Props) {
             </ResponsiveContainer>
           </div>
         </div>
-
-        {/* Total Events vs Limit Chart */}
-        <div className="space-y-2">
-          <h3 className="text-sm font-medium text-muted-foreground">
-            Total Events vs Limit
-          </h3>
-          <div className="max-h-[300px] h-[250px] w-full p-4">
-            <ResponsiveContainer>
-              <BarChart
-                data={[
-                  {
-                    name: 'Total Events',
-                    count: subscriptionPeriodEventsCount,
-                    limit: subscriptionPeriodEventsLimit,
-                  },
-                ]}
-              >
-                <RechartTooltip content={<TotalTooltip />} cursor={false} />
-                {organization.hasSubscription &&
-                  subscriptionPeriodEventsLimit > 0 && (
-                    <ReferenceLine
-                      y={subscriptionPeriodEventsLimit}
-                      stroke={getChartColor(1)}
-                      strokeWidth={2}
-                      strokeDasharray="3 3"
-                      strokeOpacity={0.8}
-                      strokeLinecap="round"
-                      label={{
-                        value: `Limit (${number.format(subscriptionPeriodEventsLimit)})`,
-                        fill: getChartColor(1),
-                        position: 'insideTopRight',
-                        fontSize: 12,
-                      }}
-                    />
-                  )}
-                <Bar
-                  dataKey="count"
-                  isAnimationActive={false}
-                  shape={BarShapeBlue}
-                />
-                <XAxis {...X_AXIS_STYLE_PROPS} dataKey="name" />
-                <YAxis
-                  {...yAxisProps}
-                  domain={[
-                    0,
-                    Math.max(
-                      subscriptionPeriodEventsLimit,
-                      subscriptionPeriodEventsCount,
-                    ) * 1.1,
-                  ]}
-                />
-                <CartesianGrid
-                  horizontal={true}
-                  vertical={false}
-                  strokeDasharray="3 3"
-                  strokeOpacity={0.5}
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </div>
       </div>
     </>,
   );
diff --git a/apps/start/src/components/organization/billing.tsx b/apps/start/src/components/organization/billing.tsx
index f25b314f..6c8fd041 100644
--- a/apps/start/src/components/organization/billing.tsx
+++ b/apps/start/src/components/organization/billing.tsx
@@ -1,45 +1,55 @@
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
-import { Tooltiper } from '@/components/ui/tooltip';
-import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
-import { useAppParams } from '@/hooks/use-app-params';
+import { useNumber } from '@/hooks/use-numer-formatter';
 import useWS from '@/hooks/use-ws';
 import { useTRPC } from '@/integrations/trpc/react';
-import { showConfirm } from '@/modals';
-import { op } from '@/utils/op';
+import { pushModal, useOnPushModal } from '@/modals';
+import { formatDate } from '@/utils/date';
 import type { IServiceOrganization } from '@openpanel/db';
-import type { IPolarPrice } from '@openpanel/payments';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Loader2Icon } from 'lucide-react';
+import { differenceInDays } from 'date-fns';
 import { useQueryState } from 'nuqs';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { Progress } from '../ui/progress';
+import { Widget, WidgetBody, WidgetHead } from '../widget';
+import { BillingFaq } from './billing-faq';
+import BillingUsage from './billing-usage';
 
 type Props = {
   organization: IServiceOrganization;
 };
 
 export default function Billing({ organization }: Props) {
+  const [success, setSuccess] = useQueryState('customer_session_token');
   const queryClient = useQueryClient();
   const trpc = useTRPC();
-  const [customerSessionToken, setCustomerSessionToken] = useQueryState(
-    'customer_session_token',
-  );
+  const number = useNumber();
+
   const productsQuery = useQuery(
     trpc.subscription.products.queryOptions({
       organizationId: organization.id,
     }),
   );
 
+  const currentProductQuery = useQuery(
+    trpc.subscription.getCurrent.queryOptions({
+      organizationId: organization.id,
+    }),
+  );
+
+  const portalMutation = useMutation(
+    trpc.subscription.portal.mutationOptions({
+      onSuccess(data) {
+        if (data?.url) {
+          window.location.href = data.url;
+        }
+      },
+      onError(error) {
+        toast.error(error.message);
+      },
+    }),
+  );
+
   useWS(`/live/organization/${organization.id}`, () => {
     queryClient.invalidateQueries(trpc.organization.pathFilter());
   });
@@ -54,378 +64,228 @@ export default function Billing({ organization }: Props) {
       .filter((product) => product.prices.some((p) => p.amountType !== 'free'));
   }, [productsQuery.data, recurringInterval]);
 
-  useEffect(() => {
-    if (organization.subscriptionInterval) {
-      setRecurringInterval(
-        organization.subscriptionInterval as 'year' | 'month',
+  const currentProduct = currentProductQuery.data ?? null;
+  const currentPrice = currentProduct?.prices.flatMap((p) =>
+    p.type === 'recurring' && p.amountType === 'fixed' ? [p] : [],
+  )[0];
+
+  const renderStatus = () => {
+    if (organization.isActive && organization.subscriptionCurrentPeriodEnd) {
+      return (
+        <p>
+          Your subscription will be renewed on{' '}
+          {formatDate(organization.subscriptionCurrentPeriodEnd)}
+        </p>
       );
     }
-  }, [organization.subscriptionInterval]);
+
+    if (organization.isCanceled && organization.subscriptionCanceledAt) {
+      return (
+        <p>
+          Your subscription was canceled on{' '}
+          {formatDate(organization.subscriptionCanceledAt)}
+        </p>
+      );
+    }
+    if (
+      organization.isWillBeCanceled &&
+      organization.subscriptionCurrentPeriodEnd
+    ) {
+      return (
+        <p>
+          Your subscription will be canceled on{' '}
+          {formatDate(organization.subscriptionCurrentPeriodEnd)}
+        </p>
+      );
+    }
+
+    if (
+      organization.subscriptionStatus === 'expired' &&
+      organization.subscriptionCurrentPeriodEnd
+    ) {
+      return (
+        <p>
+          Your subscription expired on{' '}
+          {formatDate(organization.subscriptionCurrentPeriodEnd)}
+        </p>
+      );
+    }
+    if (
+      organization.subscriptionStatus === 'trialing' &&
+      organization.subscriptionEndsAt
+    ) {
+      return (
+        <p>
+          Your trial will end on {formatDate(organization.subscriptionEndsAt)}
+        </p>
+      );
+    }
+
+    return null;
+  };
 
   useEffect(() => {
-    if (customerSessionToken) {
-      op.track('subscription_created');
+    if (success) {
+      pushModal('BillingSuccess');
     }
-  }, [customerSessionToken]);
+  }, [success]);
 
-  const [selectedProductIndex, setSelectedProductIndex] = useState<number>(0);
-
-  // Check if organization has a custom product
-  const hasCustomProduct = useMemo(() => {
-    return products.some((product) => product.metadata?.custom === true);
-  }, [products]);
-
-  // Preferred default selection when there is no active subscription
-  const defaultSelectedIndex = useMemo(() => {
-    const defaultIndex = products.findIndex(
-      (product) => product.metadata?.eventsLimit === 100_000,
-    );
-    return defaultIndex >= 0 ? defaultIndex : 0;
-  }, [products]);
-
-  // Find current subscription index (-1 when no subscription)
-  const currentSubscriptionIndex = useMemo(() => {
-    if (!organization.subscriptionProductId) {
-      return -1;
+  // Clear query state when modal is closed
+  useOnPushModal('BillingSuccess', (open) => {
+    if (!open) {
+      setSuccess(null);
     }
-    return products.findIndex(
-      (product) => product.id === organization.subscriptionProductId,
-    );
-  }, [products, organization.subscriptionProductId]);
+  });
 
-  // Check if selected index is the "custom" option (beyond available products)
-  const isCustomOption = selectedProductIndex >= products.length;
-
-  // Find the highest event limit to make the custom option dynamic
-  const highestEventLimit = useMemo(() => {
-    const limits = products
-      .map((product) => product.metadata?.eventsLimit)
-      .filter((limit): limit is number => typeof limit === 'number');
-    return Math.max(...limits, 0);
-  }, [products]);
-
-  // Format the custom option label dynamically
-  const customOptionLabel = useMemo(() => {
-    if (highestEventLimit >= 1_000_000) {
-      return `+${(highestEventLimit / 1_000_000).toFixed(0)}M`;
-    }
-    if (highestEventLimit >= 1_000) {
-      return `+${(highestEventLimit / 1_000).toFixed(0)}K`;
-    }
-    return `+${highestEventLimit}`;
-  }, [highestEventLimit]);
-
-  // Set initial slider position to current subscription or default plan when none
-  useEffect(() => {
-    if (currentSubscriptionIndex >= 0) {
-      setSelectedProductIndex(currentSubscriptionIndex);
-    } else {
-      setSelectedProductIndex(defaultSelectedIndex);
-    }
-  }, [currentSubscriptionIndex, defaultSelectedIndex]);
-
-  const selectedProduct = products[selectedProductIndex];
-  const isUpgrade = selectedProductIndex > currentSubscriptionIndex;
-  const isDowngrade = selectedProductIndex < currentSubscriptionIndex;
-  const isCurrentPlan = selectedProductIndex === currentSubscriptionIndex;
-
-  function renderBillingSlider() {
-    if (productsQuery.isLoading) {
-      return (
-        <div className="center-center p-8">
-          <Loader2Icon className="animate-spin" />
-        </div>
-      );
-    }
-    if (productsQuery.isError) {
-      return (
-        <div className="center-center p-8 font-medium">
-          Issues loading all tiers
-        </div>
-      );
-    }
-
-    if (hasCustomProduct) {
-      return (
-        <div className="p-8 text-center">
-          <div className="text-muted-foreground">
-            Not applicable since custom product
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="p-6 space-y-6">
-        <div className="space-y-4">
-          <div className="flex justify-between items-center">
-            <span className="text-sm font-medium">Select your plan</span>
-            <span className="text-sm text-muted-foreground">
-              {selectedProduct?.name || 'No plan selected'}
-            </span>
-          </div>
-
-          <Slider
-            value={[selectedProductIndex]}
-            onValueChange={([value]) => setSelectedProductIndex(value)}
-            min={0}
-            max={products.length} // +1 for the custom option
-            step={1}
-            className="w-full"
-            disabled={hasCustomProduct}
-          />
-
-          <div className="flex justify-between text-xs text-muted-foreground">
-            {products.map((product, index) => {
-              const eventsLimit = product.metadata?.eventsLimit;
-              return (
-                <div key={product.id} className="text-center">
-                  <div className="font-medium">
-                    {eventsLimit && typeof eventsLimit === 'number'
-                      ? `${(eventsLimit / 1000).toFixed(0)}K`
-                      : 'Free'}
-                  </div>
-                  <div className="text-xs">events</div>
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div className="col gap-8">
+        {currentProduct && currentPrice ? (
+          <Widget className="w-full">
+            <WidgetHead className="flex items-center justify-between gap-4">
+              <div className="flex-1 title truncate">{currentProduct.name}</div>
+              <div className="text-lg">
+                <span className="font-bold">
+                  {number.currency(currentPrice.priceAmount / 100)}
+                </span>
+                <span className="text-muted-foreground">
+                  {' / '}
+                  {recurringInterval === 'year' ? 'year' : 'month'}
+                </span>
+              </div>
+            </WidgetHead>
+            <WidgetBody>
+              {renderStatus()}
+              <div className="col mt-4">
+                <div className="font-semibold mb-2">
+                  {number.format(organization.subscriptionPeriodEventsCount)} /{' '}
+                  {number.format(Number(currentProduct.metadata.eventsLimit))}
                 </div>
-              );
-            })}
-            {/* Add the custom option label */}
-            <div className="text-center">
-              <div className="font-medium">{customOptionLabel}</div>
-              <div className="text-xs">events</div>
-            </div>
-          </div>
-        </div>
-
-        {(selectedProduct || isCustomOption) && (
-          <div className="border rounded-lg p-4 space-y-4">
-            {isCustomOption ? (
-              // Custom option content
-              <>
-                <div className="flex justify-between items-center">
-                  <div>
-                    <h3 className="font-semibold">Custom Plan</h3>
-                    <p className="text-sm text-muted-foreground">
-                      {customOptionLabel} events per {recurringInterval}
-                    </p>
-                  </div>
-                  <div className="text-right">
-                    <span className="text-lg font-semibold">
-                      Custom Pricing
-                    </span>
-                  </div>
-                </div>
-                <div className="bg-muted/50 rounded-lg p-4 text-center">
-                  <p className="text-sm text-muted-foreground mb-2">
-                    Need higher limits?
-                  </p>
-                  <p className="text-sm">
-                    Reach out to{' '}
-                    <a
-                      className="underline font-medium"
-                      href="mailto:hello@openpanel.dev"
+                <Progress
+                  value={
+                    (organization.subscriptionPeriodEventsCount /
+                      Number(currentProduct.metadata.eventsLimit)) *
+                    100
+                  }
+                  size="sm"
+                />
+                <div className="row justify-between mt-4">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      portalMutation.mutate({ organizationId: organization.id })
+                    }
+                  >
+                    <svg
+                      className="size-4 mr-2"
+                      width="300"
+                      height="300"
+                      viewBox="0 0 300 300"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      hello@openpanel.dev
-                    </a>{' '}
-                    and we'll help you with a custom quota.
-                  </p>
+                      <g clip-path="url(#clip0_1_4)">
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M66.4284 274.26C134.876 320.593 227.925 302.666 274.258 234.219C320.593 165.771 302.666 72.7222 234.218 26.3885C165.77 -19.9451 72.721 -2.0181 26.3873 66.4297C-19.9465 134.877 -2.01938 227.927 66.4284 274.26ZM47.9555 116.67C30.8375 169.263 36.5445 221.893 59.2454 256.373C18.0412 217.361 7.27564 150.307 36.9437 92.318C55.9152 55.2362 87.5665 29.3937 122.5 18.3483C90.5911 36.7105 62.5549 71.8144 47.9555 116.67ZM175.347 283.137C211.377 272.606 244.211 246.385 263.685 208.322C293.101 150.825 282.768 84.4172 242.427 45.2673C264.22 79.7626 269.473 131.542 252.631 183.287C237.615 229.421 208.385 265.239 175.347 283.137ZM183.627 266.229C207.945 245.418 228.016 210.604 236.936 168.79C251.033 102.693 232.551 41.1978 195.112 20.6768C214.97 47.3945 225.022 99.2902 218.824 157.333C214.085 201.724 200.814 240.593 183.627 266.229ZM63.7178 131.844C49.5155 198.43 68.377 260.345 106.374 280.405C85.9962 254.009 75.5969 201.514 81.8758 142.711C86.5375 99.0536 99.4504 60.737 116.225 35.0969C92.2678 55.983 72.5384 90.4892 63.7178 131.844ZM199.834 149.561C200.908 217.473 179.59 272.878 152.222 273.309C124.853 273.742 101.797 219.039 100.724 151.127C99.6511 83.2138 120.968 27.8094 148.337 27.377C175.705 26.9446 198.762 81.648 199.834 149.561Z"
+                          fill="currentColor"
+                        />
+                      </g>
+                      <defs>
+                        <clipPath id="clip0_1_4">
+                          <rect width="300" height="300" fill="white" />
+                        </clipPath>
+                      </defs>
+                    </svg>
+                    Customer portal
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() =>
+                      pushModal('SelectBillingPlan', {
+                        organization,
+                        currentProduct,
+                      })
+                    }
+                  >
+                    {organization.isWillBeCanceled
+                      ? 'Reactivate subscription'
+                      : 'Change subscription'}
+                  </Button>
                 </div>
-              </>
-            ) : (
-              // Regular product content
-              <>
-                <div className="flex justify-between items-center">
-                  <div>
-                    <h3 className="font-semibold">{selectedProduct.name}</h3>
-                    <p className="text-sm text-muted-foreground">
-                      {selectedProduct.metadata?.eventsLimit
-                        ? `${selectedProduct.metadata.eventsLimit.toLocaleString()} events per ${recurringInterval}`
-                        : 'Free tier'}
-                    </p>
-                  </div>
-                  <div className="text-right">
-                    {selectedProduct.prices[0]?.amountType === 'free' ? (
-                      <span className="text-lg font-semibold">Free</span>
-                    ) : (
-                      <span className="text-lg font-semibold">
-                        {new Intl.NumberFormat('en-US', {
-                          style: 'currency',
-                          currency:
-                            selectedProduct.prices[0]?.priceCurrency || 'USD',
-                          minimumFractionDigits: 0,
-                          maximumFractionDigits: 1,
-                        }).format(
-                          (selectedProduct.prices[0] &&
-                          'priceAmount' in selectedProduct.prices[0]
-                            ? selectedProduct.prices[0].priceAmount
-                            : 0) / 100,
-                        )}
-                        <span className="text-sm text-muted-foreground">
-                          {' / '}
-                          {recurringInterval === 'year' ? 'year' : 'month'}
-                        </span>
-                      </span>
-                    )}
-                  </div>
+              </div>
+            </WidgetBody>
+          </Widget>
+        ) : (
+          <Widget className="w-full">
+            <WidgetHead className="flex items-center justify-between">
+              <div className="font-bold text-lg flex-1">
+                {organization.isTrial
+                  ? 'Get started'
+                  : 'No active subscription'}
+              </div>
+              <div className="text-lg">
+                <span className="">
+                  {organization.isTrial ? '30 days free trial' : ''}
+                </span>
+              </div>
+            </WidgetHead>
+            <WidgetBody>
+              {organization.isTrial && organization.subscriptionEndsAt ? (
+                <p>
+                  Your trial will end on{' '}
+                  {formatDate(organization.subscriptionEndsAt)} (
+                  {differenceInDays(
+                    organization.subscriptionEndsAt,
+                    new Date(),
+                  ) + 1}{' '}
+                  days left)
+                </p>
+              ) : (
+                <p>
+                  Your trial has expired. Please upgrade your account to
+                  continue using Openpanel.
+                </p>
+              )}
+              <div className="col mt-4">
+                <div className="font-semibold mb-2">
+                  {number.format(organization.subscriptionPeriodEventsCount)} /{' '}
+                  {number.format(
+                    Number(organization.subscriptionPeriodEventsLimit),
+                  )}
                 </div>
-
-                {!isCurrentPlan && selectedProduct.prices[0] && (
-                  <div className="flex justify-end">
-                    <CheckoutButton
-                      disabled={selectedProduct.disabled}
-                      key={selectedProduct.prices[0].id}
-                      price={selectedProduct.prices[0]}
-                      organization={organization}
-                      buttonText={
-                        isUpgrade
-                          ? 'Upgrade'
-                          : isDowngrade
-                            ? 'Downgrade'
-                            : 'Activate'
-                      }
-                    />
-                  </div>
-                )}
-
-                {isCurrentPlan && (
-                  <div className="flex justify-end">
-                    <Button variant="outline" disabled>
-                      Current Plan
-                    </Button>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
+                <Progress
+                  value={
+                    (organization.subscriptionPeriodEventsCount /
+                      Number(organization.subscriptionPeriodEventsLimit)) *
+                    100
+                  }
+                  size="sm"
+                />
+                <div className="row justify-end mt-4">
+                  <Button
+                    size="sm"
+                    onClick={() =>
+                      pushModal('SelectBillingPlan', {
+                        organization,
+                        currentProduct,
+                      })
+                    }
+                  >
+                    Upgrade
+                  </Button>
+                </div>
+              </div>
+            </WidgetBody>
+          </Widget>
         )}
+
+        <BillingUsage organization={organization} />
       </div>
-    );
-  }
 
-  return (
-    <>
-      <Widget className="w-full">
-        <WidgetHead className="flex items-center justify-between">
-          <span className="title">Billing</span>
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">
-              {recurringInterval === 'year'
-                ? 'Yearly (2 months free)'
-                : 'Monthly'}
-            </span>
-            <Switch
-              checked={recurringInterval === 'year'}
-              onCheckedChange={(checked) =>
-                setRecurringInterval(checked ? 'year' : 'month')
-              }
-            />
-          </div>
-        </WidgetHead>
-        <WidgetBody>
-          <div className="-m-4">{renderBillingSlider()}</div>
-        </WidgetBody>
-      </Widget>
-      <Dialog
-        open={!!customerSessionToken}
-        onOpenChange={(open) => {
-          setCustomerSessionToken(null);
-          if (!open) {
-            queryClient.invalidateQueries(trpc.organization.pathFilter());
-          }
-        }}
-      >
-        <DialogContent>
-          <DialogTitle>Subscription created</DialogTitle>
-          <DialogDescription>
-            We have registered your subscription. It'll be activated within a
-            couple of seconds.
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button>OK</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
-
-function CheckoutButton({
-  price,
-  organization,
-  disabled,
-  buttonText,
-}: {
-  price: IPolarPrice;
-  organization: IServiceOrganization;
-  disabled?: string | null;
-  buttonText?: string;
-}) {
-  const trpc = useTRPC();
-  const isCurrentPrice = organization.subscriptionPriceId === price.id;
-  const checkout = useMutation(
-    trpc.subscription.checkout.mutationOptions({
-      onSuccess(data) {
-        if (data?.url) {
-          window.location.href = data.url;
-        } else {
-          toast.success('Subscription updated', {
-            description: 'It might take a few seconds to update',
-          });
-        }
-      },
-    }),
-  );
-
-  const isCanceled =
-    organization.subscriptionStatus === 'active' &&
-    isCurrentPrice &&
-    organization.subscriptionCanceledAt;
-  const isActive =
-    organization.subscriptionStatus === 'active' && isCurrentPrice;
-
-  return (
-    <Tooltiper
-      content={disabled}
-      tooltipClassName="max-w-xs"
-      side="left"
-      disabled={!disabled}
-    >
-      <Button
-        disabled={disabled !== null || (isActive && !isCanceled)}
-        key={price.id}
-        onClick={() => {
-          const createCheckout = () =>
-            checkout.mutate({
-              organizationId: organization.id,
-              productPriceId: price!.id,
-              productId: price.productId,
-            });
-
-          if (organization.subscriptionStatus === 'active') {
-            showConfirm({
-              title: 'Are you sure?',
-              text: `You're about the change your subscription.`,
-              onConfirm: () => {
-                op.track('subscription_change');
-                createCheckout();
-              },
-            });
-          } else {
-            op.track('subscription_checkout', {
-              product: price.productId,
-            });
-            createCheckout();
-          }
-        }}
-        loading={checkout.isPending}
-        className="w-28"
-        variant={isActive ? 'outline' : 'default'}
-      >
-        {buttonText ||
-          (isCanceled ? 'Reactivate' : isActive ? 'Active' : 'Activate')}
-      </Button>
-    </Tooltiper>
+      <BillingFaq />
+    </div>
   );
 }
diff --git a/apps/start/src/components/organization/current-subscription.tsx b/apps/start/src/components/organization/current-subscription.tsx
deleted file mode 100644
index 2ae28f78..00000000
--- a/apps/start/src/components/organization/current-subscription.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
-import { useAppParams } from '@/hooks/use-app-params';
-import { useNumber } from '@/hooks/use-numer-formatter';
-import useWS from '@/hooks/use-ws';
-import { useTRPC } from '@/integrations/trpc/react';
-import { showConfirm } from '@/modals';
-import { cn } from '@/utils/cn';
-import type { IServiceOrganization } from '@openpanel/db';
-import { FREE_PRODUCT_IDS } from '@openpanel/payments';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { format } from 'date-fns';
-import { Loader2Icon } from 'lucide-react';
-import { toast } from 'sonner';
-
-type Props = {
-  organization: IServiceOrganization;
-};
-
-export default function CurrentSubscription({ organization }: Props) {
-  const { projectId } = useAppParams();
-  const queryClient = useQueryClient();
-  const number = useNumber();
-  const trpc = useTRPC();
-  const productQuery = useQuery(
-    trpc.subscription.getCurrent.queryOptions({
-      organizationId: organization.id,
-    }),
-  );
-  const cancelSubscription = useMutation(
-    trpc.subscription.cancelSubscription.mutationOptions({
-      onSuccess() {
-        toast.success('Subscription cancelled', {
-          description: 'It might take a few seconds to update',
-        });
-      },
-      onError(error) {
-        toast.error(error.message);
-      },
-    }),
-  );
-  const portalMutation = useMutation(
-    trpc.subscription.portal.mutationOptions({
-      onSuccess(data) {
-        if (data?.url) {
-          window.location.href = data.url;
-        }
-      },
-    }),
-  );
-  const checkout = useMutation(
-    trpc.subscription.checkout.mutationOptions({
-      onSuccess(data) {
-        if (data?.url) {
-          window.location.href = data.url;
-        } else {
-          toast.success('Subscription updated', {
-            description: 'It might take a few seconds to update',
-          });
-        }
-      },
-    }),
-  );
-
-  useWS(`/live/organization/${organization.id}`, () => {
-    queryClient.invalidateQueries(
-      trpc.subscription.getCurrent.queryOptions({
-        organizationId: organization.id,
-      }),
-    );
-  });
-
-  function render() {
-    if (productQuery.isLoading) {
-      return (
-        <div className="center-center p-8">
-          <Loader2Icon className="animate-spin" />
-        </div>
-      );
-    }
-    if (productQuery.isError) {
-      return (
-        <div className="center-center p-8 font-medium">
-          Issues loading all tiers
-        </div>
-      );
-    }
-
-    if (!productQuery.data) {
-      return (
-        <div className="center-center p-8 font-medium">
-          No subscription found
-        </div>
-      );
-    }
-
-    const product = productQuery.data;
-    const price = product.prices[0]!;
-    return (
-      <>
-        <div className="gap-4 col">
-          {price.amountType === 'free' && (
-            <Alert variant="warning">
-              <AlertTitle>Free plan is removed</AlertTitle>
-              <AlertDescription>
-                We've removed the free plan. You can upgrade to a paid plan to
-                continue using OpenPanel.
-              </AlertDescription>
-            </Alert>
-          )}
-          <div className="row justify-between">
-            <div>Name</div>
-            <div className="text-right font-medium">{product.name}</div>
-          </div>
-          {price.amountType === 'fixed' ? (
-            <>
-              <div className="row justify-between">
-                <div>Price</div>
-                <div className="text-right font-medium font-mono">
-                  {number.currency(price.priceAmount / 100)}
-                </div>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="row justify-between">
-                <div>Price</div>
-                <div className="text-right font-medium font-mono">FREE</div>
-              </div>
-            </>
-          )}
-          <div className="row justify-between">
-            <div>Billing Cycle</div>
-            <div className="text-right font-medium">
-              {price.recurringInterval === 'month' ? 'Monthly' : 'Yearly'}
-            </div>
-          </div>
-          {typeof product.metadata.eventsLimit === 'number' && (
-            <div className="row justify-between">
-              <div>Events per mount</div>
-              <div className="text-right font-medium font-mono">
-                {number.format(product.metadata.eventsLimit)}
-              </div>
-            </div>
-          )}
-        </div>
-        {organization.subscriptionProductId &&
-          !FREE_PRODUCT_IDS.includes(organization.subscriptionProductId) && (
-            <div className="col gap-2">
-              {organization.isWillBeCanceled || organization.isCanceled ? (
-                <Button
-                  loading={checkout.isPending}
-                  onClick={() => {
-                    checkout.mutate({
-                      projectId,
-                      organizationId: organization.id,
-                      productPriceId: price!.id,
-                      productId: price.productId,
-                    });
-                  }}
-                >
-                  Reactivate subscription
-                </Button>
-              ) : (
-                <Button
-                  variant="destructive"
-                  loading={cancelSubscription.isPending}
-                  onClick={() => {
-                    showConfirm({
-                      title: 'Cancel subscription',
-                      text: 'Are you sure you want to cancel your subscription?',
-                      onConfirm() {
-                        cancelSubscription.mutate({
-                          organizationId: organization.id,
-                        });
-                      },
-                    });
-                  }}
-                >
-                  Cancel subscription
-                </Button>
-              )}
-            </div>
-          )}
-      </>
-    );
-  }
-
-  return (
-    <div className="col gap-2 md:w-72 shrink-0">
-      <Widget className="w-full">
-        <WidgetHead className="flex items-center justify-between">
-          <span className="title">Current Subscription</span>
-          <div className="flex items-center gap-2">
-            <div className="relative">
-              <div
-                className={cn(
-                  'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
-                  organization.isExceeded ||
-                    organization.isExpired ||
-                    (organization.subscriptionStatus !== 'active' &&
-                      'bg-destructive'),
-                  organization.isWillBeCanceled && 'bg-orange-400',
-                )}
-              />
-              <div
-                className={cn(
-                  'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
-                  organization.isExceeded ||
-                    organization.isExpired ||
-                    (organization.subscriptionStatus !== 'active' &&
-                      'bg-destructive'),
-                  organization.isWillBeCanceled && 'bg-orange-400',
-                )}
-              />
-            </div>
-          </div>
-        </WidgetHead>
-        <WidgetBody className="col gap-8">
-          {organization.isTrial && organization.subscriptionEndsAt && (
-            <Alert variant="warning">
-              <AlertTitle>Free trial</AlertTitle>
-              <AlertDescription>
-                Your organization is on a free trial. It ends on{' '}
-                {format(organization.subscriptionEndsAt, 'PPP')}
-              </AlertDescription>
-            </Alert>
-          )}
-          {organization.isExpired && organization.subscriptionEndsAt && (
-            <Alert variant="destructive">
-              <AlertTitle>Subscription expired</AlertTitle>
-              <AlertDescription>
-                Your subscription has expired. You can reactivate it by choosing
-                a new plan below.
-              </AlertDescription>
-              <AlertDescription>
-                It expired on {format(organization.subscriptionEndsAt, 'PPP')}
-              </AlertDescription>
-            </Alert>
-          )}
-          {organization.isWillBeCanceled && (
-            <Alert variant="warning">
-              <AlertTitle>Subscription canceled</AlertTitle>
-              <AlertDescription>
-                You have canceled your subscription. You can reactivate it by
-                choosing a new plan below.
-              </AlertDescription>
-              <AlertDescription className="font-medium">
-                It'll expire on{' '}
-                {format(organization.subscriptionEndsAt!, 'PPP')}
-              </AlertDescription>
-            </Alert>
-          )}
-          {organization.isCanceled && (
-            <Alert variant="warning">
-              <AlertTitle>Subscription canceled</AlertTitle>
-              <AlertDescription>
-                Your subscription was canceled on{' '}
-                {format(organization.subscriptionCanceledAt!, 'PPP')}
-              </AlertDescription>
-            </Alert>
-          )}
-          {render()}
-        </WidgetBody>
-      </Widget>
-      {organization.hasSubscription && (
-        <button
-          className="text-center mt-2 w-2/3 hover:underline self-center"
-          type="button"
-          onClick={() =>
-            portalMutation.mutate({
-              organizationId: organization.id,
-            })
-          }
-        >
-          Manage your subscription with
-          <span className="font-medium ml-1">Polar Customer Portal</span>
-        </button>
-      )}
-    </div>
-  );
-}
diff --git a/apps/start/src/modals/billing-success.tsx b/apps/start/src/modals/billing-success.tsx
new file mode 100644
index 00000000..1cdc5cd1
--- /dev/null
+++ b/apps/start/src/modals/billing-success.tsx
@@ -0,0 +1,47 @@
+import { Check, X } from 'lucide-react';
+import { popModal } from '.';
+import { ModalContent } from './Modal/Container';
+
+export default function BillingSuccess() {
+  return (
+    <ModalContent className="max-w-2xl">
+      <button
+        type="button"
+        onClick={() => popModal()}
+        className="absolute right-6 top-6 z-10 rounded-full bg-black text-white p-2.5 hover:bg-gray-800 transition-colors"
+      >
+        <X className="h-5 w-5" />
+      </button>
+
+      <div className="flex flex-col items-center justify-center py-12 px-8">
+        {/* Success Icon with animated rings */}
+        <div className="relative mb-10 h-64 w-64 flex items-center justify-center">
+          <div className="absolute inset-0 flex items-center justify-center animate-ping-slow opacity-10">
+            <div className="h-64 w-64 rounded-full bg-emerald-400" />
+          </div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-52 w-52 rounded-full bg-emerald-200/30" />
+          </div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-40 w-40 rounded-full bg-emerald-300/40" />
+          </div>
+          <div className="relative flex items-center justify-center">
+            <div className="h-32 w-32 rounded-full bg-emerald-500 shadow-lg flex items-center justify-center">
+              <Check className="h-16 w-16 text-white stroke-[3]" />
+            </div>
+          </div>
+        </div>
+
+        {/* Success Message */}
+        <h2 className="text-3xl font-semibold mb-4 text-gray-900">
+          Subscription updated successfully
+        </h2>
+        <p className="text-center mb-12 max-w-md text-base leading-normal">
+          Thanks you for your purchase! You have now full access to OpenPanel.
+          If you have any questions or feedback, please don't hesitate to
+          contact us.
+        </p>
+      </div>
+    </ModalContent>
+  );
+}
diff --git a/apps/start/src/modals/index.tsx b/apps/start/src/modals/index.tsx
index 709951d8..d616746b 100644
--- a/apps/start/src/modals/index.tsx
+++ b/apps/start/src/modals/index.tsx
@@ -2,6 +2,7 @@ import { createPushModal } from 'pushmodal';
 
 import OverviewTopGenericModal from '@/components/overview/overview-top-generic-modal';
 import OverviewTopPagesModal from '@/components/overview/overview-top-pages-modal';
+import { op } from '@/utils/op';
 import Instructions from './Instructions';
 import AddClient from './add-client';
 import AddDashboard from './add-dashboard';
@@ -10,6 +11,7 @@ import AddIntegration from './add-integration';
 import AddNotificationRule from './add-notification-rule';
 import AddProject from './add-project';
 import AddReference from './add-reference';
+import BillingSuccess from './billing-success';
 import Confirm from './confirm';
 import type { ConfirmProps } from './confirm';
 import CreateInvite from './create-invite';
@@ -27,6 +29,7 @@ import OverviewChartDetails from './overview-chart-details';
 import OverviewFilters from './overview-filters';
 import RequestPasswordReset from './request-reset-password';
 import SaveReport from './save-report';
+import SelectBillingPlan from './select-billing-plan';
 import ShareOverviewModal from './share-overview-modal';
 
 const modals = {
@@ -57,6 +60,8 @@ const modals = {
   AddNotificationRule: AddNotificationRule,
   OverviewFilters: OverviewFilters,
   CreateInvite: CreateInvite,
+  SelectBillingPlan: SelectBillingPlan,
+  BillingSuccess: BillingSuccess,
 };
 
 export const {
@@ -66,8 +71,13 @@ export const {
   popAllModals,
   ModalProvider,
   useOnPushModal,
+  onPushModal,
 } = createPushModal({
   modals,
 });
 
+onPushModal('*', (open, props, name) => {
+  op.screenView(`modal:${name}`, props as Record<string, unknown>);
+});
+
 export const showConfirm = (props: ConfirmProps) => pushModal('Confirm', props);
diff --git a/apps/start/src/modals/select-billing-plan.tsx b/apps/start/src/modals/select-billing-plan.tsx
new file mode 100644
index 00000000..40260673
--- /dev/null
+++ b/apps/start/src/modals/select-billing-plan.tsx
@@ -0,0 +1,309 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { useTRPC } from '@/integrations/trpc/react';
+import { cn } from '@/utils/cn';
+import { op } from '@/utils/op';
+import type { IServiceOrganization } from '@openpanel/db';
+import type { IPolarProduct } from '@openpanel/payments';
+import { current } from '@reduxjs/toolkit';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CheckIcon, ShuffleIcon } from 'lucide-react';
+import { Fragment, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface Props {
+  organization: IServiceOrganization;
+  currentProduct: IPolarProduct | null;
+}
+
+const getPrice = (product: IPolarProduct) => {
+  return product.prices[0] && 'priceAmount' in product.prices[0]
+    ? product.prices[0].priceAmount / 100
+    : 0;
+};
+
+export default function SelectBillingPlan({
+  organization,
+  currentProduct,
+}: Props) {
+  const number = useNumber();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const productsQuery = useQuery(
+    trpc.subscription.products.queryOptions({
+      organizationId: organization.id,
+    }),
+  );
+  const [recurringInterval, setRecurringInterval] = useState<'year' | 'month'>(
+    (organization.subscriptionInterval as 'year' | 'month') || 'month',
+  );
+  const [selectedProductId, setSelectedProductId] = useState<string | null>(
+    organization.subscriptionProductId || null,
+  );
+  const products = productsQuery.data || [];
+  const selectedProduct = products.find(
+    (product) => product.id === selectedProductId,
+  );
+
+  const checkoutMutation = useMutation(
+    trpc.subscription.checkout.mutationOptions({
+      onSuccess(data) {
+        if (data?.url) {
+          window.location.href = data.url;
+        } else {
+          queryClient.invalidateQueries(
+            trpc.organization.get.queryOptions({
+              organizationId: organization.id,
+            }),
+          );
+
+          queryClient.invalidateQueries(
+            trpc.subscription.getCurrent.queryOptions({
+              organizationId: organization.id,
+            }),
+          );
+          toast.success('Subscription updated', {
+            description: 'It might take a few seconds to update',
+          });
+          popModal();
+        }
+      },
+      onError(error) {
+        toast.error(error.message);
+      },
+    }),
+  );
+
+  const cancelSubscription = useMutation(
+    trpc.subscription.cancelSubscription.mutationOptions({
+      onSuccess() {
+        queryClient.invalidateQueries(
+          trpc.organization.get.queryOptions({
+            organizationId: organization.id,
+          }),
+        );
+        queryClient.invalidateQueries(
+          trpc.subscription.getCurrent.queryOptions({
+            organizationId: organization.id,
+          }),
+        );
+        toast.success('Subscription canceled', {
+          description: 'It might take a few seconds to update',
+        });
+        popModal();
+      },
+      onError(error) {
+        toast.error(error.message);
+      },
+    }),
+  );
+
+  const handleCheckout = () => {
+    if (!selectedProduct) return;
+    op.track('subscription_checkout_started', {
+      organizationId: organization.id,
+      limit: selectedProduct.metadata.eventsLimit,
+      price: getPrice(selectedProduct),
+    });
+    checkoutMutation.mutate({
+      organizationId: organization.id,
+      productPriceId: selectedProduct.prices[0].id,
+      productId: selectedProduct.id,
+    });
+  };
+
+  const handleCancelSubscription = () => {
+    if (!selectedProduct) return;
+    op.track('subscription_canceled', {
+      organizationId: organization.id,
+      limit: selectedProduct.metadata.eventsLimit,
+      price: getPrice(selectedProduct),
+    });
+    cancelSubscription.mutate({
+      organizationId: organization.id,
+    });
+  };
+
+  const renderAction = () => {
+    if (!selectedProduct) {
+      return null;
+    }
+
+    const isCurrentProduct = selectedProduct.id === currentProduct?.id;
+
+    if (isCurrentProduct && organization.isActive) {
+      return (
+        <Button
+          className="w-full mt-4"
+          variant="destructive"
+          size="lg"
+          onClick={handleCancelSubscription}
+        >
+          Cancel subscription
+        </Button>
+      );
+    }
+
+    const payLabel = (() => {
+      if (
+        organization.isCanceled ||
+        organization.isWillBeCanceled ||
+        organization.isExpired
+      ) {
+        return isCurrentProduct
+          ? 'Reactivate subscription'
+          : 'Change subscription';
+      }
+
+      if (currentProduct) {
+        return 'Change subscription';
+      }
+
+      return 'Pay with Polar';
+    })();
+
+    return (
+      <button
+        type="button"
+        className="w-full mt-4 rounded-lg overflow-hidden hover:translate-y-[-1px] transition-all group"
+        onClick={handleCheckout}
+      >
+        {currentProduct && (
+          <div className="row justify-between p-2 px-4 border-t border-l border-r border-border rounded-t-lg bg-def-200 group-hover:bg-def-100 transition-colors line-through">
+            <span>{currentProduct?.name}</span>
+            <span>{number.currency(getPrice(currentProduct))}</span>
+          </div>
+        )}
+        <div
+          className={cn(
+            'row justify-between p-2 px-4 border-t border-l border-r border-border bg-def-200 group-hover:bg-def-100 transition-colors',
+            !currentProduct && 'rounded-t-lg',
+          )}
+        >
+          <span>{selectedProduct.name}</span>
+          <span>{number.currency(getPrice(selectedProduct))}</span>
+        </div>
+        <div className="center-center gap-4 row bg-primary text-primary-foreground p-4 group-hover:bg-primary/90 transition-colors">
+          <svg
+            className="size-6"
+            width="300"
+            height="300"
+            viewBox="0 0 300 300"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clip-path="url(#clip0_1_4)">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M66.4284 274.26C134.876 320.593 227.925 302.666 274.258 234.219C320.593 165.771 302.666 72.7222 234.218 26.3885C165.77 -19.9451 72.721 -2.0181 26.3873 66.4297C-19.9465 134.877 -2.01938 227.927 66.4284 274.26ZM47.9555 116.67C30.8375 169.263 36.5445 221.893 59.2454 256.373C18.0412 217.361 7.27564 150.307 36.9437 92.318C55.9152 55.2362 87.5665 29.3937 122.5 18.3483C90.5911 36.7105 62.5549 71.8144 47.9555 116.67ZM175.347 283.137C211.377 272.606 244.211 246.385 263.685 208.322C293.101 150.825 282.768 84.4172 242.427 45.2673C264.22 79.7626 269.473 131.542 252.631 183.287C237.615 229.421 208.385 265.239 175.347 283.137ZM183.627 266.229C207.945 245.418 228.016 210.604 236.936 168.79C251.033 102.693 232.551 41.1978 195.112 20.6768C214.97 47.3945 225.022 99.2902 218.824 157.333C214.085 201.724 200.814 240.593 183.627 266.229ZM63.7178 131.844C49.5155 198.43 68.377 260.345 106.374 280.405C85.9962 254.009 75.5969 201.514 81.8758 142.711C86.5375 99.0536 99.4504 60.737 116.225 35.0969C92.2678 55.983 72.5384 90.4892 63.7178 131.844ZM199.834 149.561C200.908 217.473 179.59 272.878 152.222 273.309C124.853 273.742 101.797 219.039 100.724 151.127C99.6511 83.2138 120.968 27.8094 148.337 27.377C175.705 26.9446 198.762 81.648 199.834 149.561Z"
+                fill="currentColor"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_1_4">
+                <rect width="300" height="300" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+          <span className="font-semibold">{payLabel}</span>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Select a billing plan" />
+      <div className="col gap-4">
+        {currentProduct && (
+          <div className="font-medium">
+            Your current usage is{' '}
+            {number.format(organization.subscriptionPeriodEventsCount)} out of{' '}
+            {number.format(Number(currentProduct?.metadata.eventsLimit))}{' '}
+            events.{' '}
+            <span className="text-muted-foreground">
+              You cannot downgrade if your usage exceeds the limit of the new
+              plan.
+            </span>
+          </div>
+        )}
+        <div className="row items-center justify-between gap-2 -mb-2">
+          <div className="font-medium">
+            {recurringInterval === 'year' ? (
+              'Switch to monthly'
+            ) : (
+              <>
+                Switch to yearly and get{' '}
+                <span className="underline text-emerald-500">
+                  2 months for free
+                </span>
+              </>
+            )}
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() =>
+              setRecurringInterval((p) => (p === 'year' ? 'month' : 'year'))
+            }
+          >
+            {recurringInterval === 'year' ? 'Monthly' : 'Yearly'}
+            <ShuffleIcon className="size-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+      <div className="col divide-y divide-border border rounded-lg overflow-hidden">
+        {products
+          .filter((product) =>
+            product.prices.some((p) => p.amountType !== 'free'),
+          )
+          .filter((product) => product.metadata.eventsLimit)
+          .filter((product) => product.recurringInterval === recurringInterval)
+          .map((product) => {
+            const price = getPrice(product);
+
+            const limit = product.metadata.eventsLimit
+              ? Number(product.metadata.eventsLimit)
+              : 0;
+
+            const isProductDisabled =
+              limit > 0 &&
+              organization.subscriptionPeriodEventsCount >= limit &&
+              !!product.disabled;
+
+            return (
+              <button
+                key={product.id}
+                type="button"
+                disabled={isProductDisabled}
+                className={cn(
+                  'row justify-between p-4 py-3 hover:bg-def-100',
+                  currentProduct?.id === product.id &&
+                    selectedProductId !== product.id &&
+                    'text-muted-foreground line-through',
+                  isProductDisabled && 'opacity-50 !cursor-not-allowed',
+                )}
+                onClick={() => setSelectedProductId(product.id)}
+              >
+                <span className={'font-medium'}>{product.name}</span>
+                <div className="row items-center gap-2">
+                  <span className="font-bold">{number.currency(price)}</span>
+                  {selectedProductId === product.id && (
+                    <div className="size-4 center-center rounded-full bg-emerald-600 text-primary-foreground">
+                      <CheckIcon className="size-2" />
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+      </div>
+      {renderAction()}
+    </ModalContent>
+  );
+}
diff --git a/apps/start/src/routeTree.gen.ts b/apps/start/src/routeTree.gen.ts
index e221cf0e..5a3d1608 100644
--- a/apps/start/src/routeTree.gen.ts
+++ b/apps/start/src/routeTree.gen.ts
@@ -28,49 +28,50 @@ import { Route as StepsOnboardingProjectRouteImport } from './routes/_steps.onbo
 import { Route as AppOrganizationIdSettingsRouteImport } from './routes/_app.$organizationId.settings'
 import { Route as AppOrganizationIdBillingRouteImport } from './routes/_app.$organizationId.billing'
 import { Route as AppOrganizationIdProjectIdRouteImport } from './routes/_app.$organizationId.$projectId'
+import { Route as AppOrganizationIdProjectIdIndexRouteImport } from './routes/_app.$organizationId.$projectId.index'
 import { Route as StepsOnboardingProjectIdVerifyRouteImport } from './routes/_steps.onboarding.$projectId.verify'
 import { Route as StepsOnboardingProjectIdConnectRouteImport } from './routes/_steps.onboarding.$projectId.connect'
 import { Route as AppOrganizationIdMembersTabsRouteImport } from './routes/_app.$organizationId.members._tabs'
 import { Route as AppOrganizationIdIntegrationsTabsRouteImport } from './routes/_app.$organizationId.integrations._tabs'
-import { Route as AppOrganizationIdProjectIdSessionsRouteImport } from './routes/_app.$organizationId.$projectId_.sessions'
-import { Route as AppOrganizationIdProjectIdReportsRouteImport } from './routes/_app.$organizationId.$projectId_.reports'
-import { Route as AppOrganizationIdProjectIdReferencesRouteImport } from './routes/_app.$organizationId.$projectId_.references'
-import { Route as AppOrganizationIdProjectIdRealtimeRouteImport } from './routes/_app.$organizationId.$projectId_.realtime'
-import { Route as AppOrganizationIdProjectIdPagesRouteImport } from './routes/_app.$organizationId.$projectId_.pages'
-import { Route as AppOrganizationIdProjectIdDashboardsRouteImport } from './routes/_app.$organizationId.$projectId_.dashboards'
-import { Route as AppOrganizationIdProjectIdChatRouteImport } from './routes/_app.$organizationId.$projectId_.chat'
+import { Route as AppOrganizationIdProjectIdSessionsRouteImport } from './routes/_app.$organizationId.$projectId.sessions'
+import { Route as AppOrganizationIdProjectIdReportsRouteImport } from './routes/_app.$organizationId.$projectId.reports'
+import { Route as AppOrganizationIdProjectIdReferencesRouteImport } from './routes/_app.$organizationId.$projectId.references'
+import { Route as AppOrganizationIdProjectIdRealtimeRouteImport } from './routes/_app.$organizationId.$projectId.realtime'
+import { Route as AppOrganizationIdProjectIdPagesRouteImport } from './routes/_app.$organizationId.$projectId.pages'
+import { Route as AppOrganizationIdProjectIdDashboardsRouteImport } from './routes/_app.$organizationId.$projectId.dashboards'
+import { Route as AppOrganizationIdProjectIdChatRouteImport } from './routes/_app.$organizationId.$projectId.chat'
 import { Route as AppOrganizationIdMembersTabsIndexRouteImport } from './routes/_app.$organizationId.members._tabs.index'
 import { Route as AppOrganizationIdIntegrationsTabsIndexRouteImport } from './routes/_app.$organizationId.integrations._tabs.index'
 import { Route as AppOrganizationIdMembersTabsMembersRouteImport } from './routes/_app.$organizationId.members._tabs.members'
 import { Route as AppOrganizationIdMembersTabsInvitationsRouteImport } from './routes/_app.$organizationId.members._tabs.invitations'
 import { Route as AppOrganizationIdIntegrationsTabsInstalledRouteImport } from './routes/_app.$organizationId.integrations._tabs.installed'
 import { Route as AppOrganizationIdIntegrationsTabsAvailableRouteImport } from './routes/_app.$organizationId.integrations._tabs.available'
-import { Route as AppOrganizationIdProjectIdSettingsTabsRouteImport } from './routes/_app.$organizationId.$projectId_.settings._tabs'
-import { Route as AppOrganizationIdProjectIdSessionsSessionIdRouteImport } from './routes/_app.$organizationId.$projectId_.sessions_.$sessionId'
-import { Route as AppOrganizationIdProjectIdReportsReportIdRouteImport } from './routes/_app.$organizationId.$projectId_.reports_.$reportId'
-import { Route as AppOrganizationIdProjectIdProfilesTabsRouteImport } from './routes/_app.$organizationId.$projectId_.profiles._tabs'
-import { Route as AppOrganizationIdProjectIdNotificationsTabsRouteImport } from './routes/_app.$organizationId.$projectId_.notifications._tabs'
-import { Route as AppOrganizationIdProjectIdEventsTabsRouteImport } from './routes/_app.$organizationId.$projectId_.events._tabs'
-import { Route as AppOrganizationIdProjectIdDashboardsDashboardIdRouteImport } from './routes/_app.$organizationId.$projectId_.dashboards_.$dashboardId'
-import { Route as AppOrganizationIdProjectIdSettingsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId_.settings._tabs.index'
-import { Route as AppOrganizationIdProjectIdProfilesTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId_.profiles._tabs.index'
-import { Route as AppOrganizationIdProjectIdNotificationsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId_.notifications._tabs.index'
-import { Route as AppOrganizationIdProjectIdEventsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId_.events._tabs.index'
+import { Route as AppOrganizationIdProjectIdSettingsTabsRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs'
+import { Route as AppOrganizationIdProjectIdSessionsSessionIdRouteImport } from './routes/_app.$organizationId.$projectId.sessions_.$sessionId'
+import { Route as AppOrganizationIdProjectIdReportsReportIdRouteImport } from './routes/_app.$organizationId.$projectId.reports_.$reportId'
+import { Route as AppOrganizationIdProjectIdProfilesTabsRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs'
+import { Route as AppOrganizationIdProjectIdNotificationsTabsRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs'
+import { Route as AppOrganizationIdProjectIdEventsTabsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs'
+import { Route as AppOrganizationIdProjectIdDashboardsDashboardIdRouteImport } from './routes/_app.$organizationId.$projectId.dashboards_.$dashboardId'
+import { Route as AppOrganizationIdProjectIdSettingsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs.index'
+import { Route as AppOrganizationIdProjectIdProfilesTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs.index'
+import { Route as AppOrganizationIdProjectIdNotificationsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs.index'
+import { Route as AppOrganizationIdProjectIdEventsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.index'
 import { Route as AppOrganizationIdProjectIdSettingsTabsImportsRouteImport } from './routes/_app.$organizationId.$projectId_.settings._tabs.imports'
-import { Route as AppOrganizationIdProjectIdSettingsTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId_.settings._tabs.events'
-import { Route as AppOrganizationIdProjectIdSettingsTabsDetailsRouteImport } from './routes/_app.$organizationId.$projectId_.settings._tabs.details'
-import { Route as AppOrganizationIdProjectIdSettingsTabsClientsRouteImport } from './routes/_app.$organizationId.$projectId_.settings._tabs.clients'
-import { Route as AppOrganizationIdProjectIdProfilesTabsPowerUsersRouteImport } from './routes/_app.$organizationId.$projectId_.profiles._tabs.power-users'
-import { Route as AppOrganizationIdProjectIdProfilesTabsIdentifiedRouteImport } from './routes/_app.$organizationId.$projectId_.profiles._tabs.identified'
-import { Route as AppOrganizationIdProjectIdProfilesTabsAnonymousRouteImport } from './routes/_app.$organizationId.$projectId_.profiles._tabs.anonymous'
-import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsRouteImport } from './routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs'
-import { Route as AppOrganizationIdProjectIdNotificationsTabsRulesRouteImport } from './routes/_app.$organizationId.$projectId_.notifications._tabs.rules'
-import { Route as AppOrganizationIdProjectIdNotificationsTabsNotificationsRouteImport } from './routes/_app.$organizationId.$projectId_.notifications._tabs.notifications'
-import { Route as AppOrganizationIdProjectIdEventsTabsStatsRouteImport } from './routes/_app.$organizationId.$projectId_.events._tabs.stats'
-import { Route as AppOrganizationIdProjectIdEventsTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId_.events._tabs.events'
-import { Route as AppOrganizationIdProjectIdEventsTabsConversionsRouteImport } from './routes/_app.$organizationId.$projectId_.events._tabs.conversions'
-import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.index'
-import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.events'
+import { Route as AppOrganizationIdProjectIdSettingsTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs.events'
+import { Route as AppOrganizationIdProjectIdSettingsTabsDetailsRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs.details'
+import { Route as AppOrganizationIdProjectIdSettingsTabsClientsRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs.clients'
+import { Route as AppOrganizationIdProjectIdProfilesTabsPowerUsersRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs.power-users'
+import { Route as AppOrganizationIdProjectIdProfilesTabsIdentifiedRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs.identified'
+import { Route as AppOrganizationIdProjectIdProfilesTabsAnonymousRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs.anonymous'
+import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs'
+import { Route as AppOrganizationIdProjectIdNotificationsTabsRulesRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs.rules'
+import { Route as AppOrganizationIdProjectIdNotificationsTabsNotificationsRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs.notifications'
+import { Route as AppOrganizationIdProjectIdEventsTabsStatsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.stats'
+import { Route as AppOrganizationIdProjectIdEventsTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.events'
+import { Route as AppOrganizationIdProjectIdEventsTabsConversionsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.conversions'
+import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index'
+import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events'
 
 const AppOrganizationIdMembersRouteImport = createFileRoute(
   '/_app/$organizationId/members',
@@ -79,19 +80,19 @@ const AppOrganizationIdIntegrationsRouteImport = createFileRoute(
   '/_app/$organizationId/integrations',
 )()
 const AppOrganizationIdProjectIdSettingsRouteImport = createFileRoute(
-  '/_app/$organizationId/$projectId_/settings',
+  '/_app/$organizationId/$projectId/settings',
 )()
 const AppOrganizationIdProjectIdProfilesRouteImport = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles',
+  '/_app/$organizationId/$projectId/profiles',
 )()
 const AppOrganizationIdProjectIdNotificationsRouteImport = createFileRoute(
-  '/_app/$organizationId/$projectId_/notifications',
+  '/_app/$organizationId/$projectId/notifications',
 )()
 const AppOrganizationIdProjectIdEventsRouteImport = createFileRoute(
-  '/_app/$organizationId/$projectId_/events',
+  '/_app/$organizationId/$projectId/events',
 )()
 const AppOrganizationIdProjectIdProfilesProfileIdRouteImport = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/$profileId',
+  '/_app/$organizationId/$projectId/profiles/$profileId',
 )()
 
 const StepsRoute = StepsRouteImport.update({
@@ -192,27 +193,33 @@ const AppOrganizationIdProjectIdRoute =
   } as any)
 const AppOrganizationIdProjectIdSettingsRoute =
   AppOrganizationIdProjectIdSettingsRouteImport.update({
-    id: '/$projectId_/settings',
-    path: '/$projectId/settings',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/settings',
+    path: '/settings',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdProfilesRoute =
   AppOrganizationIdProjectIdProfilesRouteImport.update({
-    id: '/$projectId_/profiles',
-    path: '/$projectId/profiles',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/profiles',
+    path: '/profiles',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdNotificationsRoute =
   AppOrganizationIdProjectIdNotificationsRouteImport.update({
-    id: '/$projectId_/notifications',
-    path: '/$projectId/notifications',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/notifications',
+    path: '/notifications',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdEventsRoute =
   AppOrganizationIdProjectIdEventsRouteImport.update({
-    id: '/$projectId_/events',
-    path: '/$projectId/events',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/events',
+    path: '/events',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
+  } as any)
+const AppOrganizationIdProjectIdIndexRoute =
+  AppOrganizationIdProjectIdIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const StepsOnboardingProjectIdVerifyRoute =
   StepsOnboardingProjectIdVerifyRouteImport.update({
@@ -238,45 +245,45 @@ const AppOrganizationIdIntegrationsTabsRoute =
   } as any)
 const AppOrganizationIdProjectIdSessionsRoute =
   AppOrganizationIdProjectIdSessionsRouteImport.update({
-    id: '/$projectId_/sessions',
-    path: '/$projectId/sessions',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/sessions',
+    path: '/sessions',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdReportsRoute =
   AppOrganizationIdProjectIdReportsRouteImport.update({
-    id: '/$projectId_/reports',
-    path: '/$projectId/reports',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/reports',
+    path: '/reports',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdReferencesRoute =
   AppOrganizationIdProjectIdReferencesRouteImport.update({
-    id: '/$projectId_/references',
-    path: '/$projectId/references',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/references',
+    path: '/references',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdRealtimeRoute =
   AppOrganizationIdProjectIdRealtimeRouteImport.update({
-    id: '/$projectId_/realtime',
-    path: '/$projectId/realtime',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/realtime',
+    path: '/realtime',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdPagesRoute =
   AppOrganizationIdProjectIdPagesRouteImport.update({
-    id: '/$projectId_/pages',
-    path: '/$projectId/pages',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/pages',
+    path: '/pages',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdDashboardsRoute =
   AppOrganizationIdProjectIdDashboardsRouteImport.update({
-    id: '/$projectId_/dashboards',
-    path: '/$projectId/dashboards',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/dashboards',
+    path: '/dashboards',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdChatRoute =
   AppOrganizationIdProjectIdChatRouteImport.update({
-    id: '/$projectId_/chat',
-    path: '/$projectId/chat',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/chat',
+    path: '/chat',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdProfilesProfileIdRoute =
   AppOrganizationIdProjectIdProfilesProfileIdRouteImport.update({
@@ -327,15 +334,15 @@ const AppOrganizationIdProjectIdSettingsTabsRoute =
   } as any)
 const AppOrganizationIdProjectIdSessionsSessionIdRoute =
   AppOrganizationIdProjectIdSessionsSessionIdRouteImport.update({
-    id: '/$projectId_/sessions_/$sessionId',
-    path: '/$projectId/sessions/$sessionId',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/sessions_/$sessionId',
+    path: '/sessions/$sessionId',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdReportsReportIdRoute =
   AppOrganizationIdProjectIdReportsReportIdRouteImport.update({
-    id: '/$projectId_/reports_/$reportId',
-    path: '/$projectId/reports/$reportId',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/reports_/$reportId',
+    path: '/reports/$reportId',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdProfilesTabsRoute =
   AppOrganizationIdProjectIdProfilesTabsRouteImport.update({
@@ -354,9 +361,9 @@ const AppOrganizationIdProjectIdEventsTabsRoute =
   } as any)
 const AppOrganizationIdProjectIdDashboardsDashboardIdRoute =
   AppOrganizationIdProjectIdDashboardsDashboardIdRouteImport.update({
-    id: '/$projectId_/dashboards_/$dashboardId',
-    path: '/$projectId/dashboards/$dashboardId',
-    getParentRoute: () => AppOrganizationIdRoute,
+    id: '/dashboards_/$dashboardId',
+    path: '/dashboards/$dashboardId',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
   } as any)
 const AppOrganizationIdProjectIdSettingsTabsIndexRoute =
   AppOrganizationIdProjectIdSettingsTabsIndexRouteImport.update({
@@ -384,9 +391,9 @@ const AppOrganizationIdProjectIdEventsTabsIndexRoute =
   } as any)
 const AppOrganizationIdProjectIdSettingsTabsImportsRoute =
   AppOrganizationIdProjectIdSettingsTabsImportsRouteImport.update({
-    id: '/imports',
-    path: '/imports',
-    getParentRoute: () => AppOrganizationIdProjectIdSettingsTabsRoute,
+    id: '/$projectId_/settings/_tabs/imports',
+    path: '/$projectId/settings/imports',
+    getParentRoute: () => AppOrganizationIdRoute,
   } as any)
 const AppOrganizationIdProjectIdSettingsTabsEventsRoute =
   AppOrganizationIdProjectIdSettingsTabsEventsRouteImport.update({
@@ -480,7 +487,7 @@ export interface FileRoutesByFullPath {
   '/onboarding': typeof PublicOnboardingRoute
   '/api/config': typeof ApiConfigRoute
   '/api/healthcheck': typeof ApiHealthcheckRoute
-  '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRoute
+  '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRouteWithChildren
   '/$organizationId/billing': typeof AppOrganizationIdBillingRoute
   '/$organizationId/settings': typeof AppOrganizationIdSettingsRoute
   '/onboarding/project': typeof StepsOnboardingProjectRoute
@@ -497,6 +504,7 @@ export interface FileRoutesByFullPath {
   '/$organizationId/members': typeof AppOrganizationIdMembersTabsRouteWithChildren
   '/onboarding/$projectId/connect': typeof StepsOnboardingProjectIdConnectRoute
   '/onboarding/$projectId/verify': typeof StepsOnboardingProjectIdVerifyRoute
+  '/$organizationId/$projectId/': typeof AppOrganizationIdProjectIdIndexRoute
   '/$organizationId/$projectId/dashboards/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   '/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
   '/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
@@ -537,7 +545,6 @@ export interface FileRoutesByTo {
   '/onboarding': typeof PublicOnboardingRoute
   '/api/config': typeof ApiConfigRoute
   '/api/healthcheck': typeof ApiHealthcheckRoute
-  '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRoute
   '/$organizationId/billing': typeof AppOrganizationIdBillingRoute
   '/$organizationId/settings': typeof AppOrganizationIdSettingsRoute
   '/onboarding/project': typeof StepsOnboardingProjectRoute
@@ -554,6 +561,7 @@ export interface FileRoutesByTo {
   '/$organizationId/members': typeof AppOrganizationIdMembersTabsIndexRoute
   '/onboarding/$projectId/connect': typeof StepsOnboardingProjectIdConnectRoute
   '/onboarding/$projectId/verify': typeof StepsOnboardingProjectIdVerifyRoute
+  '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdIndexRoute
   '/$organizationId/$projectId/dashboards/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   '/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsTabsIndexRoute
   '/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
@@ -593,62 +601,63 @@ export interface FileRoutesById {
   '/_public/onboarding': typeof PublicOnboardingRoute
   '/api/config': typeof ApiConfigRoute
   '/api/healthcheck': typeof ApiHealthcheckRoute
-  '/_app/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRoute
+  '/_app/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRouteWithChildren
   '/_app/$organizationId/billing': typeof AppOrganizationIdBillingRoute
   '/_app/$organizationId/settings': typeof AppOrganizationIdSettingsRoute
   '/_steps/onboarding/project': typeof StepsOnboardingProjectRoute
   '/share/overview/$shareId': typeof ShareOverviewShareIdRoute
   '/_app/$organizationId/': typeof AppOrganizationIdIndexRoute
-  '/_app/$organizationId/$projectId_/chat': typeof AppOrganizationIdProjectIdChatRoute
-  '/_app/$organizationId/$projectId_/dashboards': typeof AppOrganizationIdProjectIdDashboardsRoute
-  '/_app/$organizationId/$projectId_/pages': typeof AppOrganizationIdProjectIdPagesRoute
-  '/_app/$organizationId/$projectId_/realtime': typeof AppOrganizationIdProjectIdRealtimeRoute
-  '/_app/$organizationId/$projectId_/references': typeof AppOrganizationIdProjectIdReferencesRoute
-  '/_app/$organizationId/$projectId_/reports': typeof AppOrganizationIdProjectIdReportsRoute
-  '/_app/$organizationId/$projectId_/sessions': typeof AppOrganizationIdProjectIdSessionsRoute
+  '/_app/$organizationId/$projectId/chat': typeof AppOrganizationIdProjectIdChatRoute
+  '/_app/$organizationId/$projectId/dashboards': typeof AppOrganizationIdProjectIdDashboardsRoute
+  '/_app/$organizationId/$projectId/pages': typeof AppOrganizationIdProjectIdPagesRoute
+  '/_app/$organizationId/$projectId/realtime': typeof AppOrganizationIdProjectIdRealtimeRoute
+  '/_app/$organizationId/$projectId/references': typeof AppOrganizationIdProjectIdReferencesRoute
+  '/_app/$organizationId/$projectId/reports': typeof AppOrganizationIdProjectIdReportsRoute
+  '/_app/$organizationId/$projectId/sessions': typeof AppOrganizationIdProjectIdSessionsRoute
   '/_app/$organizationId/integrations': typeof AppOrganizationIdIntegrationsRouteWithChildren
   '/_app/$organizationId/integrations/_tabs': typeof AppOrganizationIdIntegrationsTabsRouteWithChildren
   '/_app/$organizationId/members': typeof AppOrganizationIdMembersRouteWithChildren
   '/_app/$organizationId/members/_tabs': typeof AppOrganizationIdMembersTabsRouteWithChildren
   '/_steps/onboarding/$projectId/connect': typeof StepsOnboardingProjectIdConnectRoute
   '/_steps/onboarding/$projectId/verify': typeof StepsOnboardingProjectIdVerifyRoute
-  '/_app/$organizationId/$projectId_/dashboards_/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
-  '/_app/$organizationId/$projectId_/events': typeof AppOrganizationIdProjectIdEventsRouteWithChildren
-  '/_app/$organizationId/$projectId_/events/_tabs': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
-  '/_app/$organizationId/$projectId_/notifications': typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
-  '/_app/$organizationId/$projectId_/notifications/_tabs': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
-  '/_app/$organizationId/$projectId_/profiles': typeof AppOrganizationIdProjectIdProfilesRouteWithChildren
-  '/_app/$organizationId/$projectId_/profiles/_tabs': typeof AppOrganizationIdProjectIdProfilesTabsRouteWithChildren
-  '/_app/$organizationId/$projectId_/reports_/$reportId': typeof AppOrganizationIdProjectIdReportsReportIdRoute
-  '/_app/$organizationId/$projectId_/sessions_/$sessionId': typeof AppOrganizationIdProjectIdSessionsSessionIdRoute
-  '/_app/$organizationId/$projectId_/settings': typeof AppOrganizationIdProjectIdSettingsRouteWithChildren
-  '/_app/$organizationId/$projectId_/settings/_tabs': typeof AppOrganizationIdProjectIdSettingsTabsRouteWithChildren
+  '/_app/$organizationId/$projectId/': typeof AppOrganizationIdProjectIdIndexRoute
+  '/_app/$organizationId/$projectId/dashboards_/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
+  '/_app/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsRouteWithChildren
+  '/_app/$organizationId/$projectId/events/_tabs': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
+  '/_app/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
+  '/_app/$organizationId/$projectId/notifications/_tabs': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
+  '/_app/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesRouteWithChildren
+  '/_app/$organizationId/$projectId/profiles/_tabs': typeof AppOrganizationIdProjectIdProfilesTabsRouteWithChildren
+  '/_app/$organizationId/$projectId/reports_/$reportId': typeof AppOrganizationIdProjectIdReportsReportIdRoute
+  '/_app/$organizationId/$projectId/sessions_/$sessionId': typeof AppOrganizationIdProjectIdSessionsSessionIdRoute
+  '/_app/$organizationId/$projectId/settings': typeof AppOrganizationIdProjectIdSettingsRouteWithChildren
+  '/_app/$organizationId/$projectId/settings/_tabs': typeof AppOrganizationIdProjectIdSettingsTabsRouteWithChildren
   '/_app/$organizationId/integrations/_tabs/available': typeof AppOrganizationIdIntegrationsTabsAvailableRoute
   '/_app/$organizationId/integrations/_tabs/installed': typeof AppOrganizationIdIntegrationsTabsInstalledRoute
   '/_app/$organizationId/members/_tabs/invitations': typeof AppOrganizationIdMembersTabsInvitationsRoute
   '/_app/$organizationId/members/_tabs/members': typeof AppOrganizationIdMembersTabsMembersRoute
   '/_app/$organizationId/integrations/_tabs/': typeof AppOrganizationIdIntegrationsTabsIndexRoute
   '/_app/$organizationId/members/_tabs/': typeof AppOrganizationIdMembersTabsIndexRoute
-  '/_app/$organizationId/$projectId_/events/_tabs/conversions': typeof AppOrganizationIdProjectIdEventsTabsConversionsRoute
-  '/_app/$organizationId/$projectId_/events/_tabs/events': typeof AppOrganizationIdProjectIdEventsTabsEventsRoute
-  '/_app/$organizationId/$projectId_/events/_tabs/stats': typeof AppOrganizationIdProjectIdEventsTabsStatsRoute
-  '/_app/$organizationId/$projectId_/notifications/_tabs/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRoute
-  '/_app/$organizationId/$projectId_/notifications/_tabs/rules': typeof AppOrganizationIdProjectIdNotificationsTabsRulesRoute
-  '/_app/$organizationId/$projectId_/profiles/$profileId': typeof AppOrganizationIdProjectIdProfilesProfileIdRouteWithChildren
-  '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRouteWithChildren
-  '/_app/$organizationId/$projectId_/profiles/_tabs/anonymous': typeof AppOrganizationIdProjectIdProfilesTabsAnonymousRoute
-  '/_app/$organizationId/$projectId_/profiles/_tabs/identified': typeof AppOrganizationIdProjectIdProfilesTabsIdentifiedRoute
-  '/_app/$organizationId/$projectId_/profiles/_tabs/power-users': typeof AppOrganizationIdProjectIdProfilesTabsPowerUsersRoute
-  '/_app/$organizationId/$projectId_/settings/_tabs/clients': typeof AppOrganizationIdProjectIdSettingsTabsClientsRoute
-  '/_app/$organizationId/$projectId_/settings/_tabs/details': typeof AppOrganizationIdProjectIdSettingsTabsDetailsRoute
-  '/_app/$organizationId/$projectId_/settings/_tabs/events': typeof AppOrganizationIdProjectIdSettingsTabsEventsRoute
+  '/_app/$organizationId/$projectId/events/_tabs/conversions': typeof AppOrganizationIdProjectIdEventsTabsConversionsRoute
+  '/_app/$organizationId/$projectId/events/_tabs/events': typeof AppOrganizationIdProjectIdEventsTabsEventsRoute
+  '/_app/$organizationId/$projectId/events/_tabs/stats': typeof AppOrganizationIdProjectIdEventsTabsStatsRoute
+  '/_app/$organizationId/$projectId/notifications/_tabs/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRoute
+  '/_app/$organizationId/$projectId/notifications/_tabs/rules': typeof AppOrganizationIdProjectIdNotificationsTabsRulesRoute
+  '/_app/$organizationId/$projectId/profiles/$profileId': typeof AppOrganizationIdProjectIdProfilesProfileIdRouteWithChildren
+  '/_app/$organizationId/$projectId/profiles/$profileId/_tabs': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRouteWithChildren
+  '/_app/$organizationId/$projectId/profiles/_tabs/anonymous': typeof AppOrganizationIdProjectIdProfilesTabsAnonymousRoute
+  '/_app/$organizationId/$projectId/profiles/_tabs/identified': typeof AppOrganizationIdProjectIdProfilesTabsIdentifiedRoute
+  '/_app/$organizationId/$projectId/profiles/_tabs/power-users': typeof AppOrganizationIdProjectIdProfilesTabsPowerUsersRoute
+  '/_app/$organizationId/$projectId/settings/_tabs/clients': typeof AppOrganizationIdProjectIdSettingsTabsClientsRoute
+  '/_app/$organizationId/$projectId/settings/_tabs/details': typeof AppOrganizationIdProjectIdSettingsTabsDetailsRoute
+  '/_app/$organizationId/$projectId/settings/_tabs/events': typeof AppOrganizationIdProjectIdSettingsTabsEventsRoute
   '/_app/$organizationId/$projectId_/settings/_tabs/imports': typeof AppOrganizationIdProjectIdSettingsTabsImportsRoute
-  '/_app/$organizationId/$projectId_/events/_tabs/': typeof AppOrganizationIdProjectIdEventsTabsIndexRoute
-  '/_app/$organizationId/$projectId_/notifications/_tabs/': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
-  '/_app/$organizationId/$projectId_/profiles/_tabs/': typeof AppOrganizationIdProjectIdProfilesTabsIndexRoute
-  '/_app/$organizationId/$projectId_/settings/_tabs/': typeof AppOrganizationIdProjectIdSettingsTabsIndexRoute
-  '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/events': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRoute
-  '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRoute
+  '/_app/$organizationId/$projectId/events/_tabs/': typeof AppOrganizationIdProjectIdEventsTabsIndexRoute
+  '/_app/$organizationId/$projectId/notifications/_tabs/': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
+  '/_app/$organizationId/$projectId/profiles/_tabs/': typeof AppOrganizationIdProjectIdProfilesTabsIndexRoute
+  '/_app/$organizationId/$projectId/settings/_tabs/': typeof AppOrganizationIdProjectIdSettingsTabsIndexRoute
+  '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRoute
+  '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -677,6 +686,7 @@ export interface FileRouteTypes {
     | '/$organizationId/members'
     | '/onboarding/$projectId/connect'
     | '/onboarding/$projectId/verify'
+    | '/$organizationId/$projectId/'
     | '/$organizationId/$projectId/dashboards/$dashboardId'
     | '/$organizationId/$projectId/events'
     | '/$organizationId/$projectId/notifications'
@@ -717,7 +727,6 @@ export interface FileRouteTypes {
     | '/onboarding'
     | '/api/config'
     | '/api/healthcheck'
-    | '/$organizationId/$projectId'
     | '/$organizationId/billing'
     | '/$organizationId/settings'
     | '/onboarding/project'
@@ -734,6 +743,7 @@ export interface FileRouteTypes {
     | '/$organizationId/members'
     | '/onboarding/$projectId/connect'
     | '/onboarding/$projectId/verify'
+    | '/$organizationId/$projectId'
     | '/$organizationId/$projectId/dashboards/$dashboardId'
     | '/$organizationId/$projectId/events'
     | '/$organizationId/$projectId/notifications'
@@ -778,56 +788,57 @@ export interface FileRouteTypes {
     | '/_steps/onboarding/project'
     | '/share/overview/$shareId'
     | '/_app/$organizationId/'
-    | '/_app/$organizationId/$projectId_/chat'
-    | '/_app/$organizationId/$projectId_/dashboards'
-    | '/_app/$organizationId/$projectId_/pages'
-    | '/_app/$organizationId/$projectId_/realtime'
-    | '/_app/$organizationId/$projectId_/references'
-    | '/_app/$organizationId/$projectId_/reports'
-    | '/_app/$organizationId/$projectId_/sessions'
+    | '/_app/$organizationId/$projectId/chat'
+    | '/_app/$organizationId/$projectId/dashboards'
+    | '/_app/$organizationId/$projectId/pages'
+    | '/_app/$organizationId/$projectId/realtime'
+    | '/_app/$organizationId/$projectId/references'
+    | '/_app/$organizationId/$projectId/reports'
+    | '/_app/$organizationId/$projectId/sessions'
     | '/_app/$organizationId/integrations'
     | '/_app/$organizationId/integrations/_tabs'
     | '/_app/$organizationId/members'
     | '/_app/$organizationId/members/_tabs'
     | '/_steps/onboarding/$projectId/connect'
     | '/_steps/onboarding/$projectId/verify'
-    | '/_app/$organizationId/$projectId_/dashboards_/$dashboardId'
-    | '/_app/$organizationId/$projectId_/events'
-    | '/_app/$organizationId/$projectId_/events/_tabs'
-    | '/_app/$organizationId/$projectId_/notifications'
-    | '/_app/$organizationId/$projectId_/notifications/_tabs'
-    | '/_app/$organizationId/$projectId_/profiles'
-    | '/_app/$organizationId/$projectId_/profiles/_tabs'
-    | '/_app/$organizationId/$projectId_/reports_/$reportId'
-    | '/_app/$organizationId/$projectId_/sessions_/$sessionId'
-    | '/_app/$organizationId/$projectId_/settings'
-    | '/_app/$organizationId/$projectId_/settings/_tabs'
+    | '/_app/$organizationId/$projectId/'
+    | '/_app/$organizationId/$projectId/dashboards_/$dashboardId'
+    | '/_app/$organizationId/$projectId/events'
+    | '/_app/$organizationId/$projectId/events/_tabs'
+    | '/_app/$organizationId/$projectId/notifications'
+    | '/_app/$organizationId/$projectId/notifications/_tabs'
+    | '/_app/$organizationId/$projectId/profiles'
+    | '/_app/$organizationId/$projectId/profiles/_tabs'
+    | '/_app/$organizationId/$projectId/reports_/$reportId'
+    | '/_app/$organizationId/$projectId/sessions_/$sessionId'
+    | '/_app/$organizationId/$projectId/settings'
+    | '/_app/$organizationId/$projectId/settings/_tabs'
     | '/_app/$organizationId/integrations/_tabs/available'
     | '/_app/$organizationId/integrations/_tabs/installed'
     | '/_app/$organizationId/members/_tabs/invitations'
     | '/_app/$organizationId/members/_tabs/members'
     | '/_app/$organizationId/integrations/_tabs/'
     | '/_app/$organizationId/members/_tabs/'
-    | '/_app/$organizationId/$projectId_/events/_tabs/conversions'
-    | '/_app/$organizationId/$projectId_/events/_tabs/events'
-    | '/_app/$organizationId/$projectId_/events/_tabs/stats'
-    | '/_app/$organizationId/$projectId_/notifications/_tabs/notifications'
-    | '/_app/$organizationId/$projectId_/notifications/_tabs/rules'
-    | '/_app/$organizationId/$projectId_/profiles/$profileId'
-    | '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs'
-    | '/_app/$organizationId/$projectId_/profiles/_tabs/anonymous'
-    | '/_app/$organizationId/$projectId_/profiles/_tabs/identified'
-    | '/_app/$organizationId/$projectId_/profiles/_tabs/power-users'
-    | '/_app/$organizationId/$projectId_/settings/_tabs/clients'
-    | '/_app/$organizationId/$projectId_/settings/_tabs/details'
-    | '/_app/$organizationId/$projectId_/settings/_tabs/events'
+    | '/_app/$organizationId/$projectId/events/_tabs/conversions'
+    | '/_app/$organizationId/$projectId/events/_tabs/events'
+    | '/_app/$organizationId/$projectId/events/_tabs/stats'
+    | '/_app/$organizationId/$projectId/notifications/_tabs/notifications'
+    | '/_app/$organizationId/$projectId/notifications/_tabs/rules'
+    | '/_app/$organizationId/$projectId/profiles/$profileId'
+    | '/_app/$organizationId/$projectId/profiles/$profileId/_tabs'
+    | '/_app/$organizationId/$projectId/profiles/_tabs/anonymous'
+    | '/_app/$organizationId/$projectId/profiles/_tabs/identified'
+    | '/_app/$organizationId/$projectId/profiles/_tabs/power-users'
+    | '/_app/$organizationId/$projectId/settings/_tabs/clients'
+    | '/_app/$organizationId/$projectId/settings/_tabs/details'
+    | '/_app/$organizationId/$projectId/settings/_tabs/events'
     | '/_app/$organizationId/$projectId_/settings/_tabs/imports'
-    | '/_app/$organizationId/$projectId_/events/_tabs/'
-    | '/_app/$organizationId/$projectId_/notifications/_tabs/'
-    | '/_app/$organizationId/$projectId_/profiles/_tabs/'
-    | '/_app/$organizationId/$projectId_/settings/_tabs/'
-    | '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/events'
-    | '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/'
+    | '/_app/$organizationId/$projectId/events/_tabs/'
+    | '/_app/$organizationId/$projectId/notifications/_tabs/'
+    | '/_app/$organizationId/$projectId/profiles/_tabs/'
+    | '/_app/$organizationId/$projectId/settings/_tabs/'
+    | '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events'
+    | '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -976,33 +987,40 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdProjectIdRouteImport
       parentRoute: typeof AppOrganizationIdRoute
     }
-    '/_app/$organizationId/$projectId_/settings': {
-      id: '/_app/$organizationId/$projectId_/settings'
-      path: '/$projectId/settings'
+    '/_app/$organizationId/$projectId/settings': {
+      id: '/_app/$organizationId/$projectId/settings'
+      path: '/settings'
       fullPath: '/$organizationId/$projectId/settings'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/profiles': {
-      id: '/_app/$organizationId/$projectId_/profiles'
-      path: '/$projectId/profiles'
+    '/_app/$organizationId/$projectId/profiles': {
+      id: '/_app/$organizationId/$projectId/profiles'
+      path: '/profiles'
       fullPath: '/$organizationId/$projectId/profiles'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/notifications': {
-      id: '/_app/$organizationId/$projectId_/notifications'
-      path: '/$projectId/notifications'
+    '/_app/$organizationId/$projectId/notifications': {
+      id: '/_app/$organizationId/$projectId/notifications'
+      path: '/notifications'
       fullPath: '/$organizationId/$projectId/notifications'
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/events': {
-      id: '/_app/$organizationId/$projectId_/events'
-      path: '/$projectId/events'
+    '/_app/$organizationId/$projectId/events': {
+      id: '/_app/$organizationId/$projectId/events'
+      path: '/events'
       fullPath: '/$organizationId/$projectId/events'
       preLoaderRoute: typeof AppOrganizationIdProjectIdEventsRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
+    }
+    '/_app/$organizationId/$projectId/': {
+      id: '/_app/$organizationId/$projectId/'
+      path: '/'
+      fullPath: '/$organizationId/$projectId/'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdIndexRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
     '/_steps/onboarding/$projectId/verify': {
       id: '/_steps/onboarding/$projectId/verify'
@@ -1032,57 +1050,57 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdIntegrationsTabsRouteImport
       parentRoute: typeof AppOrganizationIdIntegrationsRoute
     }
-    '/_app/$organizationId/$projectId_/sessions': {
-      id: '/_app/$organizationId/$projectId_/sessions'
-      path: '/$projectId/sessions'
+    '/_app/$organizationId/$projectId/sessions': {
+      id: '/_app/$organizationId/$projectId/sessions'
+      path: '/sessions'
       fullPath: '/$organizationId/$projectId/sessions'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSessionsRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/reports': {
-      id: '/_app/$organizationId/$projectId_/reports'
-      path: '/$projectId/reports'
+    '/_app/$organizationId/$projectId/reports': {
+      id: '/_app/$organizationId/$projectId/reports'
+      path: '/reports'
       fullPath: '/$organizationId/$projectId/reports'
       preLoaderRoute: typeof AppOrganizationIdProjectIdReportsRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/references': {
-      id: '/_app/$organizationId/$projectId_/references'
-      path: '/$projectId/references'
+    '/_app/$organizationId/$projectId/references': {
+      id: '/_app/$organizationId/$projectId/references'
+      path: '/references'
       fullPath: '/$organizationId/$projectId/references'
       preLoaderRoute: typeof AppOrganizationIdProjectIdReferencesRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/realtime': {
-      id: '/_app/$organizationId/$projectId_/realtime'
-      path: '/$projectId/realtime'
+    '/_app/$organizationId/$projectId/realtime': {
+      id: '/_app/$organizationId/$projectId/realtime'
+      path: '/realtime'
       fullPath: '/$organizationId/$projectId/realtime'
       preLoaderRoute: typeof AppOrganizationIdProjectIdRealtimeRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/pages': {
-      id: '/_app/$organizationId/$projectId_/pages'
-      path: '/$projectId/pages'
+    '/_app/$organizationId/$projectId/pages': {
+      id: '/_app/$organizationId/$projectId/pages'
+      path: '/pages'
       fullPath: '/$organizationId/$projectId/pages'
       preLoaderRoute: typeof AppOrganizationIdProjectIdPagesRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/dashboards': {
-      id: '/_app/$organizationId/$projectId_/dashboards'
-      path: '/$projectId/dashboards'
+    '/_app/$organizationId/$projectId/dashboards': {
+      id: '/_app/$organizationId/$projectId/dashboards'
+      path: '/dashboards'
       fullPath: '/$organizationId/$projectId/dashboards'
       preLoaderRoute: typeof AppOrganizationIdProjectIdDashboardsRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/chat': {
-      id: '/_app/$organizationId/$projectId_/chat'
-      path: '/$projectId/chat'
+    '/_app/$organizationId/$projectId/chat': {
+      id: '/_app/$organizationId/$projectId/chat'
+      path: '/chat'
       fullPath: '/$organizationId/$projectId/chat'
       preLoaderRoute: typeof AppOrganizationIdProjectIdChatRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/$profileId': {
-      id: '/_app/$organizationId/$projectId_/profiles/$profileId'
+    '/_app/$organizationId/$projectId/profiles/$profileId': {
+      id: '/_app/$organizationId/$projectId/profiles/$profileId'
       path: '/$profileId'
       fullPath: '/$organizationId/$projectId/profiles/$profileId'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdRouteImport
@@ -1130,78 +1148,78 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdIntegrationsTabsAvailableRouteImport
       parentRoute: typeof AppOrganizationIdIntegrationsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/settings/_tabs': {
-      id: '/_app/$organizationId/$projectId_/settings/_tabs'
-      path: '/$projectId/settings'
+    '/_app/$organizationId/$projectId/settings/_tabs': {
+      id: '/_app/$organizationId/$projectId/settings/_tabs'
+      path: '/settings'
       fullPath: '/$organizationId/$projectId/settings'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsTabsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdSettingsRoute
     }
-    '/_app/$organizationId/$projectId_/sessions_/$sessionId': {
-      id: '/_app/$organizationId/$projectId_/sessions_/$sessionId'
-      path: '/$projectId/sessions/$sessionId'
+    '/_app/$organizationId/$projectId/sessions_/$sessionId': {
+      id: '/_app/$organizationId/$projectId/sessions_/$sessionId'
+      path: '/sessions/$sessionId'
       fullPath: '/$organizationId/$projectId/sessions/$sessionId'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSessionsSessionIdRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/reports_/$reportId': {
-      id: '/_app/$organizationId/$projectId_/reports_/$reportId'
-      path: '/$projectId/reports/$reportId'
+    '/_app/$organizationId/$projectId/reports_/$reportId': {
+      id: '/_app/$organizationId/$projectId/reports_/$reportId'
+      path: '/reports/$reportId'
       fullPath: '/$organizationId/$projectId/reports/$reportId'
       preLoaderRoute: typeof AppOrganizationIdProjectIdReportsReportIdRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/_tabs': {
-      id: '/_app/$organizationId/$projectId_/profiles/_tabs'
-      path: '/$projectId/profiles'
+    '/_app/$organizationId/$projectId/profiles/_tabs': {
+      id: '/_app/$organizationId/$projectId/profiles/_tabs'
+      path: '/profiles'
       fullPath: '/$organizationId/$projectId/profiles'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesTabsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesRoute
     }
-    '/_app/$organizationId/$projectId_/notifications/_tabs': {
-      id: '/_app/$organizationId/$projectId_/notifications/_tabs'
-      path: '/$projectId/notifications'
+    '/_app/$organizationId/$projectId/notifications/_tabs': {
+      id: '/_app/$organizationId/$projectId/notifications/_tabs'
+      path: '/notifications'
       fullPath: '/$organizationId/$projectId/notifications'
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdNotificationsRoute
     }
-    '/_app/$organizationId/$projectId_/events/_tabs': {
-      id: '/_app/$organizationId/$projectId_/events/_tabs'
-      path: '/$projectId/events'
+    '/_app/$organizationId/$projectId/events/_tabs': {
+      id: '/_app/$organizationId/$projectId/events/_tabs'
+      path: '/events'
       fullPath: '/$organizationId/$projectId/events'
       preLoaderRoute: typeof AppOrganizationIdProjectIdEventsTabsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdEventsRoute
     }
-    '/_app/$organizationId/$projectId_/dashboards_/$dashboardId': {
-      id: '/_app/$organizationId/$projectId_/dashboards_/$dashboardId'
-      path: '/$projectId/dashboards/$dashboardId'
+    '/_app/$organizationId/$projectId/dashboards_/$dashboardId': {
+      id: '/_app/$organizationId/$projectId/dashboards_/$dashboardId'
+      path: '/dashboards/$dashboardId'
       fullPath: '/$organizationId/$projectId/dashboards/$dashboardId'
       preLoaderRoute: typeof AppOrganizationIdProjectIdDashboardsDashboardIdRouteImport
-      parentRoute: typeof AppOrganizationIdRoute
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
     }
-    '/_app/$organizationId/$projectId_/settings/_tabs/': {
-      id: '/_app/$organizationId/$projectId_/settings/_tabs/'
+    '/_app/$organizationId/$projectId/settings/_tabs/': {
+      id: '/_app/$organizationId/$projectId/settings/_tabs/'
       path: '/'
       fullPath: '/$organizationId/$projectId/settings/'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsTabsIndexRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdSettingsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/_tabs/': {
-      id: '/_app/$organizationId/$projectId_/profiles/_tabs/'
+    '/_app/$organizationId/$projectId/profiles/_tabs/': {
+      id: '/_app/$organizationId/$projectId/profiles/_tabs/'
       path: '/'
       fullPath: '/$organizationId/$projectId/profiles/'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesTabsIndexRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesTabsRoute
     }
-    '/_app/$organizationId/$projectId_/notifications/_tabs/': {
-      id: '/_app/$organizationId/$projectId_/notifications/_tabs/'
+    '/_app/$organizationId/$projectId/notifications/_tabs/': {
+      id: '/_app/$organizationId/$projectId/notifications/_tabs/'
       path: '/'
       fullPath: '/$organizationId/$projectId/notifications/'
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsIndexRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/events/_tabs/': {
-      id: '/_app/$organizationId/$projectId_/events/_tabs/'
+    '/_app/$organizationId/$projectId/events/_tabs/': {
+      id: '/_app/$organizationId/$projectId/events/_tabs/'
       path: '/'
       fullPath: '/$organizationId/$projectId/events/'
       preLoaderRoute: typeof AppOrganizationIdProjectIdEventsTabsIndexRouteImport
@@ -1209,104 +1227,104 @@ declare module '@tanstack/react-router' {
     }
     '/_app/$organizationId/$projectId_/settings/_tabs/imports': {
       id: '/_app/$organizationId/$projectId_/settings/_tabs/imports'
-      path: '/imports'
+      path: '/$projectId/settings/imports'
       fullPath: '/$organizationId/$projectId/settings/imports'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsTabsImportsRouteImport
-      parentRoute: typeof AppOrganizationIdProjectIdSettingsTabsRoute
+      parentRoute: typeof AppOrganizationIdRoute
     }
-    '/_app/$organizationId/$projectId_/settings/_tabs/events': {
-      id: '/_app/$organizationId/$projectId_/settings/_tabs/events'
+    '/_app/$organizationId/$projectId/settings/_tabs/events': {
+      id: '/_app/$organizationId/$projectId/settings/_tabs/events'
       path: '/events'
       fullPath: '/$organizationId/$projectId/settings/events'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsTabsEventsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdSettingsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/settings/_tabs/details': {
-      id: '/_app/$organizationId/$projectId_/settings/_tabs/details'
+    '/_app/$organizationId/$projectId/settings/_tabs/details': {
+      id: '/_app/$organizationId/$projectId/settings/_tabs/details'
       path: '/details'
       fullPath: '/$organizationId/$projectId/settings/details'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsTabsDetailsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdSettingsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/settings/_tabs/clients': {
-      id: '/_app/$organizationId/$projectId_/settings/_tabs/clients'
+    '/_app/$organizationId/$projectId/settings/_tabs/clients': {
+      id: '/_app/$organizationId/$projectId/settings/_tabs/clients'
       path: '/clients'
       fullPath: '/$organizationId/$projectId/settings/clients'
       preLoaderRoute: typeof AppOrganizationIdProjectIdSettingsTabsClientsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdSettingsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/_tabs/power-users': {
-      id: '/_app/$organizationId/$projectId_/profiles/_tabs/power-users'
+    '/_app/$organizationId/$projectId/profiles/_tabs/power-users': {
+      id: '/_app/$organizationId/$projectId/profiles/_tabs/power-users'
       path: '/power-users'
       fullPath: '/$organizationId/$projectId/profiles/power-users'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesTabsPowerUsersRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/_tabs/identified': {
-      id: '/_app/$organizationId/$projectId_/profiles/_tabs/identified'
+    '/_app/$organizationId/$projectId/profiles/_tabs/identified': {
+      id: '/_app/$organizationId/$projectId/profiles/_tabs/identified'
       path: '/identified'
       fullPath: '/$organizationId/$projectId/profiles/identified'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesTabsIdentifiedRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/_tabs/anonymous': {
-      id: '/_app/$organizationId/$projectId_/profiles/_tabs/anonymous'
+    '/_app/$organizationId/$projectId/profiles/_tabs/anonymous': {
+      id: '/_app/$organizationId/$projectId/profiles/_tabs/anonymous'
       path: '/anonymous'
       fullPath: '/$organizationId/$projectId/profiles/anonymous'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesTabsAnonymousRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs': {
-      id: '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs'
+    '/_app/$organizationId/$projectId/profiles/$profileId/_tabs': {
+      id: '/_app/$organizationId/$projectId/profiles/$profileId/_tabs'
       path: '/$profileId'
       fullPath: '/$organizationId/$projectId/profiles/$profileId'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdRoute
     }
-    '/_app/$organizationId/$projectId_/notifications/_tabs/rules': {
-      id: '/_app/$organizationId/$projectId_/notifications/_tabs/rules'
+    '/_app/$organizationId/$projectId/notifications/_tabs/rules': {
+      id: '/_app/$organizationId/$projectId/notifications/_tabs/rules'
       path: '/rules'
       fullPath: '/$organizationId/$projectId/notifications/rules'
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRulesRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/notifications/_tabs/notifications': {
-      id: '/_app/$organizationId/$projectId_/notifications/_tabs/notifications'
+    '/_app/$organizationId/$projectId/notifications/_tabs/notifications': {
+      id: '/_app/$organizationId/$projectId/notifications/_tabs/notifications'
       path: '/notifications'
       fullPath: '/$organizationId/$projectId/notifications/notifications'
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/events/_tabs/stats': {
-      id: '/_app/$organizationId/$projectId_/events/_tabs/stats'
+    '/_app/$organizationId/$projectId/events/_tabs/stats': {
+      id: '/_app/$organizationId/$projectId/events/_tabs/stats'
       path: '/stats'
       fullPath: '/$organizationId/$projectId/events/stats'
       preLoaderRoute: typeof AppOrganizationIdProjectIdEventsTabsStatsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdEventsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/events/_tabs/events': {
-      id: '/_app/$organizationId/$projectId_/events/_tabs/events'
+    '/_app/$organizationId/$projectId/events/_tabs/events': {
+      id: '/_app/$organizationId/$projectId/events/_tabs/events'
       path: '/events'
       fullPath: '/$organizationId/$projectId/events/events'
       preLoaderRoute: typeof AppOrganizationIdProjectIdEventsTabsEventsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdEventsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/events/_tabs/conversions': {
-      id: '/_app/$organizationId/$projectId_/events/_tabs/conversions'
+    '/_app/$organizationId/$projectId/events/_tabs/conversions': {
+      id: '/_app/$organizationId/$projectId/events/_tabs/conversions'
       path: '/conversions'
       fullPath: '/$organizationId/$projectId/events/conversions'
       preLoaderRoute: typeof AppOrganizationIdProjectIdEventsTabsConversionsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdEventsTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/': {
-      id: '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/'
+    '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/': {
+      id: '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/'
       path: '/'
       fullPath: '/$organizationId/$projectId/profiles/$profileId/'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRoute
     }
-    '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/events': {
-      id: '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/events'
+    '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events': {
+      id: '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events'
       path: '/events'
       fullPath: '/$organizationId/$projectId/profiles/$profileId/events'
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRouteImport
@@ -1315,78 +1333,6 @@ declare module '@tanstack/react-router' {
   }
 }
 
-interface AppOrganizationIdIntegrationsTabsRouteChildren {
-  AppOrganizationIdIntegrationsTabsAvailableRoute: typeof AppOrganizationIdIntegrationsTabsAvailableRoute
-  AppOrganizationIdIntegrationsTabsInstalledRoute: typeof AppOrganizationIdIntegrationsTabsInstalledRoute
-  AppOrganizationIdIntegrationsTabsIndexRoute: typeof AppOrganizationIdIntegrationsTabsIndexRoute
-}
-
-const AppOrganizationIdIntegrationsTabsRouteChildren: AppOrganizationIdIntegrationsTabsRouteChildren =
-  {
-    AppOrganizationIdIntegrationsTabsAvailableRoute:
-      AppOrganizationIdIntegrationsTabsAvailableRoute,
-    AppOrganizationIdIntegrationsTabsInstalledRoute:
-      AppOrganizationIdIntegrationsTabsInstalledRoute,
-    AppOrganizationIdIntegrationsTabsIndexRoute:
-      AppOrganizationIdIntegrationsTabsIndexRoute,
-  }
-
-const AppOrganizationIdIntegrationsTabsRouteWithChildren =
-  AppOrganizationIdIntegrationsTabsRoute._addFileChildren(
-    AppOrganizationIdIntegrationsTabsRouteChildren,
-  )
-
-interface AppOrganizationIdIntegrationsRouteChildren {
-  AppOrganizationIdIntegrationsTabsRoute: typeof AppOrganizationIdIntegrationsTabsRouteWithChildren
-}
-
-const AppOrganizationIdIntegrationsRouteChildren: AppOrganizationIdIntegrationsRouteChildren =
-  {
-    AppOrganizationIdIntegrationsTabsRoute:
-      AppOrganizationIdIntegrationsTabsRouteWithChildren,
-  }
-
-const AppOrganizationIdIntegrationsRouteWithChildren =
-  AppOrganizationIdIntegrationsRoute._addFileChildren(
-    AppOrganizationIdIntegrationsRouteChildren,
-  )
-
-interface AppOrganizationIdMembersTabsRouteChildren {
-  AppOrganizationIdMembersTabsInvitationsRoute: typeof AppOrganizationIdMembersTabsInvitationsRoute
-  AppOrganizationIdMembersTabsMembersRoute: typeof AppOrganizationIdMembersTabsMembersRoute
-  AppOrganizationIdMembersTabsIndexRoute: typeof AppOrganizationIdMembersTabsIndexRoute
-}
-
-const AppOrganizationIdMembersTabsRouteChildren: AppOrganizationIdMembersTabsRouteChildren =
-  {
-    AppOrganizationIdMembersTabsInvitationsRoute:
-      AppOrganizationIdMembersTabsInvitationsRoute,
-    AppOrganizationIdMembersTabsMembersRoute:
-      AppOrganizationIdMembersTabsMembersRoute,
-    AppOrganizationIdMembersTabsIndexRoute:
-      AppOrganizationIdMembersTabsIndexRoute,
-  }
-
-const AppOrganizationIdMembersTabsRouteWithChildren =
-  AppOrganizationIdMembersTabsRoute._addFileChildren(
-    AppOrganizationIdMembersTabsRouteChildren,
-  )
-
-interface AppOrganizationIdMembersRouteChildren {
-  AppOrganizationIdMembersTabsRoute: typeof AppOrganizationIdMembersTabsRouteWithChildren
-}
-
-const AppOrganizationIdMembersRouteChildren: AppOrganizationIdMembersRouteChildren =
-  {
-    AppOrganizationIdMembersTabsRoute:
-      AppOrganizationIdMembersTabsRouteWithChildren,
-  }
-
-const AppOrganizationIdMembersRouteWithChildren =
-  AppOrganizationIdMembersRoute._addFileChildren(
-    AppOrganizationIdMembersRouteChildren,
-  )
-
 interface AppOrganizationIdProjectIdEventsTabsRouteChildren {
   AppOrganizationIdProjectIdEventsTabsConversionsRoute: typeof AppOrganizationIdProjectIdEventsTabsConversionsRoute
   AppOrganizationIdProjectIdEventsTabsEventsRoute: typeof AppOrganizationIdProjectIdEventsTabsEventsRoute
@@ -1541,7 +1487,6 @@ interface AppOrganizationIdProjectIdSettingsTabsRouteChildren {
   AppOrganizationIdProjectIdSettingsTabsClientsRoute: typeof AppOrganizationIdProjectIdSettingsTabsClientsRoute
   AppOrganizationIdProjectIdSettingsTabsDetailsRoute: typeof AppOrganizationIdProjectIdSettingsTabsDetailsRoute
   AppOrganizationIdProjectIdSettingsTabsEventsRoute: typeof AppOrganizationIdProjectIdSettingsTabsEventsRoute
-  AppOrganizationIdProjectIdSettingsTabsImportsRoute: typeof AppOrganizationIdProjectIdSettingsTabsImportsRoute
   AppOrganizationIdProjectIdSettingsTabsIndexRoute: typeof AppOrganizationIdProjectIdSettingsTabsIndexRoute
 }
 
@@ -1553,8 +1498,6 @@ const AppOrganizationIdProjectIdSettingsTabsRouteChildren: AppOrganizationIdProj
       AppOrganizationIdProjectIdSettingsTabsDetailsRoute,
     AppOrganizationIdProjectIdSettingsTabsEventsRoute:
       AppOrganizationIdProjectIdSettingsTabsEventsRoute,
-    AppOrganizationIdProjectIdSettingsTabsImportsRoute:
-      AppOrganizationIdProjectIdSettingsTabsImportsRoute,
     AppOrganizationIdProjectIdSettingsTabsIndexRoute:
       AppOrganizationIdProjectIdSettingsTabsIndexRoute,
   }
@@ -1579,11 +1522,7 @@ const AppOrganizationIdProjectIdSettingsRouteWithChildren =
     AppOrganizationIdProjectIdSettingsRouteChildren,
   )
 
-interface AppOrganizationIdRouteChildren {
-  AppOrganizationIdProjectIdRoute: typeof AppOrganizationIdProjectIdRoute
-  AppOrganizationIdBillingRoute: typeof AppOrganizationIdBillingRoute
-  AppOrganizationIdSettingsRoute: typeof AppOrganizationIdSettingsRoute
-  AppOrganizationIdIndexRoute: typeof AppOrganizationIdIndexRoute
+interface AppOrganizationIdProjectIdRouteChildren {
   AppOrganizationIdProjectIdChatRoute: typeof AppOrganizationIdProjectIdChatRoute
   AppOrganizationIdProjectIdDashboardsRoute: typeof AppOrganizationIdProjectIdDashboardsRoute
   AppOrganizationIdProjectIdPagesRoute: typeof AppOrganizationIdProjectIdPagesRoute
@@ -1591,8 +1530,7 @@ interface AppOrganizationIdRouteChildren {
   AppOrganizationIdProjectIdReferencesRoute: typeof AppOrganizationIdProjectIdReferencesRoute
   AppOrganizationIdProjectIdReportsRoute: typeof AppOrganizationIdProjectIdReportsRoute
   AppOrganizationIdProjectIdSessionsRoute: typeof AppOrganizationIdProjectIdSessionsRoute
-  AppOrganizationIdIntegrationsRoute: typeof AppOrganizationIdIntegrationsRouteWithChildren
-  AppOrganizationIdMembersRoute: typeof AppOrganizationIdMembersRouteWithChildren
+  AppOrganizationIdProjectIdIndexRoute: typeof AppOrganizationIdProjectIdIndexRoute
   AppOrganizationIdProjectIdDashboardsDashboardIdRoute: typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   AppOrganizationIdProjectIdEventsRoute: typeof AppOrganizationIdProjectIdEventsRouteWithChildren
   AppOrganizationIdProjectIdNotificationsRoute: typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
@@ -1602,40 +1540,134 @@ interface AppOrganizationIdRouteChildren {
   AppOrganizationIdProjectIdSettingsRoute: typeof AppOrganizationIdProjectIdSettingsRouteWithChildren
 }
 
+const AppOrganizationIdProjectIdRouteChildren: AppOrganizationIdProjectIdRouteChildren =
+  {
+    AppOrganizationIdProjectIdChatRoute: AppOrganizationIdProjectIdChatRoute,
+    AppOrganizationIdProjectIdDashboardsRoute:
+      AppOrganizationIdProjectIdDashboardsRoute,
+    AppOrganizationIdProjectIdPagesRoute: AppOrganizationIdProjectIdPagesRoute,
+    AppOrganizationIdProjectIdRealtimeRoute:
+      AppOrganizationIdProjectIdRealtimeRoute,
+    AppOrganizationIdProjectIdReferencesRoute:
+      AppOrganizationIdProjectIdReferencesRoute,
+    AppOrganizationIdProjectIdReportsRoute:
+      AppOrganizationIdProjectIdReportsRoute,
+    AppOrganizationIdProjectIdSessionsRoute:
+      AppOrganizationIdProjectIdSessionsRoute,
+    AppOrganizationIdProjectIdIndexRoute: AppOrganizationIdProjectIdIndexRoute,
+    AppOrganizationIdProjectIdDashboardsDashboardIdRoute:
+      AppOrganizationIdProjectIdDashboardsDashboardIdRoute,
+    AppOrganizationIdProjectIdEventsRoute:
+      AppOrganizationIdProjectIdEventsRouteWithChildren,
+    AppOrganizationIdProjectIdNotificationsRoute:
+      AppOrganizationIdProjectIdNotificationsRouteWithChildren,
+    AppOrganizationIdProjectIdProfilesRoute:
+      AppOrganizationIdProjectIdProfilesRouteWithChildren,
+    AppOrganizationIdProjectIdReportsReportIdRoute:
+      AppOrganizationIdProjectIdReportsReportIdRoute,
+    AppOrganizationIdProjectIdSessionsSessionIdRoute:
+      AppOrganizationIdProjectIdSessionsSessionIdRoute,
+    AppOrganizationIdProjectIdSettingsRoute:
+      AppOrganizationIdProjectIdSettingsRouteWithChildren,
+  }
+
+const AppOrganizationIdProjectIdRouteWithChildren =
+  AppOrganizationIdProjectIdRoute._addFileChildren(
+    AppOrganizationIdProjectIdRouteChildren,
+  )
+
+interface AppOrganizationIdIntegrationsTabsRouteChildren {
+  AppOrganizationIdIntegrationsTabsAvailableRoute: typeof AppOrganizationIdIntegrationsTabsAvailableRoute
+  AppOrganizationIdIntegrationsTabsInstalledRoute: typeof AppOrganizationIdIntegrationsTabsInstalledRoute
+  AppOrganizationIdIntegrationsTabsIndexRoute: typeof AppOrganizationIdIntegrationsTabsIndexRoute
+}
+
+const AppOrganizationIdIntegrationsTabsRouteChildren: AppOrganizationIdIntegrationsTabsRouteChildren =
+  {
+    AppOrganizationIdIntegrationsTabsAvailableRoute:
+      AppOrganizationIdIntegrationsTabsAvailableRoute,
+    AppOrganizationIdIntegrationsTabsInstalledRoute:
+      AppOrganizationIdIntegrationsTabsInstalledRoute,
+    AppOrganizationIdIntegrationsTabsIndexRoute:
+      AppOrganizationIdIntegrationsTabsIndexRoute,
+  }
+
+const AppOrganizationIdIntegrationsTabsRouteWithChildren =
+  AppOrganizationIdIntegrationsTabsRoute._addFileChildren(
+    AppOrganizationIdIntegrationsTabsRouteChildren,
+  )
+
+interface AppOrganizationIdIntegrationsRouteChildren {
+  AppOrganizationIdIntegrationsTabsRoute: typeof AppOrganizationIdIntegrationsTabsRouteWithChildren
+}
+
+const AppOrganizationIdIntegrationsRouteChildren: AppOrganizationIdIntegrationsRouteChildren =
+  {
+    AppOrganizationIdIntegrationsTabsRoute:
+      AppOrganizationIdIntegrationsTabsRouteWithChildren,
+  }
+
+const AppOrganizationIdIntegrationsRouteWithChildren =
+  AppOrganizationIdIntegrationsRoute._addFileChildren(
+    AppOrganizationIdIntegrationsRouteChildren,
+  )
+
+interface AppOrganizationIdMembersTabsRouteChildren {
+  AppOrganizationIdMembersTabsInvitationsRoute: typeof AppOrganizationIdMembersTabsInvitationsRoute
+  AppOrganizationIdMembersTabsMembersRoute: typeof AppOrganizationIdMembersTabsMembersRoute
+  AppOrganizationIdMembersTabsIndexRoute: typeof AppOrganizationIdMembersTabsIndexRoute
+}
+
+const AppOrganizationIdMembersTabsRouteChildren: AppOrganizationIdMembersTabsRouteChildren =
+  {
+    AppOrganizationIdMembersTabsInvitationsRoute:
+      AppOrganizationIdMembersTabsInvitationsRoute,
+    AppOrganizationIdMembersTabsMembersRoute:
+      AppOrganizationIdMembersTabsMembersRoute,
+    AppOrganizationIdMembersTabsIndexRoute:
+      AppOrganizationIdMembersTabsIndexRoute,
+  }
+
+const AppOrganizationIdMembersTabsRouteWithChildren =
+  AppOrganizationIdMembersTabsRoute._addFileChildren(
+    AppOrganizationIdMembersTabsRouteChildren,
+  )
+
+interface AppOrganizationIdMembersRouteChildren {
+  AppOrganizationIdMembersTabsRoute: typeof AppOrganizationIdMembersTabsRouteWithChildren
+}
+
+const AppOrganizationIdMembersRouteChildren: AppOrganizationIdMembersRouteChildren =
+  {
+    AppOrganizationIdMembersTabsRoute:
+      AppOrganizationIdMembersTabsRouteWithChildren,
+  }
+
+const AppOrganizationIdMembersRouteWithChildren =
+  AppOrganizationIdMembersRoute._addFileChildren(
+    AppOrganizationIdMembersRouteChildren,
+  )
+
+interface AppOrganizationIdRouteChildren {
+  AppOrganizationIdProjectIdRoute: typeof AppOrganizationIdProjectIdRouteWithChildren
+  AppOrganizationIdBillingRoute: typeof AppOrganizationIdBillingRoute
+  AppOrganizationIdSettingsRoute: typeof AppOrganizationIdSettingsRoute
+  AppOrganizationIdIndexRoute: typeof AppOrganizationIdIndexRoute
+  AppOrganizationIdIntegrationsRoute: typeof AppOrganizationIdIntegrationsRouteWithChildren
+  AppOrganizationIdMembersRoute: typeof AppOrganizationIdMembersRouteWithChildren
+  AppOrganizationIdProjectIdSettingsTabsImportsRoute: typeof AppOrganizationIdProjectIdSettingsTabsImportsRoute
+}
+
 const AppOrganizationIdRouteChildren: AppOrganizationIdRouteChildren = {
-  AppOrganizationIdProjectIdRoute: AppOrganizationIdProjectIdRoute,
+  AppOrganizationIdProjectIdRoute: AppOrganizationIdProjectIdRouteWithChildren,
   AppOrganizationIdBillingRoute: AppOrganizationIdBillingRoute,
   AppOrganizationIdSettingsRoute: AppOrganizationIdSettingsRoute,
   AppOrganizationIdIndexRoute: AppOrganizationIdIndexRoute,
-  AppOrganizationIdProjectIdChatRoute: AppOrganizationIdProjectIdChatRoute,
-  AppOrganizationIdProjectIdDashboardsRoute:
-    AppOrganizationIdProjectIdDashboardsRoute,
-  AppOrganizationIdProjectIdPagesRoute: AppOrganizationIdProjectIdPagesRoute,
-  AppOrganizationIdProjectIdRealtimeRoute:
-    AppOrganizationIdProjectIdRealtimeRoute,
-  AppOrganizationIdProjectIdReferencesRoute:
-    AppOrganizationIdProjectIdReferencesRoute,
-  AppOrganizationIdProjectIdReportsRoute:
-    AppOrganizationIdProjectIdReportsRoute,
-  AppOrganizationIdProjectIdSessionsRoute:
-    AppOrganizationIdProjectIdSessionsRoute,
   AppOrganizationIdIntegrationsRoute:
     AppOrganizationIdIntegrationsRouteWithChildren,
   AppOrganizationIdMembersRoute: AppOrganizationIdMembersRouteWithChildren,
-  AppOrganizationIdProjectIdDashboardsDashboardIdRoute:
-    AppOrganizationIdProjectIdDashboardsDashboardIdRoute,
-  AppOrganizationIdProjectIdEventsRoute:
-    AppOrganizationIdProjectIdEventsRouteWithChildren,
-  AppOrganizationIdProjectIdNotificationsRoute:
-    AppOrganizationIdProjectIdNotificationsRouteWithChildren,
-  AppOrganizationIdProjectIdProfilesRoute:
-    AppOrganizationIdProjectIdProfilesRouteWithChildren,
-  AppOrganizationIdProjectIdReportsReportIdRoute:
-    AppOrganizationIdProjectIdReportsReportIdRoute,
-  AppOrganizationIdProjectIdSessionsSessionIdRoute:
-    AppOrganizationIdProjectIdSessionsSessionIdRoute,
-  AppOrganizationIdProjectIdSettingsRoute:
-    AppOrganizationIdProjectIdSettingsRouteWithChildren,
+  AppOrganizationIdProjectIdSettingsTabsImportsRoute:
+    AppOrganizationIdProjectIdSettingsTabsImportsRoute,
 }
 
 const AppOrganizationIdRouteWithChildren =
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.chat.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.chat.tsx
similarity index 98%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.chat.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.chat.tsx
index f14a5c84..b63e2cbe 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.chat.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.chat.tsx
@@ -6,7 +6,7 @@ import { keepPreviousData, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import type { UIMessage } from 'ai';
 
-export const Route = createFileRoute('/_app/$organizationId/$projectId_/chat')({
+export const Route = createFileRoute('/_app/$organizationId/$projectId/chat')({
   component: Component,
   pendingComponent: FullPageLoadingState,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.dashboards.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.dashboards.tsx
similarity index 99%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.dashboards.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.dashboards.tsx
index bab898b8..641ce539 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.dashboards.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.dashboards.tsx
@@ -32,7 +32,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { Link, createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/dashboards',
+  '/_app/$organizationId/$projectId/dashboards',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.dashboards_.$dashboardId.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.dashboards_.$dashboardId.tsx
similarity index 99%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.dashboards_.$dashboardId.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.dashboards_.$dashboardId.tsx
index 64d51c37..503cb1e8 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.dashboards_.$dashboardId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.dashboards_.$dashboardId.tsx
@@ -53,7 +53,7 @@ type Layout = {
 };
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/dashboards_/$dashboardId',
+  '/_app/$organizationId/$projectId/dashboards_/$dashboardId',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.conversions.tsx
similarity index 94%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.conversions.tsx
index 49781aa4..2a1926cf 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.conversions.tsx
@@ -6,7 +6,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { parseAsIsoDateTime, useQueryState } from 'nuqs';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/events/_tabs/conversions',
+  '/_app/$organizationId/$projectId/events/_tabs/conversions',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.events.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
similarity index 95%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.events.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
index 095f3f4e..10a4b095 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.events.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
@@ -9,7 +9,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { parseAsIsoDateTime, useQueryState } from 'nuqs';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/events/_tabs/events',
+  '/_app/$organizationId/$projectId/events/_tabs/events',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.index.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.index.tsx
similarity index 85%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.index.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.index.tsx
index 97cda125..a2c1203f 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.index.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/events/_tabs/',
+  '/_app/$organizationId/$projectId/events/_tabs/',
 )({
   component: Component,
   beforeLoad({ params }) {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.stats.tsx
similarity index 98%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.stats.tsx
index 928e52c5..8b745631 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.stats.tsx
@@ -14,7 +14,7 @@ import type { IChartEvent } from '@openpanel/validation';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/events/_tabs/stats',
+  '/_app/$organizationId/$projectId/events/_tabs/stats',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.tsx
similarity index 96%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.tsx
index de0ff39d..206e4cbd 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.tsx
@@ -5,7 +5,7 @@ import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
 import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/events/_tabs',
+  '/_app/$organizationId/$projectId/events/_tabs',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId.index.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.index.tsx
new file mode 100644
index 00000000..a9e71c78
--- /dev/null
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.index.tsx
@@ -0,0 +1,59 @@
+import {
+  OverviewFilterButton,
+  OverviewFiltersButtons,
+} from '@/components/overview/filters/overview-filters-buttons';
+import { LiveCounter } from '@/components/overview/live-counter';
+import { OverviewInterval } from '@/components/overview/overview-interval';
+import OverviewMetrics from '@/components/overview/overview-metrics';
+import { OverviewRange } from '@/components/overview/overview-range';
+import { OverviewShare } from '@/components/overview/overview-share';
+import OverviewTopDevices from '@/components/overview/overview-top-devices';
+import OverviewTopEvents from '@/components/overview/overview-top-events';
+import OverviewTopGeo from '@/components/overview/overview-top-geo';
+import OverviewTopPages from '@/components/overview/overview-top-pages';
+import OverviewTopSources from '@/components/overview/overview-top-sources';
+import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/$organizationId/$projectId/')({
+  component: ProjectDashboard,
+  head: () => {
+    return {
+      meta: [
+        {
+          title: createProjectTitle(PAGE_TITLES.DASHBOARD),
+        },
+      ],
+    };
+  },
+});
+
+function ProjectDashboard() {
+  const { projectId } = Route.useParams();
+  return (
+    <div>
+      <div className="col gap-2 p-4">
+        <div className="flex justify-between gap-2">
+          <div className="flex gap-2">
+            <OverviewRange />
+            <OverviewInterval />
+            <OverviewFilterButton mode="events" />
+          </div>
+          <div className="flex gap-2">
+            <LiveCounter projectId={projectId} />
+            <OverviewShare projectId={projectId} />
+          </div>
+        </div>
+        <OverviewFiltersButtons />
+      </div>
+      <div className="grid grid-cols-6 gap-4 p-4 pt-0">
+        <OverviewMetrics projectId={projectId} />
+        <OverviewTopSources projectId={projectId} />
+        <OverviewTopPages projectId={projectId} />
+        <OverviewTopDevices projectId={projectId} />
+        <OverviewTopEvents projectId={projectId} />
+        <OverviewTopGeo projectId={projectId} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.index.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.index.tsx
similarity index 84%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.index.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.index.tsx
index 2e4603a6..6642d1ef 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.index.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/notifications/_tabs/',
+  '/_app/$organizationId/$projectId/notifications/_tabs/',
 )({
   component: Component,
   beforeLoad({ params }) {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.notifications.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.notifications.tsx
similarity index 92%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.notifications.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.notifications.tsx
index f8acebff..510ae0b9 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.notifications.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.notifications.tsx
@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/notifications/_tabs/notifications',
+  '/_app/$organizationId/$projectId/notifications/_tabs/notifications',
 )({
   component: Component,
   loader: async ({ context, params }) => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.rules.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.rules.tsx
similarity index 97%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.rules.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.rules.tsx
index 6a7ffff9..df1788a0 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.rules.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.rules.tsx
@@ -12,7 +12,7 @@ import { PencilRulerIcon, PlusIcon } from 'lucide-react';
 import { useMemo } from 'react';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/notifications/_tabs/rules',
+  '/_app/$organizationId/$projectId/notifications/_tabs/rules',
 )({
   component: Component,
   loader: async ({ context, params }) => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.tsx
similarity index 96%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.tsx
index 2e360dd1..a3973b26 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.notifications._tabs.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.tsx
@@ -5,7 +5,7 @@ import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
 import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/notifications/_tabs',
+  '/_app/$organizationId/$projectId/notifications/_tabs',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.pages.tsx
similarity index 99%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.pages.tsx
index 11b6e3e7..aeb0aeb8 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.pages.tsx
@@ -24,7 +24,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { parseAsInteger, useQueryState } from 'nuqs';
 import { memo } from 'react';
 
-export const Route = createFileRoute('/_app/$organizationId/$projectId_/pages')(
+export const Route = createFileRoute('/_app/$organizationId/$projectId/pages')(
   {
     component: Component,
     head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.events.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events.tsx
similarity index 94%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.events.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events.tsx
index 2343b520..2d0f6e13 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.events.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events.tsx
@@ -9,7 +9,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { parseAsIsoDateTime, useQueryState } from 'nuqs';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/events',
+  '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.index.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index.tsx
similarity index 98%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.index.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index.tsx
index f1fa52a2..086bdfc1 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.index.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index.tsx
@@ -11,7 +11,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs/',
+  '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/',
 )({
   component: Component,
   loader: async ({ context, params }) => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.tsx
similarity index 98%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.tsx
index 78492879..24f2a563 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.tsx
@@ -11,7 +11,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs',
+  '/_app/$organizationId/$projectId/profiles/$profileId/_tabs',
 )({
   component: Component,
   loader: async ({ context, params }) => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.anonymous.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.anonymous.tsx
similarity index 95%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.anonymous.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.anonymous.tsx
index 2fbff3e2..de74ab35 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.anonymous.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.anonymous.tsx
@@ -7,7 +7,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/_tabs/anonymous',
+  '/_app/$organizationId/$projectId/profiles/_tabs/anonymous',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.identified.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.identified.tsx
similarity index 94%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.identified.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.identified.tsx
index 5ce82831..569ef42f 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.identified.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.identified.tsx
@@ -7,7 +7,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/_tabs/identified',
+  '/_app/$organizationId/$projectId/profiles/_tabs/identified',
 )({
   head: () => {
     return {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.index.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.index.tsx
similarity index 85%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.index.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.index.tsx
index a8d8046b..4be908ad 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.index.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/_tabs/',
+  '/_app/$organizationId/$projectId/profiles/_tabs/',
 )({
   component: Component,
   beforeLoad({ params }) {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.power-users.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.power-users.tsx
similarity index 94%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.power-users.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.power-users.tsx
index 80e96057..32595ea6 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.power-users.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.power-users.tsx
@@ -6,7 +6,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/_tabs/power-users',
+  '/_app/$organizationId/$projectId/profiles/_tabs/power-users',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.tsx
similarity index 96%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.tsx
index fc397c37..7aa3df7c 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.profiles._tabs.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles._tabs.tsx
@@ -5,7 +5,7 @@ import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
 import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/profiles/_tabs',
+  '/_app/$organizationId/$projectId/profiles/_tabs',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.realtime.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
similarity index 98%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.realtime.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
index 20a038f3..62bf3c62 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.realtime.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
@@ -12,7 +12,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/realtime',
+  '/_app/$organizationId/$projectId/realtime',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.references.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.references.tsx
similarity index 99%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.references.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.references.tsx
index 1c4b6e7f..7e3b8e64 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.references.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.references.tsx
@@ -33,7 +33,7 @@ import { PlusIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/references',
+  '/_app/$organizationId/$projectId/references',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.reports.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.reports.tsx
similarity index 92%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.reports.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.reports.tsx
index 5a7a7845..43c6d545 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.reports.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.reports.tsx
@@ -4,7 +4,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/reports',
+  '/_app/$organizationId/$projectId/reports',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.reports_.$reportId.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.reports_.$reportId.tsx
similarity index 95%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.reports_.$reportId.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.reports_.$reportId.tsx
index 317cc1bd..714ec89f 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.reports_.$reportId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.reports_.$reportId.tsx
@@ -7,7 +7,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/reports_/$reportId',
+  '/_app/$organizationId/$projectId/reports_/$reportId',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.sessions.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.sessions.tsx
similarity index 96%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.sessions.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.sessions.tsx
index 610f9422..7fb9e506 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.sessions.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.sessions.tsx
@@ -13,7 +13,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/sessions',
+  '/_app/$organizationId/$projectId/sessions',
 )({
   component: Component,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.sessions_.$sessionId.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
similarity index 98%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.sessions_.$sessionId.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
index f795cbf5..9bc18003 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.sessions_.$sessionId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
@@ -16,7 +16,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { parseAsIsoDateTime, useQueryState } from 'nuqs';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/sessions_/$sessionId',
+  '/_app/$organizationId/$projectId/sessions_/$sessionId',
 )({
   component: Component,
   loader: async ({ context, params }) => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.clients.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.clients.tsx
similarity index 89%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.clients.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.clients.tsx
index c899b09d..5c46a85d 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.clients.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.clients.tsx
@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/settings/_tabs/clients',
+  '/_app/$organizationId/$projectId/settings/_tabs/clients',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.details.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.details.tsx
similarity index 94%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.details.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.details.tsx
index d42c0a3d..535a03e0 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.details.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.details.tsx
@@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/settings/_tabs/details',
+  '/_app/$organizationId/$projectId/settings/_tabs/details',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.events.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.events.tsx
similarity index 93%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.events.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.events.tsx
index 7f04c53c..41be9109 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.events.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.events.tsx
@@ -6,7 +6,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/settings/_tabs/events',
+  '/_app/$organizationId/$projectId/settings/_tabs/events',
 )({
   component: Component,
 });
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.index.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.index.tsx
similarity index 85%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.index.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.index.tsx
index daf22f3a..04f1c0cc 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.index.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/settings/_tabs/',
+  '/_app/$organizationId/$projectId/settings/_tabs/',
 )({
   component: Component,
   beforeLoad: ({ params }) => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.tsx
similarity index 97%
rename from apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.tsx
rename to apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.tsx
index 0c7f217a..620894cd 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.settings._tabs.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.tsx
@@ -10,7 +10,7 @@ import {
 } from '@tanstack/react-router';
 
 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId_/settings/_tabs',
+  '/_app/$organizationId/$projectId/settings/_tabs',
 )({
   component: ProjectDashboard,
   head: () => {
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.tsx
index 25837b31..b00437ec 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.tsx
@@ -1,19 +1,9 @@
-import {
-  OverviewFilterButton,
-  OverviewFiltersButtons,
-} from '@/components/overview/filters/overview-filters-buttons';
-import { LiveCounter } from '@/components/overview/live-counter';
-import { OverviewInterval } from '@/components/overview/overview-interval';
-import OverviewMetrics from '@/components/overview/overview-metrics';
-import { OverviewRange } from '@/components/overview/overview-range';
-import { OverviewShare } from '@/components/overview/overview-share';
-import OverviewTopDevices from '@/components/overview/overview-top-devices';
-import OverviewTopEvents from '@/components/overview/overview-top-events';
-import OverviewTopGeo from '@/components/overview/overview-top-geo';
-import OverviewTopPages from '@/components/overview/overview-top-pages';
-import OverviewTopSources from '@/components/overview/overview-top-sources';
+import BillingPrompt from '@/components/organization/billing-prompt';
+import { useTRPC } from '@/integrations/trpc/react';
 import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
-import { createFileRoute } from '@tanstack/react-router';
+import { FREE_PRODUCT_IDS } from '@openpanel/payments';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Outlet, createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/$organizationId/$projectId')({
   component: ProjectDashboard,
@@ -26,34 +16,43 @@ export const Route = createFileRoute('/_app/$organizationId/$projectId')({
       ],
     };
   },
+  loader: async ({ context, params }) => {
+    await context.queryClient.prefetchQuery(
+      context.trpc.organization.get.queryOptions({
+        organizationId: params.organizationId,
+      }),
+    );
+  },
 });
 
 function ProjectDashboard() {
-  const { projectId } = Route.useParams();
-  return (
-    <div>
-      <div className="col gap-2 p-4">
-        <div className="flex justify-between gap-2">
-          <div className="flex gap-2">
-            <OverviewRange />
-            <OverviewInterval />
-            <OverviewFilterButton mode="events" />
-          </div>
-          <div className="flex gap-2">
-            <LiveCounter projectId={projectId} />
-            <OverviewShare projectId={projectId} />
-          </div>
-        </div>
-        <OverviewFiltersButtons />
-      </div>
-      <div className="grid grid-cols-6 gap-4 p-4 pt-0">
-        <OverviewMetrics projectId={projectId} />
-        <OverviewTopSources projectId={projectId} />
-        <OverviewTopPages projectId={projectId} />
-        <OverviewTopDevices projectId={projectId} />
-        <OverviewTopEvents projectId={projectId} />
-        <OverviewTopGeo projectId={projectId} />
-      </div>
-    </div>
+  const { organizationId } = Route.useParams();
+  const trpc = useTRPC();
+  const { data: organization } = useSuspenseQuery(
+    trpc.organization.get.queryOptions({
+      organizationId,
+    }),
   );
+
+  if (
+    organization.subscriptionProductId &&
+    FREE_PRODUCT_IDS.includes(organization.subscriptionProductId)
+  ) {
+    return <BillingPrompt organization={organization} type={'freePlan'} />;
+  }
+
+  if (organization.isExpired) {
+    return (
+      <BillingPrompt
+        organization={organization}
+        type={
+          organization.subscriptionStatus === 'trialing'
+            ? 'trialEnded'
+            : 'expired'
+        }
+      />
+    );
+  }
+
+  return <Outlet />;
 }
diff --git a/apps/start/src/routes/_app.$organizationId.billing.tsx b/apps/start/src/routes/_app.$organizationId.billing.tsx
index 7a815739..0dcff45d 100644
--- a/apps/start/src/routes/_app.$organizationId.billing.tsx
+++ b/apps/start/src/routes/_app.$organizationId.billing.tsx
@@ -1,9 +1,6 @@
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
 import FullPageLoadingState from '@/components/full-page-loading-state';
 import Billing from '@/components/organization/billing';
-import { BillingFaq } from '@/components/organization/billing-faq';
-import CurrentSubscription from '@/components/organization/current-subscription';
-import Usage from '@/components/organization/usage';
 import { PageHeader } from '@/components/page-header';
 import { useTRPC } from '@/integrations/trpc/react';
 import { PAGE_TITLES, createOrganizationTitle } from '@/utils/title';
@@ -22,6 +19,20 @@ export const Route = createFileRoute('/_app/$organizationId/billing')({
       ],
     };
   },
+  beforeLoad: async ({ params, context }) => {
+    await Promise.all([
+      context.queryClient.prefetchQuery(
+        context.trpc.subscription.products.queryOptions({
+          organizationId: params.organizationId,
+        }),
+      ),
+      context.queryClient.prefetchQuery(
+        context.trpc.subscription.getCurrent.queryOptions({
+          organizationId: params.organizationId,
+        }),
+      ),
+    ]);
+  },
 });
 
 function OrganizationPage() {
@@ -51,14 +62,7 @@ function OrganizationPage() {
         className="mb-8"
       />
 
-      <div className="flex flex-col-reverse md:flex-row gap-8 max-w-screen-lg">
-        <div className="col gap-8 w-full">
-          <Billing organization={organization} />
-          <Usage organization={organization} />
-          <BillingFaq />
-        </div>
-        <CurrentSubscription organization={organization} />
-      </div>
+      <Billing organization={organization} />
     </div>
   );
 }
diff --git a/apps/start/src/routes/_app.$organizationId.tsx b/apps/start/src/routes/_app.$organizationId.tsx
index 1dfc783a..59aad41c 100644
--- a/apps/start/src/routes/_app.$organizationId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.tsx
@@ -2,7 +2,6 @@ import FullPageLoadingState from '@/components/full-page-loading-state';
 import { LinkButton } from '@/components/ui/button';
 import { useTRPC } from '@/integrations/trpc/react';
 import { cn } from '@/utils/cn';
-import { FREE_PRODUCT_IDS } from '@openpanel/payments';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import {
   Outlet,
@@ -106,24 +105,9 @@ function Component() {
           </LinkButton>
         </Alert>
       )}
-      {organization.subscriptionEndsAt && organization.isExpired && (
-        <Alert
-          title="Subscription expired"
-          description={`Your subscription has expired. You can reactivate it by choosing a new plan below. It expired on ${format(organization.subscriptionEndsAt, 'PPP')}`}
-        >
-          <LinkButton
-            to="/$organizationId/billing"
-            params={{
-              organizationId: organizationId,
-            }}
-          >
-            Reactivate
-          </LinkButton>
-        </Alert>
-      )}
       {organization.subscriptionEndsAt && organization.isWillBeCanceled && (
         <Alert
-          title="Subscription will becanceled"
+          title="Subscription will be canceled"
           description={`You have canceled your subscription. You can reactivate it by choosing a new plan below. It'll expire on ${format(organization.subscriptionEndsAt, 'PPP')}`}
         >
           <LinkButton
@@ -151,24 +135,6 @@ function Component() {
           </LinkButton>
         </Alert>
       )}
-      {organization.subscriptionProductId &&
-        FREE_PRODUCT_IDS.includes(organization.subscriptionProductId) && (
-          <Alert
-            title="Free plan is removed"
-            description="We've removed the free plan. You can upgrade to a paid plan to continue using OpenPanel."
-            className="bg-orange-400/40 border-orange-400/50"
-          >
-            <LinkButton
-              className="bg-orange-400 text-white hover:bg-orange-400/80"
-              to="/$organizationId/billing"
-              params={{
-                organizationId: organizationId,
-              }}
-            >
-              Upgrade
-            </LinkButton>
-          </Alert>
-        )}
       <Outlet />
     </>
   );
diff --git a/apps/start/src/styles.css b/apps/start/src/styles.css
index ea40cab8..616bf314 100644
--- a/apps/start/src/styles.css
+++ b/apps/start/src/styles.css
@@ -327,4 +327,16 @@ button {
 .animate-float-2 {
   animation: float-2 3.5s ease-in-out infinite;
   animation-delay: 1s;
+}
+
+/* Slow ping animation for success modal */
+@keyframes ping-slow {
+  75%, 100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+
+.animate-ping-slow {
+  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
\ No newline at end of file
diff --git a/packages/db/src/clickhouse/query-builder.ts b/packages/db/src/clickhouse/query-builder.ts
index 351ef6b1..08bdb007 100644
--- a/packages/db/src/clickhouse/query-builder.ts
+++ b/packages/db/src/clickhouse/query-builder.ts
@@ -261,6 +261,62 @@ export class Query<T = any> {
     return this;
   }
 
+  /**
+   * Safe version of fill that only applies WITH FILL if the date range is valid
+   * Prevents ClickHouse errors when TO value is less than FROM value
+   */
+  safeFill(
+    from: string | Date | Expression,
+    to: string | Date | Expression,
+    step: string | Expression,
+  ): this {
+    // Check if the date range is valid
+    const isValid = this.isValidDateRange(from, to);
+    if (isValid) {
+      return this.fill(from, to, step);
+    }
+    // Skip fill if date range is invalid
+    return this;
+  }
+
+  private isValidDateRange(
+    from: string | Date | Expression,
+    to: string | Date | Expression,
+  ): boolean {
+    try {
+      // If either is an Expression, assume it's valid (can't easily parse)
+      if (from instanceof Expression || to instanceof Expression) {
+        return true;
+      }
+
+      let fromDate: Date;
+      let toDate: Date;
+
+      if (from instanceof Date) {
+        fromDate = from;
+      } else if (typeof from === 'string') {
+        // Try parsing various date formats
+        fromDate = new Date(from);
+      } else {
+        return true; // Can't determine, assume valid
+      }
+
+      if (to instanceof Date) {
+        toDate = to;
+      } else if (typeof to === 'string') {
+        toDate = new Date(to);
+      } else {
+        return true; // Can't determine, assume valid
+      }
+
+      // Check if dates are valid and to is after from
+      return !isNaN(fromDate.getTime()) && !isNaN(toDate.getTime()) && toDate > fromDate;
+    } catch {
+      // If any error, assume valid to avoid breaking existing functionality
+      return true;
+    }
+  }
+
   private escapeDate(value: string | Date): string {
     if (value instanceof Date) {
       return sqlstring.escape(clix.datetime(value));
diff --git a/packages/db/src/prisma-client.ts b/packages/db/src/prisma-client.ts
index 97a2136c..e5900dd6 100644
--- a/packages/db/src/prisma-client.ts
+++ b/packages/db/src/prisma-client.ts
@@ -117,6 +117,22 @@ const getPrismaClient = () => {
               return new Date(Date.now() + 1000 * 60 * 60 * 24);
             },
           },
+          isActive: {
+            needs: {
+              subscriptionStatus: true,
+              subscriptionEndsAt: true,
+              subscriptionCanceledAt: true,
+            },
+            compute(org) {
+              return (
+                org.subscriptionStatus === 'active' &&
+                org.subscriptionEndsAt &&
+                org.subscriptionEndsAt > new Date() &&
+                !isCanceled(org) &&
+                !isWillBeCanceled(org)
+              );
+            },
+          },
           isTrial: {
             needs: { subscriptionStatus: true, subscriptionEndsAt: true },
             compute(org) {
diff --git a/packages/db/src/services/chart.service.ts b/packages/db/src/services/chart.service.ts
index 9deca5d3..f3eef631 100644
--- a/packages/db/src/services/chart.service.ts
+++ b/packages/db/src/services/chart.service.ts
@@ -11,6 +11,21 @@ import type {
 import { TABLE_NAMES, formatClickhouseDate } from '../clickhouse/client';
 import { createSqlBuilder } from '../sql-builder';
 
+/**
+ * Helper function to check if endDate is after startDate
+ * This prevents ClickHouse errors when WITH FILL TO value is less than FROM value
+ */
+function isValidDateRange(startDate: string, endDate: string): boolean {
+  try {
+    const start = DateTime.fromFormat(startDate, 'yyyy-MM-dd HH:mm:ss');
+    const end = DateTime.fromFormat(endDate, 'yyyy-MM-dd HH:mm:ss');
+    return end > start;
+  } catch {
+    // If date parsing fails, assume invalid range
+    return false;
+  }
+}
+
 export function transformPropertyKey(property: string) {
   const propertyPatterns = ['properties', 'profile.properties'];
   const match = propertyPatterns.find((pattern) =>
@@ -103,29 +118,43 @@ export function getChartSql({
   }
 
   sb.select.count = 'count(*) as count';
+
+  // Only apply WITH FILL if the date range is valid (endDate > startDate)
+  const hasValidDateRange = isValidDateRange(startDate, endDate);
+
   switch (interval) {
     case 'minute': {
-      sb.fill = `FROM toStartOfMinute(toDateTime('${startDate}')) TO toStartOfMinute(toDateTime('${endDate}')) STEP toIntervalMinute(1)`;
+      if (hasValidDateRange) {
+        sb.fill = `FROM toStartOfMinute(toDateTime('${startDate}')) TO toStartOfMinute(toDateTime('${endDate}')) STEP toIntervalMinute(1)`;
+      }
       sb.select.date = 'toStartOfMinute(created_at) as date';
       break;
     }
     case 'hour': {
-      sb.fill = `FROM toStartOfHour(toDateTime('${startDate}')) TO toStartOfHour(toDateTime('${endDate}')) STEP toIntervalHour(1)`;
+      if (hasValidDateRange) {
+        sb.fill = `FROM toStartOfHour(toDateTime('${startDate}')) TO toStartOfHour(toDateTime('${endDate}')) STEP toIntervalHour(1)`;
+      }
       sb.select.date = 'toStartOfHour(created_at) as date';
       break;
     }
     case 'day': {
-      sb.fill = `FROM toStartOfDay(toDateTime('${startDate}')) TO toStartOfDay(toDateTime('${endDate}')) STEP toIntervalDay(1)`;
+      if (hasValidDateRange) {
+        sb.fill = `FROM toStartOfDay(toDateTime('${startDate}')) TO toStartOfDay(toDateTime('${endDate}')) STEP toIntervalDay(1)`;
+      }
       sb.select.date = 'toStartOfDay(created_at) as date';
       break;
     }
     case 'week': {
-      sb.fill = `FROM toStartOfWeek(toDateTime('${startDate}'), 1, '${timezone}') TO toStartOfWeek(toDateTime('${endDate}'), 1, '${timezone}') STEP toIntervalWeek(1)`;
+      if (hasValidDateRange) {
+        sb.fill = `FROM toStartOfWeek(toDateTime('${startDate}'), 1, '${timezone}') TO toStartOfWeek(toDateTime('${endDate}'), 1, '${timezone}') STEP toIntervalWeek(1)`;
+      }
       sb.select.date = `toStartOfWeek(created_at, 1, '${timezone}') as date`;
       break;
     }
     case 'month': {
-      sb.fill = `FROM toStartOfMonth(toDateTime('${startDate}'), '${timezone}') TO toStartOfMonth(toDateTime('${endDate}'), '${timezone}') STEP toIntervalMonth(1)`;
+      if (hasValidDateRange) {
+        sb.fill = `FROM toStartOfMonth(toDateTime('${startDate}'), '${timezone}') TO toStartOfMonth(toDateTime('${endDate}'), '${timezone}') STEP toIntervalMonth(1)`;
+      }
       sb.select.date = `toStartOfMonth(created_at, '${timezone}') as date`;
       break;
     }
diff --git a/packages/db/src/services/organization.service.ts b/packages/db/src/services/organization.service.ts
index e96a9003..de81bd13 100644
--- a/packages/db/src/services/organization.service.ts
+++ b/packages/db/src/services/organization.service.ts
@@ -7,6 +7,27 @@ import { db } from '../prisma-client';
 import { createSqlBuilder } from '../sql-builder';
 import { getOrganizationAccess, getProjectAccess } from './access.service';
 import { type IServiceProject, getProjectById } from './project.service';
+
+/**
+ * Helper function to check if endDate is after startDate
+ * This prevents ClickHouse errors when WITH FILL TO value is less than FROM value
+ */
+function isValidDateRange(startDate: string, endDate: string): boolean {
+  try {
+    const start = DateTime.fromFormat(startDate, 'yyyy-MM-dd HH:mm:ss');
+    const end = DateTime.fromFormat(endDate, 'yyyy-MM-dd HH:mm:ss');
+    return end > start;
+  } catch {
+    // Try alternative format
+    try {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      return !isNaN(start.getTime()) && !isNaN(end.getTime()) && end > start;
+    } catch {
+      return false;
+    }
+  }
+}
 export type IServiceOrganization = Awaited<
   ReturnType<typeof db.organization.findUniqueOrThrow>
 >;
@@ -239,7 +260,19 @@ export async function getOrganizationBillingEventsCountSerie(
   sb.select.count = 'COUNT(*) AS count';
   sb.select.day = `toDate(toStartOf${interval.slice(0, 1).toUpperCase() + interval.slice(1)}(created_at)) AS ${interval}`;
   sb.groupBy.day = interval;
-  sb.orderBy.day = `${interval} WITH FILL FROM toDate(${sqlstring.escape(formatClickhouseDate(startDate, true))}) TO toDate(${sqlstring.escape(formatClickhouseDate(endDate, true))}) STEP INTERVAL 1 ${interval.toUpperCase()}`;
+  
+  // Only apply WITH FILL if the date range is valid (endDate > startDate)
+  const hasValidDateRange = isValidDateRange(
+    formatClickhouseDate(startDate, true),
+    formatClickhouseDate(endDate, true)
+  );
+  
+  if (hasValidDateRange) {
+    sb.orderBy.day = `${interval} WITH FILL FROM toDate(${sqlstring.escape(formatClickhouseDate(startDate, true))}) TO toDate(${sqlstring.escape(formatClickhouseDate(endDate, true))}) STEP INTERVAL 1 ${interval.toUpperCase()}`;
+  } else {
+    sb.orderBy.day = `${interval} ASC`;
+  }
+  
   sb.where.projectIds = `project_id IN (${organization.projects.map((project) => sqlstring.escape(project.id)).join(',')})`;
   sb.where.createdAt = `${interval} BETWEEN ${sqlstring.escape(formatClickhouseDate(startDate, true))} AND ${sqlstring.escape(formatClickhouseDate(endDate, true))}`;
 
diff --git a/packages/db/src/services/overview.service.ts b/packages/db/src/services/overview.service.ts
index 38ef8cc7..abb7c822 100644
--- a/packages/db/src/services/overview.service.ts
+++ b/packages/db/src/services/overview.service.ts
@@ -261,7 +261,7 @@ export class OverviewService {
         .rawWhere(this.getRawWhereClause('events', filters))
         .groupBy(['date', 'ds.bounce_rate'])
         .orderBy('date', 'ASC')
-        .fill(
+        .safeFill(
           clix.toStartOf(
             clix.datetime(
               startDate,
@@ -342,7 +342,7 @@ export class OverviewService {
       .having('sum(sign)', '>', 0)
       .rollup()
       .orderBy('date', 'ASC')
-      .fill(
+      .safeFill(
         clix.toStartOf(
           clix.datetime(
             startDate,
diff --git a/packages/payments/src/prices.ts b/packages/payments/src/prices.ts
index c1846ab3..00f3675e 100644
--- a/packages/payments/src/prices.ts
+++ b/packages/payments/src/prices.ts
@@ -1,3 +1,5 @@
+export type { ProductPrice } from '@polar-sh/sdk/models/components/productprice.js';
+
 export type IPrice = {
   price: number;
   events: number;