diff --git a/README.md b/README.md
index 9db7b4458..edc8a010a 100644
--- a/README.md
+++ b/README.md
@@ -106,13 +106,13 @@ The configuration is defined in the `apps/web/config` folder. Here you can find
 To install a Shadcn UI component, you can use the following command:
 
 ```bash
-npx shadcn-ui@latest add <component> --path=packages/ui/shadcn
+npx shadcn-ui@latest add <component> --path=packages/src/ui/shadcn
 ```
 
 For example, to install the `Button` component, you can use the following command:
 
 ```bash
-npx shadcn-ui@latest add button --path=packages/rsc/ui/shadcn
+npx shadcn-ui@latest add button --path=packages/src/ui/shadcn
 ```
 
 We pass the `--path` flag to specify the path where the component should be installed.
\ No newline at end of file
diff --git a/apps/web/README.md b/apps/web/README.md
index cc4052672..ec3c44234 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -1,28 +1,3 @@
-# Create T3 App
+# Your Application
 
-This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
-
-## What's next? How do I make an app with this?
-
-We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
-
-If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
-
-- [Next.js](https://nextjs.org)
-- [NextAuth.js](https://next-auth.js.org)
-- [Prisma](https://prisma.io)
-- [Tailwind CSS](https://tailwindcss.com)
-- [tRPC](https://trpc.io)
-
-## Learn More
-
-To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
-
-- [Documentation](https://create.t3.gg/)
-- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
-
-You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
-
-## How do I deploy this?
-
-Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
+Write here everything about your application.
diff --git a/apps/web/app/(dashboard)/home/(user)/account/layout.tsx b/apps/web/app/(dashboard)/home/(user)/account/layout.tsx
index fed85d6ff..b94ce6097 100644
--- a/apps/web/app/(dashboard)/home/(user)/account/layout.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/account/layout.tsx
@@ -1,8 +1,8 @@
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 function UserSettingsLayout(props: React.PropsWithChildren) {
   return (
     <>
diff --git a/apps/web/app/(dashboard)/home/(user)/account/page.tsx b/apps/web/app/(dashboard)/home/(user)/account/page.tsx
index 151fe13b0..cac56ae21 100644
--- a/apps/web/app/(dashboard)/home/(user)/account/page.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/account/page.tsx
@@ -1,9 +1,9 @@
+import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
+
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
-
 function PersonalAccountSettingsPage() {
   return (
     <div
diff --git a/apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts b/apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts
index 9fd2afcc1..03dc682fa 100644
--- a/apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts
+++ b/apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts
@@ -1,13 +1,12 @@
 'use server';
 
-import { URL } from 'next/dist/compiled/@edge-runtime/primitives';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 import { z } from 'zod';
 
 import { getProductPlanPairFromId } from '@kit/billing';
-import { getGatewayProvider } from '@kit/billing-gateway';
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
 import billingConfig from '~/config/billing.config';
@@ -30,7 +29,7 @@ export async function createPersonalAccountCheckoutSession(params: {
   }
 
   const planId = z.string().min(1).parse(params.planId);
-  const service = await getGatewayProvider(client);
+  const service = await getBillingGatewayProvider(client);
   const productPlanPairFromId = getProductPlanPairFromId(billingConfig, planId);
 
   if (!productPlanPairFromId) {
@@ -77,7 +76,7 @@ export async function createBillingPortalSession() {
     throw new Error('Authentication required');
   }
 
-  const service = await getGatewayProvider(client);
+  const service = await getBillingGatewayProvider(client);
 
   const accountId = data.user.id;
   const customerId = await getCustomerIdFromAccountId(accountId);
diff --git a/apps/web/app/(dashboard)/home/(user)/layout.tsx b/apps/web/app/(dashboard)/home/(user)/layout.tsx
index 5c740d79a..067ff8e4b 100644
--- a/apps/web/app/(dashboard)/home/(user)/layout.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/layout.tsx
@@ -1,8 +1,8 @@
+import { Page } from '@kit/ui/page';
+
 import { HomeSidebar } from '~/(dashboard)/home/components/home-sidebar';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { Page } from '@kit/ui/page';
-
 function UserHomeLayout({ children }: React.PropsWithChildren) {
   return <Page sidebar={<HomeSidebar />}>{children}</Page>;
 }
diff --git a/apps/web/app/(dashboard)/home/(user)/page.tsx b/apps/web/app/(dashboard)/home/(user)/page.tsx
index c98360d9f..b6b2beb02 100644
--- a/apps/web/app/(dashboard)/home/(user)/page.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/page.tsx
@@ -1,8 +1,8 @@
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 function UserHomePage() {
   return (
     <>
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx b/apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx
index c1e27fbd0..232c02042 100644
--- a/apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx
@@ -1,7 +1,7 @@
-import { MobileAppNavigation } from '~/(dashboard)/home/[account]/(components)/mobile-app-navigation';
-
 import { PageHeader } from '@kit/ui/page';
 
+import { MobileAppNavigation } from '~/(dashboard)/home/[account]/(components)/mobile-app-navigation';
+
 export function AppHeader({
   children,
   title,
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar-navigation.tsx b/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar-navigation.tsx
index 5a4ccc1dc..b2d5e556b 100644
--- a/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar-navigation.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar-navigation.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { getOrganizationAccountSidebarConfig } from '~/config/organization-account-sidebar.config';
-
 import { SidebarDivider, SidebarGroup, SidebarItem } from '@kit/ui/sidebar';
 import { Trans } from '@kit/ui/trans';
 
+import { getOrganizationAccountSidebarConfig } from '~/config/organization-account-sidebar.config';
+
 export function AppSidebarNavigation({
   account,
 }: React.PropsWithChildren<{
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx b/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx
index e426e1aa1..80221bab5 100644
--- a/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx
@@ -3,9 +3,6 @@
 import { useRouter } from 'next/navigation';
 
 import { ArrowLeftCircleIcon, ArrowRightCircleIcon } from 'lucide-react';
-import { ProfileDropdownContainer } from '~/(dashboard)/home/components/personal-account-dropdown';
-import featureFlagsConfig from '~/config/feature-flags.config';
-import pathsConfig from '~/config/paths.config';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
 import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
@@ -18,6 +15,10 @@ import {
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
+import { ProfileDropdownContainer } from '~/(dashboard)/home/components/personal-account-dropdown';
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
 import { AppSidebarNavigation } from './app-sidebar-navigation';
 
 type AccountModel = {
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/mobile-app-navigation.tsx b/apps/web/app/(dashboard)/home/[account]/(components)/mobile-app-navigation.tsx
index fdb839c7c..7e65eafcc 100644
--- a/apps/web/app/(dashboard)/home/[account]/(components)/mobile-app-navigation.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/(components)/mobile-app-navigation.tsx
@@ -4,9 +4,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { HomeIcon, LogOutIcon, MenuIcon } from 'lucide-react';
-import featureFlagsConfig from '~/config/feature-flags.config';
-import { getOrganizationAccountSidebarConfig } from '~/config/organization-account-sidebar.config';
-import pathsConfig from '~/config/paths.config';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
@@ -26,6 +23,10 @@ import {
 } from '@kit/ui/dropdown-menu';
 import { Trans } from '@kit/ui/trans';
 
+import featureFlagsConfig from '~/config/feature-flags.config';
+import { getOrganizationAccountSidebarConfig } from '~/config/organization-account-sidebar.config';
+import pathsConfig from '~/config/paths.config';
+
 export const MobileAppNavigation = (
   props: React.PropsWithChildren<{
     slug: string;
diff --git a/apps/web/app/(dashboard)/home/[account]/(lib)/load-workspace.ts b/apps/web/app/(dashboard)/home/[account]/(lib)/load-workspace.ts
index 0fc2475a3..865a5cd1e 100644
--- a/apps/web/app/(dashboard)/home/[account]/(lib)/load-workspace.ts
+++ b/apps/web/app/(dashboard)/home/[account]/(lib)/load-workspace.ts
@@ -3,10 +3,11 @@ import { cache } from 'react';
 import { redirect } from 'next/navigation';
 
 import 'server-only';
-import pathsConfig from '~/config/paths.config';
 
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
+import pathsConfig from '~/config/paths.config';
+
 /**
  * Load the organization workspace data.
  * We place this function into a separate file so it can be reused in multiple places across the server components.
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
index 999fd08ee..858dd39af 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
@@ -1,8 +1,8 @@
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 function OrganizationAccountBillingPage() {
   return (
     <>
diff --git a/apps/web/app/(dashboard)/home/[account]/layout.tsx b/apps/web/app/(dashboard)/home/[account]/layout.tsx
index 4d67abd03..83a76c332 100644
--- a/apps/web/app/(dashboard)/home/[account]/layout.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/layout.tsx
@@ -1,9 +1,9 @@
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { parseSidebarStateCookie } from '@kit/shared/cookies/sidebar-state.cookie';
 import { parseThemeCookie } from '@kit/shared/cookies/theme.cookie';
 import { Page } from '@kit/ui/page';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 import { AppSidebar } from './(components)/app-sidebar';
 import { loadOrganizationWorkspace } from './(lib)/load-workspace';
 
diff --git a/apps/web/app/(dashboard)/home/[account]/members/page.tsx b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
index 49d8a4259..db207f8e9 100644
--- a/apps/web/app/(dashboard)/home/[account]/members/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
@@ -1,6 +1,4 @@
 import { PlusCircledIcon } from '@radix-ui/react-icons';
-import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/(lib)/load-workspace';
-import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import {
@@ -19,6 +17,9 @@ import {
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/(lib)/load-workspace';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 interface Params {
   params: {
     account: string;
diff --git a/apps/web/app/(dashboard)/home/[account]/page.tsx b/apps/web/app/(dashboard)/home/[account]/page.tsx
index 64332296d..239328a39 100644
--- a/apps/web/app/(dashboard)/home/[account]/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/page.tsx
@@ -1,14 +1,15 @@
 import loadDynamic from 'next/dynamic';
 
 import { PlusIcon } from 'lucide-react';
-import { AppHeader } from '~/(dashboard)/home/[account]/(components)/app-header';
-import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { Button } from '@kit/ui/button';
 import { PageBody } from '@kit/ui/page';
 import Spinner from '@kit/ui/spinner';
 import { Trans } from '@kit/ui/trans';
 
+import { AppHeader } from '~/(dashboard)/home/[account]/(components)/app-header';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 const DashboardDemo = loadDynamic(
   () => import('~/(dashboard)/home/[account]/(components)/dashboard-demo'),
   {
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/loading.tsx b/apps/web/app/(dashboard)/home/[account]/settings/loading.tsx
deleted file mode 100644
index 4ea53181d..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { GlobalLoader } from '@kit/ui/global-loader';
-
-export default GlobalLoader;
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
deleted file mode 100644
index 0d80b9653..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { use } from 'react';
-
-import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/(lib)/load-workspace';
-import featureFlagsConfig from '~/config/feature-flags.config';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-import {
-  TeamAccountDangerZone,
-  UpdateOrganizationForm,
-} from '@kit/team-accounts/components';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@kit/ui/card';
-import { If } from '@kit/ui/if';
-import { PageBody, PageHeader } from '@kit/ui/page';
-import { Trans } from '@kit/ui/trans';
-
-export const metadata = {
-  title: 'Organization Settings',
-};
-
-const allowOrganizationDelete = featureFlagsConfig.enableOrganizationDeletion;
-
-interface Params {
-  params: {
-    account: string;
-  };
-}
-
-function OrganizationSettingsPage({ params }: Params) {
-  const { account, user } = use(loadOrganizationWorkspace(params.account));
-
-  return (
-    <>
-      <PageHeader
-        title={<Trans i18nKey={'organization:settingsPageTitle'} />}
-        description={<Trans i18nKey={'organization:settingsPageDescription'} />}
-      />
-
-      <PageBody>
-        <div className={'mx-auto flex max-w-5xl flex-col space-y-4'}>
-          <Card>
-            <CardHeader>
-              <CardTitle>
-                <Trans i18nKey={'organization:generalTabLabel'} />
-              </CardTitle>
-
-              <CardDescription>
-                <Trans i18nKey={'organization:generalTabLabelSubheading'} />
-              </CardDescription>
-            </CardHeader>
-
-            <CardContent>
-              <UpdateOrganizationForm
-                accountId={account.id}
-                accountName={account.name}
-              />
-            </CardContent>
-          </Card>
-
-          <If condition={allowOrganizationDelete}>
-            <Card className={'border-2 border-destructive'}>
-              <CardHeader>
-                <CardTitle>
-                  <Trans i18nKey={'organization:dangerZone'} />
-                </CardTitle>
-                <CardDescription>
-                  <Trans i18nKey={'organization:dangerZoneSubheading'} />
-                </CardDescription>
-              </CardHeader>
-
-              <CardContent>
-                <TeamAccountDangerZone userId={user.id} account={account} />
-              </CardContent>
-            </Card>
-          </If>
-        </div>
-      </PageBody>
-    </>
-  );
-}
-
-export default withI18n(OrganizationSettingsPage);
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/billing-redirect-button.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/billing-redirect-button.tsx
deleted file mode 100644
index d8e6fce0e..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/billing-redirect-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import { ArrowUpRightIcon } from 'lucide-react';
-
-import { Button } from '@kit/ui/button';
-
-export function BillingPortalRedirectButton({
-  children,
-  customerId,
-  className,
-}: React.PropsWithChildren<{
-  customerId: string;
-  className?: string;
-}>) {
-  return (
-    <form action={createBillingPortalSessionAction}>
-      <input type={'hidden'} name={'customerId'} value={customerId} />
-
-      <Button
-        data-test={'manage-billing-redirect-button'}
-        variant={'outline'}
-        className={className}
-      >
-        <span className={'flex items-center space-x-2'}>
-          <span>{children}</span>
-
-          <ArrowUpRightIcon className={'h-3'} />
-        </span>
-      </Button>
-    </form>
-  );
-}
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/checkout-redirect-button.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/checkout-redirect-button.tsx
deleted file mode 100644
index 17d340d3b..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/checkout-redirect-button.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import { useFormState, useFormStatus } from 'react-dom';
-
-import { ChevronRightIcon } from 'lucide-react';
-
-import { isBrowser } from '@kit/shared/utils';
-import { Button } from '@kit/ui/button';
-import { cn } from '@kit/ui/utils';
-
-export function CheckoutRedirectButton({
-  children,
-  onCheckoutCreated,
-  ...props
-}): React.PropsWithChildren<{
-  disabled?: boolean;
-  stripePriceId?: string;
-  recommended?: boolean;
-  organizationUid: string;
-  onCheckoutCreated?: (clientSecret: string) => void;
-}> {
-  const [state, formAction] = useFormState(createCheckoutAction, {
-    clientSecret: '',
-  });
-
-  useEffect(() => {
-    if (state.clientSecret && onCheckoutCreated) {
-      onCheckoutCreated(state.clientSecret);
-    }
-  }, [state.clientSecret, onCheckoutCreated]);
-
-  return (
-    <form data-test={'checkout-form'} action={formAction}>
-      <CheckoutFormData
-        organizationUid={props.organizationUid}
-        priceId={props.stripePriceId}
-      />
-
-      <SubmitCheckoutButton
-        disabled={props.disabled}
-        recommended={props.recommended}
-      >
-        {children}
-      </SubmitCheckoutButton>
-    </form>
-  );
-}
-
-function SubmitCheckoutButton(
-  props: React.PropsWithChildren<{
-    recommended?: boolean;
-    disabled?: boolean;
-  }>,
-) {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button
-      className={cn({
-        'bg-primary text-primary-foreground dark:bg-white dark:text-gray-900':
-          props.recommended,
-      })}
-      variant={props.recommended ? 'custom' : 'outline'}
-      disabled={props.disabled ?? pending}
-    >
-      <span className={'flex items-center space-x-2'}>
-        <span>{props.children}</span>
-
-        <ChevronRightIcon className={'h-4'} />
-      </span>
-    </Button>
-  );
-}
-
-function CheckoutFormData(
-  props: React.PropsWithChildren<{
-    organizationUid: string | undefined;
-    priceId: string | undefined;
-  }>,
-) {
-  return (
-    <>
-      <input
-        type="hidden"
-        name={'organizationUid'}
-        defaultValue={props.organizationUid}
-      />
-
-      <input type="hidden" name={'returnUrl'} defaultValue={getReturnUrl()} />
-      <input type="hidden" name={'priceId'} defaultValue={props.priceId} />
-    </>
-  );
-}
-
-function getReturnUrl() {
-  return isBrowser()
-    ? [window.location.origin, window.location.pathname].join('')
-    : undefined;
-}
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/embedded-stripe-checkout.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/embedded-stripe-checkout.tsx
deleted file mode 100644
index ee68b79cb..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/embedded-stripe-checkout.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { Close as DialogPrimitiveClose } from '@radix-ui/react-dialog';
-import {
-  EmbeddedCheckout,
-  EmbeddedCheckoutProvider,
-} from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
-import { XIcon } from 'lucide-react';
-
-import pricingConfig, {
-  StripeCheckoutDisplayMode,
-} from '@/config/pricing.config';
-
-import { cn } from '@/lib/utils';
-
-import If from '@/components/app/If';
-import LogoImage from '@/components/app/Logo/LogoImage';
-import Trans from '@/components/app/Trans';
-
-const STRIPE_PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
-
-if (!STRIPE_PUBLISHABLE_KEY) {
-  throw new Error(
-    'Missing NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY environment variable. Did you forget to add it to your .env file?',
-  );
-}
-
-const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);
-
-export default function EmbeddedStripeCheckout({
-  clientSecret,
-  onClose,
-}: React.PropsWithChildren<{
-  clientSecret: string;
-  onClose?: () => void;
-}>) {
-  return (
-    <EmbeddedCheckoutPopup key={clientSecret} onClose={onClose}>
-      <EmbeddedCheckoutProvider
-        stripe={stripePromise}
-        options={{ clientSecret }}
-      >
-        <EmbeddedCheckout className={'EmbeddedCheckoutClassName'} />
-      </EmbeddedCheckoutProvider>
-    </EmbeddedCheckoutPopup>
-  );
-}
-
-function EmbeddedCheckoutPopup({
-  onClose,
-  children,
-}: React.PropsWithChildren<{
-  onClose?: () => void;
-}>) {
-  const [open, setOpen] = useState(true);
-
-  const displayMode = pricingConfig.displayMode;
-  const isPopup = displayMode === StripeCheckoutDisplayMode.Popup;
-  const isOverlay = displayMode === StripeCheckoutDisplayMode.Overlay;
-
-  const className = cn({
-    [`bg-white p-4 max-h-[98vh] overflow-y-auto shadow-transparent border border-gray-200 dark:border-dark-700`]:
-      isPopup,
-    [`bg-background !flex flex-col flex-1 fixed top-0 !max-h-full !max-w-full left-0 w-screen h-screen border-transparent shadow-transparent py-4 px-8`]:
-      isOverlay,
-  });
-
-  const close = () => {
-    setOpen(false);
-
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  return (
-    <Dialog
-      defaultOpen
-      open={open}
-      onOpenChange={(open) => {
-        if (!open && onClose) {
-          onClose();
-        }
-
-        setOpen(open);
-      }}
-    >
-      <DialogContent
-        className={className}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        onInteractOutside={(e) => e.preventDefault()}
-      >
-        <If condition={isOverlay}>
-          <div className={'mb-8'}>
-            <div className={'flex items-center justify-between'}>
-              <LogoImage />
-
-              <Button onClick={close} variant={'outline'}>
-                <Trans i18nKey={'common:cancel'} />
-              </Button>
-            </div>
-          </div>
-        </If>
-
-        <If condition={isPopup}>
-          <DialogPrimitiveClose asChild>
-            <Button
-              size={'icon'}
-              className={'absolute right-4 top-2 flex items-center'}
-              aria-label={'Close Checkout'}
-              onClick={close}
-            >
-              <XIcon className={'h-6 text-gray-900'} />
-
-              <span className="sr-only">
-                <Trans i18nKey={'common:cancel'} />
-              </span>
-            </Button>
-          </DialogPrimitiveClose>
-        </If>
-
-        <div
-          className={cn({
-            [`flex-1 rounded-xl bg-white p-8`]: isOverlay,
-          })}
-        >
-          {children}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plan-selection-form.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plan-selection-form.tsx
deleted file mode 100644
index fd2acfcb2..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plan-selection-form.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-
-import dynamic from 'next/dynamic';
-
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-
-import type Organization from '@/lib/organizations/types/organization';
-
-import ErrorBoundary from '@/components/app/ErrorBoundary';
-import If from '@/components/app/If';
-import PricingTable from '@/components/app/PricingTable';
-import Trans from '@/components/app/Trans';
-
-import BillingPortalRedirectButton from './billing-redirect-button';
-import CheckoutRedirectButton from './checkout-redirect-button';
-
-const EmbeddedStripeCheckout = dynamic(
-  () => import('./embedded-stripe-checkout'),
-  {
-    ssr: false,
-  },
-);
-
-const PlanSelectionForm: React.FC<{
-  organization: WithId<Organization>;
-  customerId: Maybe<string>;
-}> = ({ organization, customerId }) => {
-  const [clientSecret, setClientSecret] = useState<string>();
-  const [retry, setRetry] = useState(0);
-
-  return (
-    <div className={'flex flex-col space-y-6'}>
-      <If condition={clientSecret}>
-        <EmbeddedStripeCheckout clientSecret={clientSecret!} />
-      </If>
-
-      <div className={'flex w-full flex-col justify-center space-y-8'}>
-        <PricingTable
-          CheckoutButton={(props) => {
-            return (
-              <ErrorBoundary
-                key={retry}
-                fallback={
-                  <CheckoutErrorMessage
-                    onRetry={() => setRetry((retry) => retry + 1)}
-                  />
-                }
-              >
-                <CheckoutRedirectButton
-                  organizationUid={organization.uuid}
-                  stripePriceId={props.stripePriceId}
-                  recommended={props.recommended}
-                  onCheckoutCreated={setClientSecret}
-                >
-                  <Trans
-                    i18nKey={'subscription:checkout'}
-                    defaults={'Checkout'}
-                  />
-                </CheckoutRedirectButton>
-              </ErrorBoundary>
-            );
-          }}
-        />
-
-        <If condition={customerId}>
-          <div className={'flex flex-col space-y-2'}>
-            <BillingPortalRedirectButton customerId={customerId as string}>
-              <Trans i18nKey={'subscription:manageBilling'} />
-            </BillingPortalRedirectButton>
-
-            <span className={'text-xs text-gray-500 dark:text-gray-400'}>
-              <Trans i18nKey={'subscription:manageBillingDescription'} />
-            </span>
-          </div>
-        </If>
-      </div>
-    </div>
-  );
-};
-
-export default PlanSelectionForm;
-
-function NoPermissionsAlert() {
-  return (
-    <Alert variant={'warning'}>
-      <AlertTitle>
-        <Trans i18nKey={'subscription:noPermissionsAlertHeading'} />
-      </AlertTitle>
-
-      <AlertDescription>
-        <Trans i18nKey={'subscription:noPermissionsAlertBody'} />
-      </AlertDescription>
-    </Alert>
-  );
-}
-
-function CheckoutErrorMessage({ onRetry }: { onRetry: () => void }) {
-  return (
-    <div className={'flex flex-col space-y-2'}>
-      <span className={'text-sm font-medium text-red-500'}>
-        <Trans i18nKey={'subscription:unknownErrorAlertHeading'} />
-      </span>
-
-      <Button onClick={onRetry} variant={'ghost'}>
-        <Trans i18nKey={'common:retry'} />
-      </Button>
-    </div>
-  );
-}
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plan-status-alert-container.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plan-status-alert-container.tsx
deleted file mode 100644
index 027ae129f..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plan-status-alert-container.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { ReadonlyURLSearchParams } from 'next/navigation';
-import { useSearchParams } from 'next/navigation';
-
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-
-import Trans from '@/components/app/Trans';
-
-enum SubscriptionStatusQueryParams {
-  Success = 'success',
-  Cancel = 'cancel',
-  Error = 'error',
-}
-
-function PlansStatusAlertContainer() {
-  const status = useSubscriptionStatus();
-
-  if (status === undefined) {
-    return null;
-  }
-
-  return <PlansStatusAlert status={status as SubscriptionStatusQueryParams} />;
-}
-
-export default PlansStatusAlertContainer;
-
-function PlansStatusAlert({
-  status,
-}: {
-  status: SubscriptionStatusQueryParams;
-}) {
-  switch (status) {
-    case SubscriptionStatusQueryParams.Cancel:
-      return (
-        <Alert variant={'warning'}>
-          <AlertTitle>
-            <Trans i18nKey={'subscription:checkOutCanceledAlertHeading'} />
-          </AlertTitle>
-
-          <AlertDescription>
-            <Trans i18nKey={'subscription:checkOutCanceledAlert'} />
-          </AlertDescription>
-        </Alert>
-      );
-
-    case SubscriptionStatusQueryParams.Error:
-      return (
-        <Alert variant={'destructive'}>
-          <AlertTitle>
-            <Trans i18nKey={'subscription:unknownErrorAlertHeading'} />
-          </AlertTitle>
-
-          <AlertDescription>
-            <Trans i18nKey={'subscription:unknownErrorAlert'} />
-          </AlertDescription>
-        </Alert>
-      );
-
-    case SubscriptionStatusQueryParams.Success:
-      return (
-        <Alert variant={'success'}>
-          <AlertTitle>
-            <Trans i18nKey={'subscription:checkOutCompletedAlertHeading'} />
-          </AlertTitle>
-
-          <AlertDescription>
-            <Trans i18nKey={'subscription:checkOutCompletedAlert'} />
-          </AlertDescription>
-        </Alert>
-      );
-  }
-}
-
-function useSubscriptionStatus() {
-  const params = useSearchParams();
-
-  return getStatus(params);
-}
-
-function getStatus(params: ReadonlyURLSearchParams | null) {
-  if (!params) {
-    return;
-  }
-
-  const error = params.has(SubscriptionStatusQueryParams.Error);
-  const canceled = params.has(SubscriptionStatusQueryParams.Cancel);
-  const success = params.has(SubscriptionStatusQueryParams.Success);
-
-  if (canceled) {
-    return SubscriptionStatusQueryParams.Cancel;
-  } else if (success) {
-    return SubscriptionStatusQueryParams.Success;
-  } else if (error) {
-    return SubscriptionStatusQueryParams.Error;
-  }
-}
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plans-container.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plans-container.tsx
deleted file mode 100644
index 9527e86a6..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/plans-container.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import useCurrentOrganization from '@/lib/organizations/hooks/use-current-organization';
-
-import If from '@/components/app/If';
-import Trans from '@/components/app/Trans';
-
-import BillingPortalRedirectButton from './billing-redirect-button';
-import PlanSelectionForm from './plan-selection-form';
-import SubscriptionCard from './subscription-card';
-
-const PlansContainer: React.FC = () => {
-  const organization = useCurrentOrganization();
-
-  if (!organization) {
-    return null;
-  }
-
-  const customerId = organization.subscription?.customerId;
-  const subscription = organization.subscription?.data;
-
-  if (!subscription) {
-    return (
-      <PlanSelectionForm customerId={customerId} organization={organization} />
-    );
-  }
-
-  return (
-    <div className={'flex flex-col space-y-4'}>
-      <div>
-        <div
-          className={'w-full divide-y rounded-xl border lg:w-9/12 xl:w-6/12'}
-        >
-          <div className={'p-6'}>
-            <SubscriptionCard subscription={subscription} />
-          </div>
-
-          <If condition={customerId}>
-            <div className={'flex justify-end p-6'}>
-              <div className={'flex flex-col items-end space-y-2'}>
-                <BillingPortalRedirectButton customerId={customerId as string}>
-                  <Trans i18nKey={'subscription:manageBilling'} />
-                </BillingPortalRedirectButton>
-
-                <span className={'text-xs text-gray-500 dark:text-gray-400'}>
-                  <Trans i18nKey={'subscription:manageBillingDescription'} />
-                </span>
-              </div>
-            </div>
-          </If>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PlansContainer;
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/subscription-card.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/subscription-card.tsx
deleted file mode 100644
index fb65517f7..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/subscription-card.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useMemo } from 'react';
-
-import Heading from '@/components/ui/heading';
-import { CheckCircleIcon, XCircleIcon } from 'lucide-react';
-import { getI18n } from 'react-i18next';
-import SubscriptionStatusBadge from '~/(dashboard)/home/[account]/(components)/organizations/SubscriptionStatusBadge';
-
-import pricingConfig from '@/config/pricing.config';
-
-import type { OrganizationSubscription } from '@/lib/organizations/types/organization-subscription';
-
-import If from '@/components/app/If';
-import PricingTable from '@/components/app/PricingTable';
-import Trans from '@/components/app/Trans';
-
-import SubscriptionStatusAlert from './subscription-status-alert';
-
-const SubscriptionCard: React.FC<{
-  subscription: OrganizationSubscription;
-}> = ({ subscription }) => {
-  const details = useSubscriptionDetails(subscription.priceId);
-  const cancelAtPeriodEnd = subscription.cancelAtPeriodEnd;
-  const isActive = subscription.status === 'active';
-  const language = getI18n().language;
-
-  const dates = useMemo(() => {
-    const endDate = new Date(subscription.periodEndsAt);
-    const trialEndDate =
-      subscription.trialEndsAt && new Date(subscription.trialEndsAt);
-
-    return {
-      endDate: endDate.toLocaleDateString(language),
-      trialEndDate: trialEndDate
-        ? trialEndDate.toLocaleDateString(language)
-        : null,
-    };
-  }, [language, subscription]);
-
-  if (!details) {
-    return null;
-  }
-
-  return (
-    <div
-      className={'flex space-x-2'}
-      data-test={'subscription-card'}
-      data-test-status={subscription.status}
-    >
-      <div className={'flex w-9/12 flex-col space-y-4'}>
-        <div className={'flex flex-col space-y-1'}>
-          <div className={'flex items-center space-x-4'}>
-            <Heading level={4}>
-              <span data-test={'subscription-name'}>
-                {details.product.name}
-              </span>
-            </Heading>
-
-            <div>
-              <SubscriptionStatusBadge subscription={subscription} />
-            </div>
-          </div>
-
-          <span className={'text-sm text-gray-500 dark:text-gray-400'}>
-            {details.product.description}
-          </span>
-        </div>
-
-        <If condition={isActive}>
-          <RenewStatusDescription
-            dates={dates}
-            cancelAtPeriodEnd={cancelAtPeriodEnd}
-          />
-        </If>
-
-        <SubscriptionStatusAlert subscription={subscription} values={dates} />
-      </div>
-
-      <div className={'w-3/12'}>
-        <span className={'flex items-center justify-end space-x-1'}>
-          <PricingTable.Price>{details.plan.price}</PricingTable.Price>
-
-          <span className={'lowercase text-gray-500 dark:text-gray-400'}>
-            /{details.plan.name}
-          </span>
-        </span>
-      </div>
-    </div>
-  );
-};
-
-function RenewStatusDescription(
-  props: React.PropsWithChildren<{
-    cancelAtPeriodEnd: boolean;
-    dates: {
-      endDate: string;
-      trialEndDate: string | null;
-    };
-  }>,
-) {
-  return (
-    <span className={'flex items-center space-x-1.5 text-sm'}>
-      <If condition={props.cancelAtPeriodEnd}>
-        <XCircleIcon className={'h-5 text-yellow-700'} />
-
-        <span>
-          <Trans
-            i18nKey={'subscription:cancelAtPeriodEndDescription'}
-            values={props.dates}
-          />
-        </span>
-      </If>
-
-      <If condition={!props.cancelAtPeriodEnd}>
-        <CheckCircleIcon className={'h-5 text-green-700'} />
-
-        <span>
-          <Trans
-            i18nKey={'subscription:renewAtPeriodEndDescription'}
-            values={props.dates}
-          />
-        </span>
-      </If>
-    </span>
-  );
-}
-
-function useSubscriptionDetails(priceId: string) {
-  const products = pricingConfig.products;
-
-  return useMemo(() => {
-    for (const product of products) {
-      for (const plan of product.plans) {
-        if (plan.stripePriceId === priceId) {
-          return { plan, product };
-        }
-      }
-    }
-  }, [products, priceId]);
-}
-
-export default SubscriptionCard;
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/subscription-status-alert.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/subscription-status-alert.tsx
deleted file mode 100644
index 492e98364..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/components/subscription-status-alert.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import classNames from 'clsx';
-
-import type { OrganizationSubscription } from '@/lib/organizations/types/organization-subscription';
-
-import Trans from '@/components/app/Trans';
-
-function SubscriptionStatusAlert(
-  props: React.PropsWithChildren<{
-    subscription: OrganizationSubscription;
-    values: {
-      endDate: string;
-      trialEndDate: string | null;
-    };
-  }>,
-) {
-  const status = props.subscription.status;
-
-  let message = '';
-  let type: 'success' | 'error' | 'warn';
-
-  switch (status) {
-    case 'active':
-      message = 'subscription:status.active.description';
-      type = 'success';
-      break;
-    case 'trialing':
-      message = 'subscription:status.trialing.description';
-      type = 'success';
-      break;
-    case 'canceled':
-      message = 'subscription:status.canceled.description';
-      type = 'warn';
-      break;
-    case 'incomplete':
-      message = 'subscription:status.incomplete.description';
-      type = 'warn';
-      break;
-    case 'incomplete_expired':
-      message = 'subscription:status.incomplete_expired.description';
-      type = 'error';
-      break;
-    case 'unpaid':
-      message = 'subscription:status.unpaid.description';
-      type = 'error';
-      break;
-    case 'past_due':
-      message = 'subscription:status.past_due.description';
-      type = 'error';
-
-      break;
-    default:
-      return null;
-  }
-
-  return (
-    <span
-      className={classNames('text-sm', {
-        'text-orange-700 dark:text-gray-400': type === 'warn',
-        'text-red-700 dark:text-red-400': type === 'error',
-        'text-green-700 dark:text-green-400': type === 'success',
-      })}
-    >
-      <Trans i18nKey={message} values={props.values} />
-    </span>
-  );
-}
-
-export default SubscriptionStatusAlert;
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/page.tsx
deleted file mode 100644
index a54ae5929..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Heading from '@/components/ui/heading';
-
-import { withI18n } from '@packages/i18n/with-i18n';
-
-import Trans from '@/components/app/Trans';
-
-import PlansStatusAlertContainer from './components/plan-status-alert-container';
-import PlansContainer from './components/plans-container';
-
-export const metadata = {
-  title: 'Subscription',
-};
-
-const SubscriptionSettingsPage = () => {
-  return (
-    <div className={'flex w-full flex-col space-y-4'}>
-      <div className={'flex flex-col space-y-1 px-2'}>
-        <Heading level={4}>
-          <Trans i18nKey={'common:subscriptionSettingsTabLabel'} />
-        </Heading>
-
-        <span className={'text-gray-500 dark:text-gray-400'}>
-          <Trans i18nKey={'subscription:subscriptionTabSubheading'} />
-        </span>
-      </div>
-
-      <PlansStatusAlertContainer />
-
-      <PlansContainer />
-    </div>
-  );
-};
-
-export default withI18n(SubscriptionSettingsPage);
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx
index 16e071c72..4be6a9527 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx
@@ -4,12 +4,13 @@ import Link from 'next/link';
 
 import { CheckIcon, ChevronRightIcon } from 'lucide-react';
 import type { Stripe } from 'stripe';
-import pathsConfig from '~/config/paths.config';
 
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
+import pathsConfig from '~/config/paths.config';
+
 /**
  * Retrieves the session status for a Stripe checkout session.
  * Since we should only arrive here for a successful checkout, we only check
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/page.tsx
index 30f51601f..0ea55ff44 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/page.tsx
@@ -1,12 +1,12 @@
 import { notFound, redirect } from 'next/navigation';
 
+import requireSession from '@/lib/user/require-session';
+
 import { withI18n } from '@packages/i18n/with-i18n';
 import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
 
 import createStripeClient from '@kit/stripe/get-stripe';
 
-import requireSession from '@/lib/user/require-session';
-
 import { BillingSessionStatus } from './components/billing-session-status';
 import RecoverCheckout from './components/recover-checkout';
 
diff --git a/apps/web/app/(dashboard)/home/components/home-sidebar-account-selector.tsx b/apps/web/app/(dashboard)/home/components/home-sidebar-account-selector.tsx
index 693284ada..14806229c 100644
--- a/apps/web/app/(dashboard)/home/components/home-sidebar-account-selector.tsx
+++ b/apps/web/app/(dashboard)/home/components/home-sidebar-account-selector.tsx
@@ -2,11 +2,11 @@
 
 import { useRouter } from 'next/navigation';
 
+import { AccountSelector } from '@kit/accounts/account-selector';
+
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
-import { AccountSelector } from '@kit/accounts/account-selector';
-
 const features = {
   enableOrganizationAccounts: featureFlagsConfig.enableOrganizationAccounts,
   enableOrganizationCreation: featureFlagsConfig.enableOrganizationCreation,
diff --git a/apps/web/app/(dashboard)/home/components/home-sidebar.tsx b/apps/web/app/(dashboard)/home/components/home-sidebar.tsx
index be4986139..8912b9d60 100644
--- a/apps/web/app/(dashboard)/home/components/home-sidebar.tsx
+++ b/apps/web/app/(dashboard)/home/components/home-sidebar.tsx
@@ -2,13 +2,13 @@ import { use } from 'react';
 
 import { cookies } from 'next/headers';
 
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
+
 import { HomeSidebarAccountSelector } from '~/(dashboard)/home/components/home-sidebar-account-selector';
 import { ProfileDropdownContainer } from '~/(dashboard)/home/components/personal-account-dropdown';
 import { personalAccountSidebarConfig } from '~/config/personal-account-sidebar.config';
 
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
-import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
-
 export function HomeSidebar() {
   const collapsed = getSidebarCollapsed();
   const accounts = use(loadUserAccounts());
diff --git a/apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx b/apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx
index 9c5870ea1..c111125d2 100644
--- a/apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx
+++ b/apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import pathsConfig from '~/config/paths.config';
-
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUserSession } from '@kit/supabase/hooks/use-user-session';
 
+import pathsConfig from '~/config/paths.config';
+
 export function ProfileDropdownContainer(props: { collapsed: boolean }) {
   const userSession = useUserSession();
   const signOut = useSignOut();
diff --git a/apps/web/app/(marketing)/blog/[slug]/page.tsx b/apps/web/app/(marketing)/blog/[slug]/page.tsx
index 55f6a2b88..32f0989c8 100644
--- a/apps/web/app/(marketing)/blog/[slug]/page.tsx
+++ b/apps/web/app/(marketing)/blog/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import Script from 'next/script';
 
 import { allPosts } from 'contentlayer/generated';
+
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
diff --git a/apps/web/app/(marketing)/blog/components/post-header.tsx b/apps/web/app/(marketing)/blog/components/post-header.tsx
index 5247073ad..516ab71bc 100644
--- a/apps/web/app/(marketing)/blog/components/post-header.tsx
+++ b/apps/web/app/(marketing)/blog/components/post-header.tsx
@@ -1,10 +1,11 @@
 import type { Post } from 'contentlayer/generated';
-import { CoverImage } from '~/(marketing)/blog/components/cover-image';
-import { DateFormatter } from '~/(marketing)/blog/components/date-formatter';
 
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
 
+import { CoverImage } from '~/(marketing)/blog/components/cover-image';
+import { DateFormatter } from '~/(marketing)/blog/components/date-formatter';
+
 const PostHeader: React.FC<{
   post: Post;
 }> = ({ post }) => {
diff --git a/apps/web/app/(marketing)/blog/components/post-preview.tsx b/apps/web/app/(marketing)/blog/components/post-preview.tsx
index a151f1056..3b42e786b 100644
--- a/apps/web/app/(marketing)/blog/components/post-preview.tsx
+++ b/apps/web/app/(marketing)/blog/components/post-preview.tsx
@@ -1,11 +1,12 @@
 import Link from 'next/link';
 
 import type { Post } from 'contentlayer/generated';
-import { CoverImage } from '~/(marketing)/blog/components/cover-image';
-import { DateFormatter } from '~/(marketing)/blog/components/date-formatter';
 
 import { If } from '@kit/ui/if';
 
+import { CoverImage } from '~/(marketing)/blog/components/cover-image';
+import { DateFormatter } from '~/(marketing)/blog/components/date-formatter';
+
 type Props = {
   post: Post;
   preloadImage?: boolean;
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index 38f1976f4..ff1f37569 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/apps/web/app/(marketing)/blog/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 
 import { allPosts } from 'contentlayer/generated';
+
 import PostPreview from '~/(marketing)/blog/components/post-preview';
 import { SitePageHeader } from '~/(marketing)/components/site-page-header';
 import appConfig from '~/config/app.config';
diff --git a/apps/web/app/(marketing)/components/site-header-account-section.tsx b/apps/web/app/(marketing)/components/site-header-account-section.tsx
index 1d8d3af28..8870bd103 100644
--- a/apps/web/app/(marketing)/components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/components/site-header-account-section.tsx
@@ -3,13 +3,14 @@
 import Link from 'next/link';
 
 import { ChevronRightIcon } from 'lucide-react';
-import pathsConfig from '~/config/paths.config';
 
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUserSession } from '@kit/supabase/hooks/use-user-session';
 import { Button } from '@kit/ui/button';
 
+import pathsConfig from '~/config/paths.config';
+
 export function SiteHeaderAccountSection() {
   const signOut = useSignOut();
   const userSession = useUserSession();
diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
index 5d9c4f567..e7a1b1323 100644
--- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx
+++ b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
@@ -4,15 +4,16 @@ import { notFound } from 'next/navigation';
 
 import { allDocumentationPages } from 'contentlayer/generated';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+
+import { If } from '@kit/ui/if';
+import { Mdx } from '@kit/ui/mdx';
+
 import { SitePageHeader } from '~/(marketing)/components/site-page-header';
 import { DocsCards } from '~/(marketing)/docs/components/docs-cards';
 import { DocumentationPageLink } from '~/(marketing)/docs/components/documentation-page-link';
 import { getDocumentationPageTree } from '~/(marketing)/docs/utils/get-documentation-page-tree';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { If } from '@kit/ui/if';
-import { Mdx } from '@kit/ui/mdx';
-
 const getPageBySlug = cache((slug: string) => {
   return allDocumentationPages.find((post) => post.resolvedPath === slug);
 });
diff --git a/apps/web/app/(marketing)/docs/page.tsx b/apps/web/app/(marketing)/docs/page.tsx
index 7338a4d84..265448225 100644
--- a/apps/web/app/(marketing)/docs/page.tsx
+++ b/apps/web/app/(marketing)/docs/page.tsx
@@ -1,4 +1,5 @@
 import { allDocumentationPages } from 'contentlayer/generated';
+
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index 59f9a2a57..c4c62d7b7 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -1,4 +1,5 @@
 import { ChevronDownIcon } from 'lucide-react';
+
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { SitePageHeader } from '../components/site-page-header';
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 84a2fb8c2..0c54e53d4 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -2,11 +2,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import { ChevronRightIcon } from 'lucide-react';
-import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 function Home() {
   return (
     <div className={'flex flex-col space-y-16'}>
diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx
index 6d65111ea..df15bbd1d 100644
--- a/apps/web/app/(marketing)/pricing/page.tsx
+++ b/apps/web/app/(marketing)/pricing/page.tsx
@@ -1,9 +1,9 @@
+import { PricingTable } from '@kit/billing/components/pricing-table';
+
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { PricingTable } from '@kit/billing/components/pricing-table';
-
 import { SitePageHeader } from '../components/site-page-header';
 
 export const metadata = {
diff --git a/apps/web/app/admin/lib/actions-utils.ts b/apps/web/app/admin/lib/actions-utils.ts
index e42f64a4d..fd4d68fbe 100644
--- a/apps/web/app/admin/lib/actions-utils.ts
+++ b/apps/web/app/admin/lib/actions-utils.ts
@@ -1,9 +1,9 @@
 import { notFound } from 'next/navigation';
 
-import isUserSuperAdmin from '~/admin/utils/is-user-super-admin';
-
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
+import isUserSuperAdmin from '~/admin/utils/is-user-super-admin';
+
 export function withAdminSession<Args extends unknown[], Response>(
   fn: (...params: Args) => Response,
 ) {
diff --git a/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts b/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts
index e45dd72bf..043de7538 100644
--- a/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts
+++ b/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts
@@ -3,11 +3,11 @@
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { withAdminSession } from '~/admin/lib/actions-utils';
-
 import { Logger } from '@kit/shared/logger';
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
+import { withAdminSession } from '~/admin/lib/actions-utils';
+
 const getClient = () => getSupabaseServerActionClient({ admin: true });
 
 export const deleteOrganizationAction = withAdminSession(
diff --git a/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx b/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx
index b3f0580eb..ec1d00673 100644
--- a/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx
+++ b/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx
@@ -4,6 +4,8 @@ import { useState, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import type Organization from '@/lib/organizations/types/organization';
+
 import useCsrfToken from '@kit/hooks/use-csrf-token';
 import { Button } from '@kit/ui/button';
 import {
@@ -15,8 +17,6 @@ import {
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
 
-import type Organization from '@/lib/organizations/types/organization';
-
 import { deleteOrganizationAction } from '../actions.server';
 
 function DeleteOrganizationModal({
diff --git a/apps/web/app/admin/organizations/@modal/[uid]/delete/page.tsx b/apps/web/app/admin/organizations/@modal/[uid]/delete/page.tsx
index c3066801e..c3c63899f 100644
--- a/apps/web/app/admin/organizations/@modal/[uid]/delete/page.tsx
+++ b/apps/web/app/admin/organizations/@modal/[uid]/delete/page.tsx
@@ -1,7 +1,7 @@
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
 import { getOrganizationByUid } from '@/lib/organizations/database/queries';
 
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
+
 import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
 import DeleteOrganizationModal from '../components/DeleteOrganizationModal';
 
diff --git a/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx b/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx
index 8e6dff7ea..4ac0a5e55 100644
--- a/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx
+++ b/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx
@@ -3,6 +3,8 @@
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 
+import { DataTable } from '@/components/app/DataTable';
+import type Membership from '@/lib/organizations/types/membership';
 import type { ColumnDef } from '@tanstack/react-table';
 import { EllipsisVerticalIcon } from 'lucide-react';
 
@@ -15,10 +17,6 @@ import {
   DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 
-import type Membership from '@/lib/organizations/types/membership';
-
-import { DataTable } from '@/components/app/DataTable';
-
 import RoleBadge from '../../../../../(app)/[account]/account/organization/components/RoleBadge';
 
 type Data = {
diff --git a/apps/web/app/admin/organizations/[uid]/members/page.tsx b/apps/web/app/admin/organizations/[uid]/members/page.tsx
index 69ff02eb2..7fdc0b022 100644
--- a/apps/web/app/admin/organizations/[uid]/members/page.tsx
+++ b/apps/web/app/admin/organizations/[uid]/members/page.tsx
@@ -2,15 +2,13 @@ import { use } from 'react';
 
 import Link from 'next/link';
 
+import { PageBody } from '@/components/app/Page';
+import appConfig from '@/config/app.config';
 import { ChevronRightIcon } from 'lucide-react';
 
 import AdminHeader from '@packages/admin/components/AdminHeader';
 import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
 
-import appConfig from '@/config/app.config';
-
-import { PageBody } from '@/components/app/Page';
-
 import getPageFromQueryParams from '../../../utils/get-page-from-query-param';
 import { getMembershipsByOrganizationUid } from '../../queries';
 import OrganizationsMembersTable from './components/OrganizationsMembersTable';
diff --git a/apps/web/app/admin/organizations/components/OrganizationsTable.tsx b/apps/web/app/admin/organizations/components/OrganizationsTable.tsx
deleted file mode 100644
index 78d20b8d9..000000000
--- a/apps/web/app/admin/organizations/components/OrganizationsTable.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import type { ColumnDef } from '@tanstack/react-table';
-import { EllipsisIcon } from 'lucide-react';
-import { getI18n } from 'react-i18next';
-
-import { Button } from '@kit/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@kit/ui/dropdown-menu';
-
-import pricingConfig from '@/config/pricing.config';
-
-import { DataTable } from '@/components/app/DataTable';
-
-import SubscriptionStatusBadge from '../../../(app)/[account]/components/organizations/SubscriptionStatusBadge';
-import type { getOrganizations } from '../queries';
-
-type Response = Awaited<ReturnType<typeof getOrganizations>>;
-type Organizations = Response['organizations'];
-
-const columns: ColumnDef<Organizations[0]>[] = [
-  {
-    header: 'ID',
-    accessorKey: 'id',
-    id: 'id',
-    size: 10,
-  },
-  {
-    header: 'UUID',
-    accessorKey: 'uuid',
-    id: 'uuid',
-    size: 200,
-  },
-  {
-    header: 'Name',
-    accessorKey: 'name',
-    id: 'name',
-  },
-  {
-    header: 'Subscription',
-    id: 'subscription',
-    cell: ({ row }) => {
-      const priceId = row.original?.subscription?.data?.priceId;
-
-      const plan = pricingConfig.products.find((product) => {
-        return product.plans.some((plan) => plan.stripePriceId === priceId);
-      });
-
-      if (plan) {
-        const price = plan.plans.find((plan) => plan.stripePriceId === priceId);
-
-        if (!price) {
-          return 'Unknown Price';
-        }
-
-        return `${plan.name} - ${price.name}`;
-      }
-
-      return '-';
-    },
-  },
-  {
-    header: 'Subscription Status',
-    id: 'subscription-status',
-    cell: ({ row }) => {
-      const subscription = row.original?.subscription?.data;
-
-      if (!subscription) {
-        return '-';
-      }
-
-      return <SubscriptionStatusBadge subscription={subscription} />;
-    },
-  },
-  {
-    header: 'Subscription Period',
-    id: 'subscription-period',
-    cell: ({ row }) => {
-      const subscription = row.original?.subscription?.data;
-      const i18n = getI18n();
-      const language = i18n.language ?? 'en';
-
-      if (!subscription) {
-        return '-';
-      }
-
-      const canceled = subscription.cancelAtPeriodEnd;
-      const date = subscription.periodEndsAt;
-      const formattedDate = new Date(date).toLocaleDateString(language);
-
-      return canceled ? (
-        <span className={'text-orange-500'}>Stops on {formattedDate}</span>
-      ) : (
-        <span className={'text-green-500'}>Renews on {formattedDate}</span>
-      );
-    },
-  },
-  {
-    header: 'Members',
-    id: 'members',
-    cell: ({ row }) => {
-      const memberships = row.original.memberships.filter((item) => !item.code);
-      const invites = row.original.memberships.length - memberships.length;
-      const uid = row.original.uuid;
-      const length = memberships.length;
-
-      return (
-        <Link
-          data-test={'organization-members-link'}
-          href={`organizations/${uid}/members`}
-          className={'cursor-pointer hover:underline'}
-        >
-          {length} member{length === 1 ? '' : 's'}{' '}
-          {invites ? `(${invites} invites)` : ''}
-        </Link>
-      );
-    },
-  },
-  {
-    header: '',
-    id: 'actions',
-    cell: ({ row }) => {
-      const organization = row.original;
-      const uid = organization.uuid;
-
-      return (
-        <div className={'flex justify-end'}>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size={'icon'}>
-                <span className="sr-only">Open menu</span>
-                <EllipsisIcon className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem
-                onClick={() => navigator.clipboard.writeText(uid)}
-              >
-                Copy UUID
-              </DropdownMenuItem>
-
-              <DropdownMenuItem asChild>
-                <Link href={`/admin/organizations/${uid}/members`}>
-                  View Members
-                </Link>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem asChild>
-                <Link
-                  className={'text-red-500'}
-                  href={`/admin/organizations/${uid}/delete`}
-                >
-                  Delete
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      );
-    },
-  },
-];
-
-function OrganizationsTable({
-  organizations,
-  pageCount,
-  perPage,
-  page,
-}: React.PropsWithChildren<{
-  organizations: Organizations;
-  pageCount: number;
-  perPage: number;
-  page: number;
-}>) {
-  return (
-    <DataTable
-      tableProps={{
-        'data-test': 'admin-organizations-table',
-      }}
-      pageSize={perPage}
-      pageIndex={page - 1}
-      pageCount={pageCount}
-      columns={columns}
-      data={organizations}
-    />
-  );
-}
-
-export default OrganizationsTable;
diff --git a/apps/web/app/admin/organizations/error.tsx b/apps/web/app/admin/organizations/error.tsx
index a0a7ffd74..8f64c6fd4 100644
--- a/apps/web/app/admin/organizations/error.tsx
+++ b/apps/web/app/admin/organizations/error.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-
 import { PageBody } from '@/components/app/Page';
 
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+
 function OrganizationsAdminPageError() {
   return (
     <PageBody>
diff --git a/apps/web/app/admin/organizations/page.tsx b/apps/web/app/admin/organizations/page.tsx
index 12114f54d..d0aea73f3 100644
--- a/apps/web/app/admin/organizations/page.tsx
+++ b/apps/web/app/admin/organizations/page.tsx
@@ -1,3 +1,5 @@
+import { PageBody } from '@/components/app/Page';
+import appConfig from '@/config/app.config';
 import AdminGuard from '@/packages/admin/components/AdminGuard';
 import AdminHeader from '@/packages/admin/components/AdminHeader';
 
@@ -5,10 +7,6 @@ import getSupabaseServerComponentClient from '@packages/supabase/server-componen
 
 import { Input } from '@kit/ui/input';
 
-import appConfig from '@/config/app.config';
-
-import { PageBody } from '@/components/app/Page';
-
 import OrganizationsTable from './components/OrganizationsTable';
 import { getOrganizations } from './queries';
 
diff --git a/apps/web/app/admin/organizations/queries.ts b/apps/web/app/admin/organizations/queries.ts
index fce59c3eb..b96f79544 100644
--- a/apps/web/app/admin/organizations/queries.ts
+++ b/apps/web/app/admin/organizations/queries.ts
@@ -1,7 +1,6 @@
 import type { SupabaseClient } from '@supabase/supabase-js';
 
 import type { Database } from '@/database.types';
-
 import { MEMBERSHIPS_TABLE, ORGANIZATIONS_TABLE } from '@/lib/db-tables';
 import type { UserOrganizationData } from '@/lib/organizations/database/queries';
 import type MembershipRole from '@/lib/organizations/types/membership-role';
diff --git a/apps/web/app/admin/page.tsx b/apps/web/app/admin/page.tsx
index b8326e830..85c73b695 100644
--- a/apps/web/app/admin/page.tsx
+++ b/apps/web/app/admin/page.tsx
@@ -1,8 +1,7 @@
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
+import { PageBody } from '@/components/app/Page';
 import appConfig from '@/config/app.config';
 
-import { PageBody } from '@/components/app/Page';
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
 
 import AdminDashboard from '../../packages/admin/components/AdminDashboard';
 import AdminGuard from '../../packages/admin/components/AdminGuard';
diff --git a/apps/web/app/admin/users/@modal/[uid]/actions.server.ts b/apps/web/app/admin/users/@modal/[uid]/actions.server.ts
index 9f49c25e1..2b98d771c 100644
--- a/apps/web/app/admin/users/@modal/[uid]/actions.server.ts
+++ b/apps/web/app/admin/users/@modal/[uid]/actions.server.ts
@@ -3,11 +3,11 @@
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { withAdminSession } from '~/admin/lib/actions-utils';
-
 import { Logger } from '@kit/shared/logger';
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
+import { withAdminSession } from '~/admin/lib/actions-utils';
+
 const getClient = () => getSupabaseServerActionClient({ admin: true });
 
 export const banUser = withAdminSession(async ({ userId }) => {
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx b/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx
index a6f74014a..676cd9bf5 100644
--- a/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx
+++ b/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx
@@ -8,6 +8,8 @@ import { useRouter } from 'next/navigation';
 
 import type { User } from '@supabase/gotrue-js';
 
+import ErrorBoundary from '@/components/app/ErrorBoundary';
+
 import useCsrfToken from '@kit/hooks/use-csrf-token';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { Button } from '@kit/ui/button';
@@ -20,8 +22,6 @@ import {
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
 
-import ErrorBoundary from '@/components/app/ErrorBoundary';
-
 import { banUser } from '../actions.server';
 
 function BanUserModal({
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx b/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx
index 420d2b4a9..70cfd8cfc 100644
--- a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx
+++ b/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx
@@ -4,10 +4,10 @@ import { useEffect } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import useSupabase from '@kit/hooks/use-supabase';
-
 import Spinner from '@/components/app/Spinner';
 
+import useSupabase from '@kit/hooks/use-supabase';
+
 function ImpersonateUserAuthSetter({
   tokens,
 }: React.PropsWithChildren<{
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx b/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx
index 258ed82eb..4a2713ce3 100644
--- a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx
+++ b/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx
@@ -6,6 +6,9 @@ import { useRouter } from 'next/navigation';
 
 import type { User } from '@supabase/gotrue-js';
 
+import If from '@/components/app/If';
+import LoadingOverlay from '@/components/app/LoadingOverlay';
+
 import useCsrfToken from '@kit/hooks/use-csrf-token';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { Button } from '@kit/ui/button';
@@ -16,9 +19,6 @@ import {
   DialogTitle,
 } from '@kit/ui/dialog';
 
-import If from '@/components/app/If';
-import LoadingOverlay from '@/components/app/LoadingOverlay';
-
 import { impersonateUser } from '../actions.server';
 import ImpersonateUserAuthSetter from '../components/ImpersonateUserAuthSetter';
 
diff --git a/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx b/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx
index 7729128df..0db1b50d6 100644
--- a/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx
+++ b/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx
@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 
+import If from '@/components/app/If';
 import { EllipsisVerticalIcon } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
@@ -12,8 +13,6 @@ import {
   DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 
-import If from '@/components/app/If';
-
 function UserActionsDropdown({
   uid,
   isBanned,
diff --git a/apps/web/app/admin/users/[uid]/page.tsx b/apps/web/app/admin/users/[uid]/page.tsx
index 798fa03c5..bb8c44859 100644
--- a/apps/web/app/admin/users/[uid]/page.tsx
+++ b/apps/web/app/admin/users/[uid]/page.tsx
@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+import { PageBody } from '@/components/app/Page';
+import configuration from '@/config/app.config';
+import type MembershipRole from '@/lib/organizations/types/membership-role';
 import { ChevronRightIcon } from 'lucide-react';
 
 import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
@@ -17,12 +20,6 @@ import {
   TableRow,
 } from '@kit/ui/table';
 
-import configuration from '@/config/app.config';
-
-import type MembershipRole from '@/lib/organizations/types/membership-role';
-
-import { PageBody } from '@/components/app/Page';
-
 import RoleBadge from '../../../(app)/[account]/account/organization/components/RoleBadge';
 import AdminGuard from '../../../../packages/admin/components/AdminGuard';
 import AdminHeader from '../../../../packages/admin/components/AdminHeader';
diff --git a/apps/web/app/admin/users/components/UsersTable.tsx b/apps/web/app/admin/users/components/UsersTable.tsx
deleted file mode 100644
index c4957f322..000000000
--- a/apps/web/app/admin/users/components/UsersTable.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import type { ColumnDef } from '@tanstack/react-table';
-import { EllipsisIcon } from 'lucide-react';
-import { getI18n } from 'react-i18next';
-
-import type UserData from '@kit/session/types/user-data';
-import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
-import { Badge } from '@kit/ui/badge';
-import { Button } from '@kit/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@kit/ui/dropdown-menu';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@kit/ui/tooltip';
-
-import { DataTable } from '@/components/app/DataTable';
-import If from '@/components/app/If';
-
-type UserRow = {
-  id: string;
-  email: string | undefined;
-  phone: string | undefined;
-  createdAt: string;
-  updatedAt: string | undefined;
-  lastSignInAt: string | undefined;
-  banDuration: string | undefined;
-  data: UserData;
-};
-
-const columns: ColumnDef<UserRow>[] = [
-  {
-    header: '',
-    id: 'avatar',
-    size: 10,
-    cell: ({ row }) => {
-      const user = row.original;
-      const data = user.data;
-      const displayName = data?.displayName;
-      const photoUrl = data?.photoUrl;
-      const displayText = displayName ?? user.email ?? user.phone ?? '';
-
-      return (
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar>
-              {photoUrl ? <AvatarImage src={photoUrl} /> : null}
-              <AvatarFallback>{displayText[0]}</AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-
-          <TooltipContent>{displayText}</TooltipContent>
-        </Tooltip>
-      );
-    },
-  },
-  {
-    header: 'ID',
-    id: 'id',
-    size: 30,
-    cell: ({ row }) => {
-      const id = row.original.id;
-
-      return (
-        <Link className={'hover:underline'} href={`/admin/users/${id}`}>
-          {id}
-        </Link>
-      );
-    },
-  },
-  {
-    header: 'Email',
-    id: 'email',
-    cell: ({ row }) => {
-      const email = row.original.email;
-
-      return (
-        <span title={email} className={'block max-w-full truncate'}>
-          {email}
-        </span>
-      );
-    },
-  },
-  {
-    header: 'Name',
-    size: 50,
-    id: 'displayName',
-    cell: ({ row }) => {
-      return row.original.data?.displayName ?? '';
-    },
-  },
-  {
-    header: 'Created at',
-    id: 'createdAt',
-    cell: ({ row }) => {
-      const date = new Date(row.original.createdAt);
-      const i18n = getI18n();
-      const language = i18n.language ?? 'en';
-      const createdAtLabel = date.toLocaleDateString(language);
-
-      return <span>{createdAtLabel}</span>;
-    },
-  },
-  {
-    header: 'Last sign in',
-    id: 'lastSignInAt',
-    cell: ({ row }) => {
-      const lastSignInAt = row.original.lastSignInAt;
-
-      if (!lastSignInAt) {
-        return <span>-</span>;
-      }
-
-      const date = new Date(lastSignInAt);
-      return <span suppressHydrationWarning>{date.toLocaleString()}</span>;
-    },
-  },
-  {
-    header: 'Status',
-    id: 'status',
-    cell: ({ row }) => {
-      const banDuration = row.original.banDuration;
-
-      if (!banDuration || banDuration === 'none') {
-        return (
-          <Badge className={'inline-flex'} color={'success'}>
-            Active
-          </Badge>
-        );
-      }
-
-      return (
-        <Badge className={'inline-flex'} color={'error'}>
-          Banned
-        </Badge>
-      );
-    },
-  },
-  {
-    header: '',
-    id: 'actions',
-    cell: ({ row }) => {
-      const user = row.original;
-      const banDuration = row.original.banDuration;
-      const isBanned = banDuration && banDuration !== 'none';
-
-      return (
-        <div className={'flex justify-end'}>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size={'icon'}>
-                <span className="sr-only">Open menu</span>
-                <EllipsisIcon className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem
-                onClick={() => navigator.clipboard.writeText(user.id)}
-              >
-                Copy user ID
-              </DropdownMenuItem>
-
-              <If condition={!isBanned}>
-                <DropdownMenuItem asChild>
-                  <Link href={`/admin/users/${user.id}/impersonate`}>
-                    Impersonate User
-                  </Link>
-                </DropdownMenuItem>
-
-                <DropdownMenuItem asChild>
-                  <Link
-                    className={
-                      'text-orange-500 hover:bg-orange-50 dark:hover:bg-orange-500/5'
-                    }
-                    href={`/admin/users/${user.id}/ban`}
-                  >
-                    Ban User
-                  </Link>
-                </DropdownMenuItem>
-
-                <DropdownMenuItem asChild>
-                  <Link
-                    className={
-                      'text-red-500 hover:bg-red-50 dark:hover:bg-red-500/5'
-                    }
-                    href={`/admin/users/${user.id}/delete`}
-                  >
-                    Delete User
-                  </Link>
-                </DropdownMenuItem>
-              </If>
-
-              <If condition={isBanned}>
-                <DropdownMenuItem asChild>
-                  <Link href={`/admin/users/${user.id}/reactivate`}>
-                    Reactivate User
-                  </Link>
-                </DropdownMenuItem>
-              </If>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      );
-    },
-  },
-];
-
-function UsersTable({
-  users,
-  page,
-  pageCount,
-  perPage,
-}: React.PropsWithChildren<{
-  users: UserRow[];
-  pageCount: number;
-  page: number;
-  perPage: number;
-}>) {
-  return (
-    <DataTable
-      tableProps={{
-        'data-test': 'admin-users-table',
-      }}
-      pageIndex={page - 1}
-      pageSize={perPage}
-      pageCount={pageCount}
-      data={users}
-      columns={columns}
-    />
-  );
-}
-
-export default UsersTable;
diff --git a/apps/web/app/admin/users/error.tsx b/apps/web/app/admin/users/error.tsx
index 98412d747..5e83f1d7a 100644
--- a/apps/web/app/admin/users/error.tsx
+++ b/apps/web/app/admin/users/error.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-
 import { PageBody } from '@/components/app/Page';
 
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+
 function UsersAdminPageError() {
   return (
     <PageBody>
diff --git a/apps/web/app/admin/users/page.tsx b/apps/web/app/admin/users/page.tsx
index a1507c0a0..ce7401a26 100644
--- a/apps/web/app/admin/users/page.tsx
+++ b/apps/web/app/admin/users/page.tsx
@@ -1,15 +1,13 @@
+import { PageBody } from '@/components/app/Page';
+import appConfig from '@/config/app.config';
+
 import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
 
 import type UserData from '@kit/session/types/user-data';
 
-import appConfig from '@/config/app.config';
-
-import { PageBody } from '@/components/app/Page';
-
 import AdminGuard from '../../../packages/admin/components/AdminGuard';
 import AdminHeader from '../../../packages/admin/components/AdminHeader';
 import getPageFromQueryParams from '../utils/get-page-from-query-param';
-import UsersTable from './components/UsersTable';
 import { getUsers } from './queries';
 
 interface UsersAdminPageProps {
@@ -32,14 +30,7 @@ async function UsersAdminPage({ searchParams }: UsersAdminPageProps) {
     <div className={'flex flex-1 flex-col'}>
       <AdminHeader>Users</AdminHeader>
 
-      <PageBody>
-        <UsersTable
-          users={users}
-          page={page}
-          pageCount={pageCount}
-          perPage={perPage}
-        />
-      </PageBody>
+      <PageBody></PageBody>
     </div>
   );
 }
diff --git a/apps/web/app/admin/users/queries.ts b/apps/web/app/admin/users/queries.ts
index c61e6809e..0acb10f24 100644
--- a/apps/web/app/admin/users/queries.ts
+++ b/apps/web/app/admin/users/queries.ts
@@ -1,7 +1,7 @@
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
 import { USERS_TABLE } from '@/lib/db-tables';
 
+import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
+
 export async function getUsers(ids: string[]) {
   const client = getSupabaseServerComponentClient({ admin: true });
 
diff --git a/apps/web/app/api/billing/webhook/route.ts b/apps/web/app/api/billing/webhook/route.ts
new file mode 100644
index 000000000..00acdb63e
--- /dev/null
+++ b/apps/web/app/api/billing/webhook/route.ts
@@ -0,0 +1,50 @@
+import { getBillingEventHandlerService } from '@kit/billing-gateway';
+import { Logger } from '@kit/shared/logger';
+import { getSupabaseRouteHandlerClient } from '@kit/supabase/route-handler-client';
+
+import billingConfig from '~/config/billing.config';
+
+/**
+ * @description Handle the webhooks from Stripe related to checkouts
+ */
+export async function POST(request: Request) {
+  const client = getSupabaseRouteHandlerClient();
+
+  // we can infer the provider from the billing config or the request
+  // for simplicity, we'll use the billing config for now
+  // TODO: use dynamic provider from request?
+  const provider = billingConfig.provider;
+
+  Logger.info(
+    {
+      name: 'billing',
+      provider,
+    },
+    `Received billing webhook. Processing...`,
+  );
+
+  const service = await getBillingEventHandlerService(client, provider);
+
+  try {
+    await service.handleWebhookEvent(request);
+
+    Logger.info(
+      {
+        name: 'billing',
+      },
+      `Successfully processed billing webhook`,
+    );
+
+    return new Response('OK', { status: 200 });
+  } catch (e) {
+    Logger.error(
+      {
+        name: 'billing',
+        error: e,
+      },
+      `Failed to process billing webhook`,
+    );
+
+    return new Response('Error', { status: 500 });
+  }
+}
diff --git a/apps/web/app/api/stripe/webhook/route.ts b/apps/web/app/api/stripe/webhook/route.ts
deleted file mode 100644
index 8c469487d..000000000
--- a/apps/web/app/api/stripe/webhook/route.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { headers } from 'next/headers';
-import { NextResponse } from 'next/server';
-
-import type { SupabaseClient } from '@supabase/supabase-js';
-
-import type { Stripe } from 'stripe';
-
-import getSupabaseRouteHandlerClient from '@packages/supabase/route-handler-client';
-
-import { Logger } from '@kit/logger';
-import createStripeClient from '@kit/stripe/get-stripe';
-import StripeWebhooks from '@kit/stripe/stripe-webhooks.enum';
-
-import { setOrganizationSubscriptionData } from '@/lib/organizations/database/mutations';
-import {
-  addSubscription,
-  deleteSubscription,
-  updateSubscriptionById,
-} from '@/lib/subscriptions/mutations';
-
-const STRIPE_SIGNATURE_HEADER = 'stripe-signature';
-
-const webhookSecretKey = process.env.STRIPE_WEBHOOK_SECRET!;
-
-const logName = 'stripe-webhook';
-
-/**
- * @description Handle the webhooks from Stripe related to checkouts
- */
-export async function POST(request: Request) {
-  const signature = headers().get(STRIPE_SIGNATURE_HEADER);
-
-  Logger.info(`[Stripe] Received Stripe Webhook`);
-
-  if (!webhookSecretKey) {
-    Logger.error(
-      {
-        name: logName,
-      },
-      `The variable STRIPE_WEBHOOK_SECRET is unset. Please add the STRIPE_WEBHOOK_SECRET environment variable`,
-    );
-
-    return new Response(null, {
-      status: 500,
-    });
-  }
-
-  // verify signature header is not missing
-  if (!signature) {
-    return new Response('Invalid signature', {
-      status: 400,
-    });
-  }
-
-  const rawBody = await request.text();
-  const stripe = await createStripeClient();
-
-  // create an Admin client to write to the subscriptions table
-  const client = getSupabaseRouteHandlerClient({
-    admin: true,
-  });
-
-  try {
-    // build the event from the raw body and signature using Stripe
-    const event = stripe.webhooks.constructEvent(
-      rawBody,
-      signature,
-      webhookSecretKey,
-    );
-
-    Logger.info(
-      {
-        name: logName,
-        type: event.type,
-      },
-      `Processing Stripe Webhook...`,
-    );
-
-    switch (event.type) {
-      case StripeWebhooks.Completed: {
-        const session = event.data.object as Stripe.Checkout.Session;
-        const subscriptionId = session.subscription as string;
-
-        const subscription =
-          await stripe.subscriptions.retrieve(subscriptionId);
-
-        await onCheckoutCompleted(client, session, subscription);
-
-        break;
-      }
-
-      case StripeWebhooks.SubscriptionDeleted: {
-        const subscription = event.data.object as Stripe.Subscription;
-
-        await deleteSubscription(client, subscription.id);
-
-        break;
-      }
-
-      case StripeWebhooks.SubscriptionUpdated: {
-        const subscription = event.data.object as Stripe.Subscription;
-
-        await updateSubscriptionById(client, subscription);
-
-        break;
-      }
-    }
-
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    Logger.error(
-      {
-        error,
-        name: logName,
-      },
-      `Webhook handling failed`,
-    );
-
-    return new Response(null, {
-      status: 500,
-    });
-  }
-}
-
-/**
- * @description When the checkout is completed, we store the order. The
- * subscription is only activated if the order was paid successfully.
- * Otherwise, we have to wait for a further webhook
- */
-async function onCheckoutCompleted(
-  client: SupabaseClient,
-  session: Stripe.Checkout.Session,
-  subscription: Stripe.Subscription,
-) {
-  const organizationUid = getOrganizationUidFromClientReference(session);
-  const customerId = session.customer as string;
-
-  // build organization subscription and set on the organization document
-  // we add just enough data in the DB, so we do not query
-  // Stripe for every bit of data
-  // if you need your DB record to contain further data
-  // add it to {@link buildOrganizationSubscription}
-  const { error, data } = await addSubscription(client, subscription);
-
-  if (error) {
-    return Promise.reject(
-      `Failed to add subscription to the database: ${error}`,
-    );
-  }
-
-  return setOrganizationSubscriptionData(client, {
-    organizationUid,
-    customerId,
-    subscriptionId: data.id,
-  });
-}
-
-/**
- * @name getOrganizationUidFromClientReference
- * @description Get the organization UUID from the client reference ID
- * @param session
- */
-function getOrganizationUidFromClientReference(
-  session: Stripe.Checkout.Session,
-) {
-  return session.client_reference_id!;
-}
diff --git a/apps/web/app/auth/callback/route.ts b/apps/web/app/auth/callback/route.ts
index 741a7397e..b853041d9 100644
--- a/apps/web/app/auth/callback/route.ts
+++ b/apps/web/app/auth/callback/route.ts
@@ -1,11 +1,11 @@
 import { redirect } from 'next/navigation';
 import type { NextRequest } from 'next/server';
 
-import pathsConfig from '~/config/paths.config';
-
 import { Logger } from '@kit/shared/logger';
 import { getSupabaseRouteHandlerClient } from '@kit/supabase/route-handler-client';
 
+import pathsConfig from '~/config/paths.config';
+
 export async function GET(request: NextRequest) {
   const requestUrl = new URL(request.url);
   const searchParams = requestUrl.searchParams;
diff --git a/apps/web/app/auth/layout.tsx b/apps/web/app/auth/layout.tsx
index 7cc6b0098..ff7b33bc3 100644
--- a/apps/web/app/auth/layout.tsx
+++ b/apps/web/app/auth/layout.tsx
@@ -1,7 +1,7 @@
-import { AppLogo } from '~/components/app-logo';
-
 import { AuthLayoutShell } from '@kit/auth/shared';
 
+import { AppLogo } from '~/components/app-logo';
+
 function AuthLayout({ children }: React.PropsWithChildren) {
   return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
 }
diff --git a/apps/web/app/auth/password-reset/page.tsx b/apps/web/app/auth/password-reset/page.tsx
index e2e9fe745..b004b2c51 100644
--- a/apps/web/app/auth/password-reset/page.tsx
+++ b/apps/web/app/auth/password-reset/page.tsx
@@ -1,14 +1,14 @@
 import Link from 'next/link';
 
-import pathsConfig from '~/config/paths.config';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { PasswordResetRequestContainer } from '@kit/auth/password-reset';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
 
diff --git a/apps/web/app/auth/sign-in/page.tsx b/apps/web/app/auth/sign-in/page.tsx
index f4aa914eb..d9ca9b2e5 100644
--- a/apps/web/app/auth/sign-in/page.tsx
+++ b/apps/web/app/auth/sign-in/page.tsx
@@ -1,15 +1,15 @@
 import Link from 'next/link';
 
-import authConfig from '~/config/auth.config';
-import pathsConfig from '~/config/paths.config';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { SignInMethodsContainer } from '@kit/auth/sign-in';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
+import authConfig from '~/config/auth.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
 
diff --git a/apps/web/app/auth/sign-up/page.tsx b/apps/web/app/auth/sign-up/page.tsx
index 8f855d4b7..eab64cfa2 100644
--- a/apps/web/app/auth/sign-up/page.tsx
+++ b/apps/web/app/auth/sign-up/page.tsx
@@ -1,15 +1,15 @@
 import Link from 'next/link';
 
-import authConfig from '~/config/auth.config';
-import pathsConfig from '~/config/paths.config';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { SignUpMethodsContainer } from '@kit/auth/sign-up';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
+import authConfig from '~/config/auth.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
 
diff --git a/apps/web/app/auth/verify/page.tsx b/apps/web/app/auth/verify/page.tsx
index 350c195c3..bf5c1e308 100644
--- a/apps/web/app/auth/verify/page.tsx
+++ b/apps/web/app/auth/verify/page.tsx
@@ -1,13 +1,13 @@
 import { redirect } from 'next/navigation';
 
-import pathsConfig from '~/config/paths.config';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { MultiFactorChallengeContainer } from '@kit/auth/mfa';
 import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
 
diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
index e88202f17..b7af07fe5 100644
--- a/apps/web/app/error.tsx
+++ b/apps/web/app/error.tsx
@@ -3,12 +3,13 @@
 import Link from 'next/link';
 
 import { ArrowLeftIcon } from 'lucide-react';
-import { SiteHeader } from '~/(marketing)/components/site-header';
 
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
+import { SiteHeader } from '~/(marketing)/components/site-header';
+
 const ErrorPage = () => {
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
diff --git a/apps/web/app/join/_components/NewUserInviteForm.tsx b/apps/web/app/join/_components/NewUserInviteForm.tsx
index ac2a4ff52..0a4acffbf 100644
--- a/apps/web/app/join/_components/NewUserInviteForm.tsx
+++ b/apps/web/app/join/_components/NewUserInviteForm.tsx
@@ -2,8 +2,6 @@
 
 import { useCallback, useState, useTransition } from 'react';
 
-import authConfig from '~/config/auth.config';
-
 import { EmailOtpContainer } from '@kit/auth/src/components/email-otp-container';
 import { OauthProviders } from '@kit/auth/src/components/oauth-providers';
 import { PasswordSignInContainer } from '@kit/auth/src/components/password-sign-in-container';
@@ -14,6 +12,8 @@ import { If } from '@kit/ui/if';
 import { LoadingOverlay } from '@kit/ui/loading-overlay';
 import { Trans } from '@kit/ui/trans';
 
+import authConfig from '~/config/auth.config';
+
 enum Mode {
   SignUp,
   SignIn,
diff --git a/apps/web/app/join/layout.tsx b/apps/web/app/join/layout.tsx
index d52af8455..c82ab0cb8 100644
--- a/apps/web/app/join/layout.tsx
+++ b/apps/web/app/join/layout.tsx
@@ -1,7 +1,7 @@
-import { AppLogo } from '~/components/app-logo';
-
 import { AuthLayoutShell } from '@kit/auth/shared';
 
+import { AppLogo } from '~/components/app-logo';
+
 function InvitePageLayout({ children }: React.PropsWithChildren) {
   return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 50e734bf2..3fa74d4c4 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,13 +1,13 @@
 import { Inter as SansFont } from 'next/font/google';
 import { cookies } from 'next/headers';
 
+import { Toaster } from '@kit/ui/sonner';
+import { cn } from '@kit/ui/utils';
+
 import { RootProviders } from '~/components/root-providers';
 import appConfig from '~/config/app.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 
-import { Toaster } from '@kit/ui/sonner';
-import { cn } from '@kit/ui/utils';
-
 import '../styles/globals.css';
 
 const sans = SansFont({
@@ -51,7 +51,7 @@ function getClassName() {
 export const metadata = {
   title: appConfig.name,
   description: appConfig.description,
-  metadataBase: new URL(appConfig.url!),
+  metadataBase: new URL(appConfig.url),
   openGraph: {
     url: appConfig.url,
     siteName: appConfig.name,
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 815170ca0..49f086c1c 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,14 +1,15 @@
 import Link from 'next/link';
 
 import { ArrowLeftIcon } from '@radix-ui/react-icons';
-import { SiteHeader } from '~/(marketing)/components/site-header';
-import appConfig from '~/config/app.config';
-import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
+import { SiteHeader } from '~/(marketing)/components/site-header';
+import appConfig from '~/config/app.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 export const metadata = {
   title: `Page not found - ${appConfig.name}`,
 };
diff --git a/apps/web/app/server-sitemap.xml/route.ts b/apps/web/app/server-sitemap.xml/route.ts
index 5aadb52a8..2e865552d 100644
--- a/apps/web/app/server-sitemap.xml/route.ts
+++ b/apps/web/app/server-sitemap.xml/route.ts
@@ -1,10 +1,9 @@
+import appConfig from '@/config/app.config';
 import { invariant } from '@epic-web/invariant';
 import { allDocumentationPages, allPosts } from 'contentlayer/generated';
 import { getServerSideSitemap } from 'next-sitemap';
 import { join } from 'path';
 
-import appConfig from '@/config/app.config';
-
 const siteUrl = appConfig.url;
 
 export async function GET() {
diff --git a/apps/web/app/update-password/page.tsx b/apps/web/app/update-password/page.tsx
index 88b38412b..95566fa19 100644
--- a/apps/web/app/update-password/page.tsx
+++ b/apps/web/app/update-password/page.tsx
@@ -1,12 +1,12 @@
 import { redirect } from 'next/navigation';
 
-import pathsConfig from '~/config/paths.config';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { AuthLayoutShell } from '@kit/auth/shared';
 import PasswordResetForm from '@kit/auth/src/components/password-reset-form';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
+import pathsConfig from '~/config/paths.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 async function PasswordResetPage() {
   const client = getSupabaseServerComponentClient();
   const user = await client.auth.getUser();
diff --git a/apps/web/components/root-providers.tsx b/apps/web/components/root-providers.tsx
index 1414f94a6..2b5d29234 100644
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import pathsConfig from '~/config/paths.config';
-import { i18nResolver } from '~/lib/i18n/i18n.resolver';
 
 import { I18nProvider } from '@kit/i18n/provider';
 import { AuthChangeListener } from '@kit/supabase/components/auth-change-listener';
 
+import pathsConfig from '~/config/paths.config';
+import { i18nResolver } from '~/lib/i18n/i18n.resolver';
+
 export function RootProviders({
   lang,
   children,
diff --git a/apps/web/config/organization-account-sidebar.config.tsx b/apps/web/config/organization-account-sidebar.config.tsx
index d34997b67..3dee549af 100644
--- a/apps/web/config/organization-account-sidebar.config.tsx
+++ b/apps/web/config/organization-account-sidebar.config.tsx
@@ -4,11 +4,12 @@ import {
   SettingsIcon,
   UsersIcon,
 } from 'lucide-react';
-import featureFlagsConfig from '~/config/feature-flags.config';
-import pathsConfig from '~/config/paths.config';
 
 import { SidebarConfigSchema } from '@kit/ui/sidebar-schema';
 
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
 const iconClasses = 'w-4';
 
 const routes = (account: string) => [
diff --git a/apps/web/config/personal-account-sidebar.config.tsx b/apps/web/config/personal-account-sidebar.config.tsx
index 0e8042145..00d749763 100644
--- a/apps/web/config/personal-account-sidebar.config.tsx
+++ b/apps/web/config/personal-account-sidebar.config.tsx
@@ -1,9 +1,10 @@
 import { CreditCardIcon, HomeIcon, UserIcon } from 'lucide-react';
-import featureFlagsConfig from '~/config/feature-flags.config';
-import pathsConfig from '~/config/paths.config';
 
 import { SidebarConfigSchema } from '@kit/ui/sidebar-schema';
 
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
 const iconClasses = 'w-4';
 
 const routes = [
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index d07d32972..1a5439c30 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -2,12 +2,13 @@ import type { NextRequest } from 'next/server';
 import { NextResponse, URLPattern } from 'next/server';
 
 import csrf from 'edge-csrf';
-import appConfig from '~/config/app.config';
-import pathsConfig from '~/config/paths.config';
 
 import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
 import { createMiddlewareClient } from '@kit/supabase/middleware-client';
 
+import appConfig from '~/config/app.config';
+import pathsConfig from '~/config/paths.config';
+
 const CSRF_SECRET_COOKIE = 'csrfSecret';
 const NEXT_ACTION_HEADER = 'next-action';
 
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index 96574a5a4..2484cdfd1 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -1,3 +1,5 @@
+import withBundleAnalyzer from '@next/bundle-analyzer';
+
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
@@ -12,16 +14,17 @@ const config = {
     '@kit/i18n',
     '@kit/mailers',
     '@kit/billing',
-    '@kit/billing-gateway'
+    '@kit/billing-gateway',
   ],
-  pageExtensions: ['ts', 'tsx', 'mdx'],
+  pageExtensions: ['ts', 'tsx'],
   experimental: {
     mdxRs: true,
   },
-
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
 };
 
-export default config;
+export default withBundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+})(config);
diff --git a/apps/web/package.json b/apps/web/package.json
index 6504560ab..f0b28e9bd 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "analyze": "ANALYZE=true pnpm run build",
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev",
@@ -57,6 +58,7 @@
     "@kit/prettier-config": "^0.1.0",
     "@kit/tailwind-config": "^0.1.0",
     "@kit/tsconfig": "^0.1.0",
+    "@next/bundle-analyzer": "^14.1.4",
     "@types/mdx": "^2.0.10",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
diff --git a/apps/web/public/locales/en/common.json b/apps/web/public/locales/en/common.json
index 3089ddfe4..92ef71bc2 100644
--- a/apps/web/public/locales/en/common.json
+++ b/apps/web/public/locales/en/common.json
@@ -56,5 +56,9 @@
       "label": "Member",
       "description": "Cannot invite members or change settings"
     }
+  },
+  "billingInterval": {
+    "month": "Billed monthly",
+    "year": "Billed yearly"
   }
 }
diff --git a/packages/billing-gateway/package.json b/packages/billing-gateway/package.json
index 67a0ff70b..6d3bafc15 100644
--- a/packages/billing-gateway/package.json
+++ b/packages/billing-gateway/package.json
@@ -16,20 +16,20 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zod": "^3.22.4"
-  },
-  "dependencies": {
+    "zod": "^3.22.4",
     "@kit/ui": "0.1.0",
     "@kit/stripe": "0.1.0",
     "@kit/billing": "0.1.0",
     "@kit/supabase": "^0.1.0",
+    "@kit/shared": "^0.1.0",
     "lucide-react": "^0.361.0"
   },
   "devDependencies": {
     "@kit/prettier-config": "0.1.0",
     "@kit/eslint-config": "0.2.0",
     "@kit/tailwind-config": "0.1.0",
-    "@kit/tsconfig": "0.1.0"
+    "@kit/tsconfig": "0.1.0",
+    "@supabase/supabase-js": "^2.39.8"
   },
   "eslintConfig": {
     "root": true,
diff --git a/packages/billing-gateway/src/components/plan-picker.tsx b/packages/billing-gateway/src/components/plan-picker.tsx
index 463ffb895..c72a8bee8 100644
--- a/packages/billing-gateway/src/components/plan-picker.tsx
+++ b/packages/billing-gateway/src/components/plan-picker.tsx
@@ -22,6 +22,7 @@ import {
   RadioGroupItemLabel,
 } from '@kit/ui/radio-group';
 import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
 
 export function PlanPicker(
   props: React.PropsWithChildren<{
@@ -81,29 +82,39 @@ export function PlanPicker(
 
                 <FormControl>
                   <RadioGroup name={field.name} value={field.value}>
-                    {intervals.map((interval) => {
-                      return (
-                        <div
-                          key={interval}
-                          className={'flex items-center space-x-2'}
-                        >
-                          <RadioGroupItem
-                            id={interval}
-                            value={interval}
-                            onClick={() => {
-                              form.setValue('interval', interval);
-                            }}
-                          />
+                    <div className={'flex space-x-2.5'}>
+                      {intervals.map((interval) => {
+                        const selected = field.value === interval;
 
-                          <span className={'text-sm font-bold'}>
-                            <Trans
-                              i18nKey={`common.billingInterval.${interval}`}
-                              defaults={interval}
+                        return (
+                          <label
+                            key={interval}
+                            className={cn(
+                              'hover:bg-muted flex items-center space-x-2 rounded-md border border-transparent px-4 py-2',
+                              {
+                                ['border-border']: selected,
+                                ['hover:bg-muted']: !selected,
+                              },
+                            )}
+                          >
+                            <RadioGroupItem
+                              id={interval}
+                              value={interval}
+                              onClick={() => {
+                                form.setValue('planId', '');
+                                form.setValue('interval', interval);
+                              }}
                             />
-                          </span>
-                        </div>
-                      );
-                    })}
+
+                            <span className={'text-sm font-bold'}>
+                              <Trans
+                                i18nKey={`common:billingInterval.${interval}`}
+                              />
+                            </span>
+                          </label>
+                        );
+                      })}
+                    </div>
                   </RadioGroup>
                 </FormControl>
                 <FormMessage />
@@ -130,7 +141,10 @@ export function PlanPicker(
                     }
 
                     return (
-                      <RadioGroupItemLabel key={variant.id}>
+                      <RadioGroupItemLabel
+                        selected={field.value === variant.id}
+                        key={variant.id}
+                      >
                         <RadioGroupItem
                           id={variant.id}
                           value={variant.id}
@@ -144,9 +158,7 @@ export function PlanPicker(
                         >
                           <Label
                             htmlFor={variant.id}
-                            className={
-                              'flex flex-col justify-center space-y-1.5'
-                            }
+                            className={'flex flex-col justify-center space-y-2'}
                           >
                             <span className="font-bold">{item.name}</span>
 
diff --git a/packages/billing-gateway/src/index.ts b/packages/billing-gateway/src/index.ts
index 23c3dba8c..55fbd53d3 100644
--- a/packages/billing-gateway/src/index.ts
+++ b/packages/billing-gateway/src/index.ts
@@ -1,2 +1,3 @@
-export * from './billing-gateway-service';
-export * from './gateway-provider-factory';
+export * from './services/billing-gateway/billing-gateway.service';
+export * from './services/billing-gateway/billing-gateway-provider-factory';
+export * from './services/billing-event-handler/billing-gateway-provider-factory';
diff --git a/packages/billing-gateway/src/services/billing-event-handler/billing-event-handler.service.ts b/packages/billing-gateway/src/services/billing-event-handler/billing-event-handler.service.ts
new file mode 100644
index 000000000..4ce1d3c90
--- /dev/null
+++ b/packages/billing-gateway/src/services/billing-event-handler/billing-event-handler.service.ts
@@ -0,0 +1,106 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { BillingWebhookHandlerService } from '@kit/billing';
+import { Logger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+export class BillingEventHandlerService {
+  constructor(
+    private readonly client: SupabaseClient<Database>,
+    private readonly strategy: BillingWebhookHandlerService,
+  ) {}
+
+  async handleWebhookEvent(request: Request) {
+    const event = await this.strategy.verifyWebhookSignature(request);
+
+    if (!event) {
+      throw new Error('Invalid signature');
+    }
+
+    return this.strategy.handleWebhookEvent(event, {
+      onSubscriptionDeleted: async (subscriptionId: string) => {
+        // Handle the subscription deleted event
+        // here we delete the subscription from the database
+        Logger.info(
+          {
+            namespace: 'billing',
+            subscriptionId,
+          },
+          'Processing subscription deleted event',
+        );
+
+        const { error } = await this.client
+          .from('subscriptions')
+          .delete()
+          .match({ id: subscriptionId });
+
+        if (error) {
+          throw new Error('Failed to delete subscription');
+        }
+
+        Logger.info(
+          {
+            namespace: 'billing',
+            subscriptionId,
+          },
+          'Successfully deleted subscription',
+        );
+      },
+      onSubscriptionUpdated: async (subscription) => {
+        const ctx = {
+          namespace: 'billing',
+          subscriptionId: subscription.id,
+          provider: subscription.billing_provider,
+          accountId: subscription.account_id,
+        };
+
+        Logger.info(ctx, 'Processing subscription updated event');
+
+        // Handle the subscription updated event
+        // here we update the subscription in the database
+        const { error } = await this.client
+          .from('subscriptions')
+          .update(subscription)
+          .match({ id: subscription.id });
+
+        if (error) {
+          Logger.error(
+            {
+              error,
+              ...ctx,
+            },
+            'Failed to update subscription',
+          );
+
+          throw new Error('Failed to update subscription');
+        }
+
+        Logger.info(ctx, 'Successfully updated subscription');
+      },
+      onCheckoutSessionCompleted: async (subscription) => {
+        // Handle the checkout session completed event
+        // here we add the subscription to the database
+        const ctx = {
+          namespace: 'billing',
+          subscriptionId: subscription.id,
+          provider: subscription.billing_provider,
+          accountId: subscription.account_id,
+        };
+
+        Logger.info(ctx, 'Processing checkout session completed event...');
+
+        const { error } = await this.client.rpc('add_subscription', {
+          subscription,
+        });
+
+        if (error) {
+          Logger.error(ctx, 'Failed to add subscription');
+
+          throw new Error('Failed to add subscription');
+        }
+
+        Logger.info(ctx, 'Successfully added subscription');
+      },
+    });
+  }
+}
diff --git a/packages/billing-gateway/src/services/billing-event-handler/billing-gateway-factory.service.ts b/packages/billing-gateway/src/services/billing-event-handler/billing-gateway-factory.service.ts
new file mode 100644
index 000000000..258616b99
--- /dev/null
+++ b/packages/billing-gateway/src/services/billing-event-handler/billing-gateway-factory.service.ts
@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+import { BillingProvider, BillingWebhookHandlerService } from '@kit/billing';
+
+export class BillingEventHandlerFactoryService {
+  static async GetProviderStrategy(
+    provider: z.infer<typeof BillingProvider>,
+  ): Promise<BillingWebhookHandlerService> {
+    switch (provider) {
+      case 'stripe': {
+        const { StripeWebhookHandlerService } = await import('@kit/stripe');
+
+        return new StripeWebhookHandlerService();
+      }
+
+      case 'paddle': {
+        throw new Error('Paddle is not supported yet');
+      }
+
+      case 'lemon-squeezy': {
+        throw new Error('Lemon Squeezy is not supported yet');
+      }
+
+      default:
+        throw new Error(`Unsupported billing provider: ${provider as string}`);
+    }
+  }
+}
diff --git a/packages/billing-gateway/src/services/billing-event-handler/billing-gateway-provider-factory.ts b/packages/billing-gateway/src/services/billing-event-handler/billing-gateway-provider-factory.ts
new file mode 100644
index 000000000..b6b42c926
--- /dev/null
+++ b/packages/billing-gateway/src/services/billing-event-handler/billing-gateway-provider-factory.ts
@@ -0,0 +1,20 @@
+import { Database } from '@kit/supabase/database';
+import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+
+import { BillingEventHandlerService } from './billing-event-handler.service';
+import { BillingEventHandlerFactoryService } from './billing-gateway-factory.service';
+
+/**
+ * @description This function retrieves the billing provider from the database and returns a
+ * new instance of the `BillingGatewayService` class. This class is used to interact with the server actions
+ * defined in the host application.
+ */
+export async function getBillingEventHandlerService(
+  client: ReturnType<typeof getSupabaseServerActionClient>,
+  provider: Database['public']['Enums']['billing_provider'],
+) {
+  const strategy =
+    await BillingEventHandlerFactoryService.GetProviderStrategy(provider);
+
+  return new BillingEventHandlerService(client, strategy);
+}
diff --git a/packages/billing-gateway/src/billing-gateway-factory.service.ts b/packages/billing-gateway/src/services/billing-gateway/billing-gateway-factory.service.ts
similarity index 100%
rename from packages/billing-gateway/src/billing-gateway-factory.service.ts
rename to packages/billing-gateway/src/services/billing-gateway/billing-gateway-factory.service.ts
diff --git a/packages/billing-gateway/src/gateway-provider-factory.ts b/packages/billing-gateway/src/services/billing-gateway/billing-gateway-provider-factory.ts
similarity index 79%
rename from packages/billing-gateway/src/gateway-provider-factory.ts
rename to packages/billing-gateway/src/services/billing-gateway/billing-gateway-provider-factory.ts
index bb67f06fd..125697edd 100644
--- a/packages/billing-gateway/src/gateway-provider-factory.ts
+++ b/packages/billing-gateway/src/services/billing-gateway/billing-gateway-provider-factory.ts
@@ -1,15 +1,13 @@
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
-import { BillingGatewayService } from './billing-gateway-service';
+import { BillingGatewayService } from './billing-gateway.service';
 
 /**
  * @description This function retrieves the billing provider from the database and returns a
  * new instance of the `BillingGatewayService` class. This class is used to interact with the server actions
  * defined in the host application.
- * @param {ReturnType<typeof getSupabaseServerActionClient>} client - The Supabase server action client.
- *
  */
-export async function getGatewayProvider(
+export async function getBillingGatewayProvider(
   client: ReturnType<typeof getSupabaseServerActionClient>,
 ) {
   const provider = await getBillingProvider(client);
diff --git a/packages/billing-gateway/src/billing-gateway-service.ts b/packages/billing-gateway/src/services/billing-gateway/billing-gateway.service.ts
similarity index 100%
rename from packages/billing-gateway/src/billing-gateway-service.ts
rename to packages/billing-gateway/src/services/billing-gateway/billing-gateway.service.ts
diff --git a/packages/billing/package.json b/packages/billing/package.json
index d81b9670b..72ffd47d7 100644
--- a/packages/billing/package.json
+++ b/packages/billing/package.json
@@ -17,10 +17,9 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zod": "^3.22.4"
-  },
-  "dependencies": {
+    "zod": "^3.22.4",
     "@kit/ui": "0.1.0",
+    "@kit/supabase": "0.1.0",
     "lucide-react": "^0.361.0"
   },
   "devDependencies": {
diff --git a/packages/billing/src/index.ts b/packages/billing/src/index.ts
index af37a5b62..0c675acff 100644
--- a/packages/billing/src/index.ts
+++ b/packages/billing/src/index.ts
@@ -1,2 +1,3 @@
 export * from './create-billing-schema';
 export * from './services/billing-strategy-provider.service';
+export * from './services/billing-webhook-handler.service';
diff --git a/packages/billing/src/services/billing-webhook-handler.service.ts b/packages/billing/src/services/billing-webhook-handler.service.ts
new file mode 100644
index 000000000..3df854464
--- /dev/null
+++ b/packages/billing/src/services/billing-webhook-handler.service.ts
@@ -0,0 +1,32 @@
+import { Database } from '@kit/supabase/database';
+
+type SubscriptionObject = Database['public']['Tables']['subscriptions'];
+
+type SubscriptionInsertParams = Omit<
+  SubscriptionObject['Insert'],
+  'billing_customer_id'
+>;
+
+type SubscriptionUpdateParams = SubscriptionObject['Update'];
+
+/**
+ * Represents an abstract class for handling billing webhook events.
+ */
+export abstract class BillingWebhookHandlerService {
+  abstract verifyWebhookSignature(request: Request): Promise<unknown>;
+
+  abstract handleWebhookEvent(
+    event: unknown,
+    params: {
+      onCheckoutSessionCompleted: (
+        subscription: SubscriptionInsertParams,
+      ) => Promise<unknown>;
+
+      onSubscriptionUpdated: (
+        subscription: SubscriptionUpdateParams,
+      ) => Promise<unknown>;
+
+      onSubscriptionDeleted: (subscriptionId: string) => Promise<unknown>;
+    },
+  ): Promise<unknown>;
+}
diff --git a/packages/features/accounts/package.json b/packages/features/accounts/package.json
index 90e5dda6e..8aa4d7926 100644
--- a/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -14,13 +14,6 @@
     "./personal-account-settings": "./src/components/personal-account-settings/index.ts",
     "./hooks/*": "./src/hooks/*.ts"
   },
-  "dependencies": {
-    "@kit/supabase": "0.1.0",
-    "@kit/ui": "0.1.0",
-    "@kit/shared": "0.1.0",
-    "lucide-react": "^0.360.0",
-    "@radix-ui/react-icons": "^1.3.0"
-  },
   "devDependencies": {
     "@kit/eslint-config": "0.2.0",
     "@kit/prettier-config": "0.1.0",
@@ -29,7 +22,12 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@kit/supabase": "0.1.0",
+    "@kit/ui": "0.1.0",
+    "@kit/shared": "0.1.0",
+    "lucide-react": "^0.360.0",
+    "@radix-ui/react-icons": "^1.3.0"
   },
   "prettier": "@kit/prettier-config",
   "eslintConfig": {
diff --git a/packages/features/admin/src/components/AdminHeader.tsx b/packages/features/admin/src/components/AdminHeader.tsx
index 41ef6c67c..da78ebaff 100644
--- a/packages/features/admin/src/components/AdminHeader.tsx
+++ b/packages/features/admin/src/components/AdminHeader.tsx
@@ -1,13 +1,11 @@
 import Link from 'next/link';
 
+import { PageHeader } from '@/components/app/Page';
+import pathsConfig from '@/config/paths.config';
 import { ArrowLeftIcon } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
 
-import pathsConfig from '@/config/paths.config';
-
-import { PageHeader } from '@/components/app/Page';
-
 function AdminHeader({ children }: React.PropsWithChildren) {
   return (
     <PageHeader
diff --git a/packages/features/admin/src/components/AdminSidebar.tsx b/packages/features/admin/src/components/AdminSidebar.tsx
index 663a00a81..1cd53054f 100644
--- a/packages/features/admin/src/components/AdminSidebar.tsx
+++ b/packages/features/admin/src/components/AdminSidebar.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { HomeIcon, UserIcon, UsersIcon } from 'lucide-react';
-
 import Logo from '@/components/app/Logo';
 import { Sidebar, SidebarContent, SidebarItem } from '@/components/app/Sidebar';
+import { HomeIcon, UserIcon, UsersIcon } from 'lucide-react';
 
 function AdminSidebar() {
   return (
diff --git a/packages/features/auth/package.json b/packages/features/auth/package.json
index 5eb20f5f7..9157bbfae 100644
--- a/packages/features/auth/package.json
+++ b/packages/features/auth/package.json
@@ -15,19 +15,18 @@
     "./shared": "./src/shared.ts",
     "./mfa": "./src/mfa.ts"
   },
-  "dependencies": {
-    "@kit/ui": "0.1.0",
-    "@kit/supabase": "0.1.0",
-    "@radix-ui/react-icons": "^1.3.0",
-    "react-i18next": "14.1.0",
-    "sonner": "^1.4.41",
-    "@tanstack/react-query": "5.28.6"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@kit/prettier-config": "0.1.0",
     "@kit/eslint-config": "0.2.0",
     "@kit/tailwind-config": "0.1.0",
-    "@kit/tsconfig": "0.1.0"
+    "@kit/tsconfig": "0.1.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@kit/ui": "0.1.0",
+    "@kit/supabase": "0.1.0",
+    "react-i18next": "14.1.0",
+    "sonner": "^1.4.41",
+    "@tanstack/react-query": "5.28.6"
   },
   "prettier": "@kit/prettier-config",
   "eslintConfig": {
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index e18e02434..2b7b27a35 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -15,9 +15,6 @@
     "./cookie": "./src/get-language-cookie.ts",
     "./provider": "./src/I18nProvider.tsx"
   },
-  "dependencies": {
-    "@kit/shared": "^0.1.0"
-  },
   "devDependencies": {
     "@kit/prettier-config": "0.1.0",
     "@kit/eslint-config": "0.2.0",
@@ -29,7 +26,8 @@
     "react-i18next": "^14.1.0",
     "i18next-browser-languagedetector": "7.2.0",
     "i18next-resources-to-backend": "^1.2.0",
-    "next": "^14.1.4"
+    "next": "^14.1.4",
+    "@kit/shared": "^0.1.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/packages/i18n/src/I18nProvider.tsx b/packages/i18n/src/I18nProvider.tsx
index f1fabd5d0..881542602 100644
--- a/packages/i18n/src/I18nProvider.tsx
+++ b/packages/i18n/src/I18nProvider.tsx
@@ -35,7 +35,6 @@ async function withI18nClient(lang: string, resolver: Resolver) {
 }
 
 async function loadClientI18n(lang: string | undefined, resolver: Resolver) {
-  // TODO: pull cookie client-side
   const { initializeI18nClient } = await import('./i18n.client');
 
   return initializeI18nClient(lang, resolver);
diff --git a/packages/i18n/src/i18n.client.ts b/packages/i18n/src/i18n.client.ts
index 7cb505382..8ef7b7b92 100644
--- a/packages/i18n/src/i18n.client.ts
+++ b/packages/i18n/src/i18n.client.ts
@@ -23,7 +23,7 @@ export function initializeI18nClient(
       .use(
         resourcesToBackend(async (language, namespace, callback) => {
           const data = await i18nResolver(language, namespace);
-
+          console.log(data);
           return callback(null, data);
         }),
       )
diff --git a/packages/stripe/package.json b/packages/stripe/package.json
index 17525a92a..5e04e4dd3 100644
--- a/packages/stripe/package.json
+++ b/packages/stripe/package.json
@@ -14,12 +14,16 @@
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts"
   },
+  "peerDependencies": {
+    "@kit/billing": "0.1.0",
+    "@kit/ui": "0.1.0",
+    "@kit/shared": "0.1.0",
+    "@kit/supabase": "0.1.0"
+  },
   "dependencies": {
     "stripe": "^14.21.0",
     "@stripe/react-stripe-js": "^2.6.2",
-    "@stripe/stripe-js": "^3.0.10",
-    "@kit/billing": "0.1.0",
-    "@kit/ui": "0.1.0"
+    "@stripe/stripe-js": "^3.0.10"
   },
   "devDependencies": {
     "@kit/prettier-config": "0.1.0",
diff --git a/packages/stripe/src/index.ts b/packages/stripe/src/index.ts
index 754ff8968..36fc426f3 100644
--- a/packages/stripe/src/index.ts
+++ b/packages/stripe/src/index.ts
@@ -1 +1,2 @@
-export { StripeBillingStrategyService } from './stripe.service';
+export { StripeBillingStrategyService } from './services/stripe-billing-strategy.service';
+export { StripeWebhookHandlerService } from './services/stripe-webhook-handler.service';
diff --git a/packages/stripe/src/schema/stripe-client-env.schema.ts b/packages/stripe/src/schema/stripe-client-env.schema.ts
new file mode 100644
index 000000000..c0fa90cf2
--- /dev/null
+++ b/packages/stripe/src/schema/stripe-client-env.schema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const StripeClientEnvSchema = z.object({
+  NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().min(1),
+});
diff --git a/packages/stripe/src/schema/stripe-server-env.schema.ts b/packages/stripe/src/schema/stripe-server-env.schema.ts
new file mode 100644
index 000000000..c0bd7c5a7
--- /dev/null
+++ b/packages/stripe/src/schema/stripe-server-env.schema.ts
@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const StripeServerEnvSchema = z.object({
+  STRIPE_SECRET_KEY: z.string().min(1),
+  STRIPE_WEBHOOK_SECRET: z.string().min(1),
+});
diff --git a/packages/stripe/src/server-actions.ts b/packages/stripe/src/server-actions.ts
deleted file mode 100644
index 3d3ada5d0..000000000
--- a/packages/stripe/src/server-actions.ts
+++ /dev/null
@@ -1,328 +0,0 @@
-'use server';
-
-import { RedirectType } from 'next/dist/client/components/redirect';
-import { headers } from 'next/headers';
-import { redirect } from 'next/navigation';
-
-import type { SupabaseClient } from '@supabase/supabase-js';
-
-import { join } from 'path';
-import { z } from 'zod';
-
-import getSupabaseServerActionClient from '@packages/supabase/action-client';
-
-import { withSession } from '@kit/generic/actions-utils';
-import getLogger from '@kit/logger';
-
-import pathsConfig from '@/config/paths.config';
-import pricingConfig from '@/config/pricing.config';
-
-import { getUserMembershipByOrganization } from '@/lib/memberships/queries';
-import {
-  getOrganizationByCustomerId,
-  getOrganizationByUid,
-} from '@/lib/organizations/database/queries';
-import { canChangeBilling } from '@/lib/organizations/permissions';
-import requireSession from '@/lib/user/require-session';
-
-import { stripe } from './stripe.service';
-
-export const createCheckoutAction = withSession(
-  async (_, formData: FormData) => {
-    const logger = getLogger();
-
-    const bodyResult = await getCheckoutBodySchema().safeParseAsync(
-      Object.fromEntries(formData),
-    );
-
-    const redirectToErrorPage = (error?: string) => {
-      const referer = headers().get('referer')!;
-      const url = join(referer, `?error=true`);
-
-      logger.error({ error }, `Could not create Stripe Checkout session`);
-
-      return redirect(url);
-    };
-
-    // Validate the body schema
-    if (!bodyResult.success) {
-      return redirectToErrorPage(`Invalid request body`);
-    }
-
-    const { organizationUid, priceId, returnUrl } = bodyResult.data;
-
-    // create the Supabase client
-    const client = getSupabaseServerActionClient();
-
-    // require the user to be logged in
-    const sessionResult = await requireSession(client);
-    const userId = sessionResult.user.id;
-    const customerEmail = sessionResult.user.email;
-
-    const { error, data } = await getOrganizationByUid(client, organizationUid);
-
-    if (error) {
-      return redirectToErrorPage(`Organization not found`);
-    }
-
-    const customerId = data?.subscription?.customerId;
-
-    if (customerId) {
-      logger.info({ customerId }, `Customer ID found for organization`);
-    }
-
-    const plan = getPlanByPriceId(priceId);
-
-    // check if the plan exists in the appConfig.
-    if (!plan) {
-      console.warn(
-        `Plan not found for price ID "${priceId}". Did you forget to add it to the configuration? If the Price ID is incorrect, the checkout will be rejected. Please check the Stripe dashboard`,
-      );
-    }
-
-    // check the user's role has access to the checkout
-    const canChangeBilling = await getUserCanAccessCheckout(client, {
-      organizationUid,
-      userId,
-    });
-
-    // disallow if the user doesn't have permissions to change
-    // billing account based on its role. To change the logic, please update
-    // {@link canChangeBilling}
-    if (!canChangeBilling) {
-      logger.debug(
-        {
-          userId,
-          organizationUid,
-        },
-        `User attempted to access checkout but lacked permissions`,
-      );
-
-      return redirectToErrorPage(
-        `You do not have permission to access this page`,
-      );
-    }
-
-    const trialPeriodDays =
-      plan && 'trialPeriodDays' in plan
-        ? (plan.trialPeriodDays as number)
-        : undefined;
-
-    // create the Stripe Checkout session
-    const session = await stripe
-      .createCheckout({
-        returnUrl,
-        organizationUid,
-        priceId,
-        customerId,
-        trialPeriodDays,
-        customerEmail,
-        embedded: true,
-      })
-      .catch((e) => {
-        logger.error(e, `Stripe Checkout error`);
-      });
-
-    // if there was an error, redirect to the error page
-    if (!session) {
-      return redirectToErrorPage();
-    }
-
-    logger.info(
-      {
-        id: session.id,
-        organizationUid,
-      },
-      `Created Stripe Checkout session`,
-    );
-
-    if (!session.client_secret) {
-      logger.error(
-        { id: session.id },
-        `Stripe Checkout session missing client secret`,
-      );
-
-      return redirectToErrorPage();
-    }
-
-    // if the checkout is embedded, we need to render the checkout
-    // therefore, we send the clientSecret back to the client
-    logger.info(
-      { id: session.id },
-      `Using embedded checkout mode. Sending client secret back to client.`,
-    );
-
-    return {
-      clientSecret: session.client_secret,
-    };
-  },
-);
-
-/**
- * @name getUserCanAccessCheckout
- * @description check if the user has permissions to access the checkout
- * @param client
- * @param params
- */
-async function getUserCanAccessCheckout(
-  client: SupabaseClient,
-  params: {
-    organizationUid: string;
-    userId: string;
-  },
-) {
-  try {
-    const { role } = await getUserMembershipByOrganization(client, params);
-
-    if (role === undefined) {
-      return false;
-    }
-
-    return canChangeBilling(role);
-  } catch (error) {
-    getLogger().error({ error }, `Could not retrieve user role`);
-
-    return false;
-  }
-}
-
-export const createBillingPortalSessionAction = withSession(
-  async (formData: FormData) => {
-    const body = Object.fromEntries(formData);
-    const bodyResult = await getBillingPortalBodySchema().safeParseAsync(body);
-    const referrerPath = getReferrer();
-
-    // Validate the body schema
-    if (!bodyResult.success) {
-      return redirectToErrorPage(referrerPath);
-    }
-
-    const { customerId } = bodyResult.data;
-
-    const client = getSupabaseServerActionClient();
-    const logger = getLogger();
-    const session = await requireSession(client);
-
-    const userId = session.user.id;
-
-    // get permissions to see if the user can access the portal
-    const canAccess = await getUserCanAccessCustomerPortal(client, {
-      customerId,
-      userId,
-    });
-
-    // validate that the user can access the portal
-    if (!canAccess) {
-      return redirectToErrorPage(referrerPath);
-    }
-
-    const referer = headers().get('referer');
-    const origin = headers().get('origin');
-    const returnUrl = referer || origin || pathsConfig.appHome;
-
-    // get the Stripe Billing Portal session
-    const { url } = await stripe
-      .createBillingPortalSession({
-        returnUrl,
-        customerId,
-      })
-      .catch((e) => {
-        logger.error(e, `Stripe Billing Portal redirect error`);
-
-        return redirectToErrorPage(referrerPath);
-      });
-
-    // redirect to the Stripe Billing Portal
-    return redirect(url, RedirectType.replace);
-  },
-);
-
-/**
- * @name getUserCanAccessCustomerPortal
- * @description Returns whether a user {@link userId} has access to the
- * Stripe portal of an organization with customer ID {@link customerId}
- */
-async function getUserCanAccessCustomerPortal(
-  client: SupabaseClient,
-  params: {
-    customerId: string;
-    userId: string;
-  },
-) {
-  const logger = getLogger();
-
-  const { data: organization, error } = await getOrganizationByCustomerId(
-    client,
-    params.customerId,
-  );
-
-  if (error) {
-    logger.error(
-      {
-        error,
-        customerId: params.customerId,
-      },
-      `Could not retrieve organization by Customer ID`,
-    );
-
-    return false;
-  }
-
-  try {
-    const organizationUid = organization.uuid;
-
-    const { role } = await getUserMembershipByOrganization(client, {
-      organizationUid,
-      userId: params.userId,
-    });
-
-    if (role === undefined) {
-      return false;
-    }
-
-    return canChangeBilling(role);
-  } catch (error) {
-    logger.error({ error }, `Could not retrieve user role`);
-
-    return false;
-  }
-}
-
-function getBillingPortalBodySchema() {
-  return z.object({
-    customerId: z.string().min(1),
-  });
-}
-
-function getCheckoutBodySchema() {
-  return z.object({
-    organizationUid: z.string().uuid(),
-    priceId: z.string().min(1),
-    returnUrl: z.string().min(1),
-  });
-}
-
-function getPlanByPriceId(priceId: string) {
-  const products = pricingConfig.products;
-  type Plan = (typeof products)[0]['plans'][0];
-
-  return products.reduce<Maybe<Plan>>((acc, product) => {
-    if (acc) {
-      return acc;
-    }
-
-    return product.plans.find(({ stripePriceId }) => stripePriceId === priceId);
-  }, undefined);
-}
-
-function redirectToErrorPage(referrerPath: string) {
-  const url = join(referrerPath, `?error=true`);
-
-  return redirect(url);
-}
-
-function getReferrer() {
-  const referer = headers().get('referer');
-  const origin = headers().get('origin');
-  return referer || origin || pathsConfig.appHome;
-}
diff --git a/packages/stripe/src/create-stripe-billing-portal-session.ts b/packages/stripe/src/services/create-stripe-billing-portal-session.ts
similarity index 100%
rename from packages/stripe/src/create-stripe-billing-portal-session.ts
rename to packages/stripe/src/services/create-stripe-billing-portal-session.ts
diff --git a/packages/stripe/src/create-checkout.ts b/packages/stripe/src/services/create-stripe-checkout.ts
similarity index 100%
rename from packages/stripe/src/create-checkout.ts
rename to packages/stripe/src/services/create-stripe-checkout.ts
diff --git a/packages/stripe/src/stripe.service.ts b/packages/stripe/src/services/stripe-billing-strategy.service.ts
similarity index 84%
rename from packages/stripe/src/stripe.service.ts
rename to packages/stripe/src/services/stripe-billing-strategy.service.ts
index e3918c3a7..6c1847a53 100644
--- a/packages/stripe/src/stripe.service.ts
+++ b/packages/stripe/src/services/stripe-billing-strategy.service.ts
@@ -10,8 +10,8 @@ import {
   RetrieveCheckoutSessionSchema,
 } from '@kit/billing/schema';
 
-import { createStripeCheckout } from './create-checkout';
 import { createStripeBillingPortalSession } from './create-stripe-billing-portal-session';
+import { createStripeCheckout } from './create-stripe-checkout';
 import { createStripeClient } from './stripe-sdk';
 
 export class StripeBillingStrategyService
@@ -22,7 +22,13 @@ export class StripeBillingStrategyService
   ) {
     const stripe = await this.stripeProvider();
 
-    return createStripeCheckout(stripe, params);
+    const { client_secret } = await createStripeCheckout(stripe, params);
+
+    if (!client_secret) {
+      throw new Error('Failed to create checkout session');
+    }
+
+    return { checkoutToken: client_secret };
   }
 
   async createBillingPortalSession(
diff --git a/packages/stripe/src/services/stripe-sdk.ts b/packages/stripe/src/services/stripe-sdk.ts
new file mode 100644
index 000000000..7716cb22d
--- /dev/null
+++ b/packages/stripe/src/services/stripe-sdk.ts
@@ -0,0 +1,23 @@
+import 'server-only';
+
+import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';
+
+const STRIPE_API_VERSION = '2023-10-16';
+
+// Parse the environment variables and validate them
+const stripeServerEnv = StripeServerEnvSchema.parse({
+  STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
+  STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+});
+
+/**
+ * @description returns a Stripe instance
+ */
+export async function createStripeClient() {
+  const { default: Stripe } = await import('stripe');
+  const key = stripeServerEnv.STRIPE_SECRET_KEY;
+
+  return new Stripe(key, {
+    apiVersion: STRIPE_API_VERSION,
+  });
+}
diff --git a/packages/stripe/src/services/stripe-webhook-handler.service.ts b/packages/stripe/src/services/stripe-webhook-handler.service.ts
new file mode 100644
index 000000000..267667e81
--- /dev/null
+++ b/packages/stripe/src/services/stripe-webhook-handler.service.ts
@@ -0,0 +1,208 @@
+import Stripe from 'stripe';
+
+import { BillingWebhookHandlerService } from '@kit/billing';
+import { Logger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';
+import { createStripeClient } from './stripe-sdk';
+
+type Subscription = Database['public']['Tables']['subscriptions'];
+
+type InsertSubscriptionParams = Omit<
+  Subscription['Insert'],
+  'billing_customer_id'
+>;
+
+export class StripeWebhookHandlerService
+  implements BillingWebhookHandlerService
+{
+  private stripe: Stripe | undefined;
+
+  private readonly provider: Database['public']['Enums']['billing_provider'] =
+    'stripe';
+
+  private readonly namespace = 'billing.stripe';
+
+  /**
+   * @description Verifies the webhook signature - should throw an error if the signature is invalid
+   */
+  async verifyWebhookSignature(request: Request) {
+    const body = await request.clone().text();
+    const signature = `stripe-signature`;
+
+    const { STRIPE_WEBHOOK_SECRET } = StripeServerEnvSchema.parse({
+      STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+    });
+
+    const stripe = await this.loadStripe();
+
+    const event = stripe.webhooks.constructEvent(
+      body,
+      signature,
+      STRIPE_WEBHOOK_SECRET,
+    );
+
+    if (!event) {
+      throw new Error('Invalid signature');
+    }
+
+    return event;
+  }
+
+  private async loadStripe() {
+    if (!this.stripe) {
+      this.stripe = await createStripeClient();
+    }
+
+    return this.stripe;
+  }
+
+  async handleWebhookEvent(
+    event: Stripe.Event,
+    params: {
+      onCheckoutSessionCompleted: (
+        data: InsertSubscriptionParams,
+        customerId: string,
+      ) => Promise<unknown>;
+
+      onSubscriptionUpdated: (data: Subscription['Update']) => Promise<unknown>;
+      onSubscriptionDeleted: (subscriptionId: string) => Promise<unknown>;
+    },
+  ) {
+    switch (event.type) {
+      case 'checkout.session.completed': {
+        return this.handleCheckoutSessionCompleted(
+          event,
+          params.onCheckoutSessionCompleted,
+        );
+      }
+
+      case 'customer.subscription.updated': {
+        return this.handleSubscriptionUpdatedEvent(
+          event,
+          params.onSubscriptionUpdated,
+        );
+      }
+
+      case 'customer.subscription.deleted': {
+        return this.handleSubscriptionDeletedEvent(
+          event,
+          params.onSubscriptionDeleted,
+        );
+      }
+
+      default: {
+        Logger.info(
+          {
+            eventType: event.type,
+            name: this.namespace,
+          },
+          `Unhandled Stripe event type: ${event.type}`,
+        );
+
+        return;
+      }
+    }
+  }
+
+  private async handleCheckoutSessionCompleted(
+    event: Stripe.CheckoutSessionCompletedEvent,
+    onCheckoutCompletedCallback: (
+      data: InsertSubscriptionParams,
+      customerId: string,
+    ) => Promise<unknown>,
+  ) {
+    const stripe = await this.loadStripe();
+
+    const session = event.data.object;
+    const subscriptionId = session.subscription as string;
+
+    const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+
+    const accountId = session.client_reference_id!;
+    const customerId = session.customer as string;
+
+    // TODO: support tiered pricing calculations
+    // the amount total is amount in cents (e.g. 1000 = $10.00)
+    // TODO: convert or store the amount in cents?
+    const amount = session.amount_total ?? 0;
+
+    const payload = this.buildSubscriptionPayload<typeof accountId>({
+      subscription,
+      accountId,
+      amount,
+    });
+
+    return onCheckoutCompletedCallback(payload, customerId);
+  }
+
+  private async handleSubscriptionUpdatedEvent(
+    event: Stripe.CustomerSubscriptionUpdatedEvent,
+    onSubscriptionUpdatedCallback: (
+      data: Subscription['Update'],
+    ) => Promise<unknown>,
+  ) {
+    const subscription = event.data.object;
+
+    const amount = subscription.items.data.reduce((acc, item) => {
+      return (acc + (item.plan.amount ?? 0)) * (item.quantity ?? 1);
+    }, 0);
+
+    const payload = this.buildSubscriptionPayload<undefined>({
+      subscription,
+      amount,
+    });
+
+    return onSubscriptionUpdatedCallback(payload);
+  }
+
+  private handleSubscriptionDeletedEvent(
+    subscription: Stripe.CustomerSubscriptionDeletedEvent,
+    onSubscriptionDeletedCallback: (subscriptionId: string) => Promise<unknown>,
+  ) {
+    // Here we don't need to do anything, so we just return the callback
+
+    return onSubscriptionDeletedCallback(subscription.id);
+  }
+
+  private buildSubscriptionPayload<
+    AccountId extends string | undefined,
+  >(params: {
+    subscription: Stripe.Subscription;
+    amount: number;
+    // we only need the account id if we
+    // are creating a subscription for an account
+    accountId?: AccountId;
+  }): AccountId extends string
+    ? InsertSubscriptionParams
+    : Subscription['Update'] {
+    const { subscription } = params;
+    const lineItem = subscription.items.data[0];
+    const price = lineItem?.price;
+    const priceId = price?.id!;
+    const interval = price?.recurring?.interval ?? null;
+
+    const data = {
+      billing_provider: this.provider,
+      id: subscription.id,
+      status: subscription.status,
+      price_amount: params.amount,
+      cancel_at_period_end: subscription.cancel_at_period_end ?? false,
+      interval: interval as string,
+      currency: price?.currency!,
+      product_id: price?.product as string,
+      variant_id: priceId,
+      interval_count: price?.recurring?.interval_count ?? 1,
+    };
+
+    if (params.accountId !== undefined) {
+      return {
+        ...data,
+        account_id: params.accountId,
+      } satisfies InsertSubscriptionParams;
+    }
+
+    return data as Subscription['Update'];
+  }
+}
diff --git a/packages/stripe/src/stripe-sdk.ts b/packages/stripe/src/stripe-sdk.ts
deleted file mode 100644
index 82acee9ef..000000000
--- a/packages/stripe/src/stripe-sdk.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { invariant } from '@epic-web/invariant';
-import 'server-only';
-
-const STRIPE_API_VERSION = '2023-10-16';
-
-/**
- * @description returns a Stripe instance
- */
-export async function createStripeClient() {
-  const { default: Stripe } = await import('stripe');
-
-  invariant(
-    process.env.STRIPE_SECRET_KEY,
-    `'STRIPE_SECRET_KEY' environment variable was not provided`,
-  );
-
-  return new Stripe(process.env.STRIPE_SECRET_KEY, {
-    apiVersion: STRIPE_API_VERSION,
-  });
-}
diff --git a/packages/supabase/src/database.types.ts b/packages/supabase/src/database.types.ts
index c90b17e71..ebf5b2e9b 100644
--- a/packages/supabase/src/database.types.ts
+++ b/packages/supabase/src/database.types.ts
@@ -4,945 +4,924 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json | undefined }
-  | Json[]
+  | Json[];
 
 export type Database = {
   graphql_public: {
     Tables: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
       graphql: {
         Args: {
-          operationName?: string
-          query?: string
-          variables?: Json
-          extensions?: Json
-        }
-        Returns: Json
-      }
-    }
+          operationName?: string;
+          query?: string;
+          variables?: Json;
+          extensions?: Json;
+        };
+        Returns: Json;
+      };
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
   public: {
     Tables: {
       account_roles: {
         Row: {
-          account_id: string
-          id: number
-          role: Database["public"]["Enums"]["account_role"]
-        }
+          account_id: string;
+          id: number;
+          role: Database['public']['Enums']['account_role'];
+        };
         Insert: {
-          account_id: string
-          id?: number
-          role: Database["public"]["Enums"]["account_role"]
-        }
+          account_id: string;
+          id?: number;
+          role: Database['public']['Enums']['account_role'];
+        };
         Update: {
-          account_id?: string
-          id?: number
-          role?: Database["public"]["Enums"]["account_role"]
-        }
+          account_id?: string;
+          id?: number;
+          role?: Database['public']['Enums']['account_role'];
+        };
         Relationships: [
           {
-            foreignKeyName: "account_roles_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'account_roles_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "account_roles_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_account_workspace"
-            referencedColumns: ["id"]
+            foreignKeyName: 'account_roles_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_account_workspace';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "account_roles_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'account_roles_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_accounts';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       accounts: {
         Row: {
-          created_at: string | null
-          created_by: string | null
-          email: string | null
-          id: string
-          is_personal_account: boolean
-          name: string
-          picture_url: string | null
-          primary_owner_user_id: string
-          slug: string | null
-          updated_at: string | null
-          updated_by: string | null
-        }
+          created_at: string | null;
+          created_by: string | null;
+          email: string | null;
+          id: string;
+          is_personal_account: boolean;
+          name: string;
+          picture_url: string | null;
+          primary_owner_user_id: string;
+          slug: string | null;
+          updated_at: string | null;
+          updated_by: string | null;
+        };
         Insert: {
-          created_at?: string | null
-          created_by?: string | null
-          email?: string | null
-          id?: string
-          is_personal_account?: boolean
-          name: string
-          picture_url?: string | null
-          primary_owner_user_id?: string
-          slug?: string | null
-          updated_at?: string | null
-          updated_by?: string | null
-        }
+          created_at?: string | null;
+          created_by?: string | null;
+          email?: string | null;
+          id?: string;
+          is_personal_account?: boolean;
+          name: string;
+          picture_url?: string | null;
+          primary_owner_user_id?: string;
+          slug?: string | null;
+          updated_at?: string | null;
+          updated_by?: string | null;
+        };
         Update: {
-          created_at?: string | null
-          created_by?: string | null
-          email?: string | null
-          id?: string
-          is_personal_account?: boolean
-          name?: string
-          picture_url?: string | null
-          primary_owner_user_id?: string
-          slug?: string | null
-          updated_at?: string | null
-          updated_by?: string | null
-        }
+          created_at?: string | null;
+          created_by?: string | null;
+          email?: string | null;
+          id?: string;
+          is_personal_account?: boolean;
+          name?: string;
+          picture_url?: string | null;
+          primary_owner_user_id?: string;
+          slug?: string | null;
+          updated_at?: string | null;
+          updated_by?: string | null;
+        };
         Relationships: [
           {
-            foreignKeyName: "accounts_created_by_fkey"
-            columns: ["created_by"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_created_by_fkey';
+            columns: ['created_by'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_primary_owner_user_id_fkey"
-            columns: ["primary_owner_user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_primary_owner_user_id_fkey';
+            columns: ['primary_owner_user_id'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_updated_by_fkey"
-            columns: ["updated_by"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_updated_by_fkey';
+            columns: ['updated_by'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       accounts_memberships: {
         Row: {
-          account_id: string
-          account_role: Database["public"]["Enums"]["account_role"]
-          created_at: string
-          created_by: string | null
-          updated_at: string
-          updated_by: string | null
-          user_id: string
-        }
+          account_id: string;
+          account_role: Database['public']['Enums']['account_role'];
+          created_at: string;
+          created_by: string | null;
+          updated_at: string;
+          updated_by: string | null;
+          user_id: string;
+        };
         Insert: {
-          account_id: string
-          account_role: Database["public"]["Enums"]["account_role"]
-          created_at?: string
-          created_by?: string | null
-          updated_at?: string
-          updated_by?: string | null
-          user_id: string
-        }
+          account_id: string;
+          account_role: Database['public']['Enums']['account_role'];
+          created_at?: string;
+          created_by?: string | null;
+          updated_at?: string;
+          updated_by?: string | null;
+          user_id: string;
+        };
         Update: {
-          account_id?: string
-          account_role?: Database["public"]["Enums"]["account_role"]
-          created_at?: string
-          created_by?: string | null
-          updated_at?: string
-          updated_by?: string | null
-          user_id?: string
-        }
+          account_id?: string;
+          account_role?: Database['public']['Enums']['account_role'];
+          created_at?: string;
+          created_by?: string | null;
+          updated_at?: string;
+          updated_by?: string | null;
+          user_id?: string;
+        };
         Relationships: [
           {
-            foreignKeyName: "accounts_memberships_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_memberships_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_memberships_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_account_workspace"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_memberships_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_account_workspace';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_memberships_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_memberships_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_memberships_created_by_fkey"
-            columns: ["created_by"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_memberships_created_by_fkey';
+            columns: ['created_by'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_memberships_updated_by_fkey"
-            columns: ["updated_by"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_memberships_updated_by_fkey';
+            columns: ['updated_by'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "accounts_memberships_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'accounts_memberships_user_id_fkey';
+            columns: ['user_id'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       billing_customers: {
         Row: {
-          account_id: string
-          customer_id: string
-          email: string | null
-          id: number
-          provider: Database["public"]["Enums"]["billing_provider"]
-        }
+          account_id: string;
+          customer_id: string;
+          email: string | null;
+          id: number;
+          provider: Database['public']['Enums']['billing_provider'];
+        };
         Insert: {
-          account_id: string
-          customer_id: string
-          email?: string | null
-          id?: number
-          provider: Database["public"]["Enums"]["billing_provider"]
-        }
+          account_id: string;
+          customer_id: string;
+          email?: string | null;
+          id?: number;
+          provider: Database['public']['Enums']['billing_provider'];
+        };
         Update: {
-          account_id?: string
-          customer_id?: string
-          email?: string | null
-          id?: number
-          provider?: Database["public"]["Enums"]["billing_provider"]
-        }
+          account_id?: string;
+          customer_id?: string;
+          email?: string | null;
+          id?: number;
+          provider?: Database['public']['Enums']['billing_provider'];
+        };
         Relationships: [
           {
-            foreignKeyName: "billing_customers_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'billing_customers_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "billing_customers_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_account_workspace"
-            referencedColumns: ["id"]
+            foreignKeyName: 'billing_customers_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_account_workspace';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "billing_customers_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'billing_customers_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_accounts';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       config: {
         Row: {
           billing_provider:
-            | Database["public"]["Enums"]["billing_provider"]
-            | null
-          enable_account_billing: boolean | null
-          enable_organization_accounts: boolean | null
-          enable_organization_billing: boolean | null
-        }
+            | Database['public']['Enums']['billing_provider']
+            | null;
+          enable_account_billing: boolean | null;
+          enable_organization_accounts: boolean | null;
+          enable_organization_billing: boolean | null;
+        };
         Insert: {
           billing_provider?:
-            | Database["public"]["Enums"]["billing_provider"]
-            | null
-          enable_account_billing?: boolean | null
-          enable_organization_accounts?: boolean | null
-          enable_organization_billing?: boolean | null
-        }
+            | Database['public']['Enums']['billing_provider']
+            | null;
+          enable_account_billing?: boolean | null;
+          enable_organization_accounts?: boolean | null;
+          enable_organization_billing?: boolean | null;
+        };
         Update: {
           billing_provider?:
-            | Database["public"]["Enums"]["billing_provider"]
-            | null
-          enable_account_billing?: boolean | null
-          enable_organization_accounts?: boolean | null
-          enable_organization_billing?: boolean | null
-        }
-        Relationships: []
-      }
+            | Database['public']['Enums']['billing_provider']
+            | null;
+          enable_account_billing?: boolean | null;
+          enable_organization_accounts?: boolean | null;
+          enable_organization_billing?: boolean | null;
+        };
+        Relationships: [];
+      };
       invitations: {
         Row: {
-          account_id: string
-          created_at: string
-          email: string
-          id: number
-          invite_token: string
-          invited_by: string
-          role: Database["public"]["Enums"]["account_role"]
-          updated_at: string
-        }
+          account_id: string;
+          created_at: string;
+          email: string;
+          id: number;
+          invite_token: string;
+          invited_by: string;
+          role: Database['public']['Enums']['account_role'];
+          updated_at: string;
+        };
         Insert: {
-          account_id: string
-          created_at?: string
-          email: string
-          id?: number
-          invite_token: string
-          invited_by: string
-          role: Database["public"]["Enums"]["account_role"]
-          updated_at?: string
-        }
+          account_id: string;
+          created_at?: string;
+          email: string;
+          id?: number;
+          invite_token: string;
+          invited_by: string;
+          role: Database['public']['Enums']['account_role'];
+          updated_at?: string;
+        };
         Update: {
-          account_id?: string
-          created_at?: string
-          email?: string
-          id?: number
-          invite_token?: string
-          invited_by?: string
-          role?: Database["public"]["Enums"]["account_role"]
-          updated_at?: string
-        }
+          account_id?: string;
+          created_at?: string;
+          email?: string;
+          id?: number;
+          invite_token?: string;
+          invited_by?: string;
+          role?: Database['public']['Enums']['account_role'];
+          updated_at?: string;
+        };
         Relationships: [
           {
-            foreignKeyName: "invitations_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'invitations_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "invitations_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_account_workspace"
-            referencedColumns: ["id"]
+            foreignKeyName: 'invitations_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_account_workspace';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "invitations_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'invitations_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "invitations_invited_by_fkey"
-            columns: ["invited_by"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'invitations_invited_by_fkey';
+            columns: ['invited_by'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       role_permissions: {
         Row: {
-          id: number
-          permission: Database["public"]["Enums"]["app_permissions"]
-          role: Database["public"]["Enums"]["account_role"]
-        }
+          id: number;
+          permission: Database['public']['Enums']['app_permissions'];
+          role: Database['public']['Enums']['account_role'];
+        };
         Insert: {
-          id?: number
-          permission: Database["public"]["Enums"]["app_permissions"]
-          role: Database["public"]["Enums"]["account_role"]
-        }
+          id?: number;
+          permission: Database['public']['Enums']['app_permissions'];
+          role: Database['public']['Enums']['account_role'];
+        };
         Update: {
-          id?: number
-          permission?: Database["public"]["Enums"]["app_permissions"]
-          role?: Database["public"]["Enums"]["account_role"]
-        }
-        Relationships: []
-      }
+          id?: number;
+          permission?: Database['public']['Enums']['app_permissions'];
+          role?: Database['public']['Enums']['account_role'];
+        };
+        Relationships: [];
+      };
       subscriptions: {
         Row: {
-          account_id: string
-          billing_customer_id: number
-          billing_provider: Database["public"]["Enums"]["billing_provider"]
-          cancel_at_period_end: boolean
-          created_at: string
-          currency: string
-          id: string
-          interval: string
-          interval_count: number
-          last_payment_at: string | null
-          period_ends_at: string | null
-          period_starts_at: string | null
-          price_amount: number | null
-          product_id: string
-          status: Database["public"]["Enums"]["subscription_status"]
-          trial_ends_at: string | null
-          trial_starts_at: string | null
-          updated_at: string
-          variant_id: string
-        }
+          account_id: string;
+          billing_customer_id: number;
+          billing_provider: Database['public']['Enums']['billing_provider'];
+          cancel_at_period_end: boolean;
+          created_at: string;
+          currency: string;
+          id: string;
+          interval: string;
+          interval_count: number;
+          period_ends_at: string | null;
+          period_starts_at: string | null;
+          price_amount: number | null;
+          product_id: string;
+          status: Database['public']['Enums']['subscription_status'];
+          trial_ends_at: string | null;
+          trial_starts_at: string | null;
+          updated_at: string;
+          variant_id: string;
+        };
         Insert: {
-          account_id: string
-          billing_customer_id: number
-          billing_provider: Database["public"]["Enums"]["billing_provider"]
-          cancel_at_period_end: boolean
-          created_at?: string
-          currency: string
-          id: string
-          interval: string
-          interval_count: number
-          last_payment_at?: string | null
-          period_ends_at?: string | null
-          period_starts_at?: string | null
-          price_amount?: number | null
-          product_id: string
-          status: Database["public"]["Enums"]["subscription_status"]
-          trial_ends_at?: string | null
-          trial_starts_at?: string | null
-          updated_at?: string
-          variant_id: string
-        }
+          account_id: string;
+          billing_customer_id: number;
+          billing_provider: Database['public']['Enums']['billing_provider'];
+          cancel_at_period_end: boolean;
+          created_at?: string;
+          currency: string;
+          id: string;
+          interval: string;
+          interval_count: number;
+          period_ends_at?: string | null;
+          period_starts_at?: string | null;
+          price_amount?: number | null;
+          product_id: string;
+          status: Database['public']['Enums']['subscription_status'];
+          trial_ends_at?: string | null;
+          trial_starts_at?: string | null;
+          updated_at?: string;
+          variant_id: string;
+        };
         Update: {
-          account_id?: string
-          billing_customer_id?: number
-          billing_provider?: Database["public"]["Enums"]["billing_provider"]
-          cancel_at_period_end?: boolean
-          created_at?: string
-          currency?: string
-          id?: string
-          interval?: string
-          interval_count?: number
-          last_payment_at?: string | null
-          period_ends_at?: string | null
-          period_starts_at?: string | null
-          price_amount?: number | null
-          product_id?: string
-          status?: Database["public"]["Enums"]["subscription_status"]
-          trial_ends_at?: string | null
-          trial_starts_at?: string | null
-          updated_at?: string
-          variant_id?: string
-        }
+          account_id?: string;
+          billing_customer_id?: number;
+          billing_provider?: Database['public']['Enums']['billing_provider'];
+          cancel_at_period_end?: boolean;
+          created_at?: string;
+          currency?: string;
+          id?: string;
+          interval?: string;
+          interval_count?: number;
+          period_ends_at?: string | null;
+          period_starts_at?: string | null;
+          price_amount?: number | null;
+          product_id?: string;
+          status?: Database['public']['Enums']['subscription_status'];
+          trial_ends_at?: string | null;
+          trial_starts_at?: string | null;
+          updated_at?: string;
+          variant_id?: string;
+        };
         Relationships: [
           {
-            foreignKeyName: "subscriptions_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'subscriptions_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "subscriptions_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_account_workspace"
-            referencedColumns: ["id"]
+            foreignKeyName: 'subscriptions_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_account_workspace';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "subscriptions_account_id_fkey"
-            columns: ["account_id"]
-            isOneToOne: false
-            referencedRelation: "user_accounts"
-            referencedColumns: ["id"]
+            foreignKeyName: 'subscriptions_account_id_fkey';
+            columns: ['account_id'];
+            isOneToOne: false;
+            referencedRelation: 'user_accounts';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "subscriptions_billing_customer_id_fkey"
-            columns: ["billing_customer_id"]
-            isOneToOne: false
-            referencedRelation: "billing_customers"
-            referencedColumns: ["id"]
+            foreignKeyName: 'subscriptions_billing_customer_id_fkey';
+            columns: ['billing_customer_id'];
+            isOneToOne: false;
+            referencedRelation: 'billing_customers';
+            referencedColumns: ['id'];
           },
-        ]
-      }
-    }
+        ];
+      };
+    };
     Views: {
       user_account_workspace: {
         Row: {
-          id: string | null
-          name: string | null
-          picture_url: string | null
+          id: string | null;
+          name: string | null;
+          picture_url: string | null;
           subscription_status:
-            | Database["public"]["Enums"]["subscription_status"]
-            | null
-        }
-        Relationships: []
-      }
+            | Database['public']['Enums']['subscription_status']
+            | null;
+        };
+        Relationships: [];
+      };
       user_accounts: {
         Row: {
-          id: string | null
-          name: string | null
-          picture_url: string | null
-          role: Database["public"]["Enums"]["account_role"] | null
-          slug: string | null
-        }
-        Relationships: []
-      }
-    }
+          id: string | null;
+          name: string | null;
+          picture_url: string | null;
+          role: Database['public']['Enums']['account_role'] | null;
+          slug: string | null;
+        };
+        Relationships: [];
+      };
+    };
     Functions: {
-      add_invitations_to_account:
-        | {
-            Args: {
-              account_slug: string
-              invitations: Database["public"]["CompositeTypes"]["invitation"][]
-            }
-            Returns: Database["public"]["Tables"]["invitations"]["Row"][]
-          }
-        | {
-            Args: {
-              account_slug: string
-              invitations: Database["public"]["CompositeTypes"]["invitation"][]
-            }
-            Returns: {
-              account_id: string
-              created_at: string
-              email: string
-              id: number
-              invite_token: string
-              invited_by: string
-              role: Database["public"]["Enums"]["account_role"]
-              updated_at: string
-            }
-          }
+      add_invitations_to_account: {
+        Args: {
+          account_slug: string;
+          invitations: Database['public']['CompositeTypes']['invitation'][];
+        };
+        Returns: Database['public']['Tables']['invitations']['Row'][];
+      };
       create_account: {
         Args: {
-          account_name: string
-        }
+          account_name: string;
+        };
         Returns: {
-          created_at: string | null
-          created_by: string | null
-          email: string | null
-          id: string
-          is_personal_account: boolean
-          name: string
-          picture_url: string | null
-          primary_owner_user_id: string
-          slug: string | null
-          updated_at: string | null
-          updated_by: string | null
-        }
-      }
+          created_at: string | null;
+          created_by: string | null;
+          email: string | null;
+          id: string;
+          is_personal_account: boolean;
+          name: string;
+          picture_url: string | null;
+          primary_owner_user_id: string;
+          slug: string | null;
+          updated_at: string | null;
+          updated_by: string | null;
+        };
+      };
       create_invitation: {
         Args: {
-          account_id: string
-          email: string
-          role: Database["public"]["Enums"]["account_role"]
-        }
+          account_id: string;
+          email: string;
+          role: Database['public']['Enums']['account_role'];
+        };
         Returns: {
-          account_id: string
-          created_at: string
-          email: string
-          id: number
-          invite_token: string
-          invited_by: string
-          role: Database["public"]["Enums"]["account_role"]
-          updated_at: string
-        }
-      }
+          account_id: string;
+          created_at: string;
+          email: string;
+          id: number;
+          invite_token: string;
+          invited_by: string;
+          role: Database['public']['Enums']['account_role'];
+          updated_at: string;
+        };
+      };
       get_account_invitations: {
         Args: {
-          account_slug: string
-        }
+          account_slug: string;
+        };
         Returns: {
-          email: string
-          account_id: string
-          invited_by: string
-          role: Database["public"]["Enums"]["account_role"]
-          created_at: string
-          updated_at: string
-          inviter_name: string
-          inviter_email: string
-        }[]
-      }
+          email: string;
+          account_id: string;
+          invited_by: string;
+          role: Database['public']['Enums']['account_role'];
+          created_at: string;
+          updated_at: string;
+          inviter_name: string;
+          inviter_email: string;
+        }[];
+      };
       get_account_members: {
         Args: {
-          account_slug: string
-        }
+          account_slug: string;
+        };
         Returns: {
-          id: string
-          user_id: string
-          account_id: string
-          role: Database["public"]["Enums"]["account_role"]
-          primary_owner_user_id: string
-          name: string
-          email: string
-          picture_url: string
-          created_at: string
-          updated_at: string
-        }[]
-      }
+          id: string;
+          user_id: string;
+          account_id: string;
+          role: Database['public']['Enums']['account_role'];
+          primary_owner_user_id: string;
+          name: string;
+          email: string;
+          picture_url: string;
+          created_at: string;
+          updated_at: string;
+        }[];
+      };
       get_config: {
-        Args: Record<PropertyKey, never>
-        Returns: Json
-      }
+        Args: Record<PropertyKey, never>;
+        Returns: Json;
+      };
       get_user_accounts: {
-        Args: Record<PropertyKey, never>
+        Args: Record<PropertyKey, never>;
         Returns: {
-          created_at: string | null
-          created_by: string | null
-          email: string | null
-          id: string
-          is_personal_account: boolean
-          name: string
-          picture_url: string | null
-          primary_owner_user_id: string
-          slug: string | null
-          updated_at: string | null
-          updated_by: string | null
-        }[]
-      }
+          created_at: string | null;
+          created_by: string | null;
+          email: string | null;
+          id: string;
+          is_personal_account: boolean;
+          name: string;
+          picture_url: string | null;
+          primary_owner_user_id: string;
+          slug: string | null;
+          updated_at: string | null;
+          updated_by: string | null;
+        }[];
+      };
       has_permission: {
         Args: {
-          user_id: string
-          account_id: string
-          permission_name: Database["public"]["Enums"]["app_permissions"]
-        }
-        Returns: boolean
-      }
+          user_id: string;
+          account_id: string;
+          permission_name: Database['public']['Enums']['app_permissions'];
+        };
+        Returns: boolean;
+      };
       has_role_on_account: {
         Args: {
-          account_id: string
-          account_role?: Database["public"]["Enums"]["account_role"]
-        }
-        Returns: boolean
-      }
+          account_id: string;
+          account_role?: Database['public']['Enums']['account_role'];
+        };
+        Returns: boolean;
+      };
       is_account_owner: {
         Args: {
-          account_id: string
-        }
-        Returns: boolean
-      }
+          account_id: string;
+        };
+        Returns: boolean;
+      };
       is_set: {
         Args: {
-          field_name: string
-        }
-        Returns: boolean
-      }
+          field_name: string;
+        };
+        Returns: boolean;
+      };
       is_team_member: {
         Args: {
-          account_id: string
-          user_id: string
-        }
-        Returns: boolean
-      }
+          account_id: string;
+          user_id: string;
+        };
+        Returns: boolean;
+      };
       organization_account_workspace: {
         Args: {
-          account_slug: string
-        }
+          account_slug: string;
+        };
         Returns: {
-          id: string
-          name: string
-          picture_url: string
-          slug: string
-          role: Database["public"]["Enums"]["account_role"]
-          primary_owner_user_id: string
-          subscription_status: Database["public"]["Enums"]["subscription_status"]
-          permissions: Database["public"]["Enums"]["app_permissions"][]
-        }[]
-      }
+          id: string;
+          name: string;
+          picture_url: string;
+          slug: string;
+          role: Database['public']['Enums']['account_role'];
+          primary_owner_user_id: string;
+          subscription_status: Database['public']['Enums']['subscription_status'];
+          permissions: Database['public']['Enums']['app_permissions'][];
+        }[];
+      };
       unaccent: {
         Args: {
-          "": string
-        }
-        Returns: string
-      }
+          '': string;
+        };
+        Returns: string;
+      };
       unaccent_init: {
         Args: {
-          "": unknown
-        }
-        Returns: unknown
-      }
-    }
+          '': unknown;
+        };
+        Returns: unknown;
+      };
+    };
     Enums: {
-      account_role: "owner" | "member"
+      account_role: 'owner' | 'member';
       app_permissions:
-        | "roles.manage"
-        | "billing.manage"
-        | "settings.manage"
-        | "members.manage"
-        | "invites.manage"
-      billing_provider: "stripe" | "lemon-squeezy" | "paddle"
+        | 'roles.manage'
+        | 'billing.manage'
+        | 'settings.manage'
+        | 'members.manage'
+        | 'invites.manage';
+      billing_provider: 'stripe' | 'lemon-squeezy' | 'paddle';
       subscription_status:
-        | "active"
-        | "trialing"
-        | "past_due"
-        | "canceled"
-        | "unpaid"
-        | "incomplete"
-        | "incomplete_expired"
-        | "paused"
-    }
+        | 'active'
+        | 'trialing'
+        | 'past_due'
+        | 'canceled'
+        | 'unpaid'
+        | 'incomplete'
+        | 'incomplete_expired'
+        | 'paused';
+    };
     CompositeTypes: {
       invitation: {
-        email: string | null
-        role: Database["public"]["Enums"]["account_role"] | null
-      }
-    }
-  }
+        email: string | null;
+        role: Database['public']['Enums']['account_role'] | null;
+      };
+    };
+  };
   storage: {
     Tables: {
       buckets: {
         Row: {
-          allowed_mime_types: string[] | null
-          avif_autodetection: boolean | null
-          created_at: string | null
-          file_size_limit: number | null
-          id: string
-          name: string
-          owner: string | null
-          owner_id: string | null
-          public: boolean | null
-          updated_at: string | null
-        }
+          allowed_mime_types: string[] | null;
+          avif_autodetection: boolean | null;
+          created_at: string | null;
+          file_size_limit: number | null;
+          id: string;
+          name: string;
+          owner: string | null;
+          owner_id: string | null;
+          public: boolean | null;
+          updated_at: string | null;
+        };
         Insert: {
-          allowed_mime_types?: string[] | null
-          avif_autodetection?: boolean | null
-          created_at?: string | null
-          file_size_limit?: number | null
-          id: string
-          name: string
-          owner?: string | null
-          owner_id?: string | null
-          public?: boolean | null
-          updated_at?: string | null
-        }
+          allowed_mime_types?: string[] | null;
+          avif_autodetection?: boolean | null;
+          created_at?: string | null;
+          file_size_limit?: number | null;
+          id: string;
+          name: string;
+          owner?: string | null;
+          owner_id?: string | null;
+          public?: boolean | null;
+          updated_at?: string | null;
+        };
         Update: {
-          allowed_mime_types?: string[] | null
-          avif_autodetection?: boolean | null
-          created_at?: string | null
-          file_size_limit?: number | null
-          id?: string
-          name?: string
-          owner?: string | null
-          owner_id?: string | null
-          public?: boolean | null
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
+          allowed_mime_types?: string[] | null;
+          avif_autodetection?: boolean | null;
+          created_at?: string | null;
+          file_size_limit?: number | null;
+          id?: string;
+          name?: string;
+          owner?: string | null;
+          owner_id?: string | null;
+          public?: boolean | null;
+          updated_at?: string | null;
+        };
+        Relationships: [];
+      };
       migrations: {
         Row: {
-          executed_at: string | null
-          hash: string
-          id: number
-          name: string
-        }
+          executed_at: string | null;
+          hash: string;
+          id: number;
+          name: string;
+        };
         Insert: {
-          executed_at?: string | null
-          hash: string
-          id: number
-          name: string
-        }
+          executed_at?: string | null;
+          hash: string;
+          id: number;
+          name: string;
+        };
         Update: {
-          executed_at?: string | null
-          hash?: string
-          id?: number
-          name?: string
-        }
-        Relationships: []
-      }
+          executed_at?: string | null;
+          hash?: string;
+          id?: number;
+          name?: string;
+        };
+        Relationships: [];
+      };
       objects: {
         Row: {
-          bucket_id: string | null
-          created_at: string | null
-          id: string
-          last_accessed_at: string | null
-          metadata: Json | null
-          name: string | null
-          owner: string | null
-          owner_id: string | null
-          path_tokens: string[] | null
-          updated_at: string | null
-          version: string | null
-        }
+          bucket_id: string | null;
+          created_at: string | null;
+          id: string;
+          last_accessed_at: string | null;
+          metadata: Json | null;
+          name: string | null;
+          owner: string | null;
+          owner_id: string | null;
+          path_tokens: string[] | null;
+          updated_at: string | null;
+          version: string | null;
+        };
         Insert: {
-          bucket_id?: string | null
-          created_at?: string | null
-          id?: string
-          last_accessed_at?: string | null
-          metadata?: Json | null
-          name?: string | null
-          owner?: string | null
-          owner_id?: string | null
-          path_tokens?: string[] | null
-          updated_at?: string | null
-          version?: string | null
-        }
+          bucket_id?: string | null;
+          created_at?: string | null;
+          id?: string;
+          last_accessed_at?: string | null;
+          metadata?: Json | null;
+          name?: string | null;
+          owner?: string | null;
+          owner_id?: string | null;
+          path_tokens?: string[] | null;
+          updated_at?: string | null;
+          version?: string | null;
+        };
         Update: {
-          bucket_id?: string | null
-          created_at?: string | null
-          id?: string
-          last_accessed_at?: string | null
-          metadata?: Json | null
-          name?: string | null
-          owner?: string | null
-          owner_id?: string | null
-          path_tokens?: string[] | null
-          updated_at?: string | null
-          version?: string | null
-        }
+          bucket_id?: string | null;
+          created_at?: string | null;
+          id?: string;
+          last_accessed_at?: string | null;
+          metadata?: Json | null;
+          name?: string | null;
+          owner?: string | null;
+          owner_id?: string | null;
+          path_tokens?: string[] | null;
+          updated_at?: string | null;
+          version?: string | null;
+        };
         Relationships: [
           {
-            foreignKeyName: "objects_bucketId_fkey"
-            columns: ["bucket_id"]
-            isOneToOne: false
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
+            foreignKeyName: 'objects_bucketId_fkey';
+            columns: ['bucket_id'];
+            isOneToOne: false;
+            referencedRelation: 'buckets';
+            referencedColumns: ['id'];
           },
-        ]
-      }
-    }
+        ];
+      };
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
       can_insert_object: {
         Args: {
-          bucketid: string
-          name: string
-          owner: string
-          metadata: Json
-        }
-        Returns: undefined
-      }
+          bucketid: string;
+          name: string;
+          owner: string;
+          metadata: Json;
+        };
+        Returns: undefined;
+      };
       extension: {
         Args: {
-          name: string
-        }
-        Returns: string
-      }
+          name: string;
+        };
+        Returns: string;
+      };
       filename: {
         Args: {
-          name: string
-        }
-        Returns: string
-      }
+          name: string;
+        };
+        Returns: string;
+      };
       foldername: {
         Args: {
-          name: string
-        }
-        Returns: string[]
-      }
+          name: string;
+        };
+        Returns: string[];
+      };
       get_size_by_bucket: {
-        Args: Record<PropertyKey, never>
+        Args: Record<PropertyKey, never>;
         Returns: {
-          size: number
-          bucket_id: string
-        }[]
-      }
+          size: number;
+          bucket_id: string;
+        }[];
+      };
       search: {
         Args: {
-          prefix: string
-          bucketname: string
-          limits?: number
-          levels?: number
-          offsets?: number
-          search?: string
-          sortcolumn?: string
-          sortorder?: string
-        }
+          prefix: string;
+          bucketname: string;
+          limits?: number;
+          levels?: number;
+          offsets?: number;
+          search?: string;
+          sortcolumn?: string;
+          sortorder?: string;
+        };
         Returns: {
-          name: string
-          id: string
-          updated_at: string
-          created_at: string
-          last_accessed_at: string
-          metadata: Json
-        }[]
-      }
-    }
+          name: string;
+          id: string;
+          updated_at: string;
+          created_at: string;
+          last_accessed_at: string;
+          metadata: Json;
+        }[];
+      };
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-}
+      [_ in never]: never;
+    };
+  };
+};
 
-type PublicSchema = Database[Extract<keyof Database, "public">]
+type PublicSchema = Database[Extract<keyof Database, 'public'>];
 
 export type Tables<
   PublicTableNameOrOptions extends
-    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
+    | keyof (PublicSchema['Tables'] & PublicSchema['Views'])
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+        Database[PublicTableNameOrOptions['schema']]['Views'])
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
+  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
+      Row: infer R;
     }
     ? R
     : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
-        PublicSchema["Views"])
-    ? (PublicSchema["Tables"] &
-        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
-        Row: infer R
+  : PublicTableNameOrOptions extends keyof (PublicSchema['Tables'] &
+        PublicSchema['Views'])
+    ? (PublicSchema['Tables'] &
+        PublicSchema['Views'])[PublicTableNameOrOptions] extends {
+        Row: infer R;
       }
       ? R
       : never
-    : never
+    : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
+    | keyof PublicSchema['Tables']
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Insert: infer I;
     }
     ? I
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Insert: infer I
+  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
+    ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
+        Insert: infer I;
       }
       ? I
       : never
-    : never
+    : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
+    | keyof PublicSchema['Tables']
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Update: infer U;
     }
     ? U
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Update: infer U
+  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
+    ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
+        Update: infer U;
       }
       ? U
       : never
-    : never
+    : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
-    | keyof PublicSchema["Enums"]
+    | keyof PublicSchema['Enums']
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
     : never = never,
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
-    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
-    : never
-
+  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
+    ? PublicSchema['Enums'][PublicEnumNameOrOptions]
+    : never;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 79028bebd..adc987f8e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -20,7 +20,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -30,14 +29,15 @@
     "react-top-loading-bar": "2.3.1",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
-    "lucide-react": "0.307.0",
-    "sonner": "^1.4.41",
-    "tailwind-merge": "^2.2.0",
-    "zod": "^3.22.4"
+    "tailwind-merge": "^2.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.10.7",
-    "react-i18next": "^14.1.0"
+    "react-i18next": "^14.1.0",
+    "@radix-ui/react-icons": "1.3.0",
+    "zod": "^3.22.4",
+    "sonner": "^1.4.41",
+    "lucide-react": "0.307.0"
   },
   "devDependencies": {
     "@kit/eslint-config": "0.2.0",
@@ -78,7 +78,6 @@
     "./dropdown-menu": "./src/shadcn/dropdown-menu.tsx",
     "./navigation-menu": "./src/shadcn/navigation-menu.tsx",
     "./form": "./src/shadcn/form.tsx",
-    "./icons": "./src/shadcn/icons.tsx",
     "./input": "./src/shadcn/input.tsx",
     "./label": "./src/shadcn/label.tsx",
     "./popover": "./src/shadcn/popover.tsx",
diff --git a/packages/ui/src/makerkit/navigation/navigation-item.tsx b/packages/ui/src/makerkit/navigation/navigation-item.tsx
index b6ba031df..d827c6a72 100644
--- a/packages/ui/src/makerkit/navigation/navigation-item.tsx
+++ b/packages/ui/src/makerkit/navigation/navigation-item.tsx
@@ -5,12 +5,11 @@ import { useContext } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import Trans from '@/components/app/Trans';
 import { cva } from 'class-variance-authority';
 
 import isRouteActive from '@kit/generic/is-route-active';
 
-import Trans from '@/components/app/Trans';
-
 import { NavigationMenuContext } from './navigation-menu-context';
 import { cn } from './utils';
 
diff --git a/packages/ui/src/shadcn/icons.tsx b/packages/ui/src/shadcn/icons.tsx
deleted file mode 100644
index 51eeb9183..000000000
--- a/packages/ui/src/shadcn/icons.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import * as Lucide from 'lucide-react';
-import type { LucideProps } from 'lucide-react';
-
-export type Icon = (props: LucideProps) => JSX.Element;
-
-export const Logo = Lucide.Command;
-export const Dashboard = Lucide.Activity;
-export const Close = Lucide.X;
-export const Spinner = Lucide.Loader2;
-export const ChevronLeft = Lucide.ChevronLeft;
-export const ChevronRight = Lucide.ChevronRight;
-export const Trash = Lucide.Trash;
-export const Post = Lucide.FileText;
-export const Page = Lucide.File;
-export const Settings = Lucide.Settings;
-export const Billing = Lucide.CreditCard;
-export const Ellipsis = Lucide.MoreVertical;
-export const Organization = Lucide.Building;
-export const Add = Lucide.Plus;
-export const Warning = Lucide.AlertTriangle;
-export const User = Lucide.User;
-export const ArrowRight = Lucide.ArrowRight;
-export const Help = Lucide.HelpCircle;
-export const Twitter = Lucide.Twitter;
-export const Check = Lucide.Check;
-export const Copy = Lucide.Copy;
-export const CopyDone = Lucide.ClipboardCheck;
-export const Sun = Lucide.SunMedium;
-export const Moon = Lucide.Moon;
-export const Key = Lucide.Key;
-
-export const System: Icon = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-    <path
-      d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497z"
-      fillRule="nonzero"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const Mdx: Icon = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="57.97"
-    height="24"
-    viewBox="0 0 512 212"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="m272.696 40.203l-.002 84.896l31.185-31.178l15.74 15.741l-57.642 57.638l-58.369-58.369l15.741-15.741l31.085 31.085l.001-84.072zM72.162 162.979V97.232l40.255 40.257l40.56-40.557v65.383h22.261V43.192l-62.82 62.816l-62.517-62.521v119.492z"
-    />
-    <path
-      fill="#F9AC00"
-      d="m447.847 36.651l15.74 15.741l-47.149 47.147l45.699 45.701l-15.741 15.741l-45.7-45.699l-45.701 45.699l-15.74-15.741l45.695-45.701l-47.146-47.147l15.74-15.741l47.152 47.146z"
-    />
-  </svg>
-);
-
-export const ClerkWide: Icon = (props) => (
-  <svg
-    width="77"
-    height="24"
-    viewBox="0 0 77 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M35.1481 16.7381C34.7521 17.1486 34.2765 17.4741 33.7505 17.6947C33.2245 17.9154 32.659 18.0265 32.0886 18.0213C31.6069 18.0359 31.1273 17.9517 30.6794 17.7739C30.2315 17.5961 29.8247 17.3285 29.4841 16.9875C28.8654 16.3421 28.5093 15.4206 28.5093 14.3221C28.5093 12.1231 29.941 10.619 32.0886 10.619C32.6646 10.6109 33.2353 10.7301 33.7599 10.968C34.2845 11.206 34.7501 11.5568 35.1234 11.9955L36.9816 10.3525C35.7707 8.8827 33.8059 8.12305 31.9401 8.12305C28.2885 8.12305 25.6992 10.64 25.6992 14.343C25.6992 16.1745 26.3427 17.7167 27.4279 18.8057C28.5131 19.8947 30.0591 20.5344 31.843 20.5344C34.16 20.5344 36.0087 19.5939 37.0463 18.4116L35.1481 16.7381Z"
-      fill="currentColor"
-    />
-    <path
-      d="M38.7266 3.42773H41.4929V20.3398H38.7266V3.42773Z"
-      fill="currentColor"
-    />
-    <path
-      d="M54.8179 15.2828C54.8635 14.9145 54.8889 14.5439 54.894 14.1728C54.894 10.6659 52.5979 8.12611 49.0472 8.12611C48.2641 8.11071 47.4861 8.25581 46.7612 8.55246C46.0363 8.84911 45.3797 9.29104 44.832 9.85102C43.7944 10.94 43.1719 12.4822 43.1719 14.3213C43.1719 18.07 45.8144 20.5374 49.3176 20.5374C51.6688 20.5374 53.3614 19.5855 54.3762 18.2947L52.5637 16.6897L52.4742 16.6136C52.1146 17.0634 51.6561 17.4243 51.1344 17.6683C50.6127 17.9123 50.0419 18.0328 49.4661 18.0205C47.6879 18.0205 46.4046 16.9829 46.0391 15.2828H54.8179ZM46.0848 13.0628C46.2083 12.5269 46.4613 12.0295 46.8216 11.614C47.1214 11.2874 47.4883 11.0293 47.897 10.8574C48.3058 10.6856 48.7468 10.604 49.19 10.6183C50.7702 10.6183 51.7602 11.6064 52.101 13.0628H46.0848Z"
-      fill="currentColor"
-    />
-    <path
-      d="M63.445 8.08984V11.1741C63.1251 11.1494 62.8034 11.1246 62.6073 11.1246C60.513 11.1246 59.325 12.6287 59.325 14.603V20.3394H56.5625V8.2612H59.325V10.0908H59.3498C60.2884 8.80761 61.6344 8.09366 63.1004 8.09366L63.445 8.08984Z"
-      fill="currentColor"
-    />
-    <path
-      d="M69.8866 15.2812L67.8894 17.5031V20.3398H65.125V3.42773H67.8894V13.8019L72.8224 8.29975H76.1046L71.7638 13.1603L76.1808 20.3398H73.0718L69.938 15.2812H69.8866Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.116 3.1608L16.2354 6.04135C16.1449 6.13177 16.0266 6.18918 15.8996 6.20437C15.7725 6.21956 15.6441 6.19165 15.5348 6.12513C14.4017 5.44155 13.0949 5.10063 11.7722 5.14354C10.4495 5.18645 9.16759 5.61134 8.08114 6.36692C7.41295 6.83202 6.83276 7.41221 6.36765 8.0804C5.61297 9.16751 5.18848 10.4495 5.14524 11.7722C5.10201 13.0949 5.44187 14.4019 6.12395 15.536C6.19 15.6451 6.21764 15.7731 6.20246 15.8998C6.18728 16.0264 6.13015 16.1443 6.04018 16.2347L3.15962 19.1152C3.10162 19.1736 3.03168 19.2188 2.95459 19.2476C2.87751 19.2765 2.79511 19.2883 2.71302 19.2824C2.63093 19.2764 2.5511 19.2528 2.479 19.2131C2.40689 19.1734 2.34422 19.1186 2.29527 19.0524C0.736704 16.9101 -0.0687588 14.3121 0.0046021 11.6639C0.077963 9.01568 1.02602 6.46625 2.70079 4.41354C3.21208 3.78549 3.78622 3.21134 4.41428 2.70006C6.46683 1.02574 9.01589 0.0779624 11.6637 0.00460332C14.3115 -0.0687557 16.9091 0.736432 19.0512 2.29453C19.1179 2.34332 19.1731 2.40598 19.2131 2.47818C19.2532 2.55038 19.2771 2.6304 19.2833 2.71274C19.2895 2.79508 19.2777 2.87778 19.2488 2.95513C19.2199 3.03248 19.1746 3.10265 19.116 3.1608Z"
-      fill="#5D31FF"
-    />
-    <path
-      d="M19.1135 20.8289L16.2329 17.9483C16.1424 17.8579 16.0241 17.8005 15.8971 17.7853C15.7701 17.7701 15.6416 17.798 15.5323 17.8645C14.4639 18.509 13.2398 18.8497 11.9921 18.8497C10.7443 18.8497 9.52022 18.509 8.45181 17.8645C8.34252 17.798 8.21406 17.7701 8.08701 17.7853C7.95997 17.8005 7.84171 17.8579 7.75119 17.9483L4.87063 20.8289C4.81022 20.8869 4.76333 20.9576 4.73329 21.0358C4.70324 21.114 4.69078 21.1979 4.69678 21.2815C4.70277 21.3651 4.72708 21.4463 4.76799 21.5194C4.80889 21.5926 4.86538 21.6558 4.93346 21.7046C6.98391 23.1965 9.45442 24.0001 11.9902 24.0001C14.5259 24.0001 16.9964 23.1965 19.0469 21.7046C19.1152 21.6561 19.172 21.5931 19.2133 21.5201C19.2545 21.4471 19.2792 21.366 19.2856 21.2824C19.2919 21.1988 19.2798 21.1148 19.2501 21.0365C19.2203 20.9581 19.1737 20.8872 19.1135 20.8289V20.8289Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.9973 15.4223C13.8899 15.4223 15.4243 13.888 15.4243 11.9953C15.4243 10.1027 13.8899 8.56836 11.9973 8.56836C10.1046 8.56836 8.57031 10.1027 8.57031 11.9953C8.57031 13.888 10.1046 15.4223 11.9973 15.4223Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const TRPC: Icon = (props) => (
-  <svg
-    width="512"
-    height="512"
-    viewBox="0 0 512 512"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <rect width="512" height="512" rx="150" fill="currentColor" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      className="fill-background"
-      d="M255.446 75L326.523 116.008V138.556L412.554 188.238V273.224L435.631 286.546V368.608L364.6 409.615L333.065 391.378L256.392 435.646L180.178 391.634L149.085 409.615L78.0538 368.538V286.546L100.231 273.743V188.238L184.415 139.638L184.462 139.636V116.008L255.446 75ZM326.523 159.879V198.023L255.492 239.031L184.462 198.023V160.936L184.415 160.938L118.692 198.9V263.084L149.085 245.538L220.115 286.546V368.538L198.626 380.965L256.392 414.323L314.618 380.712L293.569 368.538V286.546L364.6 245.538L394.092 262.565V198.9L326.523 159.879ZM312.031 357.969V307.915L355.369 332.931V382.985L312.031 357.969ZM417.169 307.846L373.831 332.862V382.985L417.169 357.9V307.846ZM96.5154 357.9V307.846L139.854 332.862V382.915L96.5154 357.9ZM201.654 307.846L158.315 332.862V382.915L201.654 357.9V307.846ZM321.262 291.923L364.6 266.908L407.938 291.923L364.6 316.962L321.262 291.923ZM149.085 266.838L105.746 291.923L149.085 316.892L192.423 291.923L149.085 266.838ZM202.923 187.362V137.308L246.215 162.346V212.377L202.923 187.362ZM308.015 137.308L264.723 162.346V212.354L308.015 187.362V137.308ZM212.154 121.338L255.446 96.3231L298.785 121.338L255.446 146.354L212.154 121.338Z"
-    />
-  </svg>
-);
-
-export const GitHub: Icon = (props) => (
-  <svg viewBox="0 0 438.549 438.549" {...props}>
-    <path
-      fill="currentColor"
-      d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-    ></path>
-  </svg>
-);
-
-export const React: Icon = (props) => (
-  <svg viewBox="0 0 24 24" {...props}>
-    <path
-      fill="currentColor"
-      d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
-    />
-  </svg>
-);
-
-export const Nextjs: Icon = (props) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      fill="currentColor"
-      d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z"
-    />
-  </svg>
-);
-
-export const Prisma: Icon = (props) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      fill="currentColor"
-      d="M21.8068 18.2848L13.5528.7565c-.207-.4382-.639-.7273-1.1286-.7541-.5023-.0293-.9523.213-1.2062.6253L2.266 15.1271c-.2773.4518-.2718 1.0091.0158 1.4555l4.3759 6.7786c.2608.4046.7127.6388 1.1823.6388.1332 0 .267-.0188.3987-.0577l12.7019-3.7568c.3891-.1151.7072-.3904.8737-.7553s.1633-.7828-.0075-1.1454zm-1.8481.7519L9.1814 22.2242c-.3292.0975-.6448-.1873-.5756-.5194l3.8501-18.4386c.072-.3448.5486-.3996.699-.0803l7.1288 15.138c.1344.2856-.019.6224-.325.7128z"
-    />
-  </svg>
-);
-
-export const Kysely: Icon = (props) => (
-  <svg
-    width="132"
-    height="132"
-    viewBox="0 0 132 132"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g clipPath="url(#clip0_8_3)">
-      <rect x="2" y="2" width="128" height="128" rx="16" fill="white" />
-      <path
-        d="M41.2983 109V23.9091H46.4918V73.31H47.0735L91.9457 23.9091H98.8427L61.9062 64.1694L98.5103 109H92.0288L58.5824 67.9087L46.4918 81.2873V109H41.2983Z"
-        fill="black"
-      />
-    </g>
-    <rect
-      x="2"
-      y="2"
-      width="128"
-      height="128"
-      rx="16"
-      stroke="#121212"
-      strokeWidth="4"
-    />
-    <defs>
-      <clipPath id="clip0_8_3">
-        <rect x="2" y="2" width="128" height="128" rx="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export const Tailwind: Icon = (props) => (
-  <svg viewBox="0 0 24 24" {...props}>
-    <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
-  </svg>
-);
-
-export const Google: Icon = (props) => (
-  <svg role="img" viewBox="0 0 24 24" {...props}>
-    <path
-      fill="currentColor"
-      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-    />
-  </svg>
-);
diff --git a/packages/ui/src/shadcn/radio-group.tsx b/packages/ui/src/shadcn/radio-group.tsx
index 367c9ba29..8b1cade91 100644
--- a/packages/ui/src/shadcn/radio-group.tsx
+++ b/packages/ui/src/shadcn/radio-group.tsx
@@ -45,6 +45,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 const RadioGroupItemLabel = (
   props: React.PropsWithChildren<{
     className?: string;
+    selected?: boolean;
   }>,
 ) => {
   return (
@@ -54,6 +55,9 @@ const RadioGroupItemLabel = (
         'flex cursor-pointer rounded-md' +
           ' items-center space-x-4 border border-input hover:bg-muted' +
           ' transition-duration-500 p-4 text-sm transition-colors focus-within:border-primary',
+        {
+          [`border-primary`]: props.selected,
+        },
       )}
     >
       {props.children}
diff --git a/packages/ui/src/shadcn/separator.tsx b/packages/ui/src/shadcn/separator.tsx
index fa3a32749..4b86c1c29 100644
--- a/packages/ui/src/shadcn/separator.tsx
+++ b/packages/ui/src/shadcn/separator.tsx
@@ -1,31 +1,32 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react';
 
-import { cn } from "@kit/ui/utils"
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@kit/ui/utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
   (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07c61365c..0c1407665 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -156,6 +156,9 @@ importers:
       '@kit/tsconfig':
         specifier: ^0.1.0
         version: link:../../tooling/typescript
+      '@next/bundle-analyzer':
+        specifier: ^14.1.4
+        version: 14.1.4
       '@types/mdx':
         specifier: ^2.0.10
         version: 2.0.11
@@ -189,6 +192,9 @@ importers:
 
   packages/billing:
     dependencies:
+      '@kit/supabase':
+        specifier: 0.1.0
+        version: link:../supabase
       '@kit/ui':
         specifier: 0.1.0
         version: link:../ui
@@ -223,6 +229,9 @@ importers:
       '@kit/billing':
         specifier: 0.1.0
         version: link:../billing
+      '@kit/shared':
+        specifier: ^0.1.0
+        version: link:../shared
       '@kit/stripe':
         specifier: 0.1.0
         version: link:../stripe
@@ -257,6 +266,9 @@ importers:
       '@kit/tsconfig':
         specifier: 0.1.0
         version: link:../../tooling/typescript
+      '@supabase/supabase-js':
+        specifier: ^2.39.8
+        version: 2.39.8
 
   packages/emails:
     dependencies:
@@ -321,10 +333,22 @@ importers:
         version: link:../../../tooling/prettier
 
   packages/features/auth:
-    dependencies:
+    devDependencies:
+      '@kit/eslint-config':
+        specifier: 0.2.0
+        version: link:../../../tooling/eslint
+      '@kit/prettier-config':
+        specifier: 0.1.0
+        version: link:../../../tooling/prettier
       '@kit/supabase':
         specifier: 0.1.0
         version: link:../../supabase
+      '@kit/tailwind-config':
+        specifier: 0.1.0
+        version: link:../../../tooling/tailwind
+      '@kit/tsconfig':
+        specifier: 0.1.0
+        version: link:../../../tooling/typescript
       '@kit/ui':
         specifier: 0.1.0
         version: link:../../ui
@@ -340,19 +364,6 @@ importers:
       sonner:
         specifier: ^1.4.41
         version: 1.4.41(react-dom@18.2.0)(react@18.2.0)
-    devDependencies:
-      '@kit/eslint-config':
-        specifier: 0.2.0
-        version: link:../../../tooling/eslint
-      '@kit/prettier-config':
-        specifier: 0.1.0
-        version: link:../../../tooling/prettier
-      '@kit/tailwind-config':
-        specifier: 0.1.0
-        version: link:../../../tooling/tailwind
-      '@kit/tsconfig':
-        specifier: 0.1.0
-        version: link:../../../tooling/typescript
 
   packages/features/team-accounts:
     dependencies:
@@ -480,6 +491,12 @@ importers:
       '@kit/billing':
         specifier: 0.1.0
         version: link:../billing
+      '@kit/shared':
+        specifier: 0.1.0
+        version: link:../shared
+      '@kit/supabase':
+        specifier: 0.1.0
+        version: link:../supabase
       '@kit/ui':
         specifier: 0.1.0
         version: link:../ui
@@ -970,7 +987,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
-    dev: false
 
   /@babel/template@7.24.0:
     resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
@@ -1158,6 +1174,11 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
+  /@discoveryjs/json-ext@0.5.7:
+    resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
+    engines: {node: '>=10.0.0'}
+    dev: true
+
   /@effect-ts/core@0.60.5:
     resolution: {integrity: sha512-qi1WrtJA90XLMnj2hnUszW9Sx4dXP03ZJtCc5DiUBIOhF4Vw7plfb65/bdBySPoC9s7zy995TdUX1XBSxUkl5w==}
     dependencies:
@@ -1730,6 +1751,15 @@ packages:
       - supports-color
     dev: false
 
+  /@next/bundle-analyzer@14.1.4:
+    resolution: {integrity: sha512-IpF/18HcAOcfHRr24tqPOUpMmVKIqvkCxIubMeRYWCXs3jm7niPGrt8Mu74yMDzfGlUwgQA6Xd6BUc5+jQxcEg==}
+    dependencies:
+      webpack-bundle-analyzer: 4.10.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
   /@next/env@14.1.0:
     resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==}
     dev: false
@@ -2179,6 +2209,10 @@ packages:
       config-chain: 1.1.13
     dev: true
 
+  /@polka/url@1.0.0-next.25:
+    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+    dev: true
+
   /@protobufjs/aspromise@1.1.2:
     resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
     dev: false
@@ -2698,7 +2732,6 @@ packages:
       react: ^16.x || ^17.x || ^18.x
     dependencies:
       react: 18.2.0
-    dev: false
 
   /@radix-ui/react-id@1.0.0(react@18.2.0):
     resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
@@ -3842,26 +3875,22 @@ packages:
     resolution: {integrity: sha512-BNzC5XhCzzCaggJ8s53DP+WeHHGT/NfTsx2wUSSGKR2/ikLFQTBCDzMvGz/PxYMqRko/LwncQtKXGOYp1PkPaw==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
-    dev: false
 
   /@supabase/gotrue-js@2.62.2:
     resolution: {integrity: sha512-AP6e6W9rQXFTEJ7sTTNYQrNf0LCcnt1hUW+RIgUK+Uh3jbWvcIST7wAlYyNZiMlS9+PYyymWQ+Ykz/rOYSO0+A==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
-    dev: false
 
   /@supabase/node-fetch@2.6.15:
     resolution: {integrity: sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==}
     engines: {node: 4.x || >=6.0.0}
     dependencies:
       whatwg-url: 5.0.0
-    dev: false
 
   /@supabase/postgrest-js@1.9.2:
     resolution: {integrity: sha512-I6yHo8CC9cxhOo6DouDMy9uOfW7hjdsnCxZiaJuIVZm1dBGTFiQPgfMa9zXCamEWzNyWRjZvupAUuX+tqcl5Sw==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
-    dev: false
 
   /@supabase/realtime-js@2.9.3:
     resolution: {integrity: sha512-lAp50s2n3FhGJFq+wTSXLNIDPw5Y0Wxrgt44eM5nLSA3jZNUUP3Oq2Ccd1CbZdVntPCWLZvJaU//pAd2NE+QnQ==}
@@ -3873,7 +3902,6 @@ packages:
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
-    dev: false
 
   /@supabase/ssr@0.1.0(@supabase/supabase-js@2.39.8):
     resolution: {integrity: sha512-bIVrkqjAK5G3KjkIMKYKtAOlCgRRplEWjrlyRyXSOYtgDieiOhk2ZyNAPsEOa1By9OZVxuX5eAW1fitdnuxayw==}
@@ -3889,7 +3917,6 @@ packages:
     resolution: {integrity: sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
-    dev: false
 
   /@supabase/supabase-js@2.39.8:
     resolution: {integrity: sha512-WpiawHjseIRcCQTZbMJtHUSOepz5+M9qE1jP9BDmg8X7ehALFwgEkiKyHAu59qm/pKP2ryyQXLtu2XZNRbUarw==}
@@ -3903,7 +3930,6 @@ packages:
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
-    dev: false
 
   /@swc/core-darwin-arm64@1.3.101:
     resolution: {integrity: sha512-mNFK+uHNPRXSnfTOG34zJOeMl2waM4hF4a2NY7dkMXrPqw9CoJn4MwTXJcyMiSz1/BnNjjTCHF3Yhj0jPxmkzQ==}
@@ -4045,7 +4071,6 @@ packages:
 
   /@tanstack/query-core@5.28.6:
     resolution: {integrity: sha512-hnhotV+DnQtvtR3jPvbQMPNMW4KEK0J4k7c609zJ8muiNknm+yoDyMHmxTWM5ZnlZpsz0zOxYFr+mzRJNHWJsA==}
-    dev: false
 
   /@tanstack/react-query@5.28.6(react@18.2.0):
     resolution: {integrity: sha512-/DdYuDBSsA21Qbcder1R8Cr/3Nx0ZnA2lgtqKsLMvov8wL4+g0HBz/gWYZPlIsof7iyfQafyhg4wUVUsS3vWZw==}
@@ -4054,7 +4079,6 @@ packages:
     dependencies:
       '@tanstack/query-core': 5.28.6
       react: 18.2.0
-    dev: false
 
   /@tanstack/react-table@8.14.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-l9iwO99oz/azy5RT5VkVRsHHuy7o//fiXgLxzl3fad8qf7Bj+9ihsfmE6Q+BNjH4wHbxZkahwxtb3ngGq9FQxA==}
@@ -4320,7 +4344,6 @@ packages:
 
   /@types/phoenix@1.6.4:
     resolution: {integrity: sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA==}
-    dev: false
 
   /@types/prismjs@1.26.3:
     resolution: {integrity: sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==}
@@ -4391,7 +4414,6 @@ packages:
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
     dependencies:
       '@types/node': 20.11.30
-    dev: false
 
   /@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1)(eslint@8.57.0)(typescript@5.4.3):
     resolution: {integrity: sha512-STEDMVQGww5lhCuNXVSQfbfuNII5E08QWkvAw5Qwf+bj2WT+JkG1uc+5/vXA3AOYMDHVOSpL+9rcbEUiHIm2dw==}
@@ -5399,6 +5421,11 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /comment-json@4.2.3:
     resolution: {integrity: sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==}
     engines: {node: '>= 6'}
@@ -5627,6 +5654,10 @@ packages:
   /date-fns@3.6.0:
     resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
 
+  /debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+    dev: true
+
   /debounce@2.0.0:
     resolution: {integrity: sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==}
     engines: {node: '>=18'}
@@ -5868,6 +5899,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+    dev: true
+
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -6976,6 +7011,13 @@ packages:
       strip-bom-string: 1.0.0
     dev: false
 
+  /gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
   /handlebars@4.7.8:
     resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
@@ -7177,11 +7219,14 @@ packages:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: false
 
+  /html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+    dev: true
+
   /html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
     dependencies:
       void-elements: 3.1.0
-    dev: false
 
   /html-to-text@9.0.5:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
@@ -7259,7 +7304,6 @@ packages:
     resolution: {integrity: sha512-NDiIzFbcs3O9PXpfhkjyf7WdqFn5Vq6mhzhtkXzj51aOcNuPNcTwuYNuXCpHsanZGHlHKL35G7huoFeVic1hng==}
     dependencies:
       '@babel/runtime': 7.24.1
-    dev: false
 
   /iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
@@ -7563,6 +7607,11 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
@@ -8568,6 +8617,11 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -8901,6 +8955,11 @@ packages:
     engines: {node: '>= 14.17.0'}
     dev: false
 
+  /opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+    dev: true
+
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -9571,7 +9630,6 @@ packages:
       i18next: 23.10.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: false
 
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -10184,6 +10242,15 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.25
+      mrmime: 2.0.0
+      totalist: 3.0.1
+    dev: true
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -10294,7 +10361,6 @@ packages:
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: false
 
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
@@ -10799,9 +10865,13 @@ packages:
     resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
     dev: false
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: false
 
   /tree-cli@0.6.7:
     resolution: {integrity: sha512-jfnB5YKY6Glf6bsFmQ9W97TtkPVLnHsjOR6ZdRf4zhyFRQeLheasvzE5XBJI2Hxt7ZyMyIbXUV7E2YPZbixgtA==}
@@ -11353,7 +11423,6 @@ packages:
   /void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /watchpack@2.4.1:
     resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}
@@ -11379,7 +11448,29 @@ packages:
 
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: false
+
+  /webpack-bundle-analyzer@4.10.1:
+    resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      commander: 7.2.0
+      debounce: 1.2.1
+      escape-string-regexp: 4.0.0
+      gzip-size: 6.0.0
+      html-escaper: 2.0.2
+      is-plain-object: 5.0.0
+      opener: 1.5.2
+      picocolors: 1.0.0
+      sirv: 2.0.4
+      ws: 7.5.9
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
 
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
@@ -11431,7 +11522,6 @@ packages:
     dependencies:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
-    dev: false
 
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
@@ -11536,6 +11626,19 @@ packages:
       signal-exit: 4.1.0
     dev: false
 
+  /ws@7.5.9:
+    resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /ws@8.11.0:
     resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==}
     engines: {node: '>=10.0.0'}
@@ -11560,7 +11663,6 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: false
 
   /xmlhttprequest-ssl@2.0.0:
     resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
diff --git a/supabase/migrations/20221215192558_schema.sql b/supabase/migrations/20221215192558_schema.sql
index b5c8b13f4..5336521c7 100644
--- a/supabase/migrations/20221215192558_schema.sql
+++ b/supabase/migrations/20221215192558_schema.sql
@@ -781,7 +781,6 @@ create table if not exists
     interval_count integer not null check (interval_count > 0),
     created_at timestamptz not null default current_timestamp,
     updated_at timestamptz not null default current_timestamp,
-    last_payment_at timestamptz,
     period_starts_at timestamptz,
     period_ends_at timestamptz,
     trial_starts_at timestamptz,
@@ -835,6 +834,82 @@ create policy subscriptions_read_self on public.subscriptions for
 select
   to authenticated using (has_role_on_account (account_id));
 
+-- Functions
+create or replace function public.add_subscription (
+  account_id uuid,
+  id text,
+  status public.subscription_status,
+  billing_provider public.billing_provider,
+  product_id varchar(255),
+  variant_id varchar(255),
+  price_amount numeric,
+  cancel_at_period_end bool,
+  currency varchar(3),
+  interval varchar(255),
+  interval_count integer,
+  period_starts_at timestamptz,
+  period_ends_at timestamptz,
+  trial_starts_at timestamptz,
+  trial_ends_at timestamptz,
+  customer_id text
+) returns public.subscriptions as $$
+declare
+  new_subscription public.subscriptions;
+  billing_customer_id int;
+begin
+    insert into public.billing_customers(
+        account_id,
+        id,
+        provider,
+        customer_id)
+    values (
+        account_id,
+        billing_customer_id,
+        billing_provider,
+        customer_id)
+    returning
+        id into billing_customer_id;
+
+    insert into public.subscriptions(
+        account_id,
+        billing_customer_id,
+        id,
+        status,
+        billing_provider,
+        product_id,
+        variant_id,
+        price_amount,
+        cancel_at_period_end,
+        currency,
+        interval,
+        interval_count,
+        period_starts_at,
+        period_ends_at,
+        trial_starts_at,
+        trial_ends_at)
+    values (
+        account_id,
+        billing_customer_id,
+        id,
+        status,
+        billing_provider,
+        product_id,
+        variant_id,
+        price_amount,
+        cancel_at_period_end,
+        currency,
+        interval,
+        interval_count,
+        period_starts_at,
+        period_ends_at,
+        trial_starts_at,
+        trial_ends_at)
+    returning
+        * into new_subscription;
+    return new_subscription;
+    end;
+$$ language plpgsql;
+
 /*
  * -------------------------------------------------------
  * Section: Functions