From b1bf5423958373ee9e9945cb1606ba28b3a7d2e1 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Thu, 26 Mar 2026 14:29:43 -0700
Subject: [PATCH 1/3] save

Signed-off-by: Yujong Lee <yujonglee.dev@gmail.com>
---
 apps/api/src/main.rs                          |  4 +-
 apps/api/src/rate_limit.rs                    |  2 +-
 apps/desktop/src/ai/hooks/useLLMConnection.ts | 10 ++--
 apps/desktop/src/auth/billing.tsx             |  6 +--
 .../components/oauth/provider-content.tsx     |  8 ++--
 .../src/calendar/components/sidebar.tsx       |  6 +--
 .../src/onboarding/account/after-login.tsx    |  4 +-
 apps/desktop/src/onboarding/account/trial.tsx |  8 ++--
 apps/desktop/src/onboarding/calendar.tsx      |  8 ++--
 .../desktop/src/settings/ai/llm/configure.tsx |  8 ++--
 apps/desktop/src/settings/ai/llm/select.tsx   |  6 +--
 .../src/settings/ai/shared/eligibility.ts     |  4 +-
 .../settings/ai/shared/hypr-cloud-button.tsx  | 12 ++---
 apps/desktop/src/settings/ai/shared/index.tsx |  4 +-
 .../desktop/src/settings/ai/stt/configure.tsx |  8 ++--
 apps/desktop/src/settings/ai/stt/select.tsx   |  6 +--
 apps/desktop/src/sidebar/index.tsx            |  6 ++-
 apps/desktop/src/stt/useSTTConnection.ts      |  4 +-
 apps/web/src/env.ts                           |  1 +
 apps/web/src/functions/billing.ts             | 18 +++++--
 .../_view/app/-account-integrations.tsx       | 13 +++--
 .../routes/_view/app/-account-settings.tsx    |  9 ++--
 .../app/-integrations-upgrade-prompt.tsx      |  8 +---
 apps/web/src/routes/_view/app/checkout.tsx    |  3 +-
 apps/web/src/routes/_view/app/integration.tsx |  2 +-
 apps/web/src/routes/_view/pricing.tsx         | 38 ++++++++++++---
 crates/api-auth/src/lib.rs                    | 40 +++++++++++++---
 crates/supabase-auth/src/claims.rs            | 48 +++++++++++++++++++
 crates/supabase-auth/src/server/mod.rs        | 18 +++++++
 packages/supabase/src/billing.ts              | 28 +++++++++--
 30 files changed, 245 insertions(+), 95 deletions(-)

diff --git a/apps/api/src/main.rs b/apps/api/src/main.rs
index 6d6d255438..bddebf68b0 100644
--- a/apps/api/src/main.rs
+++ b/apps/api/src/main.rs
@@ -110,8 +110,8 @@ async fn app() -> Router {
         )
         .build();
 
-    let auth_state_pro =
-        AuthState::new(&env.supabase.supabase_url).with_required_entitlement("hyprnote_pro");
+    let auth_state_pro = AuthState::new(&env.supabase.supabase_url)
+        .with_required_entitlements(vec!["hyprnote_pro".into(), "hyprnote_lite".into()]);
     let auth_state_basic = AuthState::new(&env.supabase.supabase_url);
     let auth_state_support = AuthState::new(&env.supabase.supabase_url);
 
diff --git a/apps/api/src/rate_limit.rs b/apps/api/src/rate_limit.rs
index 8e8b869ddb..543ca6f457 100644
--- a/apps/api/src/rate_limit.rs
+++ b/apps/api/src/rate_limit.rs
@@ -66,7 +66,7 @@ pub async fn rate_limit(
     }
 
     if let Some(auth) = request.extensions().get::<AuthContext>() {
-        let limiter = if auth.claims.is_pro() {
+        let limiter = if auth.claims.is_paid() {
             &state.limiter_pro
         } else {
             &state.limiter_free
diff --git a/apps/desktop/src/ai/hooks/useLLMConnection.ts b/apps/desktop/src/ai/hooks/useLLMConnection.ts
index 09aa79ded5..2fd2fc7253 100644
--- a/apps/desktop/src/ai/hooks/useLLMConnection.ts
+++ b/apps/desktop/src/ai/hooks/useLLMConnection.ts
@@ -97,11 +97,11 @@ export const useLLMConnection = (): LLMConnectionResult => {
         modelId: current_llm_model,
         providerConfig,
         session: auth?.session,
-        isPro: billing.isPro,
+        isPaid: billing.isPaid,
       }),
     [
       auth,
-      billing.isPro,
+      billing.isPaid,
       current_llm_model,
       current_llm_provider,
       providerConfig,
@@ -119,14 +119,14 @@ const resolveLLMConnection = (params: {
   modelId: string | undefined;
   providerConfig: AIProviderStorage | undefined;
   session: { access_token: string } | null | undefined;
-  isPro: boolean;
+  isPaid: boolean;
 }): LLMConnectionResult => {
   const {
     providerId: rawProviderId,
     modelId,
     providerConfig,
     session,
-    isPro,
+    isPaid,
   } = params;
 
   if (!rawProviderId) {
@@ -166,7 +166,7 @@ const resolveLLMConnection = (params: {
 
   const context: ProviderEligibilityContext = {
     isAuthenticated: !!session,
-    isPro,
+    isPaid,
     config: { base_url: baseUrl, api_key: apiKey },
   };
 
diff --git a/apps/desktop/src/auth/billing.tsx b/apps/desktop/src/auth/billing.tsx
index 132cd6f914..0a3d69247e 100644
--- a/apps/desktop/src/auth/billing.tsx
+++ b/apps/desktop/src/auth/billing.tsx
@@ -60,7 +60,7 @@ export function BillingProvider({ children }: { children: ReactNode }) {
   const isReady = !claimsQuery.isPending;
 
   const canTrialQuery = useQuery({
-    enabled: !!auth?.session && !billing.isPro,
+    enabled: !!auth?.session && !billing.isPaid,
     queryKey: [auth?.session?.user.id ?? "", "canStartTrial"],
     queryFn: async () => {
       const headers = auth?.getHeaders();
@@ -78,10 +78,10 @@ export function BillingProvider({ children }: { children: ReactNode }) {
 
   const canStartTrial = useMemo(
     () => ({
-      data: billing.isPro ? false : (canTrialQuery.data ?? false),
+      data: billing.isPaid ? false : (canTrialQuery.data ?? false),
       isPending: canTrialQuery.isPending,
     }),
-    [billing.isPro, canTrialQuery.data, canTrialQuery.isPending],
+    [billing.isPaid, canTrialQuery.data, canTrialQuery.isPending],
   );
 
   const upgradeToPro = useCallback(async () => {
diff --git a/apps/desktop/src/calendar/components/oauth/provider-content.tsx b/apps/desktop/src/calendar/components/oauth/provider-content.tsx
index b0d5cf7bbe..a219533659 100644
--- a/apps/desktop/src/calendar/components/oauth/provider-content.tsx
+++ b/apps/desktop/src/calendar/components/oauth/provider-content.tsx
@@ -22,8 +22,8 @@ import { buildWebAppUrl } from "~/shared/utils";
 
 export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
   const auth = useAuth();
-  const { isPro, upgradeToPro } = useBillingAccess();
-  const { data: connections, isError } = useConnections(isPro);
+  const { isPaid, upgradeToPro } = useBillingAccess();
+  const { data: connections, isError } = useConnections(isPaid);
   const providerConnections = useMemo(
     () =>
       connections?.filter(
@@ -57,14 +57,14 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
     );
   }
 
-  if (!isPro) {
+  if (!isPaid) {
     return (
       <div className="pt-1 pb-2">
         <button
           onClick={upgradeToPro}
           className="cursor-pointer text-xs text-neutral-600 underline transition-colors hover:text-neutral-900"
         >
-          Upgrade to Pro to connect
+          Upgrade to connect
         </button>
       </div>
     );
diff --git a/apps/desktop/src/calendar/components/sidebar.tsx b/apps/desktop/src/calendar/components/sidebar.tsx
index 7008cd5ce2..82dd175d78 100644
--- a/apps/desktop/src/calendar/components/sidebar.tsx
+++ b/apps/desktop/src/calendar/components/sidebar.tsx
@@ -78,8 +78,8 @@ function ProviderAccordionItem({
   calendar: ReturnType<typeof usePermission>;
 }) {
   const auth = useAuth();
-  const { isPro } = useBillingAccess();
-  const { data: connections, isPending, isError } = useConnections(isPro);
+  const { isPaid } = useBillingAccess();
+  const { data: connections, isPending, isError } = useConnections(isPaid);
   const providerConnections =
     connections?.filter(
       (connection) => connection.integration_id === provider.nangoIntegrationId,
@@ -87,7 +87,7 @@ function ProviderAccordionItem({
   const canAddAccount =
     !!provider.nangoIntegrationId &&
     !!auth.session &&
-    isPro &&
+    isPaid &&
     !isPending &&
     !isError;
   const shouldConnectOnClick =
diff --git a/apps/desktop/src/onboarding/account/after-login.tsx b/apps/desktop/src/onboarding/account/after-login.tsx
index 76926c7960..c92b2d1191 100644
--- a/apps/desktop/src/onboarding/account/after-login.tsx
+++ b/apps/desktop/src/onboarding/account/after-login.tsx
@@ -19,8 +19,8 @@ function TrialStatusDisplay({ trialPhase }: { trialPhase: TrialPhase }) {
         </>
       )}
 
-      {trialPhase === "already-pro" && (
-        <StepRow status="done" label="You have an active Pro plan" />
+      {trialPhase === "already-paid" && (
+        <StepRow status="done" label="You have an active plan" />
       )}
 
       {trialPhase === "already-trialing" && (
diff --git a/apps/desktop/src/onboarding/account/trial.tsx b/apps/desktop/src/onboarding/account/trial.tsx
index aca2108268..bcb2928037 100644
--- a/apps/desktop/src/onboarding/account/trial.tsx
+++ b/apps/desktop/src/onboarding/account/trial.tsx
@@ -16,7 +16,7 @@ import * as settings from "~/store/tinybase/store/settings";
 export type TrialPhase =
   | "checking"
   | "starting"
-  | "already-pro"
+  | "already-paid"
   | "already-trialing"
   | { done: StartTrialReason | "error" };
 
@@ -60,11 +60,11 @@ export function useTrialFlow(onContinue: () => void) {
   useEffect(() => {
     if (!auth?.session || !billing.isReady || hasTriggeredRef.current) return;
 
-    if (billing.isPro && !billing.isTrialing) {
+    if (billing.isPaid && !billing.isTrialing) {
       hasTriggeredRef.current = true;
       void analyticsCommands.event({
         event: "trial_flow_skipped",
-        properties: { reason: "already_pro" },
+        properties: { reason: "already_paid" },
       });
       if (store) configureProSettings(store);
       setTimeout(onContinue, 1500);
@@ -89,7 +89,7 @@ export function useTrialFlow(onContinue: () => void) {
   if (!auth?.session) return null;
   if (!billing.isReady) return "checking" as const;
 
-  if (billing.isPro && !billing.isTrialing) return "already-pro" as const;
+  if (billing.isPaid && !billing.isTrialing) return "already-paid" as const;
   if (billing.isTrialing) return "already-trialing" as const;
 
   if (mutation.isPending) return "starting" as const;
diff --git a/apps/desktop/src/onboarding/calendar.tsx b/apps/desktop/src/onboarding/calendar.tsx
index fffa6f13ef..4c27fa04c6 100644
--- a/apps/desktop/src/onboarding/calendar.tsx
+++ b/apps/desktop/src/onboarding/calendar.tsx
@@ -244,8 +244,8 @@ function addIntegrationMenus({
 
 function GoogleCalendarProvider({ onSignIn }: { onSignIn: () => void }) {
   const auth = useAuth();
-  const { isPro, isReady, upgradeToPro } = useBillingAccess();
-  const { data: connections, isPending, isError } = useConnections(isPro);
+  const { isPaid, isReady, upgradeToPro } = useBillingAccess();
+  const { data: connections, isPending, isError } = useConnections(isPaid);
   const providerConnections = useMemo(
     () =>
       connections?.filter(
@@ -261,7 +261,7 @@ function GoogleCalendarProvider({ onSignIn }: { onSignIn: () => void }) {
       return;
     }
 
-    if (!isPro) {
+    if (!isPaid) {
       upgradeToPro();
       return;
     }
@@ -271,7 +271,7 @@ function GoogleCalendarProvider({ onSignIn }: { onSignIn: () => void }) {
       undefined,
       "connect",
     );
-  }, [auth.session, isPro, onSignIn, upgradeToPro]);
+  }, [auth.session, isPaid, onSignIn, upgradeToPro]);
 
   if (!GOOGLE_PROVIDER) {
     return null;
diff --git a/apps/desktop/src/settings/ai/llm/configure.tsx b/apps/desktop/src/settings/ai/llm/configure.tsx
index 1d1082e404..772d37a96d 100644
--- a/apps/desktop/src/settings/ai/llm/configure.tsx
+++ b/apps/desktop/src/settings/ai/llm/configure.tsx
@@ -103,7 +103,7 @@ function HyprProviderCard({
 }
 
 function HyprProviderAutoRow({ highlight }: { highlight?: boolean }) {
-  const { isPro, canStartTrial, upgradeToPro } = useBillingAccess();
+  const { isPaid, canStartTrial, upgradeToPro } = useBillingAccess();
 
   const handleSelectProvider = settings.UI.useSetValueCallback(
     "current_llm_provider",
@@ -120,13 +120,13 @@ function HyprProviderAutoRow({ highlight }: { highlight?: boolean }) {
   );
 
   const handleClick = useCallback(() => {
-    if (!isPro) {
+    if (!isPaid) {
       upgradeToPro();
     } else {
       handleSelectProvider("hyprnote");
       handleSelectModel("Auto");
     }
-  }, [isPro, upgradeToPro, handleSelectProvider, handleSelectModel]);
+  }, [isPaid, upgradeToPro, handleSelectProvider, handleSelectModel]);
 
   return (
     <HyprProviderRow>
@@ -137,7 +137,7 @@ function HyprProviderAutoRow({ highlight }: { highlight?: boolean }) {
         </p>
       </div>
       <HyprCloudCTAButton
-        isPro={isPro}
+        isPaid={isPaid}
         canStartTrial={canStartTrial.data}
         highlight={highlight}
         onClick={handleClick}
diff --git a/apps/desktop/src/settings/ai/llm/select.tsx b/apps/desktop/src/settings/ai/llm/select.tsx
index ec2c65d40b..835bc2eaf5 100644
--- a/apps/desktop/src/settings/ai/llm/select.tsx
+++ b/apps/desktop/src/settings/ai/llm/select.tsx
@@ -116,7 +116,7 @@ export function SelectProviderAndModel() {
   };
 
   const handleProviderChange = (provider: string) => {
-    if (provider === "hyprnote" && !billing.isPro) {
+    if (provider === "hyprnote" && !billing.isPaid) {
       billing.upgradeToPro();
       return;
     }
@@ -186,7 +186,7 @@ export function SelectProviderAndModel() {
                     provider.requirements,
                     "pro",
                   );
-                  const locked = requiresPro && !billing.isPro;
+                  const locked = requiresPro && !billing.isPaid;
 
                   return (
                     <SelectItem
@@ -279,7 +279,7 @@ function useConfiguredMapping(): Record<string, ProviderStatus> {
         const eligible =
           getProviderSelectionBlockers(provider.requirements, {
             isAuthenticated: !!auth?.session,
-            isPro: billing.isPro,
+            isPaid: billing.isPaid,
             config: { base_url: baseUrl, api_key: apiKey },
           }).length === 0;
 
diff --git a/apps/desktop/src/settings/ai/shared/eligibility.ts b/apps/desktop/src/settings/ai/shared/eligibility.ts
index e398106c32..85037feff0 100644
--- a/apps/desktop/src/settings/ai/shared/eligibility.ts
+++ b/apps/desktop/src/settings/ai/shared/eligibility.ts
@@ -33,7 +33,7 @@ export function getRequiredConfigFields(
 
 export type ProviderEligibilityContext = {
   isAuthenticated: boolean;
-  isPro: boolean;
+  isPaid: boolean;
   config?: { base_url?: string; api_key?: string };
 };
 
@@ -51,7 +51,7 @@ export function getProviderSelectionBlockers(
         }
         break;
       case "requires_entitlement":
-        if (req.entitlement === "pro" && !context.isPro) {
+        if (req.entitlement === "pro" && !context.isPaid) {
           blockers.push({ code: "requires_entitlement", entitlement: "pro" });
         }
         break;
diff --git a/apps/desktop/src/settings/ai/shared/hypr-cloud-button.tsx b/apps/desktop/src/settings/ai/shared/hypr-cloud-button.tsx
index 06f62a0872..e7974c50a2 100644
--- a/apps/desktop/src/settings/ai/shared/hypr-cloud-button.tsx
+++ b/apps/desktop/src/settings/ai/shared/hypr-cloud-button.tsx
@@ -14,23 +14,23 @@ export function HyprProviderRow({ children }: { children: React.ReactNode }) {
 }
 
 export function HyprCloudCTAButton({
-  isPro,
+  isPaid,
   canStartTrial,
   highlight,
   onClick,
 }: {
-  isPro: boolean;
+  isPaid: boolean;
   canStartTrial: boolean | undefined;
   highlight?: boolean;
   onClick: () => void;
 }) {
-  const buttonLabel = isPro
+  const buttonLabel = isPaid
     ? "Ready to use"
     : canStartTrial
       ? "Start Free Trial"
-      : "Upgrade to Pro";
+      : "Upgrade";
 
-  const showShimmer = highlight && !isPro;
+  const showShimmer = highlight && !isPaid;
 
   return (
     <button
@@ -39,7 +39,7 @@ export function HyprCloudCTAButton({
         "relative h-8.5 w-fit overflow-hidden",
         "rounded-full px-4 text-center font-mono text-xs",
         "transition-all duration-150",
-        isPro
+        isPaid
           ? "bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 shadow-xs hover:shadow-md"
           : "bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
       ])}
diff --git a/apps/desktop/src/settings/ai/shared/index.tsx b/apps/desktop/src/settings/ai/shared/index.tsx
index 7cb837d2fc..d500e377cf 100644
--- a/apps/desktop/src/settings/ai/shared/index.tsx
+++ b/apps/desktop/src/settings/ai/shared/index.tsx
@@ -90,7 +90,7 @@ function useIsProviderConfigured(
   return (
     getProviderSelectionBlockers(providerDef.requirements, {
       isAuthenticated: true,
-      isPro: billing.isPro,
+      isPaid: billing.isPaid,
       config: { base_url: baseUrl, api_key: apiKey },
     }).length === 0
   );
@@ -110,7 +110,7 @@ export function NonHyprProviderCard({
   const billing = useBillingAccess();
   const [provider, setProvider] = useProvider(providerType, config.id);
   const locked =
-    requiresEntitlement(config.requirements, "pro") && !billing.isPro;
+    requiresEntitlement(config.requirements, "pro") && !billing.isPaid;
   const isConfigured = useIsProviderConfigured(
     config.id,
     providerType,
diff --git a/apps/desktop/src/settings/ai/stt/configure.tsx b/apps/desktop/src/settings/ai/stt/configure.tsx
index 64a9d76aff..34078f9d92 100644
--- a/apps/desktop/src/settings/ai/stt/configure.tsx
+++ b/apps/desktop/src/settings/ai/stt/configure.tsx
@@ -350,7 +350,7 @@ function CactusSettings({ models }: { models: LocalModel[] }) {
 }
 
 function HyprProviderCloudRow() {
-  const { isPro, canStartTrial, upgradeToPro } = useBillingAccess();
+  const { isPaid, canStartTrial, upgradeToPro } = useBillingAccess();
   const { shouldHighlightDownload } = useSttSettings();
 
   const handleSelectProvider = settings.UI.useSetValueCallback(
@@ -368,13 +368,13 @@ function HyprProviderCloudRow() {
   );
 
   const handleClick = useCallback(() => {
-    if (!isPro) {
+    if (!isPaid) {
       upgradeToPro();
     } else {
       handleSelectProvider("hyprnote");
       handleSelectModel("cloud");
     }
-  }, [isPro, upgradeToPro, handleSelectProvider, handleSelectModel]);
+  }, [isPaid, upgradeToPro, handleSelectProvider, handleSelectModel]);
 
   return (
     <HyprProviderRow>
@@ -385,7 +385,7 @@ function HyprProviderCloudRow() {
         </p>
       </div>
       <HyprCloudCTAButton
-        isPro={isPro}
+        isPaid={isPaid}
         canStartTrial={canStartTrial.data}
         highlight={shouldHighlightDownload}
         onClick={handleClick}
diff --git a/apps/desktop/src/settings/ai/stt/select.tsx b/apps/desktop/src/settings/ai/stt/select.tsx
index 9b909a40e6..105d182947 100644
--- a/apps/desktop/src/settings/ai/stt/select.tsx
+++ b/apps/desktop/src/settings/ai/stt/select.tsx
@@ -161,7 +161,7 @@ export function SelectProviderAndModel() {
                       provider.requirements,
                       "pro",
                     );
-                    const locked = requiresPro && !billing.isPro;
+                    const locked = requiresPro && !billing.isPaid;
                     return (
                       <SelectItem
                         key={provider.id}
@@ -343,7 +343,7 @@ function useConfiguredMapping(): Record<
       const eligible =
         getProviderSelectionBlockers(provider.requirements, {
           isAuthenticated: true,
-          isPro: billing.isPro,
+          isPaid: billing.isPaid,
           config: { base_url: baseUrl, api_key: apiKey },
         }).length === 0;
 
@@ -353,7 +353,7 @@ function useConfiguredMapping(): Record<
 
       if (provider.id === "hyprnote") {
         const models: ModelEntry[] = [
-          { id: "cloud", isDownloaded: billing.isPro, category: "latest" },
+          { id: "cloud", isDownloaded: billing.isPaid, category: "latest" },
         ];
 
         if (isAppleSilicon) {
diff --git a/apps/desktop/src/sidebar/index.tsx b/apps/desktop/src/sidebar/index.tsx
index c7b0e6cca8..ede6720ef7 100644
--- a/apps/desktop/src/sidebar/index.tsx
+++ b/apps/desktop/src/sidebar/index.tsx
@@ -44,12 +44,16 @@ export function LeftSidebar() {
   });
 
   const isSettingsMode = currentTab?.type === "settings";
+  const isCalendarMode = currentTab?.type === "calendar";
   const isContactsMode = currentTab?.type === "contacts";
   const isCalendarMode = currentTab?.type === "calendar";
   const showCollapseButton =
     !isSettingsMode && !isContactsMode && !isCalendarMode;
   const showSearchResults =
-    !isSettingsMode && !isContactsMode && query.trim() !== "";
+    !isSettingsMode &&
+    !isCalendarMode &&
+    !isContactsMode &&
+    query.trim() !== "";
 
   return (
     <div className="flex h-full w-70 shrink-0 flex-col gap-1 overflow-hidden">
diff --git a/apps/desktop/src/stt/useSTTConnection.ts b/apps/desktop/src/stt/useSTTConnection.ts
index 569784bfcb..23a4235ae6 100644
--- a/apps/desktop/src/stt/useSTTConnection.ts
+++ b/apps/desktop/src/stt/useSTTConnection.ts
@@ -96,7 +96,7 @@ export const useSTTConnection = () => {
     }
 
     if (isCloudModel) {
-      if (!auth?.session || !billing.isPro) {
+      if (!auth?.session || !billing.isPaid) {
         return null;
       }
 
@@ -127,7 +127,7 @@ export const useSTTConnection = () => {
     baseUrl,
     apiKey,
     auth,
-    billing.isPro,
+    billing.isPaid,
   ]);
 
   return {
diff --git a/apps/web/src/env.ts b/apps/web/src/env.ts
index ab624329a7..99712bde0a 100644
--- a/apps/web/src/env.ts
+++ b/apps/web/src/env.ts
@@ -26,6 +26,7 @@ export const env = createEnv({
     STRIPE_SECRET_KEY: requiredInProd(z.string().min(1)),
     STRIPE_MONTHLY_PRICE_ID: requiredInProd(z.string().min(1)),
     STRIPE_YEARLY_PRICE_ID: requiredInProd(z.string().min(1)),
+    STRIPE_LITE_MONTHLY_PRICE_ID: requiredInProd(z.string().min(1)),
 
     LOOPS_KEY: requiredInProd(z.string().min(1)),
 
diff --git a/apps/web/src/functions/billing.ts b/apps/web/src/functions/billing.ts
index 4dd2588d34..15f7c9c4ee 100644
--- a/apps/web/src/functions/billing.ts
+++ b/apps/web/src/functions/billing.ts
@@ -59,6 +59,7 @@ const getStripeCustomerIdForUser = async (
 
 const createCheckoutSessionInput = z.object({
   period: z.enum(["monthly", "yearly"]),
+  plan: z.enum(["lite", "pro"]).default("pro"),
   scheme: desktopSchemeSchema.optional(),
 });
 
@@ -93,7 +94,11 @@ export const createCheckoutSession = createServerFn({ method: "POST" })
       );
 
       if (activeSubscription) {
-        return { url: null };
+        const portalSession = await stripe.billingPortal.sessions.create({
+          customer: stripeCustomerId,
+          return_url: `${env.VITE_APP_URL}/app/account`,
+        });
+        return { url: portalSession.url };
       }
     }
 
@@ -121,9 +126,14 @@ export const createCheckoutSession = createServerFn({ method: "POST" })
     }
 
     const priceId =
-      data.period === "yearly"
-        ? requireEnv(env.STRIPE_YEARLY_PRICE_ID, "STRIPE_YEARLY_PRICE_ID")
-        : requireEnv(env.STRIPE_MONTHLY_PRICE_ID, "STRIPE_MONTHLY_PRICE_ID");
+      data.plan === "lite"
+        ? requireEnv(
+            env.STRIPE_LITE_MONTHLY_PRICE_ID,
+            "STRIPE_LITE_MONTHLY_PRICE_ID",
+          )
+        : data.period === "yearly"
+          ? requireEnv(env.STRIPE_YEARLY_PRICE_ID, "STRIPE_YEARLY_PRICE_ID")
+          : requireEnv(env.STRIPE_MONTHLY_PRICE_ID, "STRIPE_MONTHLY_PRICE_ID");
 
     const successParams = new URLSearchParams({ success: "true" });
     if (data.scheme) {
diff --git a/apps/web/src/routes/_view/app/-account-integrations.tsx b/apps/web/src/routes/_view/app/-account-integrations.tsx
index 0109fda61d..014706e0a5 100644
--- a/apps/web/src/routes/_view/app/-account-integrations.tsx
+++ b/apps/web/src/routes/_view/app/-account-integrations.tsx
@@ -19,9 +19,9 @@ const INTEGRATIONS = [
 
 export function IntegrationsSettingsCard() {
   const navigate = useNavigate();
-  const { isPro } = useBilling();
-  const { data: connections, isLoading } = useConnections(isPro);
-  const { data: accounts } = useWhoAmI(isPro);
+  const { isPaid } = useBilling();
+  const { data: connections, isLoading } = useConnections(isPaid);
+  const { data: accounts } = useWhoAmI(isPaid);
 
   const getProviderConnections = (integrationId: string) => {
     return connections?.filter((c) => c.integration_id === integrationId) ?? [];
@@ -50,13 +50,12 @@ export function IntegrationsSettingsCard() {
                 <div className="text-sm font-medium">{integration.name}</div>
               </div>
 
-              {!isPro ? (
+              {!isPaid ? (
                 <Link
-                  to="/app/checkout/"
-                  search={{ period: "monthly" }}
+                  to="/pricing/"
                   className="flex h-8 items-center rounded-full bg-linear-to-t from-stone-600 to-stone-500 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%]"
                 >
-                  Upgrade to Pro
+                  Upgrade
                 </Link>
               ) : isLoading ? (
                 <button
diff --git a/apps/web/src/routes/_view/app/-account-settings.tsx b/apps/web/src/routes/_view/app/-account-settings.tsx
index a624dafc02..a1b113b652 100644
--- a/apps/web/src/routes/_view/app/-account-settings.tsx
+++ b/apps/web/src/routes/_view/app/-account-settings.tsx
@@ -61,11 +61,10 @@ export function AccountSettingsCard() {
 
       return (
         <Link
-          to="/app/checkout/"
-          search={{ period: "monthly" }}
+          to="/pricing/"
           className="flex h-8 items-center rounded-full bg-linear-to-t from-stone-600 to-stone-500 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%]"
         >
-          Upgrade to Pro
+          Upgrade
         </Link>
       );
     }
@@ -87,7 +86,9 @@ export function AccountSettingsCard() {
       ? "Trial"
       : billing.plan === "pro"
         ? "Pro"
-        : "Free";
+        : billing.plan === "lite"
+          ? "Lite"
+          : "Free";
 
   return (
     <div className="rounded-xs border border-neutral-100">
diff --git a/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx b/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx
index 570d5febbc..1d712edeb2 100644
--- a/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx
+++ b/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx
@@ -34,12 +34,8 @@ export function UpgradePrompt({
       </div>
 
       <div className="flex flex-col gap-3">
-        <Link
-          to="/app/checkout/"
-          search={{ period: "monthly" }}
-          className={integrationButtonClassName("primary")}
-        >
-          Upgrade to Pro
+        <Link to="/pricing/" className={integrationButtonClassName("primary")}>
+          Upgrade
         </Link>
 
         {flow === "desktop" ? (
diff --git a/apps/web/src/routes/_view/app/checkout.tsx b/apps/web/src/routes/_view/app/checkout.tsx
index 8b0a87dad6..2357820422 100644
--- a/apps/web/src/routes/_view/app/checkout.tsx
+++ b/apps/web/src/routes/_view/app/checkout.tsx
@@ -6,6 +6,7 @@ import { desktopSchemeSchema } from "@/functions/desktop-flow";
 
 const validateSearch = z.object({
   period: z.enum(["monthly", "yearly"]).catch("monthly"),
+  plan: z.enum(["lite", "pro"]).catch("pro"),
   scheme: desktopSchemeSchema.optional(),
 });
 
@@ -13,7 +14,7 @@ export const Route = createFileRoute("/_view/app/checkout")({
   validateSearch,
   beforeLoad: async ({ search }) => {
     const { url } = await createCheckoutSession({
-      data: { period: search.period, scheme: search.scheme },
+      data: { period: search.period, plan: search.plan, scheme: search.scheme },
     });
 
     if (url) {
diff --git a/apps/web/src/routes/_view/app/integration.tsx b/apps/web/src/routes/_view/app/integration.tsx
index 4046ce9460..4c77a12dfe 100644
--- a/apps/web/src/routes/_view/app/integration.tsx
+++ b/apps/web/src/routes/_view/app/integration.tsx
@@ -63,7 +63,7 @@ function Component() {
     );
   }
 
-  if (!billing.isPro) {
+  if (!billing.isPaid) {
     return (
       <UpgradePrompt
         integrationId={search.integration_id}
diff --git a/apps/web/src/routes/_view/pricing.tsx b/apps/web/src/routes/_view/pricing.tsx
index a3641f842f..28657a2d57 100644
--- a/apps/web/src/routes/_view/pricing.tsx
+++ b/apps/web/src/routes/_view/pricing.tsx
@@ -12,7 +12,7 @@ export const Route = createFileRoute("/_view/pricing")({
 
 interface PricingPlan {
   name: string;
-  price: { monthly: number; yearly: number } | null;
+  price: { monthly: number; yearly: number | null } | null;
   description: string;
   popular?: boolean;
   features: Array<{
@@ -56,6 +56,28 @@ const pricingPlans: PricingPlan[] = [
       { label: "Shareable Links", included: false },
     ],
   },
+  {
+    name: "Lite",
+    price: {
+      monthly: 8,
+      yearly: null,
+    },
+    description:
+      "Cloud AI without the complexity. No API keys needed — just sign in and go.",
+    features: [
+      { label: "Everything in Free", included: true },
+      { label: "Cloud Services (STT & LLM)", included: true },
+      {
+        label: "Integrations",
+        included: true,
+        tooltip:
+          "Google Calendar is available now. Additional integrations are in progress.",
+      },
+      { label: "Advanced Templates", included: false },
+      { label: "Cloud Sync", included: false },
+      { label: "Shareable Links", included: false },
+    ],
+  },
   {
     name: "Pro",
     price: {
@@ -134,7 +156,7 @@ function HeroSection() {
 function PricingCardsSection() {
   return (
     <section className="laptop:px-0 px-4 py-16">
-      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-2">
+      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3">
         {pricingPlans.map((plan) => (
           <PricingCard key={plan.name} plan={plan} />
         ))}
@@ -174,9 +196,11 @@ function PricingCard({ plan }: { plan: PricingPlan }) {
                 </span>
                 <span className="text-neutral-600">/month</span>
               </div>
-              <div className="text-sm text-neutral-600">
-                or ${plan.price.yearly}/year
-              </div>
+              {plan.price.yearly != null && (
+                <div className="text-sm text-neutral-600">
+                  or ${plan.price.yearly}/year
+                </div>
+              )}
             </div>
           ) : (
             <div className="font-serif text-4xl text-stone-700">Free</div>
@@ -250,7 +274,9 @@ function PricingCard({ plan }: { plan: PricingPlan }) {
             search={{ flow: "web" }}
             className={cn([
               "mt-8 flex h-10 w-full cursor-pointer items-center justify-center text-sm font-medium transition-all",
-              "rounded-full bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
+              plan.popular
+                ? "rounded-full bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]"
+                : "rounded-full bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 shadow-xs hover:scale-[102%] hover:shadow-md active:scale-[98%]",
             ])}
           >
             Get Started
diff --git a/crates/api-auth/src/lib.rs b/crates/api-auth/src/lib.rs
index 61996bce64..c4cf969cac 100644
--- a/crates/api-auth/src/lib.rs
+++ b/crates/api-auth/src/lib.rs
@@ -17,19 +17,24 @@ pub struct AuthContext {
 #[derive(Clone)]
 pub struct AuthState {
     inner: SupabaseAuth,
-    required_entitlement: Option<String>,
+    required_entitlements: Option<Vec<String>>,
 }
 
 impl AuthState {
     pub fn new(supabase_url: &str) -> Self {
         Self {
             inner: SupabaseAuth::new(supabase_url),
-            required_entitlement: None,
+            required_entitlements: None,
         }
     }
 
     pub fn with_required_entitlement(mut self, entitlement: impl Into<String>) -> Self {
-        self.required_entitlement = Some(entitlement.into());
+        self.required_entitlements = Some(vec![entitlement.into()]);
+        self
+    }
+
+    pub fn with_required_entitlements(mut self, entitlements: Vec<String>) -> Self {
+        self.required_entitlements = Some(entitlements);
         self
     }
 
@@ -86,8 +91,11 @@ pub async fn require_auth(
         .ok_or(SupabaseAuthError::InvalidAuthHeader)?
         .to_owned();
 
-    let claims = match &state.required_entitlement {
-        Some(entitlement) => state.inner.require_entitlement(&token, entitlement).await?,
+    let claims = match &state.required_entitlements {
+        Some(entitlements) => {
+            let refs: Vec<&str> = entitlements.iter().map(|s| s.as_str()).collect();
+            state.inner.require_any_entitlement(&token, &refs).await?
+        }
         None => state.inner.verify_token(&token).await?,
     };
 
@@ -161,13 +169,31 @@ mod tests {
     #[test]
     fn test_auth_state_new() {
         let state = AuthState::new("https://example.supabase.co");
-        assert_eq!(state.required_entitlement, None);
+        assert_eq!(state.required_entitlements, None);
     }
 
     #[test]
     fn test_auth_state_with_required_entitlement() {
         let state =
             AuthState::new("https://example.supabase.co").with_required_entitlement("hyprnote_pro");
-        assert_eq!(state.required_entitlement, Some("hyprnote_pro".to_string()));
+        assert_eq!(
+            state.required_entitlements,
+            Some(vec!["hyprnote_pro".to_string()])
+        );
+    }
+
+    #[test]
+    fn test_auth_state_with_required_entitlements() {
+        let state = AuthState::new("https://example.supabase.co").with_required_entitlements(vec![
+            "hyprnote_pro".to_string(),
+            "hyprnote_lite".to_string(),
+        ]);
+        assert_eq!(
+            state.required_entitlements,
+            Some(vec![
+                "hyprnote_pro".to_string(),
+                "hyprnote_lite".to_string()
+            ])
+        );
     }
 }
diff --git a/crates/supabase-auth/src/claims.rs b/crates/supabase-auth/src/claims.rs
index c5c2e9a14b..0a65414f48 100644
--- a/crates/supabase-auth/src/claims.rs
+++ b/crates/supabase-auth/src/claims.rs
@@ -35,6 +35,14 @@ impl Claims {
         self.entitlements.contains(&"hyprnote_pro".to_string())
     }
 
+    pub fn is_lite(&self) -> bool {
+        self.entitlements.contains(&"hyprnote_lite".to_string())
+    }
+
+    pub fn is_paid(&self) -> bool {
+        self.is_pro() || self.is_lite()
+    }
+
     pub fn decode_insecure(token: &str) -> Result<Self, Error> {
         use base64::{Engine, engine::general_purpose::URL_SAFE_NO_PAD};
 
@@ -99,6 +107,46 @@ mod tests {
         assert!(claims.trial_end.is_none());
     }
 
+    #[test]
+    fn test_decode_claims_lite() {
+        let payload = r#"{
+            "sub": "user-789",
+            "entitlements": ["hyprnote_lite"],
+            "subscription_status": "active"
+        }"#;
+        let token = make_test_token(payload);
+
+        let claims = Claims::decode_insecure(&token).unwrap();
+        assert!(!claims.is_pro());
+        assert!(claims.is_lite());
+        assert!(claims.is_paid());
+    }
+
+    #[test]
+    fn test_is_paid_with_pro() {
+        let payload = r#"{
+            "sub": "user-100",
+            "entitlements": ["hyprnote_pro"]
+        }"#;
+        let token = make_test_token(payload);
+
+        let claims = Claims::decode_insecure(&token).unwrap();
+        assert!(claims.is_pro());
+        assert!(!claims.is_lite());
+        assert!(claims.is_paid());
+    }
+
+    #[test]
+    fn test_is_paid_with_no_entitlements() {
+        let payload = r#"{"sub": "user-200"}"#;
+        let token = make_test_token(payload);
+
+        let claims = Claims::decode_insecure(&token).unwrap();
+        assert!(!claims.is_pro());
+        assert!(!claims.is_lite());
+        assert!(!claims.is_paid());
+    }
+
     #[test]
     fn test_decode_invalid_token() {
         assert!(Claims::decode_insecure("invalid").is_err());
diff --git a/crates/supabase-auth/src/server/mod.rs b/crates/supabase-auth/src/server/mod.rs
index b62ca8ea23..4c6afdfc85 100644
--- a/crates/supabase-auth/src/server/mod.rs
+++ b/crates/supabase-auth/src/server/mod.rs
@@ -66,6 +66,24 @@ impl SupabaseAuth {
 
         Ok(claims)
     }
+
+    pub async fn require_any_entitlement(
+        &self,
+        token: &str,
+        entitlements: &[&str],
+    ) -> Result<crate::Claims, crate::Error> {
+        let claims = self.verify_token(token).await?;
+
+        let has_any = entitlements
+            .iter()
+            .any(|e| claims.entitlements.contains(&e.to_string()));
+
+        if !has_any {
+            return Err(crate::Error::MissingEntitlement(entitlements.join(" or ")));
+        }
+
+        Ok(claims)
+    }
 }
 
 #[cfg(test)]
diff --git a/packages/supabase/src/billing.ts b/packages/supabase/src/billing.ts
index 3712c8f199..d3b3d973c7 100644
--- a/packages/supabase/src/billing.ts
+++ b/packages/supabase/src/billing.ts
@@ -1,11 +1,13 @@
 import type { SubscriptionStatus, SupabaseJwtPayload } from "./jwt";
 
-export type Plan = "free" | "trial" | "pro";
+export type Plan = "free" | "trial" | "lite" | "pro";
 
 export type BillingInfo = {
   entitlements: string[];
   subscriptionStatus: SubscriptionStatus | null;
   isPro: boolean;
+  isLite: boolean;
+  isPaid: boolean;
   isTrialing: boolean;
   trialEnd: Date | null;
   trialDaysRemaining: number | null;
@@ -18,10 +20,19 @@ export function deriveBillingInfo(
   const entitlements = payload?.entitlements ?? [];
   const subscriptionStatus = payload?.subscription_status ?? null;
   const isTrialing = subscriptionStatus === "trialing";
+
+  const hasProEntitlement = entitlements.includes("hyprnote_pro");
+  const hasLiteEntitlement = entitlements.includes("hyprnote_lite");
+
   const isPro =
-    entitlements.includes("hyprnote_pro") ||
+    hasProEntitlement || isTrialing || subscriptionStatus === "active";
+  const isLite = hasLiteEntitlement && !hasProEntitlement;
+  const isPaid =
+    hasProEntitlement ||
+    hasLiteEntitlement ||
     isTrialing ||
     subscriptionStatus === "active";
+
   const trialEnd = payload?.trial_end
     ? new Date(payload.trial_end * 1000)
     : null;
@@ -33,13 +44,22 @@ export function deriveBillingInfo(
       secondsRemaining <= 0 ? 0 : Math.ceil(secondsRemaining / (24 * 60 * 60));
   }
 
-  const plan: Plan =
-    isPro && !isTrialing ? "pro" : isTrialing ? "trial" : "free";
+  const plan: Plan = isTrialing
+    ? "trial"
+    : hasProEntitlement
+      ? "pro"
+      : hasLiteEntitlement
+        ? "lite"
+        : subscriptionStatus === "active"
+          ? "pro"
+          : "free";
 
   return {
     entitlements,
     subscriptionStatus,
     isPro,
+    isLite,
+    isPaid,
     isTrialing,
     trialEnd,
     trialDaysRemaining,

From 6566474c49ec24879af126f4651b0e47a0e3d42a Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Thu, 26 Mar 2026 16:39:18 -0700
Subject: [PATCH 2/3] wip

Signed-off-by: Yujong Lee <yujonglee.dev@gmail.com>
---
 apps/desktop/src/sidebar/index.tsx         | 1 -
 apps/web/content/docs/developers/1.env.mdx | 1 +
 apps/web/src/routes/_view/pricing.tsx      | 7 +++++--
 packages/supabase/src/billing.ts           | 3 +--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/sidebar/index.tsx b/apps/desktop/src/sidebar/index.tsx
index ede6720ef7..81b6086d80 100644
--- a/apps/desktop/src/sidebar/index.tsx
+++ b/apps/desktop/src/sidebar/index.tsx
@@ -46,7 +46,6 @@ export function LeftSidebar() {
   const isSettingsMode = currentTab?.type === "settings";
   const isCalendarMode = currentTab?.type === "calendar";
   const isContactsMode = currentTab?.type === "contacts";
-  const isCalendarMode = currentTab?.type === "calendar";
   const showCollapseButton =
     !isSettingsMode && !isContactsMode && !isCalendarMode;
   const showSearchResults =
diff --git a/apps/web/content/docs/developers/1.env.mdx b/apps/web/content/docs/developers/1.env.mdx
index ac304eb3e4..3010746ef7 100644
--- a/apps/web/content/docs/developers/1.env.mdx
+++ b/apps/web/content/docs/developers/1.env.mdx
@@ -113,6 +113,7 @@ SUPABASE_ANON_KEY="sb_publishable_..." # required
 NANGO_SECRET_KEY=""                    # required for calendar integration
 NANGO_API_BASE=""                      # optional (defaults to Nango cloud)
 STRIPE_SECRET_KEY="sk_..."             # required for subscription
+STRIPE_LITE_MONTHLY_PRICE_ID=""        # required for subscription
 STRIPE_MONTHLY_PRICE_ID=""             # required for subscription
 STRIPE_YEARLY_PRICE_ID=""              # required for subscription
 OPENROUTER_API_KEY="sk-or-..."         # required for LLM proxy
diff --git a/apps/web/src/routes/_view/pricing.tsx b/apps/web/src/routes/_view/pricing.tsx
index 28657a2d57..319cf58f91 100644
--- a/apps/web/src/routes/_view/pricing.tsx
+++ b/apps/web/src/routes/_view/pricing.tsx
@@ -270,8 +270,11 @@ function PricingCard({ plan }: { plan: PricingPlan }) {
 
         {plan.price ? (
           <Link
-            to="/auth/"
-            search={{ flow: "web" }}
+            to="/app/checkout/"
+            search={{
+              plan: plan.name.toLowerCase() as "lite" | "pro",
+              period: "monthly",
+            }}
             className={cn([
               "mt-8 flex h-10 w-full cursor-pointer items-center justify-center text-sm font-medium transition-all",
               plan.popular
diff --git a/packages/supabase/src/billing.ts b/packages/supabase/src/billing.ts
index d3b3d973c7..9ae873d321 100644
--- a/packages/supabase/src/billing.ts
+++ b/packages/supabase/src/billing.ts
@@ -24,8 +24,7 @@ export function deriveBillingInfo(
   const hasProEntitlement = entitlements.includes("hyprnote_pro");
   const hasLiteEntitlement = entitlements.includes("hyprnote_lite");
 
-  const isPro =
-    hasProEntitlement || isTrialing || subscriptionStatus === "active";
+  const isPro = hasProEntitlement || isTrialing;
   const isLite = hasLiteEntitlement && !hasProEntitlement;
   const isPaid =
     hasProEntitlement ||

From e10c16fa6428b99bec829d29f72d576fceb0a3d2 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Thu, 26 Mar 2026 22:53:34 -0700
Subject: [PATCH 3/3] done

Signed-off-by: Yujong Lee <yujonglee.dev@gmail.com>
---
 apps/api/AGENTS.md                            |   3 +-
 apps/desktop/index.html                       |   2 +-
 apps/desktop/package.json                     |   1 +
 apps/desktop/public/assets/github-icon.svg    |   1 +
 apps/desktop/public/assets/linear-icon.svg    |   1 +
 .../components/oauth/provider-content.tsx     |  33 +-
 .../src/calendar/components/sidebar.tsx       | 113 ++--
 apps/desktop/src/settings/general/account.tsx | 637 +++++++++++-------
 apps/desktop/src/settings/general/index.tsx   |   4 +-
 apps/desktop/src/settings/index.tsx           |  15 +-
 apps/desktop/src/settings/todo/index.tsx      |  49 ++
 .../src/settings/todo/provider-content.tsx    | 164 +++++
 apps/desktop/src/settings/todo/shared.tsx     |  29 +
 .../src/shared/hooks/useDeeplinkHandler.ts    |   2 +
 .../src/shared/hooks/useWidgetState.ts        |  30 +-
 apps/desktop/src/shared/integration.ts        |  24 +
 apps/desktop/src/shared/utils.ts              |   6 +-
 apps/desktop/src/sidebar/settings.tsx         |  31 +-
 apps/desktop/src/store/zustand/tabs/schema.ts |   3 +-
 apps/web/AGENTS.md                            |   3 +-
 apps/web/package.json                         |   1 +
 apps/web/src/functions/billing.ts             |  83 +++
 apps/web/src/routeTree.gen.ts                 |  21 +
 .../routes/_view/app/-account-settings.tsx    | 170 +++--
 apps/web/src/routes/_view/app/integration.tsx |  10 +
 apps/web/src/routes/_view/app/switch-plan.tsx |  30 +
 apps/web/src/routes/_view/pricing.tsx         | 106 +--
 packages/pricing/package.json                 |  19 +
 packages/pricing/src/index.ts                 |   8 +
 packages/pricing/src/plan-grid.tsx            | 109 +++
 packages/pricing/src/tiers.ts                 | 106 +++
 packages/pricing/tsconfig.json                |  14 +
 pnpm-lock.yaml                                |  22 +
 33 files changed, 1390 insertions(+), 460 deletions(-)
 create mode 100644 apps/desktop/public/assets/github-icon.svg
 create mode 100644 apps/desktop/public/assets/linear-icon.svg
 create mode 100644 apps/desktop/src/settings/todo/index.tsx
 create mode 100644 apps/desktop/src/settings/todo/provider-content.tsx
 create mode 100644 apps/desktop/src/settings/todo/shared.tsx
 create mode 100644 apps/desktop/src/shared/integration.ts
 create mode 100644 apps/web/src/routes/_view/app/switch-plan.tsx
 create mode 100644 packages/pricing/package.json
 create mode 100644 packages/pricing/src/index.ts
 create mode 100644 packages/pricing/src/plan-grid.tsx
 create mode 100644 packages/pricing/src/tiers.ts
 create mode 100644 packages/pricing/tsconfig.json

diff --git a/apps/api/AGENTS.md b/apps/api/AGENTS.md
index 0f6fe28c2c..6adee0f3d8 100644
--- a/apps/api/AGENTS.md
+++ b/apps/api/AGENTS.md
@@ -1,10 +1,9 @@
 ```bash
-# REPO="SOMEWHERE" ($HOME/repos/hyprnote inside Devin)
 infisical export \
   --env=dev \
   --secret-overriding=false \
   --format=dotenv \
-  --output-file="$REPO/apps/api/.env" \
+  --output-file="apps/api/.env" \
   --projectId=87dad7b5-72a6-4791-9228-b3b86b169db1 \
   --path="/ai"
 ```
diff --git a/apps/desktop/index.html b/apps/desktop/index.html
index be696ecdc9..3f394225b0 100644
--- a/apps/desktop/index.html
+++ b/apps/desktop/index.html
@@ -15,7 +15,7 @@
     </style>
     <script src="/relay-shim.js"></script>
     <script type="module">
-      if (import.meta.env.DEV) {
+      if (import.meta.env.DEV && !window.location.pathname.startsWith("/app/control")) {
         import("react-scan").then(({ scan }) => {
           scan();
         });
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 6ac40ca7a8..caa544a26f 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -25,6 +25,7 @@
     "@ai-sdk/openai": "^3.0.39",
     "@ai-sdk/openai-compatible": "^2.0.35",
     "@ai-sdk/react": "^3.0.118",
+    "@hypr/pricing": "workspace:^",
     "@codemirror/autocomplete": "^6.20.0",
     "@codemirror/lang-jinja": "^6.0.0",
     "@codemirror/language": "^6.12.1",
diff --git a/apps/desktop/public/assets/github-icon.svg b/apps/desktop/public/assets/github-icon.svg
new file mode 100644
index 0000000000..0d99ca0a3e
--- /dev/null
+++ b/apps/desktop/public/assets/github-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 250" width="24" height="24"  style="opacity:1;"><path fill="#161614" d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0m-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931m6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66m4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08m7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27m9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622m10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868m10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403"/></svg>
\ No newline at end of file
diff --git a/apps/desktop/public/assets/linear-icon.svg b/apps/desktop/public/assets/linear-icon.svg
new file mode 100644
index 0000000000..0c08eaea13
--- /dev/null
+++ b/apps/desktop/public/assets/linear-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24"  style="opacity:1;"><path fill="#222326" d="m8.174 102.613l145.213 145.213c2.12 2.12 1.097 5.72-1.85 6.27a128 128 0 0 1-15.02 1.896a3.78 3.78 0 0 1-2.92-1.109L1.117 122.403a3.78 3.78 0 0 1-1.109-2.92c.34-5.095.978-10.107 1.896-15.02c.55-2.947 4.15-3.97 6.27-1.85m-4.092 58.796c-.97-3.614 3.3-5.894 5.946-3.248l87.81 87.811c2.647 2.646.367 6.915-3.247 5.946c-44.03-11.805-78.704-46.478-90.51-90.509m12.727-97.245c1.233-2.135 4.147-2.463 5.89-.719L192.556 233.3c1.744 1.744 1.417 4.658-.72 5.891a128 128 0 0 1-11.1 5.705c-1.43.65-3.11.322-4.22-.79L11.893 79.487c-1.111-1.112-1.439-2.79-.79-4.221a128 128 0 0 1 5.706-11.1M127.86 0C198.63 0 256 57.37 256 128.14c0 37.57-16.168 71.362-41.926 94.8c-1.487 1.354-3.768 1.264-5.19-.157L33.217 47.116c-1.421-1.422-1.51-3.703-.158-5.19C56.498 16.168 90.291 0 127.86 0"/></svg>
\ No newline at end of file
diff --git a/apps/desktop/src/calendar/components/oauth/provider-content.tsx b/apps/desktop/src/calendar/components/oauth/provider-content.tsx
index a219533659..8095f20c14 100644
--- a/apps/desktop/src/calendar/components/oauth/provider-content.tsx
+++ b/apps/desktop/src/calendar/components/oauth/provider-content.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useMemo } from "react";
 
 import type { ConnectionItem } from "@hypr/api-client";
-import { commands as openerCommands } from "@hypr/plugin-opener2";
 import {
   Tooltip,
   TooltipContent,
@@ -18,7 +17,7 @@ import { useAuth } from "~/auth";
 import { useBillingAccess } from "~/auth/billing";
 import { useConnections } from "~/auth/useConnections";
 import type { CalendarProvider } from "~/calendar/components/shared";
-import { buildWebAppUrl } from "~/shared/utils";
+import { openIntegrationUrl } from "~/shared/integration";
 
 export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
   const auth = useAuth();
@@ -33,7 +32,13 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
   );
 
   const handleAddAccount = useCallback(
-    () => openIntegrationUrl(config.nangoIntegrationId, undefined, "connect"),
+    () =>
+      openIntegrationUrl(
+        config.nangoIntegrationId,
+        undefined,
+        "connect",
+        "calendar",
+      ),
     [config.nangoIntegrationId],
   );
 
@@ -86,6 +91,7 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
                 config.nangoIntegrationId,
                 connection.connection_id,
                 "reconnect",
+                "calendar",
               )
             }
             onDisconnect={() =>
@@ -93,6 +99,7 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
                 config.nangoIntegrationId,
                 connection.connection_id,
                 "disconnect",
+                "calendar",
               )
             }
             errorDescription={connection.last_error_description ?? null}
@@ -199,6 +206,7 @@ function ConnectedContent({
                   config.nangoIntegrationId,
                   connection.connection_id,
                   "reconnect",
+                  "calendar",
                 ),
             },
             {
@@ -209,6 +217,7 @@ function ConnectedContent({
                   config.nangoIntegrationId,
                   connection.connection_id,
                   "disconnect",
+                  "calendar",
                 ),
             },
           ],
@@ -225,21 +234,3 @@ function ConnectedContent({
     />
   );
 }
-
-export async function openIntegrationUrl(
-  nangoIntegrationId: string | undefined,
-  connectionId: string | undefined,
-  action: "connect" | "reconnect" | "disconnect",
-) {
-  if (!nangoIntegrationId) return;
-  const params: Record<string, string> = {
-    action,
-    integration_id: nangoIntegrationId,
-    return_to: "calendar",
-  };
-  if (connectionId) {
-    params.connection_id = connectionId;
-  }
-  const url = await buildWebAppUrl("/app/integration", params);
-  await openerCommands.openUrl(url, null);
-}
diff --git a/apps/desktop/src/calendar/components/sidebar.tsx b/apps/desktop/src/calendar/components/sidebar.tsx
index 82dd175d78..595ef739e6 100644
--- a/apps/desktop/src/calendar/components/sidebar.tsx
+++ b/apps/desktop/src/calendar/components/sidebar.tsx
@@ -13,10 +13,7 @@ import { cn } from "@hypr/utils";
 
 import { AppleCalendarSelection } from "./apple/calendar-selection";
 import { AccessPermissionRow, TroubleShootingLink } from "./apple/permission";
-import {
-  OAuthProviderContent,
-  openIntegrationUrl,
-} from "./oauth/provider-content";
+import { OAuthProviderContent } from "./oauth/provider-content";
 import { type CalendarProvider, PROVIDERS } from "./shared";
 
 import { useAuth } from "~/auth";
@@ -24,6 +21,7 @@ import { useBillingAccess } from "~/auth/billing";
 import { useConnections } from "~/auth/useConnections";
 import { useNativeContextMenu } from "~/shared/hooks/useNativeContextMenu";
 import { usePermission } from "~/shared/hooks/usePermissions";
+import { openIntegrationUrl } from "~/shared/integration";
 
 function getProviderBadgeClassName(badge: string) {
   return cn([
@@ -78,12 +76,15 @@ function ProviderAccordionItem({
   calendar: ReturnType<typeof usePermission>;
 }) {
   const auth = useAuth();
-  const { isPaid } = useBillingAccess();
+  const { isPaid, isPro, upgradeToPro } = useBillingAccess();
   const { data: connections, isPending, isError } = useConnections(isPaid);
   const providerConnections =
     connections?.filter(
       (connection) => connection.integration_id === provider.nangoIntegrationId,
     ) ?? [];
+
+  const requiresPro = !!provider.nangoIntegrationId && !isPro;
+
   const canAddAccount =
     !!provider.nangoIntegrationId &&
     !!auth.session &&
@@ -95,15 +96,20 @@ function ProviderAccordionItem({
 
   const handleTriggerClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
+      if (requiresPro) {
+        event.preventDefault();
+        return;
+      }
       if (!shouldConnectOnClick) return;
       event.preventDefault();
       void openIntegrationUrl(
         provider.nangoIntegrationId,
         undefined,
         "connect",
+        "calendar",
       );
     },
-    [provider.nangoIntegrationId, shouldConnectOnClick],
+    [provider.nangoIntegrationId, shouldConnectOnClick, requiresPro],
   );
   const handleAddAccount = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -114,6 +120,7 @@ function ProviderAccordionItem({
         provider.nangoIntegrationId,
         undefined,
         "connect",
+        "calendar",
       );
     },
     [canAddAccount, provider.nangoIntegrationId],
@@ -130,6 +137,7 @@ function ProviderAccordionItem({
                   provider.nangoIntegrationId,
                   undefined,
                   "connect",
+                  "calendar",
                 ),
             },
           ]
@@ -149,7 +157,10 @@ function ProviderAccordionItem({
         onContextMenu={
           providerMenuItems.length > 0 ? showProviderMenu : undefined
         }
-        className="group -mx-2 grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-1 rounded-md px-2 hover:bg-neutral-50"
+        className={cn([
+          "group -mx-2 grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-1 rounded-md px-2 hover:bg-neutral-50",
+          requiresPro && "opacity-60",
+        ])}
       >
         <AccordionHeader className="min-w-0">
           <AccordionTriggerPrimitive
@@ -170,7 +181,15 @@ function ProviderAccordionItem({
           </AccordionTriggerPrimitive>
         </AccordionHeader>
 
-        {canAddAccount && (
+        {requiresPro ? (
+          <button
+            type="button"
+            onClick={upgradeToPro}
+            className="shrink-0 text-xs font-medium text-stone-600 transition-colors hover:text-stone-800"
+          >
+            Upgrade to Pro
+          </button>
+        ) : canAddAccount ? (
           <button
             type="button"
             onClick={handleAddAccount}
@@ -179,45 +198,49 @@ function ProviderAccordionItem({
           >
             <PlusIcon className="size-4" />
           </button>
-        )}
+        ) : null}
 
-        <ChevronDown
-          className={cn([
-            "size-4 shrink-0 text-neutral-500 opacity-0 transition-all duration-200 group-hover:opacity-100 focus-within:opacity-100",
-            "group-data-[state=open]/provider:rotate-180",
-          ])}
-        />
-      </div>
-      <AccordionContent className="pb-2">
-        {provider.id === "apple" && (
-          <div className="flex flex-col gap-3">
-            {calendar.status !== "authorized" ? (
-              <AccessPermissionRow
-                title="Calendar"
-                status={calendar.status}
-                isPending={calendar.isPending}
-                onOpen={calendar.open}
-                onRequest={calendar.request}
-                onReset={calendar.reset}
-              />
-            ) : (
-              <AppleCalendarSelection
-                leftAction={
-                  <TroubleShootingLink
-                    isPending={calendar.isPending}
-                    onOpen={calendar.open}
-                    onRequest={calendar.request}
-                    onReset={calendar.reset}
-                  />
-                }
-              />
-            )}
-          </div>
-        )}
-        {provider.nangoIntegrationId && (
-          <OAuthProviderContent config={provider} />
+        {!requiresPro && (
+          <ChevronDown
+            className={cn([
+              "size-4 shrink-0 text-neutral-500 opacity-0 transition-all duration-200 group-hover:opacity-100 focus-within:opacity-100",
+              "group-data-[state=open]/provider:rotate-180",
+            ])}
+          />
         )}
-      </AccordionContent>
+      </div>
+      {!requiresPro && (
+        <AccordionContent className="pb-2">
+          {provider.id === "apple" && (
+            <div className="flex flex-col gap-3">
+              {calendar.status !== "authorized" ? (
+                <AccessPermissionRow
+                  title="Calendar"
+                  status={calendar.status}
+                  isPending={calendar.isPending}
+                  onOpen={calendar.open}
+                  onRequest={calendar.request}
+                  onReset={calendar.reset}
+                />
+              ) : (
+                <AppleCalendarSelection
+                  leftAction={
+                    <TroubleShootingLink
+                      isPending={calendar.isPending}
+                      onOpen={calendar.open}
+                      onRequest={calendar.request}
+                      onReset={calendar.reset}
+                    />
+                  }
+                />
+              )}
+            </div>
+          )}
+          {provider.nangoIntegrationId && (
+            <OAuthProviderContent config={provider} />
+          )}
+        </AccordionContent>
+      )}
     </AccordionItem>
   );
 }
diff --git a/apps/desktop/src/settings/general/account.tsx b/apps/desktop/src/settings/general/account.tsx
index 09c733038d..22a17b6393 100644
--- a/apps/desktop/src/settings/general/account.tsx
+++ b/apps/desktop/src/settings/general/account.tsx
@@ -1,7 +1,19 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { ExternalLinkIcon, Puzzle, RefreshCwIcon, Sparkle } from "lucide-react";
+import {
+  CheckCircle2,
+  Puzzle,
+  RefreshCw,
+  Sparkle,
+  XCircle,
+} from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import {
   canStartTrial as canStartTrialApi,
@@ -10,10 +22,14 @@ import {
 import { createClient } from "@hypr/api-client/client";
 import { commands as analyticsCommands } from "@hypr/plugin-analytics";
 import { commands as openerCommands } from "@hypr/plugin-opener2";
-import { type SubscriptionStatus } from "@hypr/supabase";
+import {
+  getActionForTier,
+  PLAN_TIERS,
+  type PlanTier,
+  type TierAction,
+} from "@hypr/pricing";
 import { Button } from "@hypr/ui/components/ui/button";
 import { Input } from "@hypr/ui/components/ui/input";
-import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { cn } from "@hypr/utils";
 
 import { useAuth } from "~/auth";
@@ -46,82 +62,10 @@ const ACCOUNT_FEATURES = [
   },
 ] as const;
 
-function PlanStatus({
-  subscriptionStatus,
-  trialDaysRemaining,
-}: {
-  subscriptionStatus: SubscriptionStatus | null;
-  trialDaysRemaining: number | null;
-}) {
-  if (!subscriptionStatus) {
-    return <span className="font-semibold text-neutral-900">FREE</span>;
-  }
-
-  switch (subscriptionStatus) {
-    case "active":
-      return <span className="font-semibold text-neutral-900">PRO</span>;
-
-    case "trialing": {
-      const isUrgent = trialDaysRemaining !== null && trialDaysRemaining <= 3;
-      let trialText = null;
-      if (trialDaysRemaining !== null) {
-        if (trialDaysRemaining === 0) {
-          trialText = "Trial ends today";
-        } else if (trialDaysRemaining === 1) {
-          trialText = "Trial ends tomorrow";
-        } else {
-          trialText = `${trialDaysRemaining} days left`;
-        }
-      }
-      return (
-        <span className="inline-flex items-center gap-1.5">
-          <span className="font-semibold text-neutral-900">PRO</span>
-          {trialText && (
-            <span
-              className={cn(["text-neutral-500", isUrgent && "text-amber-600"])}
-            >
-              ({trialText})
-            </span>
-          )}
-        </span>
-      );
-    }
-
-    case "past_due":
-      return (
-        <span className="inline-flex items-center gap-1.5">
-          <span className="font-semibold text-neutral-900">PRO</span>
-          <span className="text-amber-600">(Payment issue)</span>
-        </span>
-      );
-
-    case "unpaid":
-      return (
-        <span className="font-semibold text-amber-600">Payment failed</span>
-      );
-
-    case "canceled":
-      return <span className="font-semibold text-neutral-900">Canceled</span>;
-
-    case "incomplete":
-      return (
-        <span className="font-semibold text-neutral-900">Setup incomplete</span>
-      );
-
-    case "incomplete_expired":
-      return <span className="font-semibold text-neutral-900">Expired</span>;
-
-    case "paused":
-      return <span className="font-semibold text-neutral-900">Paused</span>;
-
-    default:
-      return <span className="font-semibold text-neutral-900">FREE</span>;
-  }
-}
-
-export function AccountSettings() {
+export function SettingsAccount() {
   const auth = useAuth();
-  const { subscriptionStatus, trialDaysRemaining } = useBillingAccess();
+  const { plan, isPaid, isPro, isTrialing, trialDaysRemaining } =
+    useBillingAccess();
 
   const isAuthenticated = !!auth?.session;
   const [isPending, setIsPending] = useState(false);
@@ -157,51 +101,49 @@ export function AccountSettings() {
     },
   });
 
-  const handleRefreshPlan = useCallback(async () => {
-    await auth?.refreshSession();
-  }, [auth]);
-
   if (!isAuthenticated) {
     if (isPending) {
       return (
-        <div>
-          <h2 className="mb-4 font-serif text-lg font-semibold">Account</h2>
-          <Container
-            title="Finish sign-in"
-            description="Complete the sign-in flow in your browser, then come back here if Char does not reconnect automatically."
-            action={
-              <Button onClick={handleSignIn} variant="outline">
-                Reopen sign-in page
-              </Button>
-            }
-          >
-            <div className="flex flex-col gap-3">
-              <p className="text-xs text-neutral-500">
-                Having trouble? Paste the callback URL manually.
-              </p>
-              <div className="flex flex-col gap-2 sm:flex-row">
-                <Input
-                  type="text"
-                  className="flex-1 font-mono text-xs"
-                  placeholder="hyprnote://deeplink/auth?access_token=..."
-                  value={callbackUrl}
-                  onChange={(e) => setCallbackUrl(e.target.value)}
-                />
-                <Button
-                  onClick={() => auth?.handleAuthCallback(callbackUrl)}
-                  disabled={!callbackUrl}
-                >
-                  Submit
+        <div className="flex flex-col gap-8 pt-3">
+          <div>
+            <h2 className="mb-4 font-serif text-lg font-semibold">Account</h2>
+            <Container
+              title="Finish sign-in"
+              description="Complete the sign-in flow in your browser, then come back here if Char does not reconnect automatically."
+              action={
+                <Button onClick={handleSignIn} variant="outline">
+                  Reopen sign-in page
                 </Button>
+              }
+            >
+              <div className="flex flex-col gap-3">
+                <p className="text-xs text-neutral-500">
+                  Having trouble? Paste the callback URL manually.
+                </p>
+                <div className="flex flex-col gap-2 sm:flex-row">
+                  <Input
+                    type="text"
+                    className="flex-1 font-mono text-xs"
+                    placeholder="hyprnote://deeplink/auth?access_token=..."
+                    value={callbackUrl}
+                    onChange={(e) => setCallbackUrl(e.target.value)}
+                  />
+                  <Button
+                    onClick={() => auth?.handleAuthCallback(callbackUrl)}
+                    disabled={!callbackUrl}
+                  >
+                    Submit
+                  </Button>
+                </div>
               </div>
-            </div>
-          </Container>
+            </Container>
+          </div>
         </div>
       );
     }
 
     return (
-      <div>
+      <div className="flex flex-col gap-8 pt-3">
         <section className="border-b border-neutral-200 pb-4">
           <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
             <div className="flex min-w-0 flex-1 flex-col gap-4">
@@ -230,10 +172,12 @@ export function AccountSettings() {
     );
   }
 
+  const currentTier = plan === "trial" ? "pro" : plan;
+
   return (
-    <div>
-      <h2 className="mb-4 font-serif text-lg font-semibold">Account</h2>
-      <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-8 pt-3">
+      <div>
+        <h2 className="mb-4 font-serif text-lg font-semibold">Account</h2>
         <Container
           title="Your Account"
           description={auth.session?.user.email ?? "Signed in"}
@@ -250,40 +194,347 @@ export function AccountSettings() {
             </Button>
           }
         />
+      </div>
 
-        <Container
-          title="Plan & Billing"
-          description={
-            <div className="flex items-center gap-1.5">
-              <span>
-                Your current plan is{" "}
-                <PlanStatus
-                  subscriptionStatus={subscriptionStatus}
-                  trialDaysRemaining={trialDaysRemaining}
-                />
-              </span>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                onClick={handleRefreshPlan}
-                disabled={auth?.isRefreshingSession}
+      <PlanBillingSection
+        currentTier={currentTier}
+        isTrialing={isTrialing}
+        trialDaysRemaining={trialDaysRemaining}
+        isPaid={isPaid}
+        isPro={isPro}
+      />
+    </div>
+  );
+}
+
+function PlanBillingSection({
+  currentTier,
+  isTrialing,
+  trialDaysRemaining,
+  isPaid,
+  isPro,
+}: {
+  currentTier: PlanTier;
+  isTrialing: boolean;
+  trialDaysRemaining: number | null;
+  isPaid: boolean;
+  isPro: boolean;
+}) {
+  const auth = useAuth();
+  const store = settings.UI.useStore(settings.STORE_ID);
+
+  const canTrialQuery = useQuery({
+    enabled: !!auth?.session && !isPro,
+    queryKey: [auth?.session?.user.id ?? "", "canStartTrial"],
+    queryFn: async () => {
+      const headers = auth?.getHeaders();
+      if (!headers) {
+        return false;
+      }
+      const client = createClient({ baseUrl: env.VITE_API_URL, headers });
+      const { data, error } = await canStartTrialApi({ client });
+      if (error) {
+        throw error;
+      }
+      return data?.canStartTrial ?? false;
+    },
+  });
+
+  const startTrialMutation = useMutation({
+    mutationFn: async () => {
+      const headers = auth?.getHeaders();
+      if (!headers) {
+        throw new Error("Not authenticated");
+      }
+      const client = createClient({ baseUrl: env.VITE_API_URL, headers });
+      const { error } = await startTrial({
+        client,
+        query: { interval: "monthly" },
+      });
+      if (error) {
+        throw error;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 3000));
+    },
+    onSuccess: async () => {
+      if (store) {
+        configureProSettings(store);
+      }
+      await auth?.refreshSession();
+    },
+  });
+
+  const openUrl = useCallback((url: string) => {
+    void openerCommands.openUrl(url, null);
+  }, []);
+
+  const planLabel =
+    currentTier === "free" ? "Free" : currentTier === "lite" ? "Lite" : "Pro";
+  const statusText = isTrialing ? (
+    <>
+      Pro trial
+      {trialDaysRemaining != null &&
+        ` \u2014 ${trialDaysRemaining} day${trialDaysRemaining === 1 ? "" : "s"} left`}
+    </>
+  ) : (
+    <>
+      You&rsquo;re on the <span className="font-semibold">{planLabel}</span>{" "}
+      plan
+    </>
+  );
+
+  const renderAction = (action: TierAction, compact: boolean) => {
+    if (action == null) return null;
+
+    if (action.style === "current") {
+      if (compact) {
+        return <span className="text-xs text-neutral-400">{action.label}</span>;
+      }
+      return (
+        <div className="flex h-8 items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 text-xs text-neutral-500">
+          {action.label}
+        </div>
+      );
+    }
+
+    const isUpgrade = action.style === "upgrade";
+
+    const handleClick = () => {
+      if (action.label === "Start free trial") {
+        startTrialMutation.mutate();
+        return;
+      }
+      if (!action.targetPlan) return;
+
+      void analyticsCommands.event({
+        event: "upgrade_clicked",
+        plan: action.targetPlan,
+      });
+
+      if (isPaid && action.targetPlan) {
+        openUrl(
+          `${WEB_APP_BASE_URL}/app/switch-plan?targetPlan=${action.targetPlan}&targetPeriod=monthly`,
+        );
+      } else {
+        openUrl(
+          `${WEB_APP_BASE_URL}/app/checkout?plan=${action.targetPlan}&period=monthly`,
+        );
+      }
+    };
+
+    const label =
+      action.label === "Start free trial" && startTrialMutation.isPending
+        ? "Loading..."
+        : action.label;
+
+    if (compact) {
+      return (
+        <button
+          type="button"
+          onClick={handleClick}
+          disabled={
+            action.label === "Start free trial" && startTrialMutation.isPending
+          }
+          className={cn([
+            "text-xs font-medium transition-colors",
+            isUpgrade
+              ? "text-stone-600 hover:text-stone-800"
+              : "text-neutral-500 hover:text-neutral-700",
+          ])}
+        >
+          {label}
+        </button>
+      );
+    }
+
+    const buttonClass = cn([
+      "flex h-8 w-full cursor-pointer items-center justify-center rounded-full text-xs font-medium transition-all hover:scale-[102%] active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100",
+      isUpgrade
+        ? "bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:shadow-lg"
+        : "border border-neutral-300 bg-linear-to-b from-white to-stone-50 text-neutral-700 shadow-xs hover:shadow-md",
+    ]);
+
+    return (
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={
+          action.label === "Start free trial" && startTrialMutation.isPending
+        }
+        className={buttonClass}
+      >
+        {label}
+      </button>
+    );
+  };
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center justify-between">
+        <h2 className="font-serif text-lg font-semibold">Plan & Billing</h2>
+        {isPaid && (
+          <button
+            type="button"
+            onClick={() => openUrl(`${WEB_APP_BASE_URL}/app/account`)}
+            className="text-xs text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            Manage billing
+          </button>
+        )}
+      </div>
+
+      <div className="mb-4 flex items-center gap-2">
+        <p className="text-sm text-neutral-600">{statusText}</p>
+        <button
+          type="button"
+          onClick={() => auth?.refreshSession()}
+          className="text-neutral-400 transition-colors hover:text-neutral-600"
+          aria-label="Refresh billing status"
+        >
+          <RefreshCw className="size-3" />
+        </button>
+      </div>
+
+      <PlanTierList
+        currentTier={currentTier}
+        isTrialing={isTrialing}
+        canStartTrial={canTrialQuery.data ?? false}
+        renderAction={renderAction}
+      />
+    </div>
+  );
+}
+
+function PlanTierList({
+  currentTier,
+  isTrialing,
+  canStartTrial,
+  renderAction,
+}: {
+  currentTier: PlanTier;
+  isTrialing: boolean;
+  canStartTrial: boolean;
+  renderAction: (action: TierAction, compact: boolean) => ReactNode;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isWide, setIsWide] = useState(true);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      setIsWide(entry.contentRect.width >= 480);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef}>
+      {isWide ? (
+        <div className="grid grid-cols-3 gap-px border-t border-neutral-100">
+          {PLAN_TIERS.map((tier) => {
+            const isCurrent = tier.id === currentTier;
+            const action = getActionForTier(
+              tier.id,
+              currentTier,
+              canStartTrial,
+            );
+
+            return (
+              <div
+                key={tier.id}
                 className={cn([
-                  "size-6 rounded-md text-neutral-500 hover:text-neutral-800",
+                  "flex flex-col p-3",
+                  isCurrent && "bg-stone-50/60",
                 ])}
-                aria-label="Refresh plan status"
               >
-                {auth?.isRefreshingSession ? (
-                  <Spinner size={12} />
-                ) : (
-                  <RefreshCwIcon className="size-3.5" />
-                )}
-              </Button>
-            </div>
-          }
-          action={<BillingButton />}
-        />
-      </div>
+                <div className="mb-2 flex items-center gap-2">
+                  <span className="font-serif text-base font-medium text-stone-800">
+                    {tier.name}
+                  </span>
+                  {isCurrent && (
+                    <span className="rounded-full bg-stone-600 px-2 py-0.5 text-[10px] font-medium tracking-wide text-white uppercase">
+                      {isTrialing ? "Trial" : "Current"}
+                    </span>
+                  )}
+                </div>
+
+                <div className="mb-2">
+                  <span className="font-serif text-xl text-stone-700">
+                    {tier.price}
+                  </span>
+                  {tier.period && (
+                    <span className="text-sm text-neutral-500">
+                      {tier.period}
+                    </span>
+                  )}
+                  {tier.subtitle && (
+                    <div className="mt-0.5 text-xs text-neutral-400">
+                      {tier.subtitle}
+                    </div>
+                  )}
+                </div>
+
+                <div className="mb-3 flex flex-col gap-1">
+                  {tier.features.map((f) => (
+                    <div key={f} className="flex items-start gap-1.5">
+                      <CheckCircle2 className="mt-0.5 size-3.5 shrink-0 text-green-700" />
+                      <span className="text-xs text-neutral-700">{f}</span>
+                    </div>
+                  ))}
+                  {tier.notIncluded.map((f) => (
+                    <div key={f} className="flex items-start gap-1.5">
+                      <XCircle className="mt-0.5 size-3.5 shrink-0 text-neutral-300" />
+                      <span className="text-xs text-neutral-400">{f}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-auto">{renderAction(action, false)}</div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="flex flex-col">
+          {PLAN_TIERS.map((tier) => {
+            const isCurrent = tier.id === currentTier;
+            const action = getActionForTier(
+              tier.id,
+              currentTier,
+              canStartTrial,
+            );
+
+            return (
+              <div
+                key={tier.id}
+                className={cn([
+                  "flex items-center justify-between border-b border-neutral-100 py-2.5 last:border-b-0",
+                  isCurrent && "-mx-2 rounded-md bg-stone-50/60 px-2",
+                ])}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-stone-800">
+                    {tier.name}
+                  </span>
+                  <span className="text-sm text-neutral-500">
+                    {tier.price}
+                    {tier.period}
+                  </span>
+                  {isCurrent && (
+                    <span className="rounded-full bg-stone-600 px-1.5 py-px text-[10px] font-medium tracking-wide text-white uppercase">
+                      {isTrialing ? "Trial" : "Current"}
+                    </span>
+                  )}
+                </div>
+                <div className="shrink-0">{renderAction(action, true)}</div>
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }
@@ -395,98 +646,6 @@ function FeatureSpotlight() {
   );
 }
 
-function BillingButton() {
-  const auth = useAuth();
-  const { isPro } = useBillingAccess();
-  const store = settings.UI.useStore(settings.STORE_ID);
-
-  const canTrialQuery = useQuery({
-    enabled: !!auth?.session && !isPro,
-    queryKey: [auth?.session?.user.id ?? "", "canStartTrial"],
-    queryFn: async () => {
-      const headers = auth?.getHeaders();
-      if (!headers) {
-        return false;
-      }
-      const client = createClient({ baseUrl: env.VITE_API_URL, headers });
-      const { data, error } = await canStartTrialApi({ client });
-      if (error) {
-        throw error;
-      }
-
-      return data?.canStartTrial ?? false;
-    },
-  });
-
-  const startTrialMutation = useMutation({
-    mutationFn: async () => {
-      const headers = auth?.getHeaders();
-      if (!headers) {
-        throw new Error("Not authenticated");
-      }
-      const client = createClient({ baseUrl: env.VITE_API_URL, headers });
-      const { error } = await startTrial({
-        client,
-        query: { interval: "monthly" },
-      });
-      if (error) {
-        throw error;
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-    },
-    onSuccess: async () => {
-      if (store) {
-        configureProSettings(store);
-      }
-      await auth?.refreshSession();
-    },
-  });
-
-  const handleProUpgrade = useCallback(() => {
-    void analyticsCommands.event({
-      event: "upgrade_clicked",
-      plan: "pro",
-    });
-    void openerCommands.openUrl(
-      `${WEB_APP_BASE_URL}/app/checkout?period=monthly`,
-      null,
-    );
-  }, []);
-
-  const handleOpenAccount = useCallback(() => {
-    void openerCommands.openUrl(`${WEB_APP_BASE_URL}/app/account`, null);
-  }, []);
-
-  if (isPro) {
-    return (
-      <Button variant="outline" onClick={handleOpenAccount} className="gap-1.5">
-        <span className="text-sm">Manage</span>
-        <ExternalLinkIcon className="text-neutral-600" size={12} />
-      </Button>
-    );
-  }
-
-  if (canTrialQuery.data) {
-    return (
-      <Button
-        variant="outline"
-        onClick={() => startTrialMutation.mutate()}
-        disabled={startTrialMutation.isPending}
-      >
-        <span>Start Pro Trial</span>
-      </Button>
-    );
-  }
-
-  return (
-    <Button variant="outline" onClick={handleProUpgrade} className="gap-1.5">
-      <span>Upgrade to Pro</span>
-      <ExternalLinkIcon className="text-neutral-600" size={12} />
-    </Button>
-  );
-}
-
 function Container({
   title,
   description,
diff --git a/apps/desktop/src/settings/general/index.tsx b/apps/desktop/src/settings/general/index.tsx
index adc1f4cf4a..29a2245698 100644
--- a/apps/desktop/src/settings/general/index.tsx
+++ b/apps/desktop/src/settings/general/index.tsx
@@ -6,7 +6,7 @@ import { commands as analyticsCommands } from "@hypr/plugin-analytics";
 import { commands as listenerCommands } from "@hypr/plugin-listener";
 import type { General, GeneralStorage } from "@hypr/store";
 
-import { AccountSettings } from "./account";
+export { SettingsAccount } from "./account";
 import { AppSettingsView } from "./app-settings";
 import { Audio } from "./audio";
 import { MainLanguageView } from "./main-language";
@@ -121,8 +121,6 @@ export function SettingsApp() {
 
   return (
     <div className="flex flex-col gap-8 pt-3">
-      <AccountSettings />
-
       <form.Field name="autostart">
         {(autostartField) => (
           <form.Field name="save_recordings">
diff --git a/apps/desktop/src/settings/index.tsx b/apps/desktop/src/settings/index.tsx
index af12ca7bed..658acaaf8a 100644
--- a/apps/desktop/src/settings/index.tsx
+++ b/apps/desktop/src/settings/index.tsx
@@ -8,9 +8,15 @@ import {
 
 import { SettingsCalendar } from "./calendar";
 import { SettingsDontUseThis } from "./dont-use-this";
-import { SettingsApp, SettingsNotifications, SettingsSystem } from "./general";
+import {
+  SettingsAccount,
+  SettingsApp,
+  SettingsNotifications,
+  SettingsSystem,
+} from "./general";
 import { SettingsLab } from "./lab";
 import { TemplatesContent } from "./templates-content";
+import { SettingsTodo } from "./todo";
 
 import { LLM } from "~/settings/ai/llm";
 import { STT } from "~/settings/ai/stt";
@@ -59,13 +65,14 @@ export function TabContentSettings({
 }
 
 function SettingsView({ tab }: { tab: Extract<Tab, { type: "settings" }> }) {
-  const activeTab =
-    tab.state.tab === "account" ? "app" : (tab.state.tab ?? "app");
+  const activeTab = tab.state.tab ?? "account";
   const ref = useRef<HTMLDivElement>(null);
   const { atStart, atEnd } = useScrollFade(ref, "vertical", [activeTab]);
 
   const renderContent = () => {
     switch (activeTab) {
+      case "account":
+        return <SettingsAccount />;
       case "app":
         return <SettingsApp />;
       case "notifications":
@@ -84,6 +91,8 @@ function SettingsView({ tab }: { tab: Extract<Tab, { type: "settings" }> }) {
         return <TemplatesContent />;
       case "memory":
         return <SettingsMemory />;
+      case "todo":
+        return <SettingsTodo />;
       case "dont-use-this":
         return <SettingsDontUseThis />;
     }
diff --git a/apps/desktop/src/settings/todo/index.tsx b/apps/desktop/src/settings/todo/index.tsx
new file mode 100644
index 0000000000..d0089143c7
--- /dev/null
+++ b/apps/desktop/src/settings/todo/index.tsx
@@ -0,0 +1,49 @@
+import { ChevronDown } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionTriggerPrimitive,
+} from "@hypr/ui/components/ui/accordion";
+import { cn } from "@hypr/utils";
+
+import { TodoProviderContent } from "./provider-content";
+import { TODO_PROVIDERS } from "./shared";
+
+export function SettingsTodo() {
+  return (
+    <div className="flex flex-col gap-4 pt-3">
+      <Accordion type="multiple" className="flex flex-col">
+        {TODO_PROVIDERS.map((provider) => (
+          <AccordionItem
+            key={provider.id}
+            value={provider.id}
+            className="group/provider border-b border-neutral-200"
+          >
+            <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center">
+              <AccordionHeader className="min-w-0">
+                <AccordionTriggerPrimitive className="flex w-full min-w-0 items-center gap-2 py-3 text-left text-sm font-medium transition-all hover:no-underline">
+                  {provider.icon}
+                  <span>{provider.displayName}</span>
+                </AccordionTriggerPrimitive>
+              </AccordionHeader>
+              <ChevronDown
+                className={cn([
+                  "size-4 shrink-0 text-neutral-400 transition-all duration-200",
+                  "group-data-[state=open]/provider:rotate-180",
+                ])}
+              />
+            </div>
+            <AccordionContent className="pb-4">
+              <div className="flex flex-col gap-3 pl-7">
+                <TodoProviderContent config={provider} />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/settings/todo/provider-content.tsx b/apps/desktop/src/settings/todo/provider-content.tsx
new file mode 100644
index 0000000000..b6c3684f55
--- /dev/null
+++ b/apps/desktop/src/settings/todo/provider-content.tsx
@@ -0,0 +1,164 @@
+import { useCallback, useMemo, useState } from "react";
+
+import { Input } from "@hypr/ui/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@hypr/ui/components/ui/tooltip";
+
+import type { TodoProvider } from "./shared";
+
+import { useAuth } from "~/auth";
+import { useBillingAccess } from "~/auth/billing";
+import { useConnections } from "~/auth/useConnections";
+import { openIntegrationUrl } from "~/shared/integration";
+
+export function TodoProviderContent({ config }: { config: TodoProvider }) {
+  const auth = useAuth();
+  const { isPaid, upgradeToPro } = useBillingAccess();
+  const { data: connections, isError } = useConnections(isPaid);
+  const [filter, setFilter] = useState("");
+
+  const providerConnections = useMemo(
+    () =>
+      connections?.filter(
+        (c) => c.integration_id === config.nangoIntegrationId,
+      ) ?? [],
+    [connections, config.nangoIntegrationId],
+  );
+
+  const handleConnect = useCallback(
+    () =>
+      openIntegrationUrl(
+        config.nangoIntegrationId,
+        undefined,
+        "connect",
+        "todo",
+      ),
+    [config.nangoIntegrationId],
+  );
+
+  if (!auth.session) {
+    return (
+      <div className="pt-1 pb-2">
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <span
+              tabIndex={0}
+              className="cursor-not-allowed text-xs text-neutral-400 opacity-50"
+            >
+              Connect {config.displayName}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            Sign in to connect {config.displayName}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    );
+  }
+
+  if (!isPaid) {
+    return (
+      <div className="pt-1 pb-2">
+        <button
+          onClick={upgradeToPro}
+          className="cursor-pointer text-xs text-neutral-600 underline transition-colors hover:text-neutral-900"
+        >
+          Upgrade to connect
+        </button>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="pt-1 pb-2">
+        <span className="text-xs text-red-600">
+          Failed to load integration status
+        </span>
+      </div>
+    );
+  }
+
+  if (providerConnections.length === 0) {
+    return (
+      <div className="pt-1 pb-2">
+        <button
+          onClick={handleConnect}
+          className="cursor-pointer text-xs text-neutral-600 underline transition-colors hover:text-neutral-900"
+        >
+          Connect {config.displayName}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2 pb-1">
+        {providerConnections.some((c) => c.status === "reconnect_required") ? (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() =>
+                openIntegrationUrl(
+                  config.nangoIntegrationId,
+                  providerConnections[0].connection_id,
+                  "reconnect",
+                  "todo",
+                )
+              }
+              className="cursor-pointer text-xs text-amber-700 underline transition-colors hover:text-amber-900"
+            >
+              Reconnect required
+            </button>
+            <span className="text-xs text-neutral-400">or</span>
+            <button
+              onClick={() =>
+                openIntegrationUrl(
+                  config.nangoIntegrationId,
+                  providerConnections[0].connection_id,
+                  "disconnect",
+                  "todo",
+                )
+              }
+              className="cursor-pointer text-xs text-red-500 underline transition-colors hover:text-red-700"
+            >
+              Disconnect
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() =>
+              openIntegrationUrl(
+                config.nangoIntegrationId,
+                providerConnections[0].connection_id,
+                "disconnect",
+                "todo",
+              )
+            }
+            className="cursor-pointer text-xs text-neutral-500 underline transition-colors hover:text-neutral-700"
+          >
+            Disconnect
+          </button>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex-1">
+          <h3 className="mb-1 text-sm font-medium">{config.filterLabel}</h3>
+          <p className="text-xs text-neutral-500">
+            Filter synced items by {config.filterLabel.toLowerCase()}.
+          </p>
+        </div>
+        <Input
+          className="w-52"
+          placeholder={config.filterPlaceholder}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/settings/todo/shared.tsx b/apps/desktop/src/settings/todo/shared.tsx
new file mode 100644
index 0000000000..c8a45b1c60
--- /dev/null
+++ b/apps/desktop/src/settings/todo/shared.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export type TodoProvider = {
+  id: string;
+  displayName: string;
+  icon: ReactNode;
+  nangoIntegrationId: string;
+  filterLabel: string;
+  filterPlaceholder: string;
+};
+
+export const TODO_PROVIDERS: TodoProvider[] = [
+  {
+    id: "linear",
+    displayName: "Linear",
+    icon: <img src="/assets/linear-icon.svg" alt="Linear" className="size-5" />,
+    nangoIntegrationId: "linear",
+    filterLabel: "Team / Project",
+    filterPlaceholder: "e.g. Team name or project",
+  },
+  {
+    id: "github",
+    displayName: "GitHub",
+    icon: <img src="/assets/github-icon.svg" alt="GitHub" className="size-5" />,
+    nangoIntegrationId: "github",
+    filterLabel: "Repository",
+    filterPlaceholder: "e.g. owner/repo",
+  },
+];
diff --git a/apps/desktop/src/shared/hooks/useDeeplinkHandler.ts b/apps/desktop/src/shared/hooks/useDeeplinkHandler.ts
index b1b219d5c8..9b47055ba8 100644
--- a/apps/desktop/src/shared/hooks/useDeeplinkHandler.ts
+++ b/apps/desktop/src/shared/hooks/useDeeplinkHandler.ts
@@ -56,6 +56,8 @@ export function useDeeplinkHandler() {
           }
           if (return_to === "calendar") {
             openNew({ type: "calendar" });
+          } else if (return_to === "todo") {
+            openNew({ type: "settings", state: { tab: "todo" } });
           }
         }
       }
diff --git a/apps/desktop/src/shared/hooks/useWidgetState.ts b/apps/desktop/src/shared/hooks/useWidgetState.ts
index bc4a32e85e..b0ec084621 100644
--- a/apps/desktop/src/shared/hooks/useWidgetState.ts
+++ b/apps/desktop/src/shared/hooks/useWidgetState.ts
@@ -1,8 +1,8 @@
 import { isTauri } from "@tauri-apps/api/core";
 import { useCallback, useState } from "react";
 
-const COLLAPSED_SIZE = { width: 80, height: 80 };
-const EXPANDED_SIZE = { width: 400, height: 500 };
+const COLLAPSED_SIZE = { width: 120, height: 36 };
+const EXPANDED_SIZE = { width: 320, height: 380 };
 
 export function useWidgetState() {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -14,7 +14,7 @@ export function useWidgetState() {
     }
 
     const [
-      { PhysicalPosition, PhysicalSize },
+      { LogicalPosition, LogicalSize },
       { getCurrentWebviewWindow },
       tauriWindow,
     ] = await Promise.all([
@@ -27,16 +27,19 @@ export function useWidgetState() {
     const monitor = await tauriWindow.currentMonitor();
     if (!monitor) return;
 
-    const { width: screenWidth, height: screenHeight } = monitor.size;
-    const { x: screenX, y: screenY } = monitor.position;
+    const scale = monitor.scaleFactor;
+    const screenWidth = monitor.size.width / scale;
+    const screenHeight = monitor.size.height / scale;
+    const screenX = monitor.position.x / scale;
+    const screenY = monitor.position.y / scale;
 
     const x = screenX + screenWidth - EXPANDED_SIZE.width - 20;
     const y = screenY + screenHeight - EXPANDED_SIZE.height - 20;
 
     await appWindow.setSize(
-      new PhysicalSize(EXPANDED_SIZE.width, EXPANDED_SIZE.height),
+      new LogicalSize(EXPANDED_SIZE.width, EXPANDED_SIZE.height),
     );
-    await appWindow.setPosition(new PhysicalPosition(x, y));
+    await appWindow.setPosition(new LogicalPosition(x, y));
     setIsExpanded(true);
   }, []);
 
@@ -47,7 +50,7 @@ export function useWidgetState() {
     }
 
     const [
-      { PhysicalPosition, PhysicalSize },
+      { LogicalPosition, LogicalSize },
       { getCurrentWebviewWindow },
       tauriWindow,
     ] = await Promise.all([
@@ -63,16 +66,19 @@ export function useWidgetState() {
       return;
     }
 
-    const { width: screenWidth, height: screenHeight } = monitor.size;
-    const { x: screenX, y: screenY } = monitor.position;
+    const scale = monitor.scaleFactor;
+    const screenWidth = monitor.size.width / scale;
+    const screenHeight = monitor.size.height / scale;
+    const screenX = monitor.position.x / scale;
+    const screenY = monitor.position.y / scale;
 
     const x = screenX + screenWidth - COLLAPSED_SIZE.width - 20;
     const y = screenY + screenHeight - COLLAPSED_SIZE.height - 20;
 
     await appWindow.setSize(
-      new PhysicalSize(COLLAPSED_SIZE.width, COLLAPSED_SIZE.height),
+      new LogicalSize(COLLAPSED_SIZE.width, COLLAPSED_SIZE.height),
     );
-    await appWindow.setPosition(new PhysicalPosition(x, y));
+    await appWindow.setPosition(new LogicalPosition(x, y));
     setIsExpanded(false);
   }, []);
 
diff --git a/apps/desktop/src/shared/integration.ts b/apps/desktop/src/shared/integration.ts
new file mode 100644
index 0000000000..baf1ea2c2e
--- /dev/null
+++ b/apps/desktop/src/shared/integration.ts
@@ -0,0 +1,24 @@
+import { commands as openerCommands } from "@hypr/plugin-opener2";
+
+import { buildWebAppUrl } from "~/shared/utils";
+
+export async function openIntegrationUrl(
+  nangoIntegrationId: string | undefined,
+  connectionId: string | undefined,
+  action: "connect" | "reconnect" | "disconnect",
+  returnTo?: string,
+) {
+  if (!nangoIntegrationId) return;
+  const params: Record<string, string> = {
+    action,
+    integration_id: nangoIntegrationId,
+  };
+  if (returnTo) {
+    params.return_to = returnTo;
+  }
+  if (connectionId) {
+    params.connection_id = connectionId;
+  }
+  const url = await buildWebAppUrl("/app/integration", params);
+  await openerCommands.openUrl(url, null);
+}
diff --git a/apps/desktop/src/shared/utils.ts b/apps/desktop/src/shared/utils.ts
index ae5722a06d..a8757f6bec 100644
--- a/apps/desktop/src/shared/utils.ts
+++ b/apps/desktop/src/shared/utils.ts
@@ -19,7 +19,11 @@ export const getScheme = async (): Promise<string> => {
   return schemes[id] ?? "hypr";
 };
 
-type DesktopFlowPath = "/auth" | "/app/integration" | "/app/checkout";
+type DesktopFlowPath =
+  | "/auth"
+  | "/app/integration"
+  | "/app/checkout"
+  | "/app/switch-plan";
 
 export const buildWebAppUrl = async (
   path: DesktopFlowPath,
diff --git a/apps/desktop/src/sidebar/settings.tsx b/apps/desktop/src/sidebar/settings.tsx
index 6e3b743947..0f6d2adeb0 100644
--- a/apps/desktop/src/sidebar/settings.tsx
+++ b/apps/desktop/src/sidebar/settings.tsx
@@ -10,7 +10,9 @@ import {
   MonitorIcon,
   SmartphoneIcon,
   SparklesIcon,
+  TicketIcon,
   TriangleAlertIcon,
+  UserIcon,
 } from "lucide-react";
 import { useCallback } from "react";
 
@@ -26,6 +28,7 @@ const GROUPS: {
     label: "General",
     items: [
       { id: "app", label: "App", icon: SmartphoneIcon },
+      { id: "account", label: "Account", icon: UserIcon },
       { id: "calendar", label: "Calendar", icon: CalendarIcon },
       { id: "notifications", label: "Notifications", icon: BellIcon },
       { id: "system", label: "System", icon: MonitorIcon },
@@ -46,10 +49,16 @@ const GROUPS: {
   },
 ];
 
-const DONT_USE_THIS_ITEM = {
-  id: "dont-use-this" as SettingsTab,
-  label: "Don't use this",
-  icon: TriangleAlertIcon,
+const DONT_USE_THIS_GROUP = {
+  label: "Do not use",
+  items: [
+    {
+      id: "dont-use-this" as SettingsTab,
+      label: "General",
+      icon: TriangleAlertIcon,
+    },
+    { id: "todo" as SettingsTab, label: "Ticket", icon: TicketIcon },
+  ],
 };
 
 export function SettingsNav() {
@@ -70,10 +79,8 @@ export function SettingsNav() {
 
   const activeTab =
     currentTab?.type === "settings"
-      ? currentTab.state.tab === "account"
-        ? "app"
-        : (currentTab.state.tab ?? "app")
-      : "app";
+      ? (currentTab.state.tab ?? "account")
+      : "account";
 
   const setActiveTab = useCallback(
     (tab: SettingsTab) => {
@@ -84,13 +91,7 @@ export function SettingsNav() {
     [currentTab, updateSettingsTabState],
   );
 
-  const groups = showDontUseThis
-    ? GROUPS.map((g) =>
-        g.label === "Advanced"
-          ? { ...g, items: [...g.items, DONT_USE_THIS_ITEM] }
-          : g,
-      )
-    : GROUPS;
+  const groups = showDontUseThis ? [...GROUPS, DONT_USE_THIS_GROUP] : GROUPS;
 
   return (
     <div className="flex h-full flex-col gap-4 overflow-y-auto px-3 py-2">
diff --git a/apps/desktop/src/store/zustand/tabs/schema.ts b/apps/desktop/src/store/zustand/tabs/schema.ts
index 3609322dcd..e68caf5938 100644
--- a/apps/desktop/src/store/zustand/tabs/schema.ts
+++ b/apps/desktop/src/store/zustand/tabs/schema.ts
@@ -37,6 +37,7 @@ export type SettingsTab =
   | "intelligence"
   | "templates"
   | "memory"
+  | "todo"
   | "dont-use-this";
 
 export type SettingsState = {
@@ -194,7 +195,7 @@ export const getDefaultState = (tab: TabInput): Tab => {
       return {
         ...base,
         type: "settings",
-        state: { tab: (tab.state?.tab as SettingsTab) ?? "app" },
+        state: { tab: (tab.state?.tab as SettingsTab) ?? "account" },
       };
     case "chat_support":
       return {
diff --git a/apps/web/AGENTS.md b/apps/web/AGENTS.md
index 15d40858b3..0240dac5f0 100644
--- a/apps/web/AGENTS.md
+++ b/apps/web/AGENTS.md
@@ -1,10 +1,9 @@
 ```bash
-# REPO="SOMEWHERE" ($HOME/repos/hyprnote inside Devin)
 infisical export \
   --env=dev \
   --secret-overriding=false \
   --format=dotenv \
-  --output-file="$REPO/apps/web/.env" \
+  --output-file="apps/web/.env" \
   --projectId=87dad7b5-72a6-4791-9228-b3b86b169db1 \
   --path="/web"
 ```
diff --git a/apps/web/package.json b/apps/web/package.json
index d2860a66c2..76a2beb84a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,6 +15,7 @@
     "@honeycombio/opentelemetry-web": "^1.3.0",
     "@hypr/api-client": "workspace:*",
     "@hypr/changelog": "workspace:^",
+    "@hypr/pricing": "workspace:^",
     "@hypr/supabase": "workspace:*",
     "@hypr/tiptap": "workspace:*",
     "@hypr/ui": "workspace:*",
diff --git a/apps/web/src/functions/billing.ts b/apps/web/src/functions/billing.ts
index 15f7c9c4ee..cc6408c832 100644
--- a/apps/web/src/functions/billing.ts
+++ b/apps/web/src/functions/billing.ts
@@ -156,6 +156,89 @@ export const createCheckoutSession = createServerFn({ method: "POST" })
     return { url: checkout.url };
   });
 
+const createPlanSwitchSessionInput = z.object({
+  targetPlan: z.enum(["lite", "pro"]),
+  targetPeriod: z.enum(["monthly", "yearly"]).default("monthly"),
+  scheme: desktopSchemeSchema.optional(),
+});
+
+export const createPlanSwitchSession = createServerFn({ method: "POST" })
+  .inputValidator(createPlanSwitchSessionInput)
+  .handler(async ({ data }) => {
+    const supabase = getSupabaseServerClient();
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user?.id) {
+      throw new Error("Unauthorized");
+    }
+
+    const stripe = getStripeClient();
+
+    const stripeCustomerId = await getStripeCustomerIdForUser(supabase, {
+      id: user.id,
+      user_metadata: user.user_metadata,
+    });
+
+    if (!stripeCustomerId) {
+      return { url: null };
+    }
+
+    const subscriptions = await stripe.subscriptions.list({
+      customer: stripeCustomerId,
+      status: "all",
+      limit: 1,
+    });
+
+    const activeSubscription = subscriptions.data.find((sub) =>
+      ["active", "trialing"].includes(sub.status),
+    );
+
+    if (!activeSubscription) {
+      return { url: null };
+    }
+
+    const subscriptionItemId = activeSubscription.items.data[0].id;
+
+    const targetPriceId =
+      data.targetPlan === "lite"
+        ? requireEnv(
+            env.STRIPE_LITE_MONTHLY_PRICE_ID,
+            "STRIPE_LITE_MONTHLY_PRICE_ID",
+          )
+        : data.targetPeriod === "yearly"
+          ? requireEnv(env.STRIPE_YEARLY_PRICE_ID, "STRIPE_YEARLY_PRICE_ID")
+          : requireEnv(env.STRIPE_MONTHLY_PRICE_ID, "STRIPE_MONTHLY_PRICE_ID");
+
+    const returnUrl = data.scheme
+      ? `${env.VITE_APP_URL}/app/account?scheme=${data.scheme}`
+      : `${env.VITE_APP_URL}/app/account`;
+
+    const portalSession = await stripe.billingPortal.sessions.create({
+      customer: stripeCustomerId,
+      return_url: returnUrl,
+      flow_data: {
+        type: "subscription_update_confirm",
+        subscription_update_confirm: {
+          subscription: activeSubscription.id,
+          items: [
+            {
+              id: subscriptionItemId,
+              price: targetPriceId,
+            },
+          ],
+        },
+        after_completion: {
+          type: "redirect",
+          redirect: { return_url: returnUrl },
+        },
+      },
+    });
+
+    return { url: portalSession.url };
+  });
+
 export const createPortalSession = createServerFn({ method: "POST" }).handler(
   async () => {
     const supabase = getSupabaseServerClient();
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index ef870e3160..6cf780fca1 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -114,6 +114,7 @@ import { Route as ViewCallbackSignoutRouteImport } from './routes/_view/callback
 import { Route as ViewCallbackIntegrationRouteImport } from './routes/_view/callback/integration'
 import { Route as ViewCallbackAuthRouteImport } from './routes/_view/callback/auth'
 import { Route as ViewBlogSlugRouteImport } from './routes/_view/blog/$slug'
+import { Route as ViewAppSwitchPlanRouteImport } from './routes/_view/app/switch-plan'
 import { Route as ViewAppIntegrationRouteImport } from './routes/_view/app/integration'
 import { Route as ViewAppCheckoutRouteImport } from './routes/_view/app/checkout'
 import { Route as ViewAppAccountRouteImport } from './routes/_view/app/account'
@@ -689,6 +690,11 @@ const ViewBlogSlugRoute = ViewBlogSlugRouteImport.update({
   path: '/blog/$slug',
   getParentRoute: () => ViewRouteRoute,
 } as any)
+const ViewAppSwitchPlanRoute = ViewAppSwitchPlanRouteImport.update({
+  id: '/switch-plan',
+  path: '/switch-plan',
+  getParentRoute: () => ViewAppRouteRoute,
+} as any)
 const ViewAppIntegrationRoute = ViewAppIntegrationRouteImport.update({
   id: '/integration',
   path: '/integration',
@@ -940,6 +946,7 @@ export interface FileRoutesByFullPath {
   '/app/account': typeof ViewAppAccountRoute
   '/app/checkout': typeof ViewAppCheckoutRoute
   '/app/integration': typeof ViewAppIntegrationRoute
+  '/app/switch-plan': typeof ViewAppSwitchPlanRoute
   '/blog/$slug': typeof ViewBlogSlugRoute
   '/callback/auth': typeof ViewCallbackAuthRoute
   '/callback/integration': typeof ViewCallbackIntegrationRoute
@@ -1082,6 +1089,7 @@ export interface FileRoutesByTo {
   '/app/account': typeof ViewAppAccountRoute
   '/app/checkout': typeof ViewAppCheckoutRoute
   '/app/integration': typeof ViewAppIntegrationRoute
+  '/app/switch-plan': typeof ViewAppSwitchPlanRoute
   '/blog/$slug': typeof ViewBlogSlugRoute
   '/callback/auth': typeof ViewCallbackAuthRoute
   '/callback/integration': typeof ViewCallbackIntegrationRoute
@@ -1230,6 +1238,7 @@ export interface FileRoutesById {
   '/_view/app/account': typeof ViewAppAccountRoute
   '/_view/app/checkout': typeof ViewAppCheckoutRoute
   '/_view/app/integration': typeof ViewAppIntegrationRoute
+  '/_view/app/switch-plan': typeof ViewAppSwitchPlanRoute
   '/_view/blog/$slug': typeof ViewBlogSlugRoute
   '/_view/callback/auth': typeof ViewCallbackAuthRoute
   '/_view/callback/integration': typeof ViewCallbackIntegrationRoute
@@ -1378,6 +1387,7 @@ export interface FileRouteTypes {
     | '/app/account'
     | '/app/checkout'
     | '/app/integration'
+    | '/app/switch-plan'
     | '/blog/$slug'
     | '/callback/auth'
     | '/callback/integration'
@@ -1520,6 +1530,7 @@ export interface FileRouteTypes {
     | '/app/account'
     | '/app/checkout'
     | '/app/integration'
+    | '/app/switch-plan'
     | '/blog/$slug'
     | '/callback/auth'
     | '/callback/integration'
@@ -1667,6 +1678,7 @@ export interface FileRouteTypes {
     | '/_view/app/account'
     | '/_view/app/checkout'
     | '/_view/app/integration'
+    | '/_view/app/switch-plan'
     | '/_view/blog/$slug'
     | '/_view/callback/auth'
     | '/_view/callback/integration'
@@ -2566,6 +2578,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ViewBlogSlugRouteImport
       parentRoute: typeof ViewRouteRoute
     }
+    '/_view/app/switch-plan': {
+      id: '/_view/app/switch-plan'
+      path: '/switch-plan'
+      fullPath: '/app/switch-plan'
+      preLoaderRoute: typeof ViewAppSwitchPlanRouteImport
+      parentRoute: typeof ViewAppRouteRoute
+    }
     '/_view/app/integration': {
       id: '/_view/app/integration'
       path: '/integration'
@@ -2853,6 +2872,7 @@ interface ViewAppRouteRouteChildren {
   ViewAppAccountRoute: typeof ViewAppAccountRoute
   ViewAppCheckoutRoute: typeof ViewAppCheckoutRoute
   ViewAppIntegrationRoute: typeof ViewAppIntegrationRoute
+  ViewAppSwitchPlanRoute: typeof ViewAppSwitchPlanRoute
   ViewAppIndexRoute: typeof ViewAppIndexRoute
 }
 
@@ -2860,6 +2880,7 @@ const ViewAppRouteRouteChildren: ViewAppRouteRouteChildren = {
   ViewAppAccountRoute: ViewAppAccountRoute,
   ViewAppCheckoutRoute: ViewAppCheckoutRoute,
   ViewAppIntegrationRoute: ViewAppIntegrationRoute,
+  ViewAppSwitchPlanRoute: ViewAppSwitchPlanRoute,
   ViewAppIndexRoute: ViewAppIndexRoute,
 }
 
diff --git a/apps/web/src/routes/_view/app/-account-settings.tsx b/apps/web/src/routes/_view/app/-account-settings.tsx
index a1b113b652..b79521bd01 100644
--- a/apps/web/src/routes/_view/app/-account-settings.tsx
+++ b/apps/web/src/routes/_view/app/-account-settings.tsx
@@ -1,8 +1,13 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 
+import type { PlanTierData, TierAction } from "@hypr/pricing";
+import { PlanGrid } from "@hypr/pricing/ui";
+import { cn } from "@hypr/utils";
+
 import {
   canStartTrial,
+  createPlanSwitchSession,
   createPortalSession,
   startTrial,
 } from "@/functions/billing";
@@ -11,6 +16,8 @@ import { useBilling } from "@/hooks/use-billing";
 export function AccountSettingsCard() {
   const billing = useBilling();
 
+  const currentTier = billing.plan === "trial" ? "pro" : billing.plan;
+
   const canTrialQuery = useQuery({
     queryKey: ["canStartTrial"],
     queryFn: () => canStartTrial(),
@@ -26,6 +33,17 @@ export function AccountSettingsCard() {
     },
   });
 
+  const switchPlanMutation = useMutation({
+    mutationFn: async (targetPlan: "lite" | "pro") => {
+      const { url } = await createPlanSwitchSession({
+        data: { targetPlan, targetPeriod: "monthly" },
+      });
+      if (url) {
+        window.location.href = url;
+      }
+    },
+  });
+
   const startTrialMutation = useMutation({
     mutationFn: () => startTrial(),
     onSuccess: () => {
@@ -34,79 +52,97 @@ export function AccountSettingsCard() {
     },
   });
 
-  const renderPlanButton = () => {
-    if (
-      !billing.isReady ||
-      (billing.plan === "free" && canTrialQuery.isLoading)
-    ) {
-      return (
-        <div className="flex h-8 items-center px-4 text-sm text-neutral-400">
-          Loading...
-        </div>
-      );
-    }
+  const isLoading =
+    !billing.isReady || (billing.plan === "free" && canTrialQuery.isLoading);
 
-    if (billing.plan === "free") {
-      if (canTrialQuery.data) {
-        return (
-          <button
-            onClick={() => startTrialMutation.mutate()}
-            disabled={startTrialMutation.isPending}
-            className="flex h-8 items-center rounded-full bg-linear-to-t from-stone-600 to-stone-500 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
-          >
-            {startTrialMutation.isPending ? "Loading..." : "Start Free Trial"}
-          </button>
-        );
-      }
+  if (isLoading) {
+    return (
+      <div className="rounded-xs border border-neutral-100 p-4">
+        <h3 className="mb-2 font-serif text-lg font-semibold">
+          Plan & Billing
+        </h3>
+        <p className="text-sm text-neutral-400">Loading...</p>
+      </div>
+    );
+  }
 
-      return (
-        <Link
-          to="/pricing/"
-          className="flex h-8 items-center rounded-full bg-linear-to-t from-stone-600 to-stone-500 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%]"
+  return (
+    <PlanGrid
+      currentPlan={currentTier}
+      isTrialing={billing.isTrialing}
+      trialDaysRemaining={billing.trialDaysRemaining}
+      canStartTrial={canTrialQuery.data ?? false}
+      isPaid={billing.isPaid}
+      renderManageBilling={() => (
+        <button
+          onClick={() => manageBillingMutation.mutate()}
+          disabled={manageBillingMutation.isPending}
+          className="flex h-8 cursor-pointer items-center rounded-full border border-neutral-300 bg-linear-to-b from-white to-stone-50 px-4 text-sm text-neutral-700 shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
         >
-          Upgrade
-        </Link>
-      );
-    }
+          {manageBillingMutation.isPending ? "Loading..." : "Manage billing"}
+        </button>
+      )}
+      renderAction={(_tier: PlanTierData, action: TierAction) => {
+        if (action == null) return null;
 
-    return (
-      <button
-        onClick={() => manageBillingMutation.mutate()}
-        disabled={manageBillingMutation.isPending}
-        className="flex h-8 cursor-pointer items-center rounded-full border border-neutral-300 bg-linear-to-b from-white to-stone-50 px-4 text-sm text-neutral-700 shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
-      >
-        {manageBillingMutation.isPending ? "Loading..." : "Manage Billing"}
-      </button>
-    );
-  };
+        if (action.style === "current") {
+          return (
+            <div className="flex h-8 items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 text-xs text-neutral-500">
+              {action.label}
+            </div>
+          );
+        }
 
-  const planDisplay = !billing.isReady
-    ? "..."
-    : billing.plan === "trial"
-      ? "Trial"
-      : billing.plan === "pro"
-        ? "Pro"
-        : billing.plan === "lite"
-          ? "Lite"
-          : "Free";
+        const buttonClass = cn([
+          "flex h-8 w-full items-center justify-center rounded-full text-xs font-medium transition-all hover:scale-[102%] active:scale-[98%]",
+          action.style === "upgrade"
+            ? "bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:shadow-lg"
+            : "border border-neutral-300 bg-linear-to-b from-white to-stone-50 text-neutral-700 shadow-xs hover:shadow-md",
+        ]);
 
-  return (
-    <div className="rounded-xs border border-neutral-100">
-      <div className="p-4">
-        <h3 className="mb-2 font-serif text-lg font-semibold">
-          Account Settings
-        </h3>
-        <p className="text-sm text-neutral-600">
-          Manage your account preferences and billing settings
-        </p>
-      </div>
+        if (action.targetPlan && currentTier === "free") {
+          if (action.label === "Start free trial") {
+            return (
+              <button
+                onClick={() => startTrialMutation.mutate()}
+                disabled={startTrialMutation.isPending}
+                className={cn([
+                  buttonClass,
+                  "cursor-pointer disabled:opacity-50 disabled:hover:scale-100",
+                ])}
+              >
+                {startTrialMutation.isPending ? "Loading..." : action.label}
+              </button>
+            );
+          }
+          return (
+            <Link
+              to="/app/checkout/"
+              search={{ plan: action.targetPlan, period: "monthly" }}
+              className={buttonClass}
+            >
+              {action.label}
+            </Link>
+          );
+        }
 
-      <div className="flex items-center justify-between border-t border-neutral-100 p-4">
-        <div className="text-sm">
-          Current plan: <span className="font-medium">{planDisplay}</span>
-        </div>
-        {renderPlanButton()}
-      </div>
-    </div>
+        return (
+          <button
+            onClick={() => {
+              if (action.targetPlan) {
+                switchPlanMutation.mutate(action.targetPlan);
+              }
+            }}
+            disabled={switchPlanMutation.isPending}
+            className={cn([
+              buttonClass,
+              "cursor-pointer disabled:opacity-50 disabled:hover:scale-100",
+            ])}
+          >
+            {switchPlanMutation.isPending ? "Loading..." : action.label}
+          </button>
+        );
+      }}
+    />
   );
 }
diff --git a/apps/web/src/routes/_view/app/integration.tsx b/apps/web/src/routes/_view/app/integration.tsx
index 4c77a12dfe..804c72aa74 100644
--- a/apps/web/src/routes/_view/app/integration.tsx
+++ b/apps/web/src/routes/_view/app/integration.tsx
@@ -27,6 +27,16 @@ export const INTEGRATION_DISPLAY: Record<
     description: "Connect your Google Calendar to sync your meetings",
     connectingHint: "Follow the prompts to connect your Google account",
   },
+  linear: {
+    name: "Linear",
+    description: "Connect Linear to sync your issues and tasks",
+    connectingHint: "Follow the prompts to connect your Linear account",
+  },
+  github: {
+    name: "GitHub",
+    description: "Connect GitHub to sync your issues and pull requests",
+    connectingHint: "Follow the prompts to connect your GitHub account",
+  },
 };
 
 export function getIntegrationDisplay(integrationId: string) {
diff --git a/apps/web/src/routes/_view/app/switch-plan.tsx b/apps/web/src/routes/_view/app/switch-plan.tsx
new file mode 100644
index 0000000000..0d566f5d8d
--- /dev/null
+++ b/apps/web/src/routes/_view/app/switch-plan.tsx
@@ -0,0 +1,30 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createPlanSwitchSession } from "@/functions/billing";
+import { desktopSchemeSchema } from "@/functions/desktop-flow";
+
+const validateSearch = z.object({
+  targetPlan: z.enum(["lite", "pro"]),
+  targetPeriod: z.enum(["monthly", "yearly"]).catch("monthly"),
+  scheme: desktopSchemeSchema.optional(),
+});
+
+export const Route = createFileRoute("/_view/app/switch-plan")({
+  validateSearch,
+  beforeLoad: async ({ search }) => {
+    const { url } = await createPlanSwitchSession({
+      data: {
+        targetPlan: search.targetPlan,
+        targetPeriod: search.targetPeriod,
+        scheme: search.scheme,
+      },
+    });
+
+    if (url) {
+      throw redirect({ href: url } as any);
+    }
+
+    throw redirect({ to: "/app/account/" });
+  },
+});
diff --git a/apps/web/src/routes/_view/pricing.tsx b/apps/web/src/routes/_view/pricing.tsx
index 319cf58f91..1cdbea56ab 100644
--- a/apps/web/src/routes/_view/pricing.tsx
+++ b/apps/web/src/routes/_view/pricing.tsx
@@ -156,7 +156,7 @@ function HeroSection() {
 function PricingCardsSection() {
   return (
     <section className="laptop:px-0 px-4 py-16">
-      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3">
+      <div className="mx-auto grid max-w-5xl grid-cols-1 items-stretch gap-8 md:grid-cols-3">
         {pricingPlans.map((plan) => (
           <PricingCard key={plan.name} plan={plan} />
         ))}
@@ -171,14 +171,16 @@ function PricingCard({ plan }: { plan: PricingPlan }) {
       className={cn([
         "flex flex-col overflow-hidden rounded-xs border transition-transform",
         plan.popular
-          ? "relative scale-105 border-stone-600 shadow-lg"
+          ? "relative border-stone-600 shadow-lg"
           : "border-neutral-100",
       ])}
     >
-      {plan.popular && (
+      {plan.popular ? (
         <div className="bg-stone-600 px-4 py-2 text-center text-sm font-medium text-white">
           Most Popular
         </div>
+      ) : (
+        <div className="px-4 py-2 text-sm">&nbsp;</div>
       )}
 
       <div className="flex flex-1 flex-col p-8">
@@ -186,28 +188,34 @@ function PricingCard({ plan }: { plan: PricingPlan }) {
           <h2 className="mb-2 font-serif text-2xl text-stone-700">
             {plan.name}
           </h2>
-          <p className="mb-4 text-sm text-neutral-600">{plan.description}</p>
+          <p className="mb-4 min-h-[80px] text-sm text-neutral-600">
+            {plan.description}
+          </p>
 
-          {plan.price ? (
-            <div className="flex flex-col gap-2">
-              <div className="flex items-baseline gap-2">
-                <span className="font-serif text-4xl text-stone-700">
-                  ${plan.price.monthly}
-                </span>
-                <span className="text-neutral-600">/month</span>
-              </div>
-              {plan.price.yearly != null && (
-                <div className="text-sm text-neutral-600">
-                  or ${plan.price.yearly}/year
+          <div className="min-h-[64px]">
+            {plan.price ? (
+              <div className="flex flex-col gap-2">
+                <div className="flex items-baseline gap-2">
+                  <span className="font-serif text-4xl text-stone-700">
+                    ${plan.price.monthly}
+                  </span>
+                  <span className="text-neutral-600">/month</span>
                 </div>
-              )}
-            </div>
-          ) : (
-            <div className="font-serif text-4xl text-stone-700">Free</div>
-          )}
+                {plan.price.yearly != null ? (
+                  <div className="text-sm text-neutral-600">
+                    or ${plan.price.yearly}/year
+                  </div>
+                ) : (
+                  <div className="text-sm text-neutral-400">Monthly only</div>
+                )}
+              </div>
+            ) : (
+              <div className="font-serif text-4xl text-stone-700">Free</div>
+            )}
+          </div>
         </div>
 
-        <div className="flex flex-1 flex-col gap-3">
+        <div className="flex flex-col gap-3">
           {plan.features.map((feature, idx) => {
             const IconComponent =
               feature.included === true
@@ -268,33 +276,35 @@ function PricingCard({ plan }: { plan: PricingPlan }) {
           })}
         </div>
 
-        {plan.price ? (
-          <Link
-            to="/app/checkout/"
-            search={{
-              plan: plan.name.toLowerCase() as "lite" | "pro",
-              period: "monthly",
-            }}
-            className={cn([
-              "mt-8 flex h-10 w-full cursor-pointer items-center justify-center text-sm font-medium transition-all",
-              plan.popular
-                ? "rounded-full bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]"
-                : "rounded-full bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 shadow-xs hover:scale-[102%] hover:shadow-md active:scale-[98%]",
-            ])}
-          >
-            Get Started
-          </Link>
-        ) : (
-          <Link
-            to="/download/"
-            className={cn([
-              "mt-8 flex h-10 w-full cursor-pointer items-center justify-center text-sm font-medium transition-all",
-              "rounded-full bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 shadow-xs hover:scale-[102%] hover:shadow-md active:scale-[98%]",
-            ])}
-          >
-            Download for free
-          </Link>
-        )}
+        <div className="mt-auto pt-8">
+          {plan.price ? (
+            <Link
+              to="/app/checkout/"
+              search={{
+                plan: plan.name.toLowerCase() as "lite" | "pro",
+                period: "monthly",
+              }}
+              className={cn([
+                "flex h-10 w-full cursor-pointer items-center justify-center text-sm font-medium transition-all",
+                plan.popular
+                  ? "rounded-full bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]"
+                  : "rounded-full bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 shadow-xs hover:scale-[102%] hover:shadow-md active:scale-[98%]",
+              ])}
+            >
+              Get Started
+            </Link>
+          ) : (
+            <Link
+              to="/download/"
+              className={cn([
+                "flex h-10 w-full cursor-pointer items-center justify-center text-sm font-medium transition-all",
+                "rounded-full bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 shadow-xs hover:scale-[102%] hover:shadow-md active:scale-[98%]",
+              ])}
+            >
+              Download for free
+            </Link>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/pricing/package.json b/packages/pricing/package.json
new file mode 100644
index 0000000000..1a81fda799
--- /dev/null
+++ b/packages/pricing/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@hypr/pricing",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./ui": "./src/plan-grid.tsx"
+  },
+  "dependencies": {
+    "@hypr/utils": "workspace:^"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0"
+  }
+}
diff --git a/packages/pricing/src/index.ts b/packages/pricing/src/index.ts
new file mode 100644
index 0000000000..206af4e27a
--- /dev/null
+++ b/packages/pricing/src/index.ts
@@ -0,0 +1,8 @@
+export {
+  getActionForTier,
+  PLAN_TIERS,
+  TIER_ORDER,
+  type PlanTier,
+  type PlanTierData,
+  type TierAction,
+} from "./tiers";
diff --git a/packages/pricing/src/plan-grid.tsx b/packages/pricing/src/plan-grid.tsx
new file mode 100644
index 0000000000..6b353ace18
--- /dev/null
+++ b/packages/pricing/src/plan-grid.tsx
@@ -0,0 +1,109 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "@hypr/utils";
+
+import {
+  getActionForTier,
+  PLAN_TIERS,
+  type PlanTier,
+  type PlanTierData,
+  type TierAction,
+} from "./tiers";
+
+export function PlanGrid({
+  currentPlan,
+  isTrialing,
+  trialDaysRemaining,
+  canStartTrial,
+  isPaid,
+  renderAction,
+  renderManageBilling,
+}: {
+  currentPlan: PlanTier;
+  isTrialing: boolean;
+  trialDaysRemaining: number | null;
+  canStartTrial: boolean;
+  isPaid: boolean;
+  renderAction: (tier: PlanTierData, action: TierAction) => ReactNode;
+  renderManageBilling?: () => ReactNode;
+}) {
+  const statusText = isTrialing
+    ? `Pro trial${trialDaysRemaining != null ? ` \u2014 ${trialDaysRemaining} day${trialDaysRemaining === 1 ? "" : "s"} left` : ""}`
+    : `You\u2019re on the ${currentPlan === "free" ? "Free" : currentPlan === "lite" ? "Lite" : "Pro"} plan`;
+
+  return (
+    <div className="rounded-xs border border-neutral-100">
+      <div className="flex items-center justify-between p-4">
+        <div>
+          <h3 className="mb-2 font-serif text-lg font-semibold">
+            Plan & Billing
+          </h3>
+          <p className="text-sm text-neutral-600">{statusText}</p>
+        </div>
+        {isPaid && renderManageBilling?.()}
+      </div>
+
+      <div className="grid grid-cols-3 gap-px border-t border-neutral-100 bg-neutral-100">
+        {PLAN_TIERS.map((tier) => {
+          const isCurrent = tier.id === currentPlan;
+          const action = getActionForTier(tier.id, currentPlan, canStartTrial);
+
+          return (
+            <div
+              key={tier.id}
+              className={cn([
+                "flex flex-col bg-white p-4",
+                isCurrent && "bg-stone-50/60",
+              ])}
+            >
+              <div className="mb-3 flex items-center gap-2">
+                <span className="font-serif text-base font-medium text-stone-800">
+                  {tier.name}
+                </span>
+                {isCurrent && (
+                  <span className="rounded-full bg-stone-600 px-2 py-0.5 text-[10px] font-medium tracking-wide text-white uppercase">
+                    {isTrialing ? "Trial" : "Current"}
+                  </span>
+                )}
+              </div>
+
+              <div className="mb-3">
+                <span className="font-serif text-2xl text-stone-700">
+                  {tier.price}
+                </span>
+                {tier.period && (
+                  <span className="text-sm text-neutral-500">
+                    {tier.period}
+                  </span>
+                )}
+                {tier.subtitle && (
+                  <div className="mt-0.5 text-xs text-neutral-400">
+                    {tier.subtitle}
+                  </div>
+                )}
+              </div>
+
+              <div className="mb-4 flex flex-col gap-1.5">
+                {tier.features.map((f) => (
+                  <div key={f} className="flex items-start gap-1.5">
+                    <CheckCircle2 className="mt-0.5 size-3.5 shrink-0 text-green-700" />
+                    <span className="text-xs text-neutral-700">{f}</span>
+                  </div>
+                ))}
+                {tier.notIncluded.map((f) => (
+                  <div key={f} className="flex items-start gap-1.5">
+                    <XCircle className="mt-0.5 size-3.5 shrink-0 text-neutral-300" />
+                    <span className="text-xs text-neutral-400">{f}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-auto">{renderAction(tier, action)}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/pricing/src/tiers.ts b/packages/pricing/src/tiers.ts
new file mode 100644
index 0000000000..d338c6e4ef
--- /dev/null
+++ b/packages/pricing/src/tiers.ts
@@ -0,0 +1,106 @@
+export type PlanTier = "free" | "lite" | "pro";
+
+export type TierAction =
+  | {
+      label: string;
+      style: "current" | "upgrade" | "downgrade";
+      targetPlan: "lite" | "pro";
+    }
+  | { label: string; style: "current"; targetPlan?: undefined }
+  | null;
+
+export interface PlanTierData {
+  id: PlanTier;
+  name: string;
+  price: string;
+  period: string;
+  subtitle: string | null;
+  features: string[];
+  notIncluded: string[];
+}
+
+export const PLAN_TIERS: PlanTierData[] = [
+  {
+    id: "free",
+    name: "Free",
+    price: "$0",
+    period: "",
+    subtitle: null,
+    features: ["On-device transcription", "Bring your own API keys", "Export"],
+    notIncluded: ["Cloud AI", "Integrations"],
+  },
+  {
+    id: "lite",
+    name: "Lite",
+    price: "$8",
+    period: "/mo",
+    subtitle: "Monthly only",
+    features: ["Everything in Free", "Cloud AI (STT & LLM)", "Integrations"],
+    notIncluded: ["Advanced templates", "Cloud sync"],
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    price: "$25",
+    period: "/mo",
+    subtitle: "or $250/year",
+    features: [
+      "Everything in Free",
+      "Cloud AI (STT & LLM)",
+      "Advanced templates",
+      "Integrations",
+      "Cloud sync",
+      "Shareable links",
+    ],
+    notIncluded: [],
+  },
+];
+
+export const TIER_ORDER: Record<PlanTier, number> = {
+  free: 0,
+  lite: 1,
+  pro: 2,
+};
+
+export function getActionForTier(
+  tierId: PlanTier,
+  currentPlan: PlanTier,
+  canStartTrial: boolean,
+): TierAction {
+  if (tierId === currentPlan) {
+    return { label: "Current plan", style: "current" };
+  }
+
+  const direction =
+    TIER_ORDER[tierId] > TIER_ORDER[currentPlan] ? "upgrade" : "downgrade";
+
+  if (currentPlan === "free") {
+    if (tierId === "pro" && canStartTrial) {
+      return {
+        label: "Start free trial",
+        style: "upgrade",
+        targetPlan: "pro",
+      };
+    }
+    if (tierId === "lite" || tierId === "pro") {
+      return {
+        label: tierId === "lite" ? "Get Lite" : "Get Pro",
+        style: "upgrade",
+        targetPlan: tierId,
+      };
+    }
+  }
+
+  if (tierId === "free") {
+    return null;
+  }
+
+  return {
+    label:
+      direction === "upgrade"
+        ? `Upgrade to ${tierId === "pro" ? "Pro" : "Lite"}`
+        : `Switch to ${tierId === "pro" ? "Pro" : "Lite"}`,
+    style: direction,
+    targetPlan: tierId,
+  };
+}
diff --git a/packages/pricing/tsconfig.json b/packages/pricing/tsconfig.json
new file mode 100644
index 0000000000..213355332d
--- /dev/null
+++ b/packages/pricing/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cabb908210..888a611a91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -334,6 +334,9 @@ importers:
       '@hypr/plugin-windows':
         specifier: workspace:*
         version: link:../../plugins/windows
+      '@hypr/pricing':
+        specifier: workspace:^
+        version: link:../../packages/pricing
       '@hypr/store':
         specifier: workspace:*
         version: link:../../packages/store
@@ -781,6 +784,9 @@ importers:
       '@hypr/changelog':
         specifier: workspace:^
         version: link:../../packages/changelog
+      '@hypr/pricing':
+        specifier: workspace:^
+        version: link:../../packages/pricing
       '@hypr/supabase':
         specifier: workspace:*
         version: link:../../packages/supabase
@@ -1338,6 +1344,22 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
+  packages/pricing:
+    dependencies:
+      '@hypr/utils':
+        specifier: workspace:^
+        version: link:../utils
+      lucide-react:
+        specifier: '>=0.400.0'
+        version: 0.544.0(react@19.2.4)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.4
+    devDependencies:
+      '@types/react':
+        specifier: ^19.2.13
+        version: 19.2.14
+
   packages/store:
     dependencies:
       tinybase: