From 95793c42b4f1de3f1b184c70dbeb40b662f2ba74 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 25 Mar 2024 15:40:43 +0800
Subject: [PATCH] Remove admin functionality related code

The admin functionality related code has been removed which includes various user and organization functionalities like delete, update, ban etc. This includes action logic, UI components and supportive utility functions. Notable deletions include the server action files, dialog components for actions like banning and deleting, and related utility functions. This massive cleanup is aimed at simplifying the codebase and the commit reflects adherence to project restructuring.
---
 .../personal-account-checkout-form.tsx        |   0
 .../(dashboard)/home/(user)/billing/page.tsx  |   3 +-
 .../home/(user)/billing/return/page.tsx       |   3 +
 .../home/(user)/billing/server-actions.ts     |   4 +
 .../app/(dashboard)/home/(user)/layout.tsx    |   2 +-
 .../{account => settings}/actions.server.ts   |   0
 .../(user)/{account => settings}/layout.tsx   |   0
 .../(user)/{account => settings}/loading.tsx  |   0
 .../(user)/{account => settings}/page.tsx     |   0
 .../app-header.tsx                            |   2 +-
 .../app-sidebar-navigation.tsx                |   0
 .../app-sidebar.tsx                           |  12 +-
 .../dashboard-demo.tsx                        |   0
 .../mobile-app-navigation.tsx                 |   0
 .../{(lib) => _lib}/load-workspace.ts         |   0
 .../_components/billing-portal-form.tsx       |  39 +++
 .../team-account-checkout-form.tsx            |  64 ++++
 .../home/[account]/billing/page.tsx           |  42 ++-
 .../home/[account]/billing/return/page.tsx    |  84 +++++
 .../home/[account]/billing/server-actions.ts  | 179 ++++++++++
 .../app/(dashboard)/home/[account]/layout.tsx |  43 ++-
 .../home/[account]/members/page.tsx           |   6 +-
 .../app/(dashboard)/home/[account]/page.tsx   |   4 +-
 .../return/components/recover-checkout.tsx    |  26 --
 .../settings/subscription/return/page.tsx     |  81 -----
 .../home-sidebar-account-selector.tsx         |   0
 .../home-sidebar.tsx                          |  28 +-
 .../personal-account-dropdown.tsx             |  12 +-
 .../{components => _components}/grid-list.tsx |   0
 .../site-footer.tsx                           |   0
 .../site-header-account-section.tsx           |  68 ++++
 .../site-header.tsx                           |  10 +-
 .../site-navigation.tsx                       |   0
 .../site-page-header.tsx                      |   0
 apps/web/app/(marketing)/blog/[slug]/page.tsx |   3 +-
 .../cover-image.tsx                           |   0
 .../date-formatter.tsx                        |   0
 .../draft-post-badge.tsx                      |   0
 .../post-header.tsx                           |   8 +-
 .../post-preview.tsx                          |   8 +-
 .../blog/{components => _components}/post.tsx |   2 +-
 apps/web/app/(marketing)/blog/page.tsx        |   9 +-
 .../site-header-account-section.tsx           |  48 ---
 .../app/(marketing)/docs/[...slug]/page.tsx   |   8 +-
 .../{components => _components}/docs-card.tsx |   0
 .../docs-cards.tsx                            |   0
 .../docs-navigation.tsx                       |   2 +-
 .../documentation-page-link.tsx               |   0
 .../build-documentation-tree.ts               |   0
 .../get-documentation-page-tree.ts            |   0
 apps/web/app/(marketing)/docs/layout.tsx      |   4 +-
 apps/web/app/(marketing)/docs/page.tsx        |   7 +-
 apps/web/app/(marketing)/faq/page.tsx         |   3 +-
 apps/web/app/(marketing)/layout.tsx           |  15 +-
 apps/web/app/(marketing)/pricing/page.tsx     |   3 +-
 apps/web/app/admin/layout.tsx                 |  21 --
 apps/web/app/admin/lib/actions-utils.ts       |  21 --
 apps/web/app/admin/loading.tsx                |   3 -
 .../@modal/[uid]/actions.server.ts            |  29 --
 .../components/DeleteOrganizationModal.tsx    |  95 ------
 .../@modal/[uid]/delete/page.tsx              |  25 --
 .../admin/organizations/@modal/default.tsx    |   3 -
 .../components/OrganizationsMembersTable.tsx  | 137 --------
 .../organizations/[uid]/members/page.tsx      |  80 -----
 apps/web/app/admin/organizations/default.tsx  |   3 -
 apps/web/app/admin/organizations/error.tsx    |  21 --
 apps/web/app/admin/organizations/layout.tsx   |  14 -
 apps/web/app/admin/organizations/page.tsx     |  67 ----
 apps/web/app/admin/organizations/queries.ts   | 131 --------
 apps/web/app/admin/page.tsx                   |  67 ----
 .../users/@modal/[uid]/actions.server.ts      | 127 --------
 .../app/admin/users/@modal/[uid]/ban/page.tsx |  32 --
 .../@modal/[uid]/components/BanUserModal.tsx  | 111 -------
 .../[uid]/components/DeleteUserModal.tsx      |  96 ------
 .../components/ImpersonateUserAuthSetter.tsx  |  52 ---
 .../ImpersonateUserConfirmationModal.tsx      | 128 --------
 .../[uid]/components/ReactivateUserModal.tsx  |  76 -----
 .../admin/users/@modal/[uid]/delete/page.tsx  |  25 --
 .../users/@modal/[uid]/impersonate/page.tsx   |  25 --
 .../users/@modal/[uid]/reactivate/page.tsx    |  34 --
 apps/web/app/admin/users/@modal/default.tsx   |   3 -
 .../[uid]/components/UserActionsDropdown.tsx  |  67 ----
 apps/web/app/admin/users/[uid]/page.tsx       | 238 --------------
 apps/web/app/admin/users/default.tsx          |   3 -
 apps/web/app/admin/users/error.tsx            |  21 --
 apps/web/app/admin/users/layout.tsx           |  14 -
 apps/web/app/admin/users/page.tsx             |  85 -----
 apps/web/app/admin/users/queries.ts           |  25 --
 .../admin/utils/get-page-from-query-param.ts  |  16 -
 .../app/admin/utils/is-user-super-admin.ts    |  56 ----
 apps/web/app/error.tsx                        |   2 +-
 .../_components/ExistingUserInviteForm.tsx    |  87 -----
 .../join/_components/NewUserInviteForm.tsx    | 103 ------
 apps/web/app/join/page.tsx                    |  73 +----
 apps/web/app/not-found.tsx                    |   6 +-
 apps/web/app/server-sitemap.xml/route.ts      |  10 +-
 apps/web/app/update-password/page.tsx         |   9 +-
 apps/web/components/root-providers.tsx        |  17 +-
 apps/web/config/paths.config.ts               |   2 +-
 apps/web/next.config.mjs                      |  28 ++
 apps/web/package.json                         |  10 +-
 .../components/billing-session-status.tsx     |  23 +-
 .../src/components/embedded-checkout.tsx      |   8 +-
 .../billing-gateway/src/components/index.ts   |   1 +
 .../src/components/plan-picker.tsx            |  20 +-
 .../billing-strategy-provider.service.ts      |  10 +-
 .../components/personal-account-dropdown.tsx  |   2 +-
 .../update-account-details-form.tsx           |   3 +-
 .../update-account-image-container.tsx        |  11 +-
 .../update-email-form-container.tsx           |   7 +-
 .../update-password-container.tsx             |   7 +-
 .../src/components/password-reset-form.tsx    |   4 +-
 packages/features/auth/src/password-reset.ts  |   1 +
 .../account-invitations-server-actions.ts     |  25 +-
 .../invitations/account-invitations-table.tsx |  24 +-
 .../invitations/update-invitation-dialog.tsx  |   9 +-
 .../members/account-members-table.tsx         |  27 +-
 .../src/components/role-badge.tsx             |   2 +-
 .../src/schema/delete-invitation.schema.ts    |   5 +
 .../src/schema/update-invitation-schema.ts    |  10 +
 .../services/account-invitations.service.ts   |  23 +-
 .../stripe-billing-strategy.service.ts        |  12 +-
 .../src/clients/server-actions.client.ts      |   2 +-
 .../supabase/src/hooks/use-user-session.ts    |  15 +-
 packages/ui/src/makerkit/data-table.tsx       |   5 +-
 .../ui/src/makerkit/image-upload-input.tsx    |   5 +-
 packages/ui/src/makerkit/image-uploader.tsx   |   3 +-
 .../makerkit/language-dropdown-switcher.tsx   |   3 +-
 .../makerkit/mobile-navigation-dropdown.tsx   |   6 +-
 .../src/makerkit/mobile-navigation-menu.tsx   |   4 +-
 packages/ui/src/makerkit/pricing-table.tsx    | 307 ------------------
 packages/ui/src/makerkit/profile-avatar.tsx   |   8 +-
 packages/ui/src/makerkit/sidebar.tsx          |   3 +-
 pnpm-lock.yaml                                | 207 +++++++++++-
 supabase/migrations/20221215192558_schema.sql |   2 +-
 135 files changed, 1062 insertions(+), 2872 deletions(-)
 rename apps/web/app/(dashboard)/home/(user)/billing/{components => _components}/personal-account-checkout-form.tsx (100%)
 create mode 100644 apps/web/app/(dashboard)/home/(user)/billing/return/page.tsx
 rename apps/web/app/(dashboard)/home/(user)/{account => settings}/actions.server.ts (100%)
 rename apps/web/app/(dashboard)/home/(user)/{account => settings}/layout.tsx (100%)
 rename apps/web/app/(dashboard)/home/(user)/{account => settings}/loading.tsx (100%)
 rename apps/web/app/(dashboard)/home/(user)/{account => settings}/page.tsx (100%)
 rename apps/web/app/(dashboard)/home/[account]/{(components) => _components}/app-header.tsx (92%)
 rename apps/web/app/(dashboard)/home/[account]/{(components) => _components}/app-sidebar-navigation.tsx (100%)
 rename apps/web/app/(dashboard)/home/[account]/{(components) => _components}/app-sidebar.tsx (91%)
 rename apps/web/app/(dashboard)/home/[account]/{(components) => _components}/dashboard-demo.tsx (100%)
 rename apps/web/app/(dashboard)/home/[account]/{(components) => _components}/mobile-app-navigation.tsx (100%)
 rename apps/web/app/(dashboard)/home/[account]/{(lib) => _lib}/load-workspace.ts (100%)
 create mode 100644 apps/web/app/(dashboard)/home/[account]/billing/_components/billing-portal-form.tsx
 create mode 100644 apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx
 create mode 100644 apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx
 create mode 100644 apps/web/app/(dashboard)/home/[account]/billing/server-actions.ts
 delete mode 100644 apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/recover-checkout.tsx
 delete mode 100644 apps/web/app/(dashboard)/home/[account]/settings/subscription/return/page.tsx
 rename apps/web/app/(dashboard)/home/{components => _components}/home-sidebar-account-selector.tsx (100%)
 rename apps/web/app/(dashboard)/home/{components => _components}/home-sidebar.tsx (67%)
 rename apps/web/app/(dashboard)/home/{components => _components}/personal-account-dropdown.tsx (68%)
 rename apps/web/app/(marketing)/{components => _components}/grid-list.tsx (100%)
 rename apps/web/app/(marketing)/{components => _components}/site-footer.tsx (100%)
 create mode 100644 apps/web/app/(marketing)/_components/site-header-account-section.tsx
 rename apps/web/app/(marketing)/{components => _components}/site-header.tsx (63%)
 rename apps/web/app/(marketing)/{components => _components}/site-navigation.tsx (100%)
 rename apps/web/app/(marketing)/{components => _components}/site-page-header.tsx (100%)
 rename apps/web/app/(marketing)/blog/{components => _components}/cover-image.tsx (100%)
 rename apps/web/app/(marketing)/blog/{components => _components}/date-formatter.tsx (100%)
 rename apps/web/app/(marketing)/blog/{components => _components}/draft-post-badge.tsx (100%)
 rename apps/web/app/(marketing)/blog/{components => _components}/post-header.tsx (86%)
 rename apps/web/app/(marketing)/blog/{components => _components}/post-preview.tsx (89%)
 rename apps/web/app/(marketing)/blog/{components => _components}/post.tsx (91%)
 delete mode 100644 apps/web/app/(marketing)/components/site-header-account-section.tsx
 rename apps/web/app/(marketing)/docs/{components => _components}/docs-card.tsx (100%)
 rename apps/web/app/(marketing)/docs/{components => _components}/docs-cards.tsx (100%)
 rename apps/web/app/(marketing)/docs/{components => _components}/docs-navigation.tsx (98%)
 rename apps/web/app/(marketing)/docs/{components => _components}/documentation-page-link.tsx (100%)
 rename apps/web/app/(marketing)/docs/{utils => _lib}/build-documentation-tree.ts (100%)
 rename apps/web/app/(marketing)/docs/{utils => _lib}/get-documentation-page-tree.ts (100%)
 delete mode 100644 apps/web/app/admin/layout.tsx
 delete mode 100644 apps/web/app/admin/lib/actions-utils.ts
 delete mode 100644 apps/web/app/admin/loading.tsx
 delete mode 100644 apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts
 delete mode 100644 apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx
 delete mode 100644 apps/web/app/admin/organizations/@modal/[uid]/delete/page.tsx
 delete mode 100644 apps/web/app/admin/organizations/@modal/default.tsx
 delete mode 100644 apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx
 delete mode 100644 apps/web/app/admin/organizations/[uid]/members/page.tsx
 delete mode 100644 apps/web/app/admin/organizations/default.tsx
 delete mode 100644 apps/web/app/admin/organizations/error.tsx
 delete mode 100644 apps/web/app/admin/organizations/layout.tsx
 delete mode 100644 apps/web/app/admin/organizations/page.tsx
 delete mode 100644 apps/web/app/admin/organizations/queries.ts
 delete mode 100644 apps/web/app/admin/page.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/actions.server.ts
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/ban/page.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/components/DeleteUserModal.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/components/ReactivateUserModal.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/delete/page.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/impersonate/page.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/[uid]/reactivate/page.tsx
 delete mode 100644 apps/web/app/admin/users/@modal/default.tsx
 delete mode 100644 apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx
 delete mode 100644 apps/web/app/admin/users/[uid]/page.tsx
 delete mode 100644 apps/web/app/admin/users/default.tsx
 delete mode 100644 apps/web/app/admin/users/error.tsx
 delete mode 100644 apps/web/app/admin/users/layout.tsx
 delete mode 100644 apps/web/app/admin/users/page.tsx
 delete mode 100644 apps/web/app/admin/users/queries.ts
 delete mode 100644 apps/web/app/admin/utils/get-page-from-query-param.ts
 delete mode 100644 apps/web/app/admin/utils/is-user-super-admin.ts
 delete mode 100644 apps/web/app/join/_components/ExistingUserInviteForm.tsx
 delete mode 100644 apps/web/app/join/_components/NewUserInviteForm.tsx
 rename {apps/web/app/(dashboard)/home/[account]/settings/subscription/return => packages/billing-gateway/src}/components/billing-session-status.tsx (83%)
 create mode 100644 packages/features/team-accounts/src/schema/delete-invitation.schema.ts
 create mode 100644 packages/features/team-accounts/src/schema/update-invitation-schema.ts
 delete mode 100644 packages/ui/src/makerkit/pricing-table.tsx

diff --git a/apps/web/app/(dashboard)/home/(user)/billing/components/personal-account-checkout-form.tsx b/apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx
similarity index 100%
rename from apps/web/app/(dashboard)/home/(user)/billing/components/personal-account-checkout-form.tsx
rename to apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx
diff --git a/apps/web/app/(dashboard)/home/(user)/billing/page.tsx b/apps/web/app/(dashboard)/home/(user)/billing/page.tsx
index c51007310..8f9460730 100644
--- a/apps/web/app/(dashboard)/home/(user)/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/billing/page.tsx
@@ -1,10 +1,9 @@
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { PersonalAccountCheckoutForm } from '~/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { PersonalAccountCheckoutForm } from './components/personal-account-checkout-form';
-
 function PersonalAccountBillingPage() {
   return (
     <>
diff --git a/apps/web/app/(dashboard)/home/(user)/billing/return/page.tsx b/apps/web/app/(dashboard)/home/(user)/billing/return/page.tsx
new file mode 100644
index 000000000..6fbf074e1
--- /dev/null
+++ b/apps/web/app/(dashboard)/home/(user)/billing/return/page.tsx
@@ -0,0 +1,3 @@
+// We reuse the page from the billing module
+// as there is no need to create a new one.
+export * from '../return/page';
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 03dc682fa..d4c34fb60 100644
--- a/apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts
+++ b/apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts
@@ -82,6 +82,10 @@ export async function createBillingPortalSession() {
   const customerId = await getCustomerIdFromAccountId(accountId);
   const returnUrl = getBillingPortalReturnUrl();
 
+  if (!customerId) {
+    throw new Error('Customer not found');
+  }
+
   const { url } = await service.createBillingPortalSession({
     customerId,
     returnUrl,
diff --git a/apps/web/app/(dashboard)/home/(user)/layout.tsx b/apps/web/app/(dashboard)/home/(user)/layout.tsx
index 067ff8e4b..b659d19f7 100644
--- a/apps/web/app/(dashboard)/home/(user)/layout.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/layout.tsx
@@ -1,6 +1,6 @@
 import { Page } from '@kit/ui/page';
 
-import { HomeSidebar } from '~/(dashboard)/home/components/home-sidebar';
+import { HomeSidebar } from '~/(dashboard)/home/_components/home-sidebar';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 function UserHomeLayout({ children }: React.PropsWithChildren) {
diff --git a/apps/web/app/(dashboard)/home/(user)/account/actions.server.ts b/apps/web/app/(dashboard)/home/(user)/settings/actions.server.ts
similarity index 100%
rename from apps/web/app/(dashboard)/home/(user)/account/actions.server.ts
rename to apps/web/app/(dashboard)/home/(user)/settings/actions.server.ts
diff --git a/apps/web/app/(dashboard)/home/(user)/account/layout.tsx b/apps/web/app/(dashboard)/home/(user)/settings/layout.tsx
similarity index 100%
rename from apps/web/app/(dashboard)/home/(user)/account/layout.tsx
rename to apps/web/app/(dashboard)/home/(user)/settings/layout.tsx
diff --git a/apps/web/app/(dashboard)/home/(user)/account/loading.tsx b/apps/web/app/(dashboard)/home/(user)/settings/loading.tsx
similarity index 100%
rename from apps/web/app/(dashboard)/home/(user)/account/loading.tsx
rename to apps/web/app/(dashboard)/home/(user)/settings/loading.tsx
diff --git a/apps/web/app/(dashboard)/home/(user)/account/page.tsx b/apps/web/app/(dashboard)/home/(user)/settings/page.tsx
similarity index 100%
rename from apps/web/app/(dashboard)/home/(user)/account/page.tsx
rename to apps/web/app/(dashboard)/home/(user)/settings/page.tsx
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx b/apps/web/app/(dashboard)/home/[account]/_components/app-header.tsx
similarity index 92%
rename from apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx
rename to apps/web/app/(dashboard)/home/[account]/_components/app-header.tsx
index 232c02042..35e49c8e8 100644
--- a/apps/web/app/(dashboard)/home/[account]/(components)/app-header.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/app-header.tsx
@@ -1,6 +1,6 @@
 import { PageHeader } from '@kit/ui/page';
 
-import { MobileAppNavigation } from '~/(dashboard)/home/[account]/(components)/mobile-app-navigation';
+import { MobileAppNavigation } from '~/(dashboard)/home/[account]/_components/mobile-app-navigation';
 
 export function AppHeader({
   children,
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
similarity index 100%
rename from apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar-navigation.tsx
rename to apps/web/app/(dashboard)/home/[account]/_components/app-sidebar-navigation.tsx
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx b/apps/web/app/(dashboard)/home/[account]/_components/app-sidebar.tsx
similarity index 91%
rename from apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx
rename to apps/web/app/(dashboard)/home/[account]/_components/app-sidebar.tsx
index 80221bab5..6de999cca 100644
--- a/apps/web/app/(dashboard)/home/[account]/(components)/app-sidebar.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/app-sidebar.tsx
@@ -2,6 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 
+import type { Session } from '@supabase/supabase-js';
+
 import { ArrowLeftCircleIcon, ArrowRightCircleIcon } from 'lucide-react';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
@@ -15,7 +17,7 @@ import {
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
-import { ProfileDropdownContainer } from '~/(dashboard)/home/components/personal-account-dropdown';
+import { ProfileDropdownContainer } from '~/(dashboard)/home/_components/personal-account-dropdown';
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
@@ -36,6 +38,7 @@ export function AppSidebar(props: {
   account: string;
   accounts: AccountModel[];
   collapsed: boolean;
+  session: Session | null;
 }) {
   return (
     <Sidebar collapsed={props.collapsed}>
@@ -45,6 +48,7 @@ export function AppSidebar(props: {
           setCollapsed={setCollapsed}
           account={props.account}
           accounts={props.accounts}
+          session={props.session}
         />
       )}
     </Sidebar>
@@ -54,6 +58,7 @@ export function AppSidebar(props: {
 function SidebarContainer(props: {
   account: string;
   accounts: AccountModel[];
+  session: Session | null;
   collapsed: boolean;
   setCollapsed: (collapsed: boolean) => void;
 }) {
@@ -84,7 +89,10 @@ function SidebarContainer(props: {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileDropdownContainer collapsed={props.collapsed} />
+          <ProfileDropdownContainer
+            session={props.session}
+            collapsed={props.collapsed}
+          />
 
           <AppSidebarFooterMenu
             collapsed={props.collapsed}
diff --git a/apps/web/app/(dashboard)/home/[account]/(components)/dashboard-demo.tsx b/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx
similarity index 100%
rename from apps/web/app/(dashboard)/home/[account]/(components)/dashboard-demo.tsx
rename to apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx
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
similarity index 100%
rename from apps/web/app/(dashboard)/home/[account]/(components)/mobile-app-navigation.tsx
rename to apps/web/app/(dashboard)/home/[account]/_components/mobile-app-navigation.tsx
diff --git a/apps/web/app/(dashboard)/home/[account]/(lib)/load-workspace.ts b/apps/web/app/(dashboard)/home/[account]/_lib/load-workspace.ts
similarity index 100%
rename from apps/web/app/(dashboard)/home/[account]/(lib)/load-workspace.ts
rename to apps/web/app/(dashboard)/home/[account]/_lib/load-workspace.ts
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/_components/billing-portal-form.tsx b/apps/web/app/(dashboard)/home/[account]/billing/_components/billing-portal-form.tsx
new file mode 100644
index 000000000..7c99f8366
--- /dev/null
+++ b/apps/web/app/(dashboard)/home/[account]/billing/_components/billing-portal-form.tsx
@@ -0,0 +1,39 @@
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+
+import { createBillingPortalSession } from '../server-actions';
+
+export function BillingPortalForm(props: { accountId: string }) {
+  return (
+    <div className={'mx-auto w-full max-w-2xl'}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Manage your Team Plan</CardTitle>
+
+          <CardDescription>
+            You can change your plan at any time.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <form action={createBillingPortalSession}>
+            <input type={'hidden'} name={'accountId'} value={props.accountId} />
+
+            <Button>Manage your Billing Settings</Button>
+
+            <span>
+              Visit the billing portal to manage your subscription (update
+              payment method, cancel subscription, etc.)
+            </span>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx b/apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx
new file mode 100644
index 000000000..4ece16b65
--- /dev/null
+++ b/apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+
+import billingConfig from '~/config/billing.config';
+
+import { createTeamAccountCheckoutSession } from '../server-actions';
+
+export function TeamAccountCheckoutForm(params: { accountId: string }) {
+  const [pending, startTransition] = useTransition();
+  const [checkoutToken, setCheckoutToken] = useState<string | null>(null);
+
+  // If the checkout token is set, render the embedded checkout component
+  if (checkoutToken) {
+    return (
+      <EmbeddedCheckout
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+      />
+    );
+  }
+
+  // Otherwise, render the plan picker component
+  return (
+    <div className={'mx-auto w-full max-w-2xl'}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Manage your Team Plan</CardTitle>
+
+          <CardDescription>
+            You can change your plan at any time.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <PlanPicker
+            pending={pending}
+            config={billingConfig}
+            onSubmit={({ planId }) => {
+              startTransition(async () => {
+                const { checkoutToken } =
+                  await createTeamAccountCheckoutSession({
+                    planId,
+                    accountId: params.accountId,
+                  });
+
+                setCheckoutToken(checkoutToken);
+              });
+            }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
index 858dd39af..192851602 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
@@ -1,9 +1,25 @@
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { If } from '@kit/ui/if';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/_lib/load-workspace';
+import { BillingPortalForm } from '~/(dashboard)/home/[account]/billing/_components/billing-portal-form';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-function OrganizationAccountBillingPage() {
+import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form';
+
+interface Params {
+  params: {
+    account: string;
+  };
+}
+
+async function OrganizationAccountBillingPage({ params }: Params) {
+  const workspace = await loadOrganizationWorkspace(params.account);
+  const accountId = workspace.account.id;
+  const customerId = await loadCustomerIdFromAccount(accountId);
+
   return (
     <>
       <PageHeader
@@ -11,9 +27,31 @@ function OrganizationAccountBillingPage() {
         description={<Trans i18nKey={'common:billingTabDescription'} />}
       />
 
-      <PageBody></PageBody>
+      <PageBody>
+        <TeamAccountCheckoutForm accountId={accountId} />
+
+        <If condition={customerId}>
+          <BillingPortalForm accountId={accountId} />
+        </If>
+      </PageBody>
     </>
   );
 }
 
 export default withI18n(OrganizationAccountBillingPage);
+
+async function loadCustomerIdFromAccount(accountId: string) {
+  const client = getSupabaseServerComponentClient();
+
+  const { data, error } = await client
+    .from('billing_customers')
+    .select('customer_id')
+    .eq('account_id', accountId)
+    .maybeSingle();
+
+  if (error) {
+    throw error;
+  }
+
+  return data?.customer_id;
+}
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx
new file mode 100644
index 000000000..a0443bdb2
--- /dev/null
+++ b/apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx
@@ -0,0 +1,84 @@
+import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
+
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { BillingSessionStatus } from '@kit/billing-gateway/components';
+import { requireAuth } from '@kit/supabase/require-auth';
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+interface SessionPageProps {
+  searchParams: {
+    session_id: string;
+  };
+}
+
+const LazyEmbeddedCheckout = dynamic(async () => {
+  const { EmbeddedCheckout } = await import('@kit/billing-gateway/components');
+
+  return EmbeddedCheckout;
+});
+
+async function ReturnStripeSessionPage({ searchParams }: SessionPageProps) {
+  const { customerEmail, checkoutToken } = await loadCheckoutSession(
+    searchParams.session_id,
+  );
+
+  if (checkoutToken) {
+    return (
+      <LazyEmbeddedCheckout
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className={'fixed left-0 top-48 z-50 mx-auto w-full'}>
+        <BillingSessionStatus
+          customerEmail={customerEmail ?? ''}
+          redirectPath={pathsConfig.app.home}
+        />
+      </div>
+
+      <div
+        className={
+          'fixed left-0 top-0 w-full bg-background/30 backdrop-blur-sm' +
+          ' !m-0 h-full'
+        }
+      />
+    </>
+  );
+}
+
+export default withI18n(ReturnStripeSessionPage);
+
+export async function loadCheckoutSession(sessionId: string) {
+  const client = getSupabaseServerComponentClient();
+
+  await requireAuth(client);
+
+  const gateway = await getBillingGatewayProvider(client);
+
+  const session = await gateway.retrieveCheckoutSession({
+    sessionId,
+  });
+
+  if (!session) {
+    notFound();
+  }
+
+  const checkoutToken = session.isSessionOpen ? session.checkoutToken : null;
+
+  // otherwise - we show the user the return page
+  // and display the details of the session
+  return {
+    status: session.status,
+    customerEmail: session.customer.email,
+    checkoutToken,
+  };
+}
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/server-actions.ts b/apps/web/app/(dashboard)/home/[account]/billing/server-actions.ts
new file mode 100644
index 000000000..65f32d1d4
--- /dev/null
+++ b/apps/web/app/(dashboard)/home/[account]/billing/server-actions.ts
@@ -0,0 +1,179 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+import { z } from 'zod';
+
+import { getProductPlanPairFromId } from '@kit/billing';
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { requireAuth } from '@kit/supabase/require-auth';
+import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+
+/**
+ * Creates a checkout session for a team account.
+ *
+ * @param {object} params - The parameters for creating the checkout session.
+ * @param {string} params.planId - The ID of the plan to be associated with the account.
+ */
+export async function createTeamAccountCheckoutSession(params: {
+  planId: string;
+  accountId: string;
+}) {
+  const client = getSupabaseServerActionClient();
+
+  // we parse the plan ID from the parameters
+  // no need in continuing if the plan ID is not valid
+  const planId = z.string().min(1).parse(params.planId);
+
+  // we require the user to be authenticated
+  const { data: session } = await requireAuth(client);
+
+  if (!session) {
+    throw new Error('Authentication required');
+  }
+
+  const userId = session.user.id;
+  const accountId = params.accountId;
+
+  const hasPermission = await getPermissionsForAccountId(userId, accountId);
+
+  // if the user does not have permission to manage billing for the account
+  // then we should not proceed
+  if (!hasPermission) {
+    throw new Error('Permission denied');
+  }
+
+  // here we have confirmed that the user has permission to manage billing for the account
+  // so we go on and create a checkout session
+  const service = await getBillingGatewayProvider(client);
+  const productPlanPairFromId = getProductPlanPairFromId(billingConfig, planId);
+
+  if (!productPlanPairFromId) {
+    throw new Error('Product not found');
+  }
+
+  // the return URL for the checkout session
+  const returnUrl = getCheckoutSessionReturnUrl();
+
+  // find the customer ID for the account if it exists
+  // (eg. if the account has been billed before)
+  const customerId = await getCustomerIdFromAccountId(client, accountId);
+  const customerEmail = session.user.email;
+
+  // retrieve the product and plan from the billing configuration
+  const { product, plan } = productPlanPairFromId;
+
+  // call the payment gateway to create the checkout session
+  const { checkoutToken } = await service.createCheckoutSession({
+    accountId,
+    returnUrl,
+    planId,
+    customerEmail,
+    customerId,
+    paymentType: product.paymentType,
+    trialPeriodDays: plan.trialPeriodDays,
+  });
+
+  // return the checkout token to the client
+  // so we can call the payment gateway to complete the checkout
+  return {
+    checkoutToken,
+  };
+}
+
+export async function createBillingPortalSession(data: FormData) {
+  const client = getSupabaseServerActionClient();
+
+  const accountId = z
+    .object({
+      accountId: z.string().min(1),
+    })
+    .parse(Object.fromEntries(data)).accountId;
+
+  const { data: session, error } = await requireAuth(client);
+
+  if (error ?? !session) {
+    throw new Error('Authentication required');
+  }
+
+  const userId = session.user.id;
+
+  // we require the user to have permissions to manage billing for the account
+  const hasPermission = await getPermissionsForAccountId(userId, accountId);
+
+  // if the user does not have permission to manage billing for the account
+  // then we should not proceed
+  if (!hasPermission) {
+    throw new Error('Permission denied');
+  }
+
+  const service = await getBillingGatewayProvider(client);
+  const customerId = await getCustomerIdFromAccountId(client, accountId);
+  const returnUrl = getBillingPortalReturnUrl();
+
+  if (!customerId) {
+    throw new Error('Customer not found');
+  }
+
+  const { url } = await service.createBillingPortalSession({
+    customerId,
+    returnUrl,
+  });
+
+  // redirect the user to the billing portal
+  return redirect(url);
+}
+
+function getCheckoutSessionReturnUrl() {
+  const origin = headers().get('origin')!;
+
+  return new URL(pathsConfig.app.accountBillingReturn, origin).toString();
+}
+
+function getBillingPortalReturnUrl() {
+  const origin = headers().get('origin')!;
+
+  return new URL(pathsConfig.app.accountBilling, origin).toString();
+}
+
+/**
+ * Retrieves the permissions for a user on an account for managing billing.
+ * @param userId
+ * @param accountId
+ */
+async function getPermissionsForAccountId(userId: string, accountId: string) {
+  const client = getSupabaseServerActionClient();
+
+  const { data, error } = await client.rpc('has_permission', {
+    account_id: accountId,
+    user_id: userId,
+    permission_name: 'billing.manage',
+  });
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+}
+
+async function getCustomerIdFromAccountId(
+  client: ReturnType<typeof getSupabaseServerActionClient>,
+  accountId: string,
+) {
+  const { data, error } = await client
+    .from('billing_customers')
+    .select('customer_id')
+    .eq('account_id', accountId)
+    .maybeSingle();
+
+  if (error) {
+    throw error;
+  }
+
+  return data?.customer_id;
+}
diff --git a/apps/web/app/(dashboard)/home/[account]/layout.tsx b/apps/web/app/(dashboard)/home/[account]/layout.tsx
index 83a76c332..aa9f341a6 100644
--- a/apps/web/app/(dashboard)/home/[account]/layout.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/layout.tsx
@@ -1,37 +1,45 @@
+import { use } from 'react';
+
 import { parseSidebarStateCookie } from '@kit/shared/cookies/sidebar-state.cookie';
 import { parseThemeCookie } from '@kit/shared/cookies/theme.cookie';
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { Page } from '@kit/ui/page';
 
+import { AppSidebar } from '~/(dashboard)/home/[account]/_components/app-sidebar';
+import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/_lib/load-workspace';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { AppSidebar } from './(components)/app-sidebar';
-import { loadOrganizationWorkspace } from './(lib)/load-workspace';
-
 interface Params {
   account: string;
 }
 
-async function OrganizationWorkspaceLayout({
+function OrganizationWorkspaceLayout({
   children,
   params,
 }: React.PropsWithChildren<{
   params: Params;
 }>) {
-  const data = await loadOrganizationWorkspace(params.account);
+  const [data, session] = use(
+    Promise.all([loadOrganizationWorkspace(params.account), loadSession()]),
+  );
+
   const ui = getUIStateCookies();
   const sidebarCollapsed = ui.sidebarState === 'collapsed';
 
+  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
+    label: name,
+    value: slug,
+    image: picture_url,
+  }));
+
   return (
     <Page
       sidebar={
         <AppSidebar
           collapsed={sidebarCollapsed}
           account={params.account}
-          accounts={data.accounts.map(({ name, slug, picture_url }) => ({
-            label: name,
-            value: slug,
-            image: picture_url,
-          }))}
+          session={session}
+          accounts={accounts}
         />
       }
     >
@@ -48,3 +56,18 @@ function getUIStateCookies() {
     sidebarState: parseSidebarStateCookie(),
   };
 }
+
+async function loadSession() {
+  const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { session },
+    error,
+  } = await client.auth.getSession();
+
+  if (error) {
+    throw error;
+  }
+
+  return session;
+}
diff --git a/apps/web/app/(dashboard)/home/[account]/members/page.tsx b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
index db207f8e9..01e5644b9 100644
--- a/apps/web/app/(dashboard)/home/[account]/members/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
@@ -1,4 +1,4 @@
-import { PlusCircledIcon } from '@radix-ui/react-icons';
+import { PlusCircleIcon } from 'lucide-react';
 
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import {
@@ -17,7 +17,7 @@ import {
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
-import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/(lib)/load-workspace';
+import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/_lib/load-workspace';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 interface Params {
@@ -99,7 +99,7 @@ async function OrganizationAccountMembersPage({ params }: Params) {
 
               <InviteMembersDialogContainer account={account.slug}>
                 <Button size={'sm'}>
-                  <PlusCircledIcon className={'mr-2 w-4'} />
+                  <PlusCircleIcon className={'mr-2 w-4'} />
                   <span>Add Member</span>
                 </Button>
               </InviteMembersDialogContainer>
diff --git a/apps/web/app/(dashboard)/home/[account]/page.tsx b/apps/web/app/(dashboard)/home/[account]/page.tsx
index 239328a39..33bc58cf1 100644
--- a/apps/web/app/(dashboard)/home/[account]/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/page.tsx
@@ -7,11 +7,11 @@ 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 { 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'),
+  () => import('~/(dashboard)/home/[account]/_components/dashboard-demo'),
   {
     ssr: false,
     loading: () => (
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/recover-checkout.tsx b/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/recover-checkout.tsx
deleted file mode 100644
index 03fbff1a6..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/recover-checkout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import dynamic from 'next/dynamic';
-import { useRouter } from 'next/navigation';
-
-const EmbeddedStripeCheckout = dynamic(
-  () => {
-    return import('../../components/embedded-stripe-checkout');
-  },
-  {
-    ssr: false,
-  },
-);
-
-function RecoverCheckout({ clientSecret }: { clientSecret: string }) {
-  const router = useRouter();
-
-  return (
-    <EmbeddedStripeCheckout
-      clientSecret={clientSecret}
-      onClose={() => {
-        return router.replace('/settings/subscription');
-      }}
-    />
-  );
-}
-
-export default RecoverCheckout;
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
deleted file mode 100644
index 0ea55ff44..000000000
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/page.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-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 { BillingSessionStatus } from './components/billing-session-status';
-import RecoverCheckout from './components/recover-checkout';
-
-interface SessionPageProps {
-  searchParams: {
-    session_id: string;
-  };
-}
-
-async function ReturnStripeSessionPage({ searchParams }: SessionPageProps) {
-  const { status, customerEmail, clientSecret } = await loadStripeSession(
-    searchParams.session_id,
-  );
-
-  if (clientSecret) {
-    return <RecoverCheckout clientSecret={clientSecret} />;
-  }
-
-  return (
-    <>
-      <div className={'fixed left-0 top-48 z-50 mx-auto w-full'}>
-        <BillingSessionStatus
-          status={status}
-          customerEmail={customerEmail ?? ''}
-        />
-      </div>
-
-      <div
-        className={
-          'fixed left-0 top-0 w-full bg-background/30 backdrop-blur-sm' +
-          ' !m-0 h-full'
-        }
-      />
-    </>
-  );
-}
-
-export default withI18n(ReturnStripeSessionPage);
-
-export async function loadStripeSession(sessionId: string) {
-  await requireSession(getSupabaseServerComponentClient());
-
-  // now we fetch the session from Stripe
-  // and check if it's still open
-  const stripe = await createStripeClient();
-
-  const session = await stripe.checkout.sessions
-    .retrieve(sessionId)
-    .catch(() => undefined);
-
-  if (!session) {
-    notFound();
-  }
-
-  const isSessionOpen = session.status === 'open';
-  const clientSecret = isSessionOpen ? session.client_secret : null;
-  const isEmbeddedMode = session.ui_mode === 'embedded';
-
-  // if the session is still open, we redirect the user to the checkout page
-  // in Stripe self hosted mode
-  if (isSessionOpen && !isEmbeddedMode && session.url) {
-    redirect(session.url);
-  }
-
-  // otherwise - we show the user the return page
-  // and display the details of the session
-  return {
-    status: session.status,
-    customerEmail: session.customer_details?.email,
-    clientSecret,
-  };
-}
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
similarity index 100%
rename from apps/web/app/(dashboard)/home/components/home-sidebar-account-selector.tsx
rename to apps/web/app/(dashboard)/home/_components/home-sidebar-account-selector.tsx
diff --git a/apps/web/app/(dashboard)/home/components/home-sidebar.tsx b/apps/web/app/(dashboard)/home/_components/home-sidebar.tsx
similarity index 67%
rename from apps/web/app/(dashboard)/home/components/home-sidebar.tsx
rename to apps/web/app/(dashboard)/home/_components/home-sidebar.tsx
index 8912b9d60..80bb61a6f 100644
--- a/apps/web/app/(dashboard)/home/components/home-sidebar.tsx
+++ b/apps/web/app/(dashboard)/home/_components/home-sidebar.tsx
@@ -5,13 +5,16 @@ 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 { 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';
 
 export function HomeSidebar() {
   const collapsed = getSidebarCollapsed();
-  const accounts = use(loadUserAccounts());
+
+  const [accounts, session] = use(
+    Promise.all([loadUserAccounts(), loadSession()]),
+  );
 
   return (
     <Sidebar collapsed={collapsed}>
@@ -25,7 +28,7 @@ export function HomeSidebar() {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileDropdownContainer collapsed={collapsed} />
+          <ProfileDropdownContainer session={session} collapsed={collapsed} />
         </SidebarContent>
       </div>
     </Sidebar>
@@ -36,12 +39,27 @@ function getSidebarCollapsed() {
   return cookies().get('sidebar-collapsed')?.value === 'true';
 }
 
+async function loadSession() {
+  const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { session },
+    error,
+  } = await client.auth.getSession();
+
+  if (error) {
+    throw error;
+  }
+
+  return session;
+}
+
 async function loadUserAccounts() {
   const client = getSupabaseServerComponentClient();
 
   const { data: accounts, error } = await client
     .from('user_accounts')
-    .select('*');
+    .select(`name, slug, picture_url`);
 
   if (error) {
     throw error;
diff --git a/apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx b/apps/web/app/(dashboard)/home/_components/personal-account-dropdown.tsx
similarity index 68%
rename from apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx
rename to apps/web/app/(dashboard)/home/_components/personal-account-dropdown.tsx
index c111125d2..deffa2ed4 100644
--- a/apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx
+++ b/apps/web/app/(dashboard)/home/_components/personal-account-dropdown.tsx
@@ -1,15 +1,17 @@
 'use client';
 
+import type { Session } from '@supabase/supabase-js';
+
 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();
+export function ProfileDropdownContainer(props: {
+  collapsed: boolean;
+  session: Session | null;
+}) {
   const signOut = useSignOut();
-  const session = userSession?.data ?? undefined;
 
   return (
     <div className={props.collapsed ? '' : 'w-full'}>
@@ -19,7 +21,7 @@ export function ProfileDropdownContainer(props: { collapsed: boolean }) {
         }}
         className={'w-full'}
         showProfileName={!props.collapsed}
-        session={session}
+        session={props.session}
         signOutRequested={() => signOut.mutateAsync()}
       />
     </div>
diff --git a/apps/web/app/(marketing)/components/grid-list.tsx b/apps/web/app/(marketing)/_components/grid-list.tsx
similarity index 100%
rename from apps/web/app/(marketing)/components/grid-list.tsx
rename to apps/web/app/(marketing)/_components/grid-list.tsx
diff --git a/apps/web/app/(marketing)/components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
similarity index 100%
rename from apps/web/app/(marketing)/components/site-footer.tsx
rename to apps/web/app/(marketing)/_components/site-footer.tsx
diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
new file mode 100644
index 000000000..e313b0cff
--- /dev/null
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import Link from 'next/link';
+
+import type { Session } from '@supabase/supabase-js';
+
+import { ChevronRightIcon } from 'lucide-react';
+
+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 { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import pathsConfig from '~/config/paths.config';
+
+export function SiteHeaderAccountSection(
+  props: React.PropsWithChildren<{
+    session: Session | null;
+  }>,
+) {
+  return (
+    <Suspense fallback={<AuthButtons />}>
+      <SuspendedPersonalAccountDropdown session={props.session} />
+    </Suspense>
+  );
+}
+
+function SuspendedPersonalAccountDropdown(props: { session: Session | null }) {
+  const signOut = useSignOut();
+  const userSession = useUserSession(props.session);
+
+  return (
+    <If condition={userSession.data} fallback={<AuthButtons />}>
+      {(session) => (
+        <PersonalAccountDropdown
+          paths={{
+            home: pathsConfig.app.home,
+          }}
+          session={session}
+          signOutRequested={() => signOut.mutateAsync()}
+        />
+      )}
+    </If>
+  );
+}
+
+function AuthButtons() {
+  return (
+    <div className={'hidden space-x-2 lg:flex'}>
+      <Button variant={'link'}>
+        <Link href={pathsConfig.auth.signIn}>
+          <Trans i18nKey={'auth:signIn'} />
+        </Link>
+      </Button>
+
+      <Link href={pathsConfig.auth.signUp}>
+        <Button className={'rounded-full'}>
+          <Trans i18nKey={'auth:signUp'} />
+          <ChevronRightIcon className={'h-4'} />
+        </Button>
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/web/app/(marketing)/components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
similarity index 63%
rename from apps/web/app/(marketing)/components/site-header.tsx
rename to apps/web/app/(marketing)/_components/site-header.tsx
index 47426d6ef..cdccb4fb5 100644
--- a/apps/web/app/(marketing)/components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -1,8 +1,10 @@
-import { SiteHeaderAccountSection } from '~/(marketing)/components/site-header-account-section';
-import { SiteNavigation } from '~/(marketing)/components/site-navigation';
+import type { Session } from '@supabase/supabase-js';
+
+import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
+import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
-export function SiteHeader() {
+export async function SiteHeader(props: { session: Session | null }) {
   return (
     <div className={'container mx-auto'}>
       <div className="flex h-16 items-center justify-between">
@@ -17,7 +19,7 @@ export function SiteHeader() {
         <div className={'flex flex-1 items-center justify-end space-x-4'}>
           <div className={'flex items-center'}></div>
 
-          <SiteHeaderAccountSection />
+          <SiteHeaderAccountSection session={props.session} />
 
           <div className={'flex lg:hidden'}>
             <SiteNavigation />
diff --git a/apps/web/app/(marketing)/components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
similarity index 100%
rename from apps/web/app/(marketing)/components/site-navigation.tsx
rename to apps/web/app/(marketing)/_components/site-navigation.tsx
diff --git a/apps/web/app/(marketing)/components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx
similarity index 100%
rename from apps/web/app/(marketing)/components/site-page-header.tsx
rename to apps/web/app/(marketing)/_components/site-page-header.tsx
diff --git a/apps/web/app/(marketing)/blog/[slug]/page.tsx b/apps/web/app/(marketing)/blog/[slug]/page.tsx
index 32f0989c8..581e77720 100644
--- a/apps/web/app/(marketing)/blog/[slug]/page.tsx
+++ b/apps/web/app/(marketing)/blog/[slug]/page.tsx
@@ -5,11 +5,10 @@ import Script from 'next/script';
 
 import { allPosts } from 'contentlayer/generated';
 
+import Post from '~/(marketing)/blog/_components/post';
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import Post from '../components/post';
-
 export async function generateMetadata({
   params,
 }: {
diff --git a/apps/web/app/(marketing)/blog/components/cover-image.tsx b/apps/web/app/(marketing)/blog/_components/cover-image.tsx
similarity index 100%
rename from apps/web/app/(marketing)/blog/components/cover-image.tsx
rename to apps/web/app/(marketing)/blog/_components/cover-image.tsx
diff --git a/apps/web/app/(marketing)/blog/components/date-formatter.tsx b/apps/web/app/(marketing)/blog/_components/date-formatter.tsx
similarity index 100%
rename from apps/web/app/(marketing)/blog/components/date-formatter.tsx
rename to apps/web/app/(marketing)/blog/_components/date-formatter.tsx
diff --git a/apps/web/app/(marketing)/blog/components/draft-post-badge.tsx b/apps/web/app/(marketing)/blog/_components/draft-post-badge.tsx
similarity index 100%
rename from apps/web/app/(marketing)/blog/components/draft-post-badge.tsx
rename to apps/web/app/(marketing)/blog/_components/draft-post-badge.tsx
diff --git a/apps/web/app/(marketing)/blog/components/post-header.tsx b/apps/web/app/(marketing)/blog/_components/post-header.tsx
similarity index 86%
rename from apps/web/app/(marketing)/blog/components/post-header.tsx
rename to apps/web/app/(marketing)/blog/_components/post-header.tsx
index 516ab71bc..45c207520 100644
--- a/apps/web/app/(marketing)/blog/components/post-header.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-header.tsx
@@ -3,10 +3,10 @@ import type { Post } from 'contentlayer/generated';
 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';
+import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
+import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
 
-const PostHeader: React.FC<{
+export const PostHeader: React.FC<{
   post: Post;
 }> = ({ post }) => {
   const { title, date, readingTime, description, image } = post;
@@ -53,5 +53,3 @@ const PostHeader: React.FC<{
     </div>
   );
 };
-
-export default PostHeader;
diff --git a/apps/web/app/(marketing)/blog/components/post-preview.tsx b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
similarity index 89%
rename from apps/web/app/(marketing)/blog/components/post-preview.tsx
rename to apps/web/app/(marketing)/blog/_components/post-preview.tsx
index 3b42e786b..8c113f50c 100644
--- a/apps/web/app/(marketing)/blog/components/post-preview.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
@@ -4,8 +4,8 @@ import type { Post } from 'contentlayer/generated';
 
 import { If } from '@kit/ui/if';
 
-import { CoverImage } from '~/(marketing)/blog/components/cover-image';
-import { DateFormatter } from '~/(marketing)/blog/components/date-formatter';
+import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
+import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
 
 type Props = {
   post: Post;
@@ -15,7 +15,7 @@ type Props = {
 
 const DEFAULT_IMAGE_HEIGHT = 250;
 
-function PostPreview({
+export function PostPreview({
   post,
   preloadImage,
   imageHeight,
@@ -67,5 +67,3 @@ function PostPreview({
     </div>
   );
 }
-
-export default PostPreview;
diff --git a/apps/web/app/(marketing)/blog/components/post.tsx b/apps/web/app/(marketing)/blog/_components/post.tsx
similarity index 91%
rename from apps/web/app/(marketing)/blog/components/post.tsx
rename to apps/web/app/(marketing)/blog/_components/post.tsx
index 54135fb19..72449b758 100644
--- a/apps/web/app/(marketing)/blog/components/post.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post.tsx
@@ -4,7 +4,7 @@ import type { Post as PostType } from 'contentlayer/generated';
 
 import { Mdx } from '@kit/ui/mdx';
 
-import PostHeader from './post-header';
+import { PostHeader } from './post-header';
 
 export const Post: React.FC<{
   post: PostType;
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index ff1f37569..89af584f1 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/apps/web/app/(marketing)/blog/page.tsx
@@ -2,19 +2,18 @@ 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 { GridList } from '~/(marketing)/_components/grid-list';
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { PostPreview } from '~/(marketing)/blog/_components/post-preview';
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { GridList } from '../components/grid-list';
-
 export const metadata: Metadata = {
   title: `Blog - ${appConfig.name}`,
   description: `Tutorials, Guides and Updates from our team`,
 };
 
-async function BlogPage() {
+function BlogPage() {
   const livePosts = allPosts.filter((post) => {
     const isProduction = appConfig.production;
 
diff --git a/apps/web/app/(marketing)/components/site-header-account-section.tsx b/apps/web/app/(marketing)/components/site-header-account-section.tsx
deleted file mode 100644
index 8870bd103..000000000
--- a/apps/web/app/(marketing)/components/site-header-account-section.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { ChevronRightIcon } from 'lucide-react';
-
-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();
-
-  if (userSession.data) {
-    return (
-      <PersonalAccountDropdown
-        session={userSession.data}
-        paths={{
-          home: pathsConfig.app.home,
-        }}
-        signOutRequested={() => signOut.mutateAsync()}
-      />
-    );
-  }
-
-  return <AuthButtons />;
-}
-
-function AuthButtons() {
-  return (
-    <div className={'hidden space-x-2 lg:flex'}>
-      <Button variant={'link'}>
-        <Link href={pathsConfig.auth.signIn}>Sign In</Link>
-      </Button>
-
-      <Link href={pathsConfig.auth.signUp}>
-        <Button className={'rounded-full'}>
-          Sign Up
-          <ChevronRightIcon className={'h-4'} />
-        </Button>
-      </Link>
-    </div>
-  );
-}
diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
index e7a1b1323..0a4223cae 100644
--- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx
+++ b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
@@ -8,10 +8,10 @@ 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 { 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/_lib/get-documentation-page-tree';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 const getPageBySlug = cache((slug: string) => {
diff --git a/apps/web/app/(marketing)/docs/components/docs-card.tsx b/apps/web/app/(marketing)/docs/_components/docs-card.tsx
similarity index 100%
rename from apps/web/app/(marketing)/docs/components/docs-card.tsx
rename to apps/web/app/(marketing)/docs/_components/docs-card.tsx
diff --git a/apps/web/app/(marketing)/docs/components/docs-cards.tsx b/apps/web/app/(marketing)/docs/_components/docs-cards.tsx
similarity index 100%
rename from apps/web/app/(marketing)/docs/components/docs-cards.tsx
rename to apps/web/app/(marketing)/docs/_components/docs-cards.tsx
diff --git a/apps/web/app/(marketing)/docs/components/docs-navigation.tsx b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
similarity index 98%
rename from apps/web/app/(marketing)/docs/components/docs-navigation.tsx
rename to apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
index b76fdefc7..1a9452662 100644
--- a/apps/web/app/(marketing)/docs/components/docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
@@ -13,7 +13,7 @@ import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
 import { cn } from '@kit/ui/utils';
 
-import type { ProcessedDocumentationPage } from '../utils/build-documentation-tree';
+import type { ProcessedDocumentationPage } from '~/(marketing)/docs/_lib/build-documentation-tree';
 
 const DocsNavLink: React.FC<{
   label: string;
diff --git a/apps/web/app/(marketing)/docs/components/documentation-page-link.tsx b/apps/web/app/(marketing)/docs/_components/documentation-page-link.tsx
similarity index 100%
rename from apps/web/app/(marketing)/docs/components/documentation-page-link.tsx
rename to apps/web/app/(marketing)/docs/_components/documentation-page-link.tsx
diff --git a/apps/web/app/(marketing)/docs/utils/build-documentation-tree.ts b/apps/web/app/(marketing)/docs/_lib/build-documentation-tree.ts
similarity index 100%
rename from apps/web/app/(marketing)/docs/utils/build-documentation-tree.ts
rename to apps/web/app/(marketing)/docs/_lib/build-documentation-tree.ts
diff --git a/apps/web/app/(marketing)/docs/utils/get-documentation-page-tree.ts b/apps/web/app/(marketing)/docs/_lib/get-documentation-page-tree.ts
similarity index 100%
rename from apps/web/app/(marketing)/docs/utils/get-documentation-page-tree.ts
rename to apps/web/app/(marketing)/docs/_lib/get-documentation-page-tree.ts
diff --git a/apps/web/app/(marketing)/docs/layout.tsx b/apps/web/app/(marketing)/docs/layout.tsx
index 18d0c2727..204352079 100644
--- a/apps/web/app/(marketing)/docs/layout.tsx
+++ b/apps/web/app/(marketing)/docs/layout.tsx
@@ -1,8 +1,8 @@
 import type { DocumentationPage } from 'contentlayer/generated';
 import { allDocumentationPages } from 'contentlayer/generated';
 
-import DocsNavigation from './components/docs-navigation';
-import { buildDocumentationTree } from './utils/build-documentation-tree';
+import DocsNavigation from '~/(marketing)/docs/_components/docs-navigation';
+import { buildDocumentationTree } from '~/(marketing)/docs/_lib/build-documentation-tree';
 
 function DocsLayout({ children }: React.PropsWithChildren) {
   const tree = buildDocumentationTree(allDocumentationPages);
diff --git a/apps/web/app/(marketing)/docs/page.tsx b/apps/web/app/(marketing)/docs/page.tsx
index 265448225..8455dea81 100644
--- a/apps/web/app/(marketing)/docs/page.tsx
+++ b/apps/web/app/(marketing)/docs/page.tsx
@@ -1,12 +1,11 @@
 import { allDocumentationPages } from 'contentlayer/generated';
 
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { DocsCards } from '~/(marketing)/docs/_components/docs-cards';
+import { buildDocumentationTree } from '~/(marketing)/docs/_lib/build-documentation-tree';
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { SitePageHeader } from '../components/site-page-header';
-import { DocsCards } from './components/docs-cards';
-import { buildDocumentationTree } from './utils/build-documentation-tree';
-
 export const metadata = {
   title: `Documentation - ${appConfig.name}`,
 };
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index c4c62d7b7..312feeab5 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -1,9 +1,8 @@
 import { ChevronDownIcon } from 'lucide-react';
 
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { SitePageHeader } from '../components/site-page-header';
-
 export const metadata = {
   title: 'FAQ',
 };
diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index 584451173..b5d4546c6 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -1,12 +1,19 @@
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+
+import { SiteFooter } from '~/(marketing)/_components/site-footer';
+import { SiteHeader } from '~/(marketing)/_components/site-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { SiteFooter } from './components/site-footer';
-import { SiteHeader } from './components/site-header';
+async function SiteLayout(props: React.PropsWithChildren) {
+  const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { session },
+  } = await client.auth.getSession();
 
-function SiteLayout(props: React.PropsWithChildren) {
   return (
     <>
-      <SiteHeader />
+      <SiteHeader session={session} />
 
       {props.children}
 
diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx
index df15bbd1d..e9474bce3 100644
--- a/apps/web/app/(marketing)/pricing/page.tsx
+++ b/apps/web/app/(marketing)/pricing/page.tsx
@@ -1,11 +1,10 @@
 import { PricingTable } from '@kit/billing/components/pricing-table';
 
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { SitePageHeader } from '../components/site-page-header';
-
 export const metadata = {
   title: 'Pricing',
 };
diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
deleted file mode 100644
index 271a666ca..000000000
--- a/apps/web/app/admin/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { headers } from 'next/headers';
-import { notFound } from 'next/navigation';
-
-import { Page } from '@/components/app/Page';
-
-import AdminSidebar from '../../packages/admin/components/AdminSidebar';
-import isUserSuperAdmin from './utils/is-user-super-admin';
-
-async function AdminLayout({ children }: React.PropsWithChildren) {
-  const isAdmin = await isUserSuperAdmin();
-
-  if (!isAdmin) {
-    notFound();
-  }
-
-  const csrfToken = headers().get('X-CSRF-Token');
-
-  return <Page sidebar={<AdminSidebar />}>{children}</Page>;
-}
-
-export default AdminLayout;
diff --git a/apps/web/app/admin/lib/actions-utils.ts b/apps/web/app/admin/lib/actions-utils.ts
deleted file mode 100644
index fd4d68fbe..000000000
--- a/apps/web/app/admin/lib/actions-utils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { notFound } from 'next/navigation';
-
-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,
-) {
-  return async (...params: Args) => {
-    const isAdmin = await isUserSuperAdmin({
-      client: getSupabaseServerActionClient(),
-    });
-
-    if (!isAdmin) {
-      notFound();
-    }
-
-    return fn(...params);
-  };
-}
diff --git a/apps/web/app/admin/loading.tsx b/apps/web/app/admin/loading.tsx
deleted file mode 100644
index 4ea53181d..000000000
--- a/apps/web/app/admin/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { GlobalLoader } from '@kit/ui/global-loader';
-
-export default GlobalLoader;
diff --git a/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts b/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts
deleted file mode 100644
index 043de7538..000000000
--- a/apps/web/app/admin/organizations/@modal/[uid]/actions.server.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-'use server';
-
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
-
-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(
-  async ({ id }: { id: number; csrfToken: string }) => {
-    const client = getClient();
-
-    Logger.info({ id }, `Admin requested to delete Organization`);
-
-    await deleteOrganization(client, {
-      organizationId: id,
-    });
-
-    revalidatePath('/admin/organizations', 'page');
-
-    Logger.info({ id }, `Organization account deleted`);
-
-    redirect('/admin/organizations');
-  },
-);
diff --git a/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx b/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx
deleted file mode 100644
index ec1d00673..000000000
--- a/apps/web/app/admin/organizations/@modal/[uid]/components/DeleteOrganizationModal.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client';
-
-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 {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@kit/ui/dialog';
-import { Input } from '@kit/ui/input';
-import { Label } from '@kit/ui/label';
-
-import { deleteOrganizationAction } from '../actions.server';
-
-function DeleteOrganizationModal({
-  organization,
-}: React.PropsWithChildren<{
-  organization: Organization;
-}>) {
-  const router = useRouter();
-  const [isOpen, setIsOpen] = useState(true);
-  const [pending, startTransition] = useTransition();
-  const csrfToken = useCsrfToken();
-
-  const onDismiss = () => {
-    router.back();
-
-    setIsOpen(false);
-  };
-
-  const onConfirm = () => {
-    startTransition(async () => {
-      await deleteOrganizationAction({
-        id: organization.id,
-        csrfToken,
-      });
-
-      onDismiss();
-    });
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onDismiss}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Deleting Organization</DialogTitle>
-        </DialogHeader>
-
-        <form action={onConfirm}>
-          <div className={'flex flex-col space-y-4'}>
-            <div className={'flex flex-col space-y-2 text-sm'}>
-              <p>
-                You are about to delete the organization{' '}
-                <b>{organization.name}</b>.
-              </p>
-
-              <p>
-                Delete this organization will potentially delete the data
-                associated with it.
-              </p>
-
-              <p>
-                <b>This action is not reversible</b>.
-              </p>
-
-              <p>Are you sure you want to do this?</p>
-            </div>
-
-            <div>
-              <Label>
-                Confirm by typing <b>DELETE</b>
-                <Input required type={'text'} pattern={'DELETE'} />
-              </Label>
-            </div>
-
-            <div className={'flex justify-end space-x-2.5'}>
-              <Button disabled={pending} variant={'destructive'}>
-                Yes, delete organization
-              </Button>
-            </div>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default 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
deleted file mode 100644
index c3c63899f..000000000
--- a/apps/web/app/admin/organizations/@modal/[uid]/delete/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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';
-
-interface Params {
-  params: {
-    uid: string;
-  };
-}
-
-async function DeleteOrganizationModalPage({ params }: Params) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const { data, error } = await getOrganizationByUid(client, params.uid);
-
-  if (!data || error) {
-    throw new Error(`Organization not found`);
-  }
-
-  return <DeleteOrganizationModal organization={data} />;
-}
-
-export default AdminGuard(DeleteOrganizationModalPage);
diff --git a/apps/web/app/admin/organizations/@modal/default.tsx b/apps/web/app/admin/organizations/@modal/default.tsx
deleted file mode 100644
index 6ddf1b76f..000000000
--- a/apps/web/app/admin/organizations/@modal/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null;
-}
diff --git a/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx b/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx
deleted file mode 100644
index 4ac0a5e55..000000000
--- a/apps/web/app/admin/organizations/[uid]/members/components/OrganizationsMembersTable.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-'use client';
-
-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';
-
-import type UserData from '@kit/session/types/user-data';
-import { Button } from '@kit/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@kit/ui/dropdown-menu';
-
-import RoleBadge from '../../../../../(app)/[account]/account/organization/components/RoleBadge';
-
-type Data = {
-  id: Membership['id'];
-  role: Membership['role'];
-  user: {
-    id: UserData['id'];
-    displayName: UserData['displayName'];
-  };
-};
-
-const columns: ColumnDef<Data>[] = [
-  {
-    header: 'Membership ID',
-    id: 'id',
-    accessorKey: 'id',
-  },
-  {
-    header: 'User ID',
-    id: 'user-id',
-    cell: ({ row }) => {
-      const userId = row.original.user.id;
-
-      return (
-        <Link className={'hover:underline'} href={`/admin/users/${userId}`}>
-          {userId}
-        </Link>
-      );
-    },
-  },
-  {
-    header: 'Name',
-    id: 'name',
-    accessorKey: 'user.displayName',
-  },
-  {
-    header: 'Role',
-    cell: ({ row }) => {
-      return (
-        <div className={'inline-flex'}>
-          <RoleBadge role={row.original.role} />
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Actions',
-    cell: ({ row }) => {
-      const membership = row.original;
-      const userId = membership.user.id;
-
-      return (
-        <div className={'flex'}>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size={'icon'}>
-                <span className="sr-only">Open menu</span>
-                <EllipsisVerticalIcon className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem asChild>
-                <Link href={`/admin/users/${userId}`}>View User</Link>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem asChild>
-                <Link href={`/admin/users/${userId}/impersonate`}>
-                  Impersonate User
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      );
-    },
-  },
-];
-
-function OrganizationsMembersTable({
-  memberships,
-  page,
-  perPage,
-  pageCount,
-}: React.PropsWithChildren<{
-  memberships: Data[];
-  page: number;
-  perPage: number;
-  pageCount: number;
-}>) {
-  const data = memberships.filter((membership) => {
-    return membership.user;
-  });
-
-  const router = useRouter();
-  const path = usePathname();
-
-  return (
-    <DataTable
-      tableProps={{
-        'data-test': 'admin-organization-members-table',
-      }}
-      onPaginationChange={({ pageIndex }) => {
-        const { pathname } = new URL(path, window.location.origin);
-        const page = pageIndex + 1;
-
-        router.push(pathname + '?page=' + page);
-      }}
-      pageCount={pageCount}
-      pageIndex={page - 1}
-      pageSize={perPage}
-      columns={columns}
-      data={data}
-    />
-  );
-}
-
-export default OrganizationsMembersTable;
diff --git a/apps/web/app/admin/organizations/[uid]/members/page.tsx b/apps/web/app/admin/organizations/[uid]/members/page.tsx
deleted file mode 100644
index 7fdc0b022..000000000
--- a/apps/web/app/admin/organizations/[uid]/members/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-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 getPageFromQueryParams from '../../../utils/get-page-from-query-param';
-import { getMembershipsByOrganizationUid } from '../../queries';
-import OrganizationsMembersTable from './components/OrganizationsMembersTable';
-
-interface AdminMembersPageParams {
-  params: {
-    uid: string;
-  };
-
-  searchParams: {
-    page?: string;
-  };
-}
-
-export const metadata = {
-  title: `Members | ${appConfig.name}`,
-};
-
-function AdminMembersPage(params: AdminMembersPageParams) {
-  const adminClient = getSupabaseServerComponentClient({ admin: true });
-  const uid = params.params.uid;
-  const perPage = 20;
-  const page = getPageFromQueryParams(params.searchParams.page);
-
-  const { data: memberships, count } = use(
-    getMembershipsByOrganizationUid(adminClient, { uid, page, perPage }),
-  );
-
-  const pageCount = count ? Math.ceil(count / perPage) : 0;
-
-  return (
-    <div className={'flex flex-1 flex-col'}>
-      <AdminHeader>Manage Members</AdminHeader>
-
-      <PageBody>
-        <div className={'flex flex-col space-y-4'}>
-          <Breadcrumbs />
-
-          <OrganizationsMembersTable
-            page={page}
-            perPage={perPage}
-            pageCount={pageCount}
-            memberships={memberships}
-          />
-        </div>
-      </PageBody>
-    </div>
-  );
-}
-
-export default AdminMembersPage;
-
-function Breadcrumbs() {
-  return (
-    <div className={'flex items-center space-x-2 p-2 text-xs'}>
-      <div className={'flex items-center space-x-1.5'}>
-        <Link href={'/admin'}>Admin</Link>
-      </div>
-
-      <ChevronRightIcon className={'w-3'} />
-
-      <Link href={'/admin/organizations'}>Organizations</Link>
-
-      <ChevronRightIcon className={'w-3'} />
-
-      <span>Members</span>
-    </div>
-  );
-}
diff --git a/apps/web/app/admin/organizations/default.tsx b/apps/web/app/admin/organizations/default.tsx
deleted file mode 100644
index 6ddf1b76f..000000000
--- a/apps/web/app/admin/organizations/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null;
-}
diff --git a/apps/web/app/admin/organizations/error.tsx b/apps/web/app/admin/organizations/error.tsx
deleted file mode 100644
index 8f64c6fd4..000000000
--- a/apps/web/app/admin/organizations/error.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { PageBody } from '@/components/app/Page';
-
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-
-function OrganizationsAdminPageError() {
-  return (
-    <PageBody>
-      <Alert variant={'destructive'}>
-        <AlertTitle>Could not load organizations</AlertTitle>
-        <AlertDescription>
-          There was an error loading the organizations. Please check your
-          console errors.
-        </AlertDescription>
-      </Alert>
-    </PageBody>
-  );
-}
-
-export default OrganizationsAdminPageError;
diff --git a/apps/web/app/admin/organizations/layout.tsx b/apps/web/app/admin/organizations/layout.tsx
deleted file mode 100644
index 36c4ec27e..000000000
--- a/apps/web/app/admin/organizations/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-function OrganizationsLayout(
-  props: React.PropsWithChildren<{
-    modal: React.ReactNode;
-  }>,
-) {
-  return (
-    <>
-      {props.children}
-      {props.modal}
-    </>
-  );
-}
-
-export default OrganizationsLayout;
diff --git a/apps/web/app/admin/organizations/page.tsx b/apps/web/app/admin/organizations/page.tsx
deleted file mode 100644
index d0aea73f3..000000000
--- a/apps/web/app/admin/organizations/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-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';
-
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
-import { Input } from '@kit/ui/input';
-
-import OrganizationsTable from './components/OrganizationsTable';
-import { getOrganizations } from './queries';
-
-interface OrganizationsAdminPageProps {
-  searchParams: {
-    page?: string;
-    search?: string;
-  };
-}
-
-export const metadata = {
-  title: `Organizations | ${appConfig.name}`,
-};
-
-async function OrganizationsAdminPage({
-  searchParams,
-}: OrganizationsAdminPageProps) {
-  const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const perPage = 10;
-  const search = searchParams.search || '';
-
-  const { organizations, count } = await getOrganizations(
-    client,
-    search,
-    page,
-    perPage,
-  );
-
-  const pageCount = count ? Math.ceil(count / perPage) : 0;
-
-  return (
-    <div className={'flex flex-1 flex-col'}>
-      <AdminHeader>Manage Organizations</AdminHeader>
-
-      <PageBody>
-        <div className={'flex flex-col space-y-4'}>
-          <form method={'GET'}>
-            <Input
-              name={'search'}
-              defaultValue={search}
-              placeholder={'Search Organization...'}
-            />
-          </form>
-
-          <OrganizationsTable
-            perPage={perPage}
-            page={page}
-            pageCount={pageCount}
-            organizations={organizations}
-          />
-        </div>
-      </PageBody>
-    </div>
-  );
-}
-
-export default AdminGuard(OrganizationsAdminPage);
diff --git a/apps/web/app/admin/organizations/queries.ts b/apps/web/app/admin/organizations/queries.ts
deleted file mode 100644
index b96f79544..000000000
--- a/apps/web/app/admin/organizations/queries.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-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';
-
-type Client = SupabaseClient<Database>;
-
-export async function getOrganizations(
-  client: Client,
-  search: string,
-  page = 1,
-  perPage = 20,
-) {
-  const startOffset = (page - 1) * perPage;
-  const endOffset = startOffset - 1 + perPage;
-
-  let query = client.from(ORGANIZATIONS_TABLE).select<
-    string,
-    UserOrganizationData['organization'] & {
-      memberships: {
-        userId: string;
-        role: MembershipRole;
-        code: string;
-      }[];
-    }
-  >(
-    `
-      id,
-      uuid,
-      name,
-      logoURL: logo_url,
-      memberships (
-        userId: user_id,
-        role,
-        code
-      ),
-      subscription: organizations_subscriptions (
-        customerId: customer_id,
-        data: subscription_id (
-          id,
-          status,
-          currency,
-          interval,
-          cancelAtPeriodEnd: cancel_at_period_end,
-          intervalCount: interval_count,
-          priceId: price_id,
-          createdAt: created_at,
-          periodStartsAt: period_starts_at,
-          periodEndsAt: period_ends_at,
-          trialStartsAt: trial_starts_at,
-          trialEndsAt: trial_ends_at
-        )
-      )`,
-    {
-      count: 'exact',
-    },
-  );
-
-  if (search) {
-    query = query.ilike('name', `%${search}%`);
-  }
-
-  const {
-    data: organizations,
-    count,
-    error,
-  } = await query.range(startOffset, endOffset);
-
-  if (error) {
-    throw error;
-  }
-
-  return {
-    organizations,
-    count,
-  };
-}
-
-export async function getMembershipsByOrganizationUid(
-  client: Client,
-  params: {
-    uid: string;
-    page: number;
-    perPage: number;
-  },
-) {
-  const startOffset = (params.page - 1) * params.perPage;
-  const endOffset = startOffset + params.perPage;
-
-  const { data, error, count } = await client
-    .from(MEMBERSHIPS_TABLE)
-    .select<
-      string,
-      {
-        id: number;
-        role: MembershipRole;
-        user: {
-          id: string;
-          displayName: string;
-          photoURL: string;
-        };
-      }
-    >(
-      `
-      id,
-      role,
-      user: user_id (
-        id,
-        displayName: display_name,
-        photoURL: photo_url
-      ),
-      organization: organization_id !inner (
-        id,
-        uuid
-      )`,
-      {
-        count: 'exact',
-      },
-    )
-    .eq('organization.uuid', params.uid)
-    .is('code', null)
-    .range(startOffset, endOffset);
-
-  if (error) {
-    throw error;
-  }
-
-  return { data, count };
-}
diff --git a/apps/web/app/admin/page.tsx b/apps/web/app/admin/page.tsx
deleted file mode 100644
index 85c73b695..000000000
--- a/apps/web/app/admin/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { PageBody } from '@/components/app/Page';
-import appConfig from '@/config/app.config';
-
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
-import AdminDashboard from '../../packages/admin/components/AdminDashboard';
-import AdminGuard from '../../packages/admin/components/AdminGuard';
-import AdminHeader from '../../packages/admin/components/AdminHeader';
-
-export const metadata = {
-  title: `Admin | ${appConfig.name}`,
-};
-
-async function AdminPage() {
-  const data = await loadData();
-
-  return (
-    <div className={'flex flex-1 flex-col'}>
-      <AdminHeader>Admin</AdminHeader>
-
-      <PageBody>
-        <AdminDashboard data={data} />
-      </PageBody>
-    </div>
-  );
-}
-
-export default AdminGuard(AdminPage);
-
-async function loadData() {
-  const client = getSupabaseServerComponentClient({ admin: true });
-
-  const { count: usersCount } = await client.from('users').select('*', {
-    count: 'exact',
-    head: true,
-  });
-
-  const { count: organizationsCount } = await client
-    .from('organizations')
-    .select('*', {
-      count: 'exact',
-      head: true,
-    });
-
-  const { count: activeSubscriptions } = await client
-    .from('subscriptions')
-    .select(`*`, {
-      count: 'exact',
-      head: true,
-    })
-    .eq('status', 'active');
-
-  const { count: trialSubscriptions } = await client
-    .from('subscriptions')
-    .select(`*`, {
-      count: 'exact',
-      head: true,
-    })
-    .eq('status', 'trialing');
-
-  return {
-    usersCount: usersCount || 0,
-    organizationsCount: organizationsCount || 0,
-    activeSubscriptions: activeSubscriptions || 0,
-    trialSubscriptions: trialSubscriptions || 0,
-  };
-}
diff --git a/apps/web/app/admin/users/@modal/[uid]/actions.server.ts b/apps/web/app/admin/users/@modal/[uid]/actions.server.ts
deleted file mode 100644
index 2b98d771c..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/actions.server.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-'use server';
-
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
-
-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 }) => {
-  await setBanDuration(userId, `876600h`);
-});
-
-export const reactivateUser = withAdminSession(async ({ userId }) => {
-  await setBanDuration(userId, `none`);
-});
-
-export const impersonateUser = withAdminSession(async ({ userId }) => {
-  await assertUserIsNotCurrentSuperAdmin(userId);
-
-  const client = getClient();
-
-  const {
-    data: { user },
-    error,
-  } = await client.auth.admin.getUserById(userId);
-
-  if (error || !user) {
-    throw new Error(`Error fetching user`);
-  }
-
-  const email = user.email;
-
-  if (!email) {
-    throw new Error(`User has no email. Cannot impersonate`);
-  }
-
-  const { error: linkError, data } = await getClient().auth.admin.generateLink({
-    type: 'magiclink',
-    email,
-    options: {
-      redirectTo: `/`,
-    },
-  });
-
-  if (linkError || !data) {
-    throw new Error(`Error generating magic link`);
-  }
-
-  const response = await fetch(data.properties?.action_link, {
-    method: 'GET',
-    redirect: 'manual',
-  });
-
-  const location = response.headers.get('Location');
-
-  if (!location) {
-    throw new Error(`Error generating magic link. Location header not found`);
-  }
-
-  const hash = new URL(location).hash.substring(1);
-  const query = new URLSearchParams(hash);
-  const accessToken = query.get('access_token');
-  const refreshToken = query.get('refresh_token');
-
-  if (!accessToken || !refreshToken) {
-    throw new Error(
-      `Error generating magic link. Tokens not found in URL hash.`,
-    );
-  }
-
-  return {
-    accessToken,
-    refreshToken,
-  };
-});
-
-export const deleteUserAction = withAdminSession(
-  async ({ userId }: { userId: string; csrfToken: string }) => {
-    await assertUserIsNotCurrentSuperAdmin(userId);
-
-    Logger.info({ userId }, `Admin requested to delete user account`);
-
-    // we don't want to send an email to the user
-    const sendEmail = false;
-
-    await deleteUser({
-      client: getClient(),
-      userId,
-      sendEmail,
-    });
-
-    revalidatePath('/admin/users', 'page');
-
-    Logger.info({ userId }, `User account deleted`);
-
-    redirect('/admin/users');
-  },
-);
-
-async function setBanDuration(userId: string, banDuration: string) {
-  await assertUserIsNotCurrentSuperAdmin(userId);
-
-  await getClient().auth.admin.updateUserById(userId, {
-    ban_duration: banDuration,
-  });
-
-  revalidatePath('/admin/users');
-}
-
-async function assertUserIsNotCurrentSuperAdmin(targetUserId: string) {
-  const { data: user } = await getSupabaseServerActionClient().auth.getUser();
-  const currentUserId = user.user?.id;
-
-  if (!currentUserId) {
-    throw new Error(`Error fetching user`);
-  }
-
-  if (currentUserId === targetUserId) {
-    throw new Error(
-      `You cannot perform a destructive action on your own account as a Super Admin`,
-    );
-  }
-}
diff --git a/apps/web/app/admin/users/@modal/[uid]/ban/page.tsx b/apps/web/app/admin/users/@modal/[uid]/ban/page.tsx
deleted file mode 100644
index 7c5ab37a1..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/ban/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { use } from 'react';
-
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
-import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
-import BanUserModal from '../components/BanUserModal';
-
-interface Params {
-  params: {
-    uid: string;
-  };
-}
-
-function BanUserModalPage({ params }: Params) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const { data, error } = use(client.auth.admin.getUserById(params.uid));
-
-  if (!data || error) {
-    throw new Error(`User not found`);
-  }
-
-  const user = data.user;
-  const isBanned = 'banned_until' in user && user.banned_until !== 'none';
-
-  if (isBanned) {
-    throw new Error(`The user is already banned`);
-  }
-
-  return <BanUserModal user={user} />;
-}
-
-export default AdminGuard(BanUserModalPage);
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx b/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx
deleted file mode 100644
index 676cd9bf5..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/components/BanUserModal.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { useFormStatus } from 'react-dom';
-
-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';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@kit/ui/dialog';
-import { Input } from '@kit/ui/input';
-import { Label } from '@kit/ui/label';
-
-import { banUser } from '../actions.server';
-
-function BanUserModal({
-  user,
-}: React.PropsWithChildren<{
-  user: User;
-}>) {
-  const router = useRouter();
-  const [isOpen, setIsOpen] = useState(true);
-  const csrfToken = useCsrfToken();
-  const displayText = user.email ?? user.phone ?? '';
-
-  const onDismiss = () => {
-    router.back();
-
-    setIsOpen(false);
-  };
-
-  const onConfirm = async () => {
-    await banUser({
-      userId: user.id,
-      csrfToken,
-    });
-
-    onDismiss();
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onDismiss}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Ban User</DialogTitle>
-
-          <ErrorBoundary fallback={<BanErrorAlert />}>
-            <form action={onConfirm}>
-              <div className={'flex flex-col space-y-4'}>
-                <div className={'flex flex-col space-y-2 text-sm'}>
-                  <p>
-                    You are about to ban <b>{displayText}</b>.
-                  </p>
-
-                  <p>
-                    You can unban them later, but they will not be able to log
-                    in or use their account until you do.
-                  </p>
-
-                  <Label>
-                    Type <b>BAN</b> to confirm
-                    <Input type="text" required pattern={'BAN'} />
-                  </Label>
-
-                  <p>Are you sure you want to do this?</p>
-                </div>
-
-                <div className={'flex justify-end space-x-2.5'}>
-                  <SubmitButton />
-                </div>
-              </div>
-            </form>
-          </ErrorBoundary>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function SubmitButton() {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button disabled={pending} variant={'destructive'}>
-      Yes, ban user
-    </Button>
-  );
-}
-
-export default BanUserModal;
-
-function BanErrorAlert() {
-  return (
-    <Alert variant={'destructive'}>
-      <AlertTitle>There was an error banning this user.</AlertTitle>
-
-      <AlertDescription>Check the logs for more information.</AlertDescription>
-    </Alert>
-  );
-}
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/DeleteUserModal.tsx b/apps/web/app/admin/users/@modal/[uid]/components/DeleteUserModal.tsx
deleted file mode 100644
index ca0e1d0f4..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/components/DeleteUserModal.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import type { User } from '@supabase/gotrue-js';
-
-import useCsrfToken from '@kit/hooks/use-csrf-token';
-import { Button } from '@kit/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@kit/ui/dialog';
-import { Input } from '@kit/ui/input';
-import { Label } from '@kit/ui/label';
-
-import { deleteUserAction } from '../actions.server';
-
-function DeleteUserModal({
-  user,
-}: React.PropsWithChildren<{
-  user: User;
-}>) {
-  const router = useRouter();
-  const [isOpen, setIsOpen] = useState(true);
-  const [pending, startTransition] = useTransition();
-  const csrfToken = useCsrfToken();
-  const displayText = user.email ?? user.phone ?? '';
-
-  const onDismiss = () => {
-    router.back();
-
-    setIsOpen(false);
-  };
-
-  const onConfirm = () => {
-    startTransition(async () => {
-      await deleteUserAction({
-        userId: user.id,
-        csrfToken,
-      });
-
-      onDismiss();
-    });
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onDismiss}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Deleting User</DialogTitle>
-        </DialogHeader>
-
-        <form action={onConfirm}>
-          <div className={'flex flex-col space-y-4'}>
-            <div className={'flex flex-col space-y-2 text-sm'}>
-              <p>
-                You are about to delete the user <b>{displayText}</b>.
-              </p>
-
-              <p>
-                Delete this user will also delete the organizations they are a
-                Owner of, and potentially the data associated with those
-                organizations.
-              </p>
-
-              <p>
-                <b>This action is not reversible</b>.
-              </p>
-
-              <p>Are you sure you want to do this?</p>
-            </div>
-
-            <div>
-              <Label>
-                Confirm by typing <b>DELETE</b>
-                <Input required type={'text'} pattern={'DELETE'} />
-              </Label>
-            </div>
-
-            <div className={'flex justify-end space-x-2.5'}>
-              <Button disabled={pending} variant={'destructive'}>
-                Yes, delete user
-              </Button>
-            </div>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default DeleteUserModal;
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx b/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx
deleted file mode 100644
index 70cfd8cfc..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserAuthSetter.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import Spinner from '@/components/app/Spinner';
-
-import useSupabase from '@kit/hooks/use-supabase';
-
-function ImpersonateUserAuthSetter({
-  tokens,
-}: React.PropsWithChildren<{
-  tokens: {
-    accessToken: string;
-    refreshToken: string;
-  };
-}>) {
-  const supabase = useSupabase();
-  const router = useRouter();
-
-  useEffect(() => {
-    async function setAuth() {
-      await supabase.auth.setSession({
-        refresh_token: tokens.refreshToken,
-        access_token: tokens.accessToken,
-      });
-
-      router.push('/dashboard');
-    }
-
-    void setAuth();
-  }, [router, tokens, supabase.auth]);
-
-  return (
-    <div
-      className={
-        'flex h-screen w-screen flex-1 flex-col items-center justify-center'
-      }
-    >
-      <div className={'flex flex-col items-center space-y-4'}>
-        <Spinner />
-
-        <div>
-          <p>Setting up your session...</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ImpersonateUserAuthSetter;
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx b/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx
deleted file mode 100644
index 4a2713ce3..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/components/ImpersonateUserConfirmationModal.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-
-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';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@kit/ui/dialog';
-
-import { impersonateUser } from '../actions.server';
-import ImpersonateUserAuthSetter from '../components/ImpersonateUserAuthSetter';
-
-function ImpersonateUserConfirmationModal({
-  user,
-}: React.PropsWithChildren<{
-  user: User;
-}>) {
-  const router = useRouter();
-  const [isOpen, setIsOpen] = useState(true);
-  const [pending, startTransition] = useTransition();
-  const csrfToken = useCsrfToken();
-  const [error, setError] = useState<boolean>();
-
-  const [tokens, setTokens] = useState<{
-    accessToken: string;
-    refreshToken: string;
-  }>();
-
-  const displayText = user.email ?? user.phone ?? '';
-
-  const onDismiss = () => {
-    router.back();
-
-    setIsOpen(false);
-  };
-
-  const onConfirm = () => {
-    startTransition(async () => {
-      try {
-        const response = await impersonateUser({
-          userId: user.id,
-          csrfToken,
-        });
-
-        setTokens(response);
-      } catch (e) {
-        setError(true);
-      }
-    });
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onDismiss}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Impersonate User</DialogTitle>
-        </DialogHeader>
-
-        <If condition={tokens}>
-          {(tokens) => {
-            return (
-              <>
-                <ImpersonateUserAuthSetter tokens={tokens} />
-
-                <LoadingOverlay>Setting up your session...</LoadingOverlay>
-              </>
-            );
-          }}
-        </If>
-
-        <If condition={error}>
-          <Alert variant={'destructive'}>
-            <AlertTitle>Impersonation Error</AlertTitle>
-            <AlertDescription>
-              Sorry, something went wrong. Please check the logs.
-            </AlertDescription>
-          </Alert>
-        </If>
-
-        <If condition={!error && !tokens}>
-          <div className={'flex flex-col space-y-4'}>
-            <div className={'flex flex-col space-y-2 text-sm'}>
-              <p>
-                You are about to impersonate the account belonging to{' '}
-                <b>{displayText}</b> with ID <b>{user.id}</b>.
-              </p>
-
-              <p>
-                You will be able to log in as them, see and do everything they
-                can. To return to your own account, simply log out.
-              </p>
-
-              <p>
-                Like Uncle Ben said, with great power comes great
-                responsibility. Use this power wisely.
-              </p>
-            </div>
-
-            <div className={'flex justify-end space-x-2.5'}>
-              <Button
-                type={'button'}
-                disabled={pending}
-                variant={'destructive'}
-                onClick={onConfirm}
-              >
-                Yes, let&apos;s do it
-              </Button>
-            </div>
-          </div>
-        </If>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default ImpersonateUserConfirmationModal;
diff --git a/apps/web/app/admin/users/@modal/[uid]/components/ReactivateUserModal.tsx b/apps/web/app/admin/users/@modal/[uid]/components/ReactivateUserModal.tsx
deleted file mode 100644
index 10611be1a..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/components/ReactivateUserModal.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import type { User } from '@supabase/gotrue-js';
-
-import useCsrfToken from '@kit/hooks/use-csrf-token';
-import { Button } from '@kit/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@kit/ui/dialog';
-
-import { reactivateUser } from '../actions.server';
-
-function ReactivateUserModal({
-  user,
-}: React.PropsWithChildren<{
-  user: User;
-}>) {
-  const router = useRouter();
-  const [isOpen, setIsOpen] = useState(true);
-  const [pending, startTransition] = useTransition();
-  const csrfToken = useCsrfToken();
-  const displayText = user.email ?? user.phone ?? '';
-
-  const onDismiss = () => {
-    router.back();
-
-    setIsOpen(false);
-  };
-
-  const onConfirm = () => {
-    startTransition(async () => {
-      await reactivateUser({
-        userId: user.id,
-        csrfToken,
-      });
-
-      onDismiss();
-    });
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onDismiss}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Reactivate User</DialogTitle>
-        </DialogHeader>
-
-        <div className={'flex flex-col space-y-4'}>
-          <div className={'flex flex-col space-y-2 text-sm'}>
-            <p>
-              You are about to reactivate the account belonging to{' '}
-              <b>{displayText}</b>.
-            </p>
-
-            <p>Are you sure you want to do this?</p>
-          </div>
-
-          <div className={'flex justify-end space-x-2.5'}>
-            <Button disabled={pending} onClick={onConfirm}>
-              Yes, reactivate user
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default ReactivateUserModal;
diff --git a/apps/web/app/admin/users/@modal/[uid]/delete/page.tsx b/apps/web/app/admin/users/@modal/[uid]/delete/page.tsx
deleted file mode 100644
index 6c3f04396..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/delete/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { use } from 'react';
-
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
-import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
-import DeleteUserModal from '../components/DeleteUserModal';
-
-interface Params {
-  params: {
-    uid: string;
-  };
-}
-
-function DeleteUserModalPage({ params }: Params) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const { data, error } = use(client.auth.admin.getUserById(params.uid));
-
-  if (!data || error) {
-    throw new Error(`User not found`);
-  }
-
-  return <DeleteUserModal user={data.user} />;
-}
-
-export default AdminGuard(DeleteUserModalPage);
diff --git a/apps/web/app/admin/users/@modal/[uid]/impersonate/page.tsx b/apps/web/app/admin/users/@modal/[uid]/impersonate/page.tsx
deleted file mode 100644
index dcd0856ff..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/impersonate/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { use } from 'react';
-
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
-import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
-import ImpersonateUserConfirmationModal from '../components/ImpersonateUserConfirmationModal';
-
-interface Params {
-  params: {
-    uid: string;
-  };
-}
-
-function ImpersonateUserModalPage({ params }: Params) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const { data, error } = use(client.auth.admin.getUserById(params.uid));
-
-  if (!data || error) {
-    throw new Error(`User not found`);
-  }
-
-  return <ImpersonateUserConfirmationModal user={data.user} />;
-}
-
-export default AdminGuard(ImpersonateUserModalPage);
diff --git a/apps/web/app/admin/users/@modal/[uid]/reactivate/page.tsx b/apps/web/app/admin/users/@modal/[uid]/reactivate/page.tsx
deleted file mode 100644
index 38b0d1149..000000000
--- a/apps/web/app/admin/users/@modal/[uid]/reactivate/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { use } from 'react';
-
-import { redirect } from 'next/navigation';
-
-import getSupabaseServerComponentClient from '@packages/supabase/server-component-client';
-
-import AdminGuard from '../../../../../../packages/admin/components/AdminGuard';
-import ReactivateUserModal from '../components/ReactivateUserModal';
-
-interface Params {
-  params: {
-    uid: string;
-  };
-}
-
-function ReactivateUserModalPage({ params }: Params) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const { data, error } = use(client.auth.admin.getUserById(params.uid));
-
-  if (!data || error) {
-    throw new Error(`User not found`);
-  }
-
-  const user = data.user;
-  const isActive = !('banned_until' in user) || user.banned_until === 'none';
-
-  if (isActive) {
-    redirect(`/admin/users`);
-  }
-
-  return <ReactivateUserModal user={user} />;
-}
-
-export default AdminGuard(ReactivateUserModalPage);
diff --git a/apps/web/app/admin/users/@modal/default.tsx b/apps/web/app/admin/users/@modal/default.tsx
deleted file mode 100644
index 6ddf1b76f..000000000
--- a/apps/web/app/admin/users/@modal/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null;
-}
diff --git a/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx b/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx
deleted file mode 100644
index 0db1b50d6..000000000
--- a/apps/web/app/admin/users/[uid]/components/UserActionsDropdown.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import If from '@/components/app/If';
-import { EllipsisVerticalIcon } from 'lucide-react';
-
-import { Button } from '@kit/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@kit/ui/dropdown-menu';
-
-function UserActionsDropdown({
-  uid,
-  isBanned,
-}: React.PropsWithChildren<{
-  uid: string;
-  isBanned: boolean;
-}>) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant={'ghost'}>
-          <span className={'flex items-center space-x-2.5'}>
-            <span>Manage User</span>
-
-            <EllipsisVerticalIcon className={'w-4'} />
-          </span>
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent>
-        <DropdownMenuItem asChild>
-          <Link href={`/admin/users/${uid}/impersonate`}>Impersonate</Link>
-        </DropdownMenuItem>
-
-        <If condition={!isBanned}>
-          <DropdownMenuItem asChild>
-            <Link
-              className={'text-orange-500'}
-              href={`/admin/users/${uid}/ban`}
-            >
-              Ban
-            </Link>
-          </DropdownMenuItem>
-        </If>
-
-        <If condition={isBanned}>
-          <DropdownMenuItem asChild>
-            <Link href={`/admin/users/${uid}/reactivate`}>Reactivate</Link>
-          </DropdownMenuItem>
-        </If>
-
-        <DropdownMenuItem asChild>
-          <Link className={'text-red-500'} href={`/admin/users/${uid}/delete`}>
-            Delete
-          </Link>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default UserActionsDropdown;
diff --git a/apps/web/app/admin/users/[uid]/page.tsx b/apps/web/app/admin/users/[uid]/page.tsx
deleted file mode 100644
index bb8c44859..000000000
--- a/apps/web/app/admin/users/[uid]/page.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-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';
-
-import { Badge } from '@kit/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
-import { Input } from '@kit/ui/input';
-import { Label } from '@kit/ui/label';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@kit/ui/table';
-
-import RoleBadge from '../../../(app)/[account]/account/organization/components/RoleBadge';
-import AdminGuard from '../../../../packages/admin/components/AdminGuard';
-import AdminHeader from '../../../../packages/admin/components/AdminHeader';
-import UserActionsDropdown from './components/UserActionsDropdown';
-
-interface Params {
-  params: {
-    uid: string;
-  };
-}
-
-export const metadata = {
-  title: `Manage User | ${configuration.name}`,
-};
-
-async function AdminUserPage({ params }: Params) {
-  const uid = params.uid;
-
-  const data = await loadData(uid);
-  const { auth, user } = data;
-  const displayName = user?.displayName;
-  const authUser = auth?.user;
-  const email = authUser?.email;
-  const phone = authUser?.phone;
-  const organizations = data.organizations ?? [];
-
-  const isBanned = Boolean(
-    authUser && 'banned_until' in authUser && authUser.banned_until !== 'none',
-  );
-
-  return (
-    <div className={'flex flex-1 flex-col'}>
-      <AdminHeader>Manage User</AdminHeader>
-
-      <PageBody>
-        <div className={'flex flex-col space-y-6'}>
-          <div className={'flex justify-between'}>
-            <Breadcrumbs displayName={displayName ?? email ?? ''} />
-
-            <div>
-              <UserActionsDropdown uid={uid} isBanned={isBanned} />
-            </div>
-          </div>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>User Details</CardTitle>
-            </CardHeader>
-
-            <CardContent>
-              <div className={'flex items-center space-x-2'}>
-                <div>
-                  <Label>Status</Label>
-                </div>
-
-                <div className={'inline-flex'}>
-                  {isBanned ? (
-                    <Badge variant={'destructive'}>Banned</Badge>
-                  ) : (
-                    <Badge variant={'success'}>Active</Badge>
-                  )}
-                </div>
-              </div>
-
-              <Label>
-                Display name
-                <Input
-                  className={'max-w-sm'}
-                  defaultValue={displayName ?? ''}
-                  disabled
-                />
-              </Label>
-
-              <Label>
-                Email
-                <Input
-                  className={'max-w-sm'}
-                  defaultValue={email ?? ''}
-                  disabled
-                />
-              </Label>
-
-              <Label>
-                Phone number
-                <Input
-                  className={'max-w-sm'}
-                  defaultValue={phone ?? ''}
-                  disabled
-                />
-              </Label>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Organizations</CardTitle>
-            </CardHeader>
-
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Organization ID</TableHead>
-                    <TableHead>UUID</TableHead>
-                    <TableHead>Organization</TableHead>
-                    <TableHead>Role</TableHead>
-                  </TableRow>
-                </TableHeader>
-
-                <TableBody>
-                  {organizations.map((membership) => {
-                    const organization = membership.organization;
-                    const href = `/admin/organizations/${organization.uuid}/members`;
-
-                    return (
-                      <TableRow key={membership.id}>
-                        <TableCell>{organization.id}</TableCell>
-                        <TableCell>{organization.uuid}</TableCell>
-
-                        <TableCell>
-                          <Link className={'hover:underline'} href={href}>
-                            {organization.name}
-                          </Link>
-                        </TableCell>
-
-                        <TableCell>
-                          <div className={'inline-flex'}>
-                            <RoleBadge role={membership.role} />
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </div>
-      </PageBody>
-    </div>
-  );
-}
-
-export default AdminGuard(AdminUserPage);
-
-async function loadData(uid: string) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-  const authUser = client.auth.admin.getUserById(uid);
-
-  const userData = client
-    .from('users')
-    .select(
-      `
-      id,
-      displayName: display_name,
-      photoURL: photo_url,
-      onboarded
-  `,
-    )
-    .eq('id', uid)
-    .single();
-
-  const organizationsQuery = client
-    .from('memberships')
-    .select<
-      string,
-      {
-        id: number;
-        role: MembershipRole;
-        organization: {
-          id: number;
-          uuid: string;
-          name: string;
-        };
-      }
-    >(
-      `
-        id,
-        role,
-        organization: organization_id !inner (
-          id, 
-          uuid,
-          name
-        )
-    `,
-    )
-    .eq('user_id', uid);
-
-  const [auth, user, organizations] = await Promise.all([
-    authUser,
-    userData,
-    organizationsQuery,
-  ]);
-
-  return {
-    auth: auth.data,
-    user: user.data,
-    organizations: organizations.data,
-  };
-}
-
-function Breadcrumbs(
-  props: React.PropsWithChildren<{
-    displayName: string;
-  }>,
-) {
-  return (
-    <div className={'flex items-center space-x-1 p-2 text-xs'}>
-      <Link href={'/admin'}>Admin</Link>
-      <ChevronRightIcon className={'w-3'} />
-      <Link href={'/admin/users'}>Users</Link>
-      <ChevronRightIcon className={'w-3'} />
-      <span>{props.displayName}</span>
-    </div>
-  );
-}
diff --git a/apps/web/app/admin/users/default.tsx b/apps/web/app/admin/users/default.tsx
deleted file mode 100644
index 6ddf1b76f..000000000
--- a/apps/web/app/admin/users/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null;
-}
diff --git a/apps/web/app/admin/users/error.tsx b/apps/web/app/admin/users/error.tsx
deleted file mode 100644
index 5e83f1d7a..000000000
--- a/apps/web/app/admin/users/error.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { PageBody } from '@/components/app/Page';
-
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-
-function UsersAdminPageError() {
-  return (
-    <PageBody>
-      <Alert variant={'destructive'}>
-        <AlertTitle>Could not load users</AlertTitle>
-        <AlertDescription>
-          There was an error loading the users. Please check your console
-          errors.
-        </AlertDescription>
-      </Alert>
-    </PageBody>
-  );
-}
-
-export default UsersAdminPageError;
diff --git a/apps/web/app/admin/users/layout.tsx b/apps/web/app/admin/users/layout.tsx
deleted file mode 100644
index 28dd86068..000000000
--- a/apps/web/app/admin/users/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-function UserLayout(
-  props: React.PropsWithChildren<{
-    modal: React.ReactNode;
-  }>,
-) {
-  return (
-    <>
-      {props.modal}
-      {props.children}
-    </>
-  );
-}
-
-export default UserLayout;
diff --git a/apps/web/app/admin/users/page.tsx b/apps/web/app/admin/users/page.tsx
deleted file mode 100644
index ce7401a26..000000000
--- a/apps/web/app/admin/users/page.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-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 AdminGuard from '../../../packages/admin/components/AdminGuard';
-import AdminHeader from '../../../packages/admin/components/AdminHeader';
-import getPageFromQueryParams from '../utils/get-page-from-query-param';
-import { getUsers } from './queries';
-
-interface UsersAdminPageProps {
-  searchParams: {
-    page?: string;
-  };
-}
-
-export const metadata = {
-  title: `Users | ${appConfig.name}`,
-};
-
-async function UsersAdminPage({ searchParams }: UsersAdminPageProps) {
-  const page = getPageFromQueryParams(searchParams.page);
-  const perPage = 1;
-  const { users, total } = await loadUsers(page, perPage);
-  const pageCount = Math.ceil(total / perPage);
-
-  return (
-    <div className={'flex flex-1 flex-col'}>
-      <AdminHeader>Users</AdminHeader>
-
-      <PageBody></PageBody>
-    </div>
-  );
-}
-
-export default AdminGuard(UsersAdminPage);
-
-async function loadAuthUsers(page = 1, perPage = 20) {
-  const client = getSupabaseServerComponentClient({ admin: true });
-
-  const response = await client.auth.admin.listUsers({
-    page,
-    perPage,
-  });
-
-  if (response.error) {
-    throw response.error;
-  }
-
-  return response.data;
-}
-
-async function loadUsers(page = 1, perPage = 20) {
-  const { users: authUsers, total } = await loadAuthUsers(page, perPage);
-
-  const ids = authUsers.map((user) => user.id);
-  const usersData = await getUsers(ids);
-
-  const users = authUsers
-    .map((user) => {
-      const data = usersData.find((u) => u.id === user.id) as UserData;
-
-      const banDuration =
-        'banned_until' in user ? (user.banned_until as string) : 'none';
-
-      return {
-        id: user.id,
-        email: user.email,
-        phone: user.phone,
-        createdAt: user.created_at,
-        updatedAt: user.updated_at,
-        lastSignInAt: user.last_sign_in_at,
-        banDuration,
-        data,
-      };
-    })
-    .filter(Boolean);
-
-  return {
-    total,
-    users,
-  };
-}
diff --git a/apps/web/app/admin/users/queries.ts b/apps/web/app/admin/users/queries.ts
deleted file mode 100644
index 0acb10f24..000000000
--- a/apps/web/app/admin/users/queries.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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 });
-
-  const { data: users, error } = await client
-    .from(USERS_TABLE)
-    .select(
-      `
-      id,
-      photoURL: photo_url,
-      displayName: display_name,
-      onboarded
-    `,
-    )
-    .in('id', ids);
-
-  if (error) {
-    throw error;
-  }
-
-  return users;
-}
diff --git a/apps/web/app/admin/utils/get-page-from-query-param.ts b/apps/web/app/admin/utils/get-page-from-query-param.ts
deleted file mode 100644
index 3a93a1291..000000000
--- a/apps/web/app/admin/utils/get-page-from-query-param.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Get page from query params
- * @name getPageFromQueryParams
- * @param pageParam
- */
-function getPageFromQueryParams(pageParam: string | undefined) {
-  const page = pageParam ? parseInt(pageParam) : 1;
-
-  if (Number.isNaN(page) || page <= 0) {
-    return 1;
-  }
-
-  return page;
-}
-
-export default getPageFromQueryParams;
diff --git a/apps/web/app/admin/utils/is-user-super-admin.ts b/apps/web/app/admin/utils/is-user-super-admin.ts
deleted file mode 100644
index 53f587a45..000000000
--- a/apps/web/app/admin/utils/is-user-super-admin.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { SupabaseClient } from '@supabase/supabase-js';
-
-import { Database } from '@kit/supabase/database';
-
-/**
- * @name ENFORCE_MFA
- * @description Set this constant to true if you want the SuperAdmin user to
- * sign in using MFA when accessing the Admin page
- */
-const ENFORCE_MFA = false;
-
-/**
- * @name isUserSuperAdmin
- * @description Checks if the current user is an admin by checking the
- * user_metadata.role field in Supabase Auth is set to a SuperAdmin role.
- */
-const isUserSuperAdmin = async (params: {
-  client: SupabaseClient<Database>;
-  enforceMfa?: boolean;
-}) => {
-  const enforceMfa = params.enforceMfa ?? ENFORCE_MFA;
-  const { data, error } = await params.client.auth.getUser();
-
-  if (error) {
-    return false;
-  }
-
-  // If we enforce MFA, we need to check that the user is MFA authenticated.
-  if (enforceMfa) {
-    const isMfaAuthenticated = await verifyIsMultiFactorAuthenticated(
-      params.client,
-    );
-
-    if (!isMfaAuthenticated) {
-      return false;
-    }
-  }
-
-  const adminMetadata = data.user?.app_metadata;
-  const role = adminMetadata?.role;
-
-  return role === 'super-admin';
-};
-
-export default isUserSuperAdmin;
-
-async function verifyIsMultiFactorAuthenticated(client: SupabaseClient) {
-  const { data, error } =
-    await client.auth.mfa.getAuthenticatorAssuranceLevel();
-
-  if (error || !data) {
-    return false;
-  }
-
-  return data.currentLevel === 'aal2';
-}
diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
index b7af07fe5..613518207 100644
--- a/apps/web/app/error.tsx
+++ b/apps/web/app/error.tsx
@@ -8,7 +8,7 @@ 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 { SiteHeader } from '~/(marketing)/_components/site-header';
 
 const ErrorPage = () => {
   return (
diff --git a/apps/web/app/join/_components/ExistingUserInviteForm.tsx b/apps/web/app/join/_components/ExistingUserInviteForm.tsx
deleted file mode 100644
index ab4348584..000000000
--- a/apps/web/app/join/_components/ExistingUserInviteForm.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client';
-
-import { useCallback, useTransition } from 'react';
-
-import type { Session } from '@supabase/gotrue-js';
-
-import useRefreshRoute from '@kit/shared/hooks/use-refresh-route';
-import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
-import { Button } from '@kit/ui/button';
-import { Trans } from '@kit/ui/trans';
-
-function ExistingUserInviteForm(
-  props: React.PropsWithChildren<{
-    session: Session;
-    code: string;
-  }>,
-) {
-  const signOut = useSignOut();
-  const refresh = useRefreshRoute();
-  const [isSubmitting, startTransition] = useTransition();
-
-  const onSignOut = useCallback(async () => {
-    await signOut.mutateAsync();
-    refresh();
-  }, [refresh, signOut]);
-
-  const onInviteAccepted = useCallback(() => {
-    return startTransition(async () => {
-      await acceptInviteAction({
-        code: props.code,
-      });
-    });
-  }, [props.code, startTransition]);
-
-  return (
-    <>
-      <div className={'flex flex-col space-y-4'}>
-        <p className={'text-center text-sm'}>
-          <Trans
-            i18nKey={'auth:clickToAcceptAs'}
-            values={{ email: props.session?.user.email }}
-            components={{ b: <b /> }}
-          />
-        </p>
-
-        <Button
-          className={'w-full'}
-          disabled={isSubmitting}
-          onClick={onInviteAccepted}
-          data-test={'accept-invite-submit-button'}
-          type={'submit'}
-        >
-          <Trans i18nKey={'auth:acceptInvite'} />
-        </Button>
-
-        <div>
-          <div className={'flex flex-col space-y-4'}>
-            <p className={'text-center'}>
-              <span
-                className={
-                  'text-center text-sm text-gray-700 dark:text-gray-300'
-                }
-              >
-                <Trans i18nKey={'auth:acceptInviteWithDifferentAccount'} />
-              </span>
-            </p>
-
-            <div className={'flex justify-center'}>
-              <Button
-                data-test={'invite-sign-out-button'}
-                disabled={isSubmitting}
-                variant={'ghost'}
-                size={'sm'}
-                onClick={onSignOut}
-                type={'button'}
-              >
-                <Trans i18nKey={'auth:signOut'} />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default ExistingUserInviteForm;
diff --git a/apps/web/app/join/_components/NewUserInviteForm.tsx b/apps/web/app/join/_components/NewUserInviteForm.tsx
deleted file mode 100644
index 0a4acffbf..000000000
--- a/apps/web/app/join/_components/NewUserInviteForm.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client';
-
-import { useCallback, useState, useTransition } from 'react';
-
-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';
-import { EmailPasswordSignUpContainer } from '@kit/auth/src/components/password-sign-up-container';
-import { isBrowser } from '@kit/shared/utils';
-import { Button } from '@kit/ui/button';
-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,
-}
-
-function NewUserInviteForm(
-  props: React.PropsWithChildren<{
-    code: string;
-  }>,
-) {
-  const [mode, setMode] = useState<Mode>(Mode.SignUp);
-  const [isSubmitting, startTransition] = useTransition();
-  const oAuthReturnUrl = isBrowser() ? window.location.pathname : '';
-
-  const onInviteAccepted = useCallback(
-    async (userId?: string) => {
-      startTransition(async () => {
-        await acceptInviteAction({
-          code: props.code,
-          userId,
-        });
-      });
-    },
-    [props.code],
-  );
-
-  return (
-    <>
-      <If condition={isSubmitting}>
-        <LoadingOverlay fullPage>
-          Accepting invite. Please wait...
-        </LoadingOverlay>
-      </If>
-
-      <OauthProviders inviteCode={props.code} returnUrl={oAuthReturnUrl} />
-
-      <If condition={authConfig.providers.password}>
-        <If condition={mode === Mode.SignUp}>
-          <div className={'flex w-full flex-col items-center space-y-4'}>
-            <EmailPasswordSignUpContainer
-              emailRedirectTo={emailRedirectTo}
-              onSignUp={onInviteAccepted}
-            />
-
-            <Button
-              className={'w-full'}
-              variant={'ghost'}
-              size={'sm'}
-              onClick={() => setMode(Mode.SignIn)}
-            >
-              <Trans i18nKey={'auth:alreadyHaveAccountStatement'} />
-            </Button>
-          </div>
-        </If>
-
-        <If condition={mode === Mode.SignIn}>
-          <div className={'flex w-full flex-col items-center space-y-4'}>
-            <PasswordSignInContainer onSignIn={onInviteAccepted} />
-
-            <Button
-              className={'w-full'}
-              variant={'ghost'}
-              size={'sm'}
-              onClick={() => setMode(Mode.SignUp)}
-            >
-              <Trans i18nKey={'auth:doNotHaveAccountStatement'} />
-            </Button>
-          </div>
-        </If>
-      </If>
-
-      <If condition={authConfig.providers.magicLink}>
-        <MagicLinkAuth inviteCode={props.code} />
-      </If>
-
-      <If condition={authConfig.providers.otp}>
-        <EmailOtpContainer
-          inviteCode={props.code}
-          shouldCreateUser={true}
-          onSuccess={onInviteAccepted}
-        />
-      </If>
-    </>
-  );
-}
-
-export default NewUserInviteForm;
diff --git a/apps/web/app/join/page.tsx b/apps/web/app/join/page.tsx
index f3c9c364b..03dbbf067 100644
--- a/apps/web/app/join/page.tsx
+++ b/apps/web/app/join/page.tsx
@@ -1,17 +1,10 @@
-import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 
-import type { SupabaseClient } from '@supabase/supabase-js';
-
-import { Logger } from '@kit/shared/logger';
-import { Database } from '@kit/supabase/database';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
-import ExistingUserInviteForm from '~/join/_components/ExistingUserInviteForm';
-import NewUserInviteForm from '~/join/_components/NewUserInviteForm';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 interface Context {
@@ -28,12 +21,10 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
   const token = searchParams.invite_token;
   const data = await getInviteDataFromInviteToken(token);
 
-  if (!data.membership) {
+  if (!data) {
     notFound();
   }
 
-  const organization = data.membership.organization;
-
   return (
     <>
       <Heading level={4}>
@@ -62,70 +53,26 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
           </If>
         </p>
       </div>
-
-      <If
-        condition={data.session}
-        fallback={<NewUserInviteForm code={token} />}
-      >
-        {(session) => <ExistingUserInviteForm code={token} session={session} />}
-      </If>
     </>
   );
 }
 
 export default withI18n(JoinTeamAccountPage);
 
-async function getInviteDataFromInviteToken(code: string) {
-  const client = getSupabaseServerComponentClient();
-
+async function getInviteDataFromInviteToken(token: string) {
   // we use an admin client to be able to read the pending membership
   // without having to be logged in
   const adminClient = getSupabaseServerComponentClient({ admin: true });
 
-  const { data: membership, error } = await getInvite(adminClient, code);
+  const { data: invitation, error } = await adminClient
+    .from('invitations')
+    .select('*')
+    .eq('invite_token', token)
+    .single();
 
-  // if the invite wasn't found, it's 404
-  if (error) {
-    Logger.warn(
-      {
-        code,
-        error,
-      },
-      `User navigated to invite page, but it wasn't found. Redirecting to home page...`,
-    );
-
-    notFound();
+  if (!invitation ?? error) {
+    return null;
   }
 
-  const { data: userSession } = await client.auth.getSession();
-  const session = userSession?.session;
-  const csrfToken = headers().get('x-csrf-token');
-
-  return {
-    csrfToken,
-    session,
-    membership,
-    code,
-  };
-}
-
-function getInvite(adminClient: SupabaseClient<Database>, code: string) {
-  return getMembershipByInviteCode<{
-    id: number;
-    code: string;
-    organization: {
-      name: string;
-      id: number;
-    };
-  }>(adminClient, {
-    code,
-    query: `
-      id,
-      code,
-      organization: organization_id (
-        name,
-        id
-      )
-    `,
-  });
+  return invitation;
 }
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 49f086c1c..bbdd6a773 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,12 +1,12 @@
 import Link from 'next/link';
 
-import { ArrowLeftIcon } from '@radix-ui/react-icons';
+import { ArrowLeftIcon } from 'lucide-react';
 
 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 { SiteHeader } from '~/(marketing)/_components/site-header';
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -17,7 +17,7 @@ export const metadata = {
 const NotFoundPage = () => {
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader />
+      <SiteHeader session={null} />
 
       <div
         className={
diff --git a/apps/web/app/server-sitemap.xml/route.ts b/apps/web/app/server-sitemap.xml/route.ts
index 2e865552d..3baae3040 100644
--- a/apps/web/app/server-sitemap.xml/route.ts
+++ b/apps/web/app/server-sitemap.xml/route.ts
@@ -1,8 +1,8 @@
-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;
 
@@ -21,7 +21,7 @@ function getSiteUrls() {
 
   return urls.map((url) => {
     return {
-      loc: join(siteUrl, url),
+      loc: new URL(siteUrl, url).href,
       lastmod: new Date().toISOString(),
     };
   });
@@ -32,7 +32,7 @@ function getPostsSitemap() {
 
   return allPosts.map((post) => {
     return {
-      loc: join(siteUrl, post.url),
+      loc: new URL(siteUrl, post.url).href,
       lastmod: new Date().toISOString(),
     };
   });
@@ -43,7 +43,7 @@ function getDocsSitemap() {
 
   return allDocumentationPages.map((page) => {
     return {
-      loc: join(siteUrl, page.url),
+      loc: new URL(siteUrl, page.url).href,
       lastmod: new Date().toISOString(),
     };
   });
diff --git a/apps/web/app/update-password/page.tsx b/apps/web/app/update-password/page.tsx
index 95566fa19..6dbb5295c 100644
--- a/apps/web/app/update-password/page.tsx
+++ b/apps/web/app/update-password/page.tsx
@@ -1,9 +1,10 @@
 import { redirect } from 'next/navigation';
 
+import { PasswordResetForm } from '@kit/auth/password-reset';
 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 { AppLogo } from '~/components/app-logo';
 import pathsConfig from '~/config/paths.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -16,9 +17,11 @@ async function PasswordResetPage() {
     redirect(pathsConfig.auth.passwordReset);
   }
 
+  const redirectTo = `/${pathsConfig.auth.callback}?next=${pathsConfig.app.home}`;
+
   return (
-    <AuthLayoutShell>
-      <PasswordResetForm />
+    <AuthLayoutShell Logo={AppLogo}>
+      <PasswordResetForm redirectTo={redirectTo} />
     </AuthLayoutShell>
   );
 }
diff --git a/apps/web/components/root-providers.tsx b/apps/web/components/root-providers.tsx
index 2b5d29234..c19cd04dc 100644
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 
 import { I18nProvider } from '@kit/i18n/provider';
 import { AuthChangeListener } from '@kit/supabase/components/auth-change-listener';
@@ -8,21 +9,23 @@ import { AuthChangeListener } from '@kit/supabase/components/auth-change-listene
 import pathsConfig from '~/config/paths.config';
 import { i18nResolver } from '~/lib/i18n/i18n.resolver';
 
+const queryClient = new QueryClient();
+
 export function RootProviders({
   lang,
   children,
 }: React.PropsWithChildren<{
   lang: string;
 }>) {
-  const queryClient = new QueryClient();
-
   return (
     <QueryClientProvider client={queryClient}>
-      <AuthChangeListener appHomePath={pathsConfig.app.home}>
-        <I18nProvider lang={lang} resolver={i18nResolver}>
-          {children}
-        </I18nProvider>
-      </AuthChangeListener>
+      <ReactQueryStreamedHydration>
+        <AuthChangeListener appHomePath={pathsConfig.app.home}>
+          <I18nProvider lang={lang} resolver={i18nResolver}>
+            {children}
+          </I18nProvider>
+        </AuthChangeListener>
+      </ReactQueryStreamedHydration>
     </QueryClientProvider>
   );
 }
diff --git a/apps/web/config/paths.config.ts b/apps/web/config/paths.config.ts
index d35e6f6f4..c9bd9e605 100644
--- a/apps/web/config/paths.config.ts
+++ b/apps/web/config/paths.config.ts
@@ -33,7 +33,7 @@ const pathsConfig = PathsSchema.parse({
   },
   app: {
     home: '/home',
-    personalAccountSettings: '/home/account',
+    personalAccountSettings: '/home/settings',
     personalAccountBilling: '/home/billing',
     personalAccountBillingReturn: '/home/billing/return',
     accountHome: '/home/[account]',
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index 2484cdfd1..ac16d8361 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -1,5 +1,8 @@
 import withBundleAnalyzer from '@next/bundle-analyzer';
 
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
+
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
@@ -17,6 +20,9 @@ const config = {
     '@kit/billing-gateway',
   ],
   pageExtensions: ['ts', 'tsx'],
+  images: {
+    remotePatterns: getRemotePatterns(),
+  },
   experimental: {
     mdxRs: true,
   },
@@ -28,3 +34,25 @@ const config = {
 export default withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
 })(config);
+
+function getRemotePatterns() {
+  // add here the remote patterns for your images
+  const remotePatterns = [];
+
+  if (SUPABASE_URL) {
+    const hostname = new URL(SUPABASE_URL).hostname;
+    remotePatterns.push({
+      protocol: 'https',
+      hostname,
+    });
+  }
+
+  return IS_PRODUCTION
+    ? remotePatterns
+    : [
+        {
+          protocol: 'http',
+          hostname: '127.0.0.1',
+        },
+      ];
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index f0b28e9bd..e77f2b9e9 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@kit/web",
+  "name": "web",
   "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",
+    "dev": "pnpm with-env next dev --turbo",
     "lint": "next lint",
     "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
     "start": "pnpm with-env next start",
@@ -31,6 +31,7 @@
     "@supabase/ssr": "^0.1.0",
     "@supabase/supabase-js": "^2.39.8",
     "@tanstack/react-query": "^5.17.15",
+    "@tanstack/react-query-next-experimental": "^5.28.6",
     "@tanstack/react-table": "^8.11.3",
     "@epic-web/invariant": "^1.0.0",
     "@radix-ui/react-icons": "^1.3.0",
@@ -43,7 +44,8 @@
     "next-contentlayer": "0.3.4",
     "react-i18next": "^14.1.0",
     "date-fns": "^3.2.0",
-    "next": "^14.1.0",
+    "next": "^14.2.0-canary.41",
+    "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -58,7 +60,7 @@
     "@kit/prettier-config": "^0.1.0",
     "@kit/tailwind-config": "^0.1.0",
     "@kit/tsconfig": "^0.1.0",
-    "@next/bundle-analyzer": "^14.1.4",
+    "@next/bundle-analyzer": "^14.2.0-canary.41",
     "@types/mdx": "^2.0.10",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx b/packages/billing-gateway/src/components/billing-session-status.tsx
similarity index 83%
rename from apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx
rename to packages/billing-gateway/src/components/billing-session-status.tsx
index 4be6a9527..c553f6653 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/subscription/return/components/billing-session-status.tsx
+++ b/packages/billing-gateway/src/components/billing-session-status.tsx
@@ -3,14 +3,11 @@
 import Link from 'next/link';
 
 import { CheckIcon, ChevronRightIcon } from 'lucide-react';
-import type { Stripe } from 'stripe';
 
 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
@@ -23,26 +20,34 @@ import pathsConfig from '~/config/paths.config';
  */
 export function BillingSessionStatus({
   customerEmail,
+  redirectPath,
 }: React.PropsWithChildren<{
-  status: Stripe.Checkout.Session['status'];
   customerEmail: string;
+  redirectPath: string;
 }>) {
-  return <SuccessSessionStatus customerEmail={customerEmail} />;
+  return (
+    <SuccessSessionStatus
+      redirectPath={redirectPath}
+      customerEmail={customerEmail}
+    />
+  );
 }
 
 function SuccessSessionStatus({
   customerEmail,
+  redirectPath,
 }: React.PropsWithChildren<{
   customerEmail: string;
+  redirectPath: string;
 }>) {
   return (
     <section
       data-test={'payment-return-success'}
       className={
-        'mx-auto max-w-xl rounded-xl border p-16 fade-in xl:drop-shadow-sm' +
+        'fade-in mx-auto max-w-xl rounded-xl border p-16 xl:drop-shadow-sm' +
         ' dark:border-dark-800 border-gray-100' +
-        ' bg-background ease-out animate-in slide-in-from-bottom-8' +
-        ' duration-1000 zoom-in-50 dark:shadow-2xl dark:shadow-primary/40'
+        ' bg-background animate-in slide-in-from-bottom-8 ease-out' +
+        ' zoom-in-50 dark:shadow-primary/40 duration-1000 dark:shadow-2xl'
       }
     >
       <div
@@ -76,7 +81,7 @@ function SuccessSessionStatus({
         </div>
 
         <Button data-test={'checkout-success-back-button'} variant={'outline'}>
-          <Link href={pathsConfig.app.home}>
+          <Link href={redirectPath}>
             <span className={'flex items-center space-x-2.5'}>
               <span>
                 <Trans i18nKey={'subscription:checkoutSuccessBackButton'} />
diff --git a/packages/billing-gateway/src/components/embedded-checkout.tsx b/packages/billing-gateway/src/components/embedded-checkout.tsx
index afe209f14..6c6c60a76 100644
--- a/packages/billing-gateway/src/components/embedded-checkout.tsx
+++ b/packages/billing-gateway/src/components/embedded-checkout.tsx
@@ -8,11 +8,17 @@ export function EmbeddedCheckout(
   props: React.PropsWithChildren<{
     checkoutToken: string;
     provider: BillingProvider;
+    onClose?: () => void;
   }>,
 ) {
   const CheckoutComponent = loadCheckoutComponent(props.provider);
 
-  return <CheckoutComponent checkoutToken={props.checkoutToken} />;
+  return (
+    <CheckoutComponent
+      onClose={props.onClose}
+      checkoutToken={props.checkoutToken}
+    />
+  );
 }
 
 function loadCheckoutComponent(provider: BillingProvider) {
diff --git a/packages/billing-gateway/src/components/index.ts b/packages/billing-gateway/src/components/index.ts
index 67c25f1bf..b32a7a6cd 100644
--- a/packages/billing-gateway/src/components/index.ts
+++ b/packages/billing-gateway/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './plan-picker';
 export * from './current-plan-card';
 export * from './embedded-checkout';
+export * from './billing-session-status';
diff --git a/packages/billing-gateway/src/components/plan-picker.tsx b/packages/billing-gateway/src/components/plan-picker.tsx
index c72a8bee8..ad6b345d6 100644
--- a/packages/billing-gateway/src/components/plan-picker.tsx
+++ b/packages/billing-gateway/src/components/plan-picker.tsx
@@ -38,6 +38,8 @@ export function PlanPicker(
   }, []);
 
   const form = useForm({
+    reValidateMode: 'onChange',
+    mode: 'onChange',
     resolver: zodResolver(
       z
         .object({
@@ -56,7 +58,7 @@ export function PlanPicker(
 
             return intervals.includes(data.interval);
           },
-          { message: 'Invalid plan', path: ['planId'] },
+          { message: `Please pick a plan to continue`, path: ['planId'] },
         ),
     ),
     defaultValues: {
@@ -65,7 +67,7 @@ export function PlanPicker(
     },
   });
 
-  const selectedInterval = form.watch('interval');
+  const { interval: selectedInterval } = form.watch();
 
   return (
     <Form {...form}>
@@ -101,8 +103,12 @@ export function PlanPicker(
                               id={interval}
                               value={interval}
                               onClick={() => {
-                                form.setValue('planId', '');
-                                form.setValue('interval', interval);
+                                form.setValue('planId', '', {
+                                  shouldValidate: true,
+                                });
+                                form.setValue('interval', interval, {
+                                  shouldValidate: true,
+                                });
                               }}
                             />
 
@@ -149,7 +155,9 @@ export function PlanPicker(
                           id={variant.id}
                           value={variant.id}
                           onClick={() => {
-                            form.setValue('planId', variant.id);
+                            form.setValue('planId', variant.id, {
+                              shouldValidate: true,
+                            });
                           }}
                         />
 
@@ -198,7 +206,7 @@ export function PlanPicker(
         />
 
         <div>
-          <Button disabled={props.pending}>
+          <Button disabled={props.pending || !form.formState.isValid}>
             {props.pending ? (
               'Processing...'
             ) : (
diff --git a/packages/billing/src/services/billing-strategy-provider.service.ts b/packages/billing/src/services/billing-strategy-provider.service.ts
index 63f500509..8460d617b 100644
--- a/packages/billing/src/services/billing-strategy-provider.service.ts
+++ b/packages/billing/src/services/billing-strategy-provider.service.ts
@@ -16,7 +16,15 @@ export abstract class BillingStrategyProviderService {
 
   abstract retrieveCheckoutSession(
     params: z.infer<typeof RetrieveCheckoutSessionSchema>,
-  ): Promise<unknown>;
+  ): Promise<{
+    checkoutToken: string | null;
+    status: 'complete' | 'expired' | 'open';
+    isSessionOpen: boolean;
+
+    customer: {
+      email: string | null;
+    };
+  }>;
 
   abstract createCheckoutSession(
     params: z.infer<typeof CreateBillingCheckoutSchema>,
diff --git a/packages/features/accounts/src/components/personal-account-dropdown.tsx b/packages/features/accounts/src/components/personal-account-dropdown.tsx
index d4867e5cc..5683cba77 100644
--- a/packages/features/accounts/src/components/personal-account-dropdown.tsx
+++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx
@@ -36,7 +36,7 @@ export function PersonalAccountDropdown({
   paths,
 }: {
   className?: string;
-  session: Session | undefined;
+  session: Session | null;
   signOutRequested: () => unknown;
   showProfileName?: boolean;
   paths: {
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx
index 1ae6ac9cb..ee7892732 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx
@@ -28,12 +28,13 @@ const AccountInfoSchema = z.object({
 export function UpdateAccountDetailsForm({
   displayName,
   onUpdate,
+  userId,
 }: {
   displayName: string;
   userId: string;
   onUpdate: (user: Partial<UpdateUserDataParams>) => void;
 }) {
-  const updateAccountMutation = useUpdateAccountData();
+  const updateAccountMutation = useUpdateAccountData(userId);
   const { t } = useTranslation();
 
   const form = useForm({
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
index 336005eab..80ec33663 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
@@ -29,7 +29,7 @@ export function UpdateAccountImageContainer() {
 
   return (
     <UploadProfileAvatarForm
-      currentPhotoURL={accountData.data.picture_url}
+      pictureUrl={accountData.data.picture_url ?? null}
       userId={accountData.data.id}
       onAvatarUpdated={revalidateUserDataQuery}
     />
@@ -37,7 +37,7 @@ export function UpdateAccountImageContainer() {
 }
 
 function UploadProfileAvatarForm(props: {
-  currentPhotoURL: string | null;
+  pictureUrl: string | null;
   userId: string;
   onAvatarUpdated: () => void;
 }) {
@@ -58,10 +58,9 @@ function UploadProfileAvatarForm(props: {
   const onValueChange = useCallback(
     (file: File | null) => {
       const removeExistingStorageFile = () => {
-        if (props.currentPhotoURL) {
+        if (props.pictureUrl) {
           return (
-            deleteProfilePhoto(client, props.currentPhotoURL) ??
-            Promise.resolve()
+            deleteProfilePhoto(client, props.pictureUrl) ?? Promise.resolve()
           );
         }
 
@@ -108,7 +107,7 @@ function UploadProfileAvatarForm(props: {
   );
 
   return (
-    <ImageUploader value={props.currentPhotoURL} onValueChange={onValueChange}>
+    <ImageUploader value={props.pictureUrl} onValueChange={onValueChange}>
       <div className={'flex flex-col space-y-1'}>
         <span className={'text-sm'}>
           <Trans i18nKey={'profile:profilePictureHeading'} />
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx
index 35517a005..b141a1971 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx
@@ -1,11 +1,16 @@
 'use client';
 
 import { useUser } from '@kit/supabase/hooks/use-user';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
 
 import { UpdateEmailForm } from './update-email-form';
 
 export function UpdateEmailFormContainer(props: { callbackPath: string }) {
-  const { data: user } = useUser();
+  const { data: user, isPending } = useUser();
+
+  if (isPending) {
+    return <LoadingOverlay />;
+  }
 
   if (!user) {
     return null;
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
index dbb57f7de..1e881a737 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
@@ -2,6 +2,7 @@
 
 import { useUser } from '@kit/supabase/hooks/use-user';
 import { Alert } from '@kit/ui/alert';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
 import { Trans } from '@kit/ui/trans';
 
 import { UpdatePasswordForm } from './update-password-form';
@@ -11,10 +12,10 @@ export function UpdatePasswordFormContainer(
     callbackPath: string;
   }>,
 ) {
-  const { data: user } = useUser();
+  const { data: user, isPending } = useUser();
 
-  if (!user) {
-    return null;
+  if (isPending) {
+    return <LoadingOverlay />;
   }
 
   const canUpdatePassword = user.identities?.some(
diff --git a/packages/features/auth/src/components/password-reset-form.tsx b/packages/features/auth/src/components/password-reset-form.tsx
index 88c4ab908..9c1a47015 100644
--- a/packages/features/auth/src/components/password-reset-form.tsx
+++ b/packages/features/auth/src/components/password-reset-form.tsx
@@ -23,7 +23,7 @@ import { Trans } from '@kit/ui/trans';
 
 import { PasswordResetSchema } from '../schemas/password-reset.schema';
 
-function PasswordResetForm(params: { redirectTo: string }) {
+export function PasswordResetForm(params: { redirectTo: string }) {
   const updateUser = useUpdateUser();
 
   const form = useForm<z.infer<typeof PasswordResetSchema>>({
@@ -109,8 +109,6 @@ function PasswordResetForm(params: { redirectTo: string }) {
   );
 }
 
-export default PasswordResetForm;
-
 function SuccessState() {
   return (
     <div className={'flex flex-col space-y-4'}>
diff --git a/packages/features/auth/src/password-reset.ts b/packages/features/auth/src/password-reset.ts
index 9b340f9db..6d1ec49d4 100644
--- a/packages/features/auth/src/password-reset.ts
+++ b/packages/features/auth/src/password-reset.ts
@@ -1 +1,2 @@
 export * from './components/password-reset-request-container';
+export * from './components/password-reset-form';
diff --git a/packages/features/team-accounts/src/actions/account-invitations-server-actions.ts b/packages/features/team-accounts/src/actions/account-invitations-server-actions.ts
index ffa311803..53b92655d 100644
--- a/packages/features/team-accounts/src/actions/account-invitations-server-actions.ts
+++ b/packages/features/team-accounts/src/actions/account-invitations-server-actions.ts
@@ -9,7 +9,9 @@ import { z } from 'zod';
 import { Database } from '@kit/supabase/database';
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
+import { DeleteInvitationSchema } from '../schema/delete-invitation.schema';
 import { InviteMembersSchema } from '../schema/invite-members.schema';
+import { UpdateInvitationSchema } from '../schema/update-invitation-schema';
 import { AccountInvitationsService } from '../services/account-invitations.service';
 
 /**
@@ -44,7 +46,11 @@ export async function createInvitationsAction(params: {
  *
  * @return {Object} - The result of the delete operation.
  */
-export async function deleteInvitationAction(params: { invitationId: string }) {
+export async function deleteInvitationAction(
+  params: z.infer<typeof DeleteInvitationSchema>,
+) {
+  const invitation = DeleteInvitationSchema.parse(params);
+
   const client = getSupabaseServerActionClient();
   const { data, error } = await client.auth.getUser();
 
@@ -54,27 +60,22 @@ export async function deleteInvitationAction(params: { invitationId: string }) {
 
   const service = new AccountInvitationsService(client);
 
-  await service.removeInvitation({
-    invitationId: params.invitationId,
-  });
+  await service.deleteInvitation(invitation);
 
   return { success: true };
 }
 
-export async function updateInvitationAction(params: {
-  invitationId: string;
-  role: Database['public']['Enums']['account_role'];
-}) {
+export async function updateInvitationAction(
+  params: z.infer<typeof UpdateInvitationSchema>,
+) {
   const client = getSupabaseServerActionClient();
+  const invitation = UpdateInvitationSchema.parse(params);
 
   await assertSession(client);
 
   const service = new AccountInvitationsService(client);
 
-  await service.updateInvitation({
-    invitationId: params.invitationId,
-    role: params.role,
-  });
+  await service.updateInvitation(invitation);
 
   return { success: true };
 }
diff --git a/packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx b/packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx
index e057001a9..6a9513007 100644
--- a/packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx
+++ b/packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx
@@ -15,6 +15,7 @@ import {
   DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 
 import { RoleBadge } from '../role-badge';
@@ -37,9 +38,30 @@ export function AccountInvitationsTable({
   invitations,
   permissions,
 }: AccountInvitationsTableProps) {
+  const [search, setSearch] = useState('');
   const columns = useMemo(() => getColumns(permissions), [permissions]);
 
-  return <DataTable columns={columns} data={invitations} />;
+  const filteredInvitations = invitations.filter((member) => {
+    const searchString = search.toLowerCase();
+    const email = member.email.split('@')[0]?.toLowerCase() ?? '';
+
+    return (
+      email.includes(searchString) ||
+      member.role.toLowerCase().includes(searchString)
+    );
+  });
+
+  return (
+    <div className={'flex flex-col space-y-2'}>
+      <Input
+        value={search}
+        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
+        placeholder={'Search Invitation'}
+      />
+
+      <DataTable columns={columns} data={filteredInvitations} />
+    </div>
+  );
 }
 
 function getColumns(permissions: {
diff --git a/packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx b/packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx
index 5ddc11353..e581f499b 100644
--- a/packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx
+++ b/packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx
@@ -34,7 +34,7 @@ type Role = Database['public']['Enums']['account_role'];
 export const UpdateInvitationDialog: React.FC<{
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  invitationId: string;
+  invitationId: number;
   userRole: Role;
 }> = ({ isOpen, setIsOpen, invitationId, userRole }) => {
   return (
@@ -65,7 +65,7 @@ function UpdateInvitationForm({
   userRole,
   setIsOpen,
 }: React.PropsWithChildren<{
-  invitationId: string;
+  invitationId: number;
   userRole: Role;
   setIsOpen: (isOpen: boolean) => void;
 }>) {
@@ -75,7 +75,10 @@ function UpdateInvitationForm({
   const onSubmit = ({ role }: { role: Role }) => {
     startTransition(async () => {
       try {
-        await updateInvitationAction({ invitationId, role });
+        await updateInvitationAction({
+          invitationId,
+          role,
+        });
 
         setIsOpen(false);
       } catch (e) {
diff --git a/packages/features/team-accounts/src/components/members/account-members-table.tsx b/packages/features/team-accounts/src/components/members/account-members-table.tsx
index aec5cec3f..aae2fa205 100644
--- a/packages/features/team-accounts/src/components/members/account-members-table.tsx
+++ b/packages/features/team-accounts/src/components/members/account-members-table.tsx
@@ -15,6 +15,7 @@ import {
   DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 
 import { RoleBadge } from '../role-badge';
@@ -42,12 +43,34 @@ export function AccountMembersTable({
   permissions,
   currentUserId,
 }: AccountMembersTableProps) {
+  const [search, setSearch] = useState('');
+
   const columns = useMemo(
     () => getColumns(permissions, currentUserId),
     [currentUserId, permissions],
   );
 
-  return <DataTable columns={columns} data={members} />;
+  const filteredMembers = members.filter((member) => {
+    const searchString = search.toLowerCase();
+    const displayName = member.name ?? member.email.split('@')[0];
+
+    return (
+      displayName.includes(searchString) ||
+      member.role.toLowerCase().includes(searchString)
+    );
+  });
+
+  return (
+    <div className={'flex flex-col space-y-2'}>
+      <Input
+        value={search}
+        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
+        placeholder={'Search Member'}
+      />
+
+      <DataTable columns={columns} data={filteredMembers} />
+    </div>
+  );
 }
 
 function getColumns(
@@ -111,7 +134,7 @@ function getColumns(
             <If condition={isPrimaryOwner}>
               <span
                 className={
-                  'rounded-md bg-yellow-400 px-2.5 py-1 text-xs font-medium'
+                  'rounded-md bg-yellow-400 px-2.5 py-1 text-xs font-medium dark:text-black'
                 }
               >
                 Primary
diff --git a/packages/features/team-accounts/src/components/role-badge.tsx b/packages/features/team-accounts/src/components/role-badge.tsx
index 07a302825..2a9ee37e4 100644
--- a/packages/features/team-accounts/src/components/role-badge.tsx
+++ b/packages/features/team-accounts/src/components/role-badge.tsx
@@ -10,7 +10,7 @@ const roleClassNameBuilder = cva('font-medium capitalize', {
   variants: {
     role: {
       owner: 'bg-primary',
-      member: 'bg-blue-50 text-blue-500 hover:bg-blue-50',
+      member: 'bg-blue-50 text-blue-500 dark:bg-blue-500/10',
     },
   },
 });
diff --git a/packages/features/team-accounts/src/schema/delete-invitation.schema.ts b/packages/features/team-accounts/src/schema/delete-invitation.schema.ts
new file mode 100644
index 000000000..c3c1a89ee
--- /dev/null
+++ b/packages/features/team-accounts/src/schema/delete-invitation.schema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const DeleteInvitationSchema = z.object({
+  invitationId: z.bigint(),
+});
diff --git a/packages/features/team-accounts/src/schema/update-invitation-schema.ts b/packages/features/team-accounts/src/schema/update-invitation-schema.ts
new file mode 100644
index 000000000..abdf4e675
--- /dev/null
+++ b/packages/features/team-accounts/src/schema/update-invitation-schema.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+import { Database } from '@kit/supabase/database';
+
+type Role = Database['public']['Enums']['account_role'];
+
+export const UpdateInvitationSchema = z.object({
+  id: z.bigint(),
+  role: z.custom<Role>(() => z.string().min(1)),
+});
diff --git a/packages/features/team-accounts/src/services/account-invitations.service.ts b/packages/features/team-accounts/src/services/account-invitations.service.ts
index 253742cd0..fd5887590 100644
--- a/packages/features/team-accounts/src/services/account-invitations.service.ts
+++ b/packages/features/team-accounts/src/services/account-invitations.service.ts
@@ -7,7 +7,9 @@ import { Mailer } from '@kit/mailers';
 import { Logger } from '@kit/shared/logger';
 import { Database } from '@kit/supabase/database';
 
+import { DeleteInvitationSchema } from '../schema/delete-invitation.schema';
 import { InviteMembersSchema } from '../schema/invite-members.schema';
+import { UpdateInvitationSchema } from '../schema/update-invitation-schema';
 
 const invitePath = process.env.INVITATION_PAGE_PATH;
 const siteURL = process.env.NEXT_PUBLIC_SITE_URL;
@@ -33,10 +35,10 @@ export class AccountInvitationsService {
 
   constructor(private readonly client: SupabaseClient<Database>) {}
 
-  async removeInvitation(params: { invitationId: string }) {
+  async deleteInvitation(params: z.infer<typeof DeleteInvitationSchema>) {
     Logger.info('Removing invitation', {
-      invitationId: params.invitationId,
       name: this.namespace,
+      ...params,
     });
 
     const { data, error } = await this.client
@@ -51,20 +53,16 @@ export class AccountInvitationsService {
     }
 
     Logger.info('Invitation successfully removed', {
-      invitationId: params.invitationId,
+      ...params,
       name: this.namespace,
     });
 
     return data;
   }
 
-  async updateInvitation(params: {
-    invitationId: string;
-    role: Database['public']['Enums']['account_role'];
-  }) {
+  async updateInvitation(params: z.infer<typeof UpdateInvitationSchema>) {
     Logger.info('Updating invitation', {
-      invitationId: params.invitationId,
-      role: params.role,
+      ...params,
       name: this.namespace,
     });
 
@@ -74,7 +72,7 @@ export class AccountInvitationsService {
         role: params.role,
       })
       .match({
-        id: params.invitationId,
+        id: params.id,
       });
 
     if (error) {
@@ -82,8 +80,7 @@ export class AccountInvitationsService {
     }
 
     Logger.info('Invitation successfully updated', {
-      invitationId: params.invitationId,
-      role: params.role,
+      ...params,
       name: this.namespace,
     });
 
@@ -154,7 +151,7 @@ export class AccountInvitationsService {
         try {
           const { renderInviteEmail } = await import('@kit/emails');
 
-          const html = await renderInviteEmail({
+          const html = renderInviteEmail({
             link: this.getInvitationLink(invitation.invite_token),
             invitedUserEmail: invitation.email,
             inviter: user.email,
diff --git a/packages/stripe/src/services/stripe-billing-strategy.service.ts b/packages/stripe/src/services/stripe-billing-strategy.service.ts
index 6c1847a53..4a4965fd2 100644
--- a/packages/stripe/src/services/stripe-billing-strategy.service.ts
+++ b/packages/stripe/src/services/stripe-billing-strategy.service.ts
@@ -56,7 +56,17 @@ export class StripeBillingStrategyService
   ) {
     const stripe = await this.stripeProvider();
 
-    return await stripe.subscriptions.retrieve(params.sessionId);
+    const session = await stripe.checkout.sessions.retrieve(params.sessionId);
+    const isSessionOpen = session.status === 'open';
+
+    return {
+      checkoutToken: session.client_secret,
+      isSessionOpen,
+      status: session.status ?? 'complete',
+      customer: {
+        email: session.customer_details?.email ?? null,
+      },
+    };
   }
 
   private async stripeProvider(): Promise<Stripe> {
diff --git a/packages/supabase/src/clients/server-actions.client.ts b/packages/supabase/src/clients/server-actions.client.ts
index 21604e021..48f223108 100644
--- a/packages/supabase/src/clients/server-actions.client.ts
+++ b/packages/supabase/src/clients/server-actions.client.ts
@@ -14,7 +14,7 @@ const createServerSupabaseClient = () => {
   });
 };
 
-export const getSupabaseServerActionClient = (params?: { admin: false }) => {
+export const getSupabaseServerActionClient = (params?: { admin: boolean }) => {
   const keys = getSupabaseClientKeys();
   const admin = params?.admin ?? false;
 
diff --git a/packages/supabase/src/hooks/use-user-session.ts b/packages/supabase/src/hooks/use-user-session.ts
index bc625838f..d671c5e4e 100644
--- a/packages/supabase/src/hooks/use-user-session.ts
+++ b/packages/supabase/src/hooks/use-user-session.ts
@@ -1,16 +1,19 @@
 import { useCallback } from 'react';
 
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { Session } from '@supabase/supabase-js';
+
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 
 import { useSupabase } from './use-supabase';
 
 const queryKey = ['supabase:session'];
 
-export function useUserSession() {
+export function useUserSession(initialSession?: Session | null) {
   const supabase = useSupabase();
+
   const queryFn = async () => {
     const { data, error } = await supabase.auth.getSession();
-    console.log(data, error);
+
     if (error) {
       throw error;
     }
@@ -18,7 +21,11 @@ export function useUserSession() {
     return data.session;
   };
 
-  return useQuery({ queryKey, queryFn });
+  return useSuspenseQuery({
+    queryKey,
+    queryFn,
+    initialData: initialSession,
+  });
 }
 
 export function useRevalidateUserSession() {
diff --git a/packages/ui/src/makerkit/data-table.tsx b/packages/ui/src/makerkit/data-table.tsx
index 697a1899c..ab775f359 100644
--- a/packages/ui/src/makerkit/data-table.tsx
+++ b/packages/ui/src/makerkit/data-table.tsx
@@ -26,7 +26,7 @@ import {
   ChevronsRightIcon,
 } from 'lucide-react';
 
-import { Button } from '@kit/ui/button';
+import { Button } from '../shadcn/button';
 import {
   Table,
   TableBody,
@@ -35,8 +35,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@kit/ui/table';
-
+} from '../shadcn/table';
 import Trans from './trans';
 
 interface ReactTableProps<T extends object> {
diff --git a/packages/ui/src/makerkit/image-upload-input.tsx b/packages/ui/src/makerkit/image-upload-input.tsx
index d980e7006..f9795faa9 100644
--- a/packages/ui/src/makerkit/image-upload-input.tsx
+++ b/packages/ui/src/makerkit/image-upload-input.tsx
@@ -8,9 +8,8 @@ import Image from 'next/image';
 import cn from 'clsx';
 import { UploadCloud, XIcon } from 'lucide-react';
 
-import { Button } from '@kit/ui/button';
-import { Label } from '@kit/ui/label';
-
+import { Button } from '../shadcn/button';
+import { Label } from '../shadcn/label';
 import { If } from './if';
 
 type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {
diff --git a/packages/ui/src/makerkit/image-uploader.tsx b/packages/ui/src/makerkit/image-uploader.tsx
index 0d8d9d227..df1a31f52 100644
--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/packages/ui/src/makerkit/image-uploader.tsx
@@ -7,8 +7,7 @@ import Image from 'next/image';
 import { ImageIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
-import { Button } from '@kit/ui/button';
-
+import { Button } from '../shadcn/button';
 import ImageUploadInput from './image-upload-input';
 import { Trans } from './trans';
 
diff --git a/packages/ui/src/makerkit/language-dropdown-switcher.tsx b/packages/ui/src/makerkit/language-dropdown-switcher.tsx
index f9956b608..2a67ce30b 100644
--- a/packages/ui/src/makerkit/language-dropdown-switcher.tsx
+++ b/packages/ui/src/makerkit/language-dropdown-switcher.tsx
@@ -5,13 +5,14 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import useRefresh from '@kit/shared/hooks/use-refresh';
+
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@kit/ui/select';
+} from '../shadcn/select';
 
 const LanguageDropdownSwitcher: React.FC<{
   onChange?: (locale: string) => unknown;
diff --git a/packages/ui/src/makerkit/mobile-navigation-dropdown.tsx b/packages/ui/src/makerkit/mobile-navigation-dropdown.tsx
index 42f157953..891658b4a 100644
--- a/packages/ui/src/makerkit/mobile-navigation-dropdown.tsx
+++ b/packages/ui/src/makerkit/mobile-navigation-dropdown.tsx
@@ -7,14 +7,14 @@ import { usePathname } from 'next/navigation';
 
 import { ChevronDownIcon } from 'lucide-react';
 
-import { Button } from '@kit/ui/button';
+import { Button } from '../shadcn/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@kit/ui/dropdown-menu';
-import { Trans } from '@kit/ui/trans';
+} from '../shadcn/dropdown-menu';
+import { Trans } from '../shadcn/trans';
 
 function MobileNavigationDropdown({
   links,
diff --git a/packages/ui/src/makerkit/mobile-navigation-menu.tsx b/packages/ui/src/makerkit/mobile-navigation-menu.tsx
index 2f7fbc8d5..fc48209f7 100644
--- a/packages/ui/src/makerkit/mobile-navigation-menu.tsx
+++ b/packages/ui/src/makerkit/mobile-navigation-menu.tsx
@@ -10,8 +10,8 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@kit/ui/dropdown-menu';
-import { Trans } from '@kit/ui/trans';
+} from '../shadcn/dropdown-menu';
+import { Trans } from '../shadcn/trans';
 
 const MobileNavigationDropdown: React.FC<{
   links: {
diff --git a/packages/ui/src/makerkit/pricing-table.tsx b/packages/ui/src/makerkit/pricing-table.tsx
deleted file mode 100644
index 9cbc02d8c..000000000
--- a/packages/ui/src/makerkit/pricing-table.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import Link from 'next/link';
-
-import { CheckCircleIcon, SparklesIcon } from 'lucide-react';
-
-import { Button } from '@kit/ui/button';
-import Heading from '@kit/ui/heading';
-// TODO: pass in from app
-import pathsConfig from '@kit/web/config/paths.config';
-import pricingConfig from '@kit/web/config/pricing.config';
-
-import { cn } from '../utils/cn';
-import { If } from './if';
-import { Trans } from './trans';
-
-interface CheckoutButtonProps {
-  readonly stripePriceId?: string;
-  readonly recommended?: boolean;
-}
-
-interface PricingItemProps {
-  selectable: boolean;
-  product: {
-    name: string;
-    features: string[];
-    description: string;
-    recommended?: boolean;
-    badge?: string;
-  };
-  plan: {
-    name: string;
-    stripePriceId?: string;
-    price: string;
-    label?: string;
-    href?: string;
-  };
-}
-
-const STRIPE_PRODUCTS = pricingConfig.products;
-
-const STRIPE_PLANS = STRIPE_PRODUCTS.reduce<string[]>((acc, product) => {
-  product.plans.forEach((plan) => {
-    if (plan.name && !acc.includes(plan.name)) {
-      acc.push(plan.name);
-    }
-  });
-
-  return acc;
-}, []);
-
-function PricingTable(
-  props: React.PropsWithChildren<{
-    CheckoutButton?: React.ComponentType<CheckoutButtonProps>;
-  }>,
-) {
-  const [planVariant, setPlanVariant] = useState<string>(STRIPE_PLANS[0]);
-
-  return (
-    <div className={'flex flex-col space-y-12'}>
-      <div className={'flex justify-center'}>
-        <PlansSwitcher
-          plans={STRIPE_PLANS}
-          plan={planVariant}
-          setPlan={setPlanVariant}
-        />
-      </div>
-
-      <div
-        className={
-          'flex flex-col items-start space-y-6 lg:space-y-0' +
-          ' justify-center lg:flex-row lg:space-x-4'
-        }
-      >
-        {STRIPE_PRODUCTS.map((product) => {
-          const plan =
-            product.plans.find((item) => item.name === planVariant) ??
-            product.plans[0];
-
-          return (
-            <PricingItem
-              selectable
-              key={plan.stripePriceId ?? plan.name}
-              plan={plan}
-              product={product}
-              CheckoutButton={props.CheckoutButton}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default PricingTable;
-
-PricingTable.Item = PricingItem;
-PricingTable.Price = Price;
-PricingTable.FeaturesList = FeaturesList;
-
-function PricingItem(
-  props: React.PropsWithChildren<
-    PricingItemProps & {
-      CheckoutButton?: React.ComponentType<CheckoutButtonProps>;
-    }
-  >,
-) {
-  const recommended = props.product.recommended ?? false;
-
-  return (
-    <div
-      data-test={'subscription-plan'}
-      className={cn(
-        `
-         relative flex w-full flex-col justify-between space-y-6 rounded-lg
-         p-6 lg:w-4/12 xl:max-w-xs xl:p-8 2xl:w-3/12
-      `,
-        {
-          ['border']: !recommended,
-          ['border-2 border-primary']: recommended,
-        },
-      )}
-    >
-      <div className={'flex flex-col space-y-1'}>
-        <div className={'flex items-center space-x-4'}>
-          <Heading level={4}>{props.product.name}</Heading>
-
-          <If condition={props.product.badge}>
-            <div
-              className={cn(
-                `flex space-x-1 rounded-md px-2 py-1 text-xs font-medium`,
-                {
-                  ['bg-primary text-primary-foreground']: recommended,
-                  ['bg-muted text-muted-foreground']: !recommended,
-                },
-              )}
-            >
-              <If condition={recommended}>
-                <SparklesIcon className={'mr-1 h-4 w-4'} />
-              </If>
-
-              <span>{props.product.badge}</span>
-            </div>
-          </If>
-        </div>
-
-        <span className={'text-muted-foreground'}>
-          {props.product.description}
-        </span>
-      </div>
-
-      <div className={'flex items-end space-x-1'}>
-        <Price>{props.plan.price}</Price>
-
-        <If condition={props.plan.name}>
-          <span className={cn(`text-lg lowercase text-muted-foreground`)}>
-            <span>/</span>
-            <span>{props.plan.name}</span>
-          </span>
-        </If>
-      </div>
-
-      <div className={'text-current'}>
-        <FeaturesList features={props.product.features} />
-      </div>
-
-      <If condition={props.selectable}>
-        <If
-          condition={props.plan.stripePriceId && props.CheckoutButton}
-          fallback={
-            <DefaultCheckoutButton
-              recommended={recommended}
-              plan={props.plan}
-            />
-          }
-        >
-          {(CheckoutButton) => (
-            <CheckoutButton
-              recommended={recommended}
-              stripePriceId={props.plan.stripePriceId}
-            />
-          )}
-        </If>
-      </If>
-    </div>
-  );
-}
-
-function FeaturesList(
-  props: React.PropsWithChildren<{
-    features: string[];
-  }>,
-) {
-  return (
-    <ul className={'flex flex-col space-y-2'}>
-      {props.features.map((feature) => {
-        return (
-          <ListItem key={feature}>
-            <Trans
-              i18nKey={`common:plans.features.${feature}`}
-              defaults={feature}
-            />
-          </ListItem>
-        );
-      })}
-    </ul>
-  );
-}
-
-function Price({ children }: React.PropsWithChildren) {
-  // little trick to re-animate the price when switching plans
-  const key = Math.random();
-
-  return (
-    <div
-      key={key}
-      className={`duration-500 animate-in fade-in slide-in-from-left-4`}
-    >
-      <span className={'text-2xl font-bold lg:text-3xl xl:text-4xl'}>
-        {children}
-      </span>
-    </div>
-  );
-}
-
-function ListItem({ children }: React.PropsWithChildren) {
-  return (
-    <li className={'flex items-center space-x-3 font-medium'}>
-      <div>
-        <CheckCircleIcon className={'h-5 text-green-500'} />
-      </div>
-
-      <span className={'text-sm'}>{children}</span>
-    </li>
-  );
-}
-
-function PlansSwitcher(
-  props: React.PropsWithChildren<{
-    plans: string[];
-    plan: string;
-    setPlan: (plan: string) => void;
-  }>,
-) {
-  return (
-    <div className={'flex'}>
-      {props.plans.map((plan, index) => {
-        const selected = plan === props.plan;
-
-        const className = cn('focus:!ring-0 !outline-none', {
-          'rounded-r-none border-r-transparent': index === 0,
-          'rounded-l-none': index === props.plans.length - 1,
-          ['hover:bg-muted']: !selected,
-          ['font-bold hover:bg-background hover:text-initial']: selected,
-        });
-
-        return (
-          <Button
-            key={plan}
-            variant={'outline'}
-            className={className}
-            onClick={() => props.setPlan(plan)}
-          >
-            <span className={'flex items-center space-x-1'}>
-              <If condition={selected}>
-                <CheckCircleIcon className={'h-4 text-green-500'} />
-              </If>
-
-              <span>
-                <Trans i18nKey={`common:plans.${plan}`} defaults={plan} />
-              </span>
-            </span>
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-function DefaultCheckoutButton(
-  props: React.PropsWithChildren<{
-    plan: PricingItemProps['plan'];
-    recommended?: boolean;
-  }>,
-) {
-  const signUpPath = pathsConfig.auth.signUp;
-
-  const linkHref =
-    props.plan.href ?? `${signUpPath}?utm_source=${props.plan.stripePriceId}`;
-
-  const label = props.plan.label ?? 'common:getStarted';
-
-  return (
-    <div className={'bottom-0 left-0 w-full p-0'}>
-      <Button
-        className={'w-full'}
-        variant={props.recommended ? 'default' : 'outline'}
-      >
-        <Link href={linkHref}>
-          <Trans i18nKey={label} defaults={label} />
-        </Link>
-      </Button>
-    </div>
-  );
-}
diff --git a/packages/ui/src/makerkit/profile-avatar.tsx b/packages/ui/src/makerkit/profile-avatar.tsx
index 7383e3229..afa215829 100644
--- a/packages/ui/src/makerkit/profile-avatar.tsx
+++ b/packages/ui/src/makerkit/profile-avatar.tsx
@@ -1,7 +1,7 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../shadcn/avatar';
 
 type SessionProps = {
-  displayName?: string | null;
+  displayName: string | null;
   pictureUrl?: string | null;
 };
 
@@ -31,7 +31,9 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
       <AvatarImage src={props.pictureUrl ?? undefined} />
 
       <AvatarFallback>
-        <span className={'uppercase'}>{initials}</span>
+        <span suppressHydrationWarning className={'uppercase'}>
+          {initials}
+        </span>
       </AvatarFallback>
     </Avatar>
   );
diff --git a/packages/ui/src/makerkit/sidebar.tsx b/packages/ui/src/makerkit/sidebar.tsx
index 0f001592b..466b5105d 100644
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -9,8 +9,7 @@ import { cva } from 'class-variance-authority';
 import { ChevronDownIcon } from 'lucide-react';
 import { z } from 'zod';
 
-import { Button } from '@kit/ui/button';
-
+import { Button } from '../shadcn/button';
 import {
   Tooltip,
   TooltipContent,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5960dae75..e9ffe5c06 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.17.15
         version: 5.28.6(react@18.2.0)
+      '@tanstack/react-query-next-experimental':
+        specifier: ^5.28.6
+        version: 5.28.6(@tanstack/react-query@5.28.6)(next@14.2.0-canary.41)(react@18.2.0)
       '@tanstack/react-table':
         specifier: ^8.11.3
         version: 8.14.0(react-dom@18.2.0)(react@18.2.0)
@@ -97,7 +100,7 @@ importers:
         version: 3.6.0
       edge-csrf:
         specifier: ^1.0.9
-        version: 1.0.9(next@14.1.4)
+        version: 1.0.9(next@14.2.0-canary.41)
       i18next:
         specifier: ^23.10.1
         version: 23.10.1
@@ -105,14 +108,17 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       next:
-        specifier: ^14.1.0
-        version: 14.1.4(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^14.2.0-canary.41
+        version: 14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
       next-contentlayer:
         specifier: 0.3.4
-        version: 0.3.4(contentlayer@0.3.4)(esbuild@0.19.11)(next@14.1.4)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.3.4(contentlayer@0.3.4)(esbuild@0.19.11)(next@14.2.0-canary.41)(react-dom@18.2.0)(react@18.2.0)
+      next-sitemap:
+        specifier: ^4.2.3
+        version: 4.2.3(next@14.2.0-canary.41)
       next-themes:
         specifier: ^0.2.1
-        version: 0.2.1(next@14.1.4)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.2.1(next@14.2.0-canary.41)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: 18.2.0
         version: 18.2.0
@@ -157,8 +163,8 @@ importers:
         specifier: ^0.1.0
         version: link:../../tooling/typescript
       '@next/bundle-analyzer':
-        specifier: ^14.1.4
-        version: 14.1.4
+        specifier: ^14.2.0-canary.41
+        version: 14.2.0-canary.41
       '@types/mdx':
         specifier: ^2.0.10
         version: 2.0.11
@@ -424,7 +430,7 @@ importers:
         version: 1.2.0
       next:
         specifier: ^14.1.4
-        version: 14.1.4(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 14.1.4(react-dom@18.2.0)(react@18.2.0)
       react-i18next:
         specifier: ^14.1.0
         version: 14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0)
@@ -1167,6 +1173,10 @@ packages:
       type-fest: 3.13.1
     dev: false
 
+  /@corex/deepmerge@4.0.43:
+    resolution: {integrity: sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==}
+    dev: false
+
   /@cspotcode/source-map-support@0.8.1:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -1751,8 +1761,8 @@ packages:
       - supports-color
     dev: false
 
-  /@next/bundle-analyzer@14.1.4:
-    resolution: {integrity: sha512-IpF/18HcAOcfHRr24tqPOUpMmVKIqvkCxIubMeRYWCXs3jm7niPGrt8Mu74yMDzfGlUwgQA6Xd6BUc5+jQxcEg==}
+  /@next/bundle-analyzer@14.2.0-canary.41:
+    resolution: {integrity: sha512-1+PP3XaC3lz0oE49D0jxGsiEJZOmwlDgqV3yantl64vXRNX8Ae3Gsk1KcDhp7JHKKPvFx4AF13/LF48sbH0zkw==}
     dependencies:
       webpack-bundle-analyzer: 4.10.1
     transitivePeerDependencies:
@@ -1760,6 +1770,10 @@ packages:
       - utf-8-validate
     dev: true
 
+  /@next/env@13.5.6:
+    resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==}
+    dev: false
+
   /@next/env@14.1.0:
     resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==}
     dev: false
@@ -1768,6 +1782,10 @@ packages:
     resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==}
     dev: false
 
+  /@next/env@14.2.0-canary.41:
+    resolution: {integrity: sha512-6bd8zNDEferyJ9qkJrCB0pTgGFaJ9XttMI+uj5jrSeQ88kxsgPcoOFqBEMDtDOEzWqi+17B29alThei0Cmw0dA==}
+    dev: false
+
   /@next/eslint-plugin-next@14.1.4:
     resolution: {integrity: sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==}
     dependencies:
@@ -1806,6 +1824,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-arm64@14.2.0-canary.41:
+    resolution: {integrity: sha512-cplMeo/uQcfSHwZH2naB87IWzJouOSPXFQqRk1/nwuQNPxLFT2xO2v7zP4L4W98qukvLylFxWQhqpIQqZnohIA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-darwin-x64@14.1.0:
     resolution: {integrity: sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==}
     engines: {node: '>= 10'}
@@ -1824,6 +1851,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-x64@14.2.0-canary.41:
+    resolution: {integrity: sha512-mnqPeUMFUg73DXEsNOxrKXy09ikcErLeFEzYVqn5XwaewVyqny9xwf8f02BYBcLEBrmk565xkocnTs7su45qqA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-arm64-gnu@14.1.0:
     resolution: {integrity: sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==}
     engines: {node: '>= 10'}
@@ -1842,6 +1878,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-gnu@14.2.0-canary.41:
+    resolution: {integrity: sha512-ns0/YS9yqqS71h4xZNGn+IDZC7q3fLrF9mIaZ3aXhkHpXfeyjACOAEC6/0l0E49w4VkPv0XK64aRvsxsZfFr9g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-arm64-musl@14.1.0:
     resolution: {integrity: sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==}
     engines: {node: '>= 10'}
@@ -1860,6 +1905,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-musl@14.2.0-canary.41:
+    resolution: {integrity: sha512-22nsQMLgJH3ZbxbgQmiwGbFtW8KtDRQJU8OSyWcO8MFTgPdL3IcRd/lTsR5r9qliosoGgHzFSYDAq/7M5I/w0Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-x64-gnu@14.1.0:
     resolution: {integrity: sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==}
     engines: {node: '>= 10'}
@@ -1878,6 +1932,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-gnu@14.2.0-canary.41:
+    resolution: {integrity: sha512-ZkcPQk+SV+i06i0k/UVmXKk+k70yKIwtTPrWl7JpeJ/Wc7sWoRqNCdpFqP227oOsy6dM0NKqJTEOATBYAefQLg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-x64-musl@14.1.0:
     resolution: {integrity: sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==}
     engines: {node: '>= 10'}
@@ -1896,6 +1959,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-musl@14.2.0-canary.41:
+    resolution: {integrity: sha512-1Uofz0Bkec63oN7Xj9lHGevCqxZJrr6pruPx5JUb613CYqUVCVj6JA8H2JutYYwgcbwstjdA+9He37HlW1FGTw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-arm64-msvc@14.1.0:
     resolution: {integrity: sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==}
     engines: {node: '>= 10'}
@@ -1914,6 +1986,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-arm64-msvc@14.2.0-canary.41:
+    resolution: {integrity: sha512-gMzwgq1ZnKwxYx2I4qhuRtaGZ/6WZD8XV0cObnaWXiu8O7NCK1kEKa6+IWy+Manax5qwamHKzWND5uKbeddToQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-ia32-msvc@14.1.0:
     resolution: {integrity: sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==}
     engines: {node: '>= 10'}
@@ -1932,6 +2013,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-ia32-msvc@14.2.0-canary.41:
+    resolution: {integrity: sha512-U72bjcHUUoRToFTAouUqK9y/PaiKVo4rDX5/RwzIZThPghfHf5ALG6DYiw64sKWSRXSfFOv9DzhofjK1+CIgSA==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-x64-msvc@14.1.0:
     resolution: {integrity: sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==}
     engines: {node: '>= 10'}
@@ -1950,6 +2040,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-x64-msvc@14.2.0-canary.41:
+    resolution: {integrity: sha512-cBgEDwdxfyv9bBoo5dKBtfxd7S7Dv3dTRKYx7agprJ3BdGc8gXs2zdi08lR/fBU0kjpsC4gw/tg5p+IDkuZUaw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4056,6 +4155,13 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@swc/helpers@0.5.5:
+    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+    dependencies:
+      '@swc/counter': 0.1.3
+      tslib: 2.6.2
+    dev: false
+
   /@swc/types@0.1.6:
     resolution: {integrity: sha512-/JLo/l2JsT/LRd80C3HfbmVpxOAJ11FO2RCEslFrgzLltoP9j8XIbsyDcfCt2WWyX+CM96rBoNM+IToAkFOugg==}
     dependencies:
@@ -4072,6 +4178,18 @@ packages:
   /@tanstack/query-core@5.28.6:
     resolution: {integrity: sha512-hnhotV+DnQtvtR3jPvbQMPNMW4KEK0J4k7c609zJ8muiNknm+yoDyMHmxTWM5ZnlZpsz0zOxYFr+mzRJNHWJsA==}
 
+  /@tanstack/react-query-next-experimental@5.28.6(@tanstack/react-query@5.28.6)(next@14.2.0-canary.41)(react@18.2.0):
+    resolution: {integrity: sha512-KHTR1nGChTXk/kELit2gaqF3cQuN68F5UJv0377Gz5DnllPnBegja6if2W9KtKxm3Z1xP0j8LQXplqlqny2SYw==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.28.6
+      next: ^13 || ^14
+      react: ^18.0.0
+    dependencies:
+      '@tanstack/react-query': 5.28.6(react@18.2.0)
+      next: 14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@tanstack/react-query@5.28.6(react@18.2.0):
     resolution: {integrity: sha512-/DdYuDBSsA21Qbcder1R8Cr/3Nx0ZnA2lgtqKsLMvov8wL4+g0HBz/gWYZPlIsof7iyfQafyhg4wUVUsS3vWZw==}
     peerDependencies:
@@ -5906,12 +6024,12 @@ packages:
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  /edge-csrf@1.0.9(next@14.1.4):
+  /edge-csrf@1.0.9(next@14.2.0-canary.41):
     resolution: {integrity: sha512-3F89YTh42UDdISr3s9AEcgJDLi4ysgjGfnybzF0LuZGaG2W31h1ZwgWwEQBLMj04lAklcP4XHZYi7vk9o8zcbg==}
     peerDependencies:
       next: ^13.0.0 || ^14.0.0
     dependencies:
-      next: 14.1.4(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
   /editorconfig@1.0.4:
@@ -8657,7 +8775,7 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
-  /next-contentlayer@0.3.4(contentlayer@0.3.4)(esbuild@0.19.11)(next@14.1.4)(react-dom@18.2.0)(react@18.2.0):
+  /next-contentlayer@0.3.4(contentlayer@0.3.4)(esbuild@0.19.11)(next@14.2.0-canary.41)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UtUCwgAl159KwfhNaOwyiI7Lg6sdioyKMeh+E7jxx0CJ29JuXGxBEYmCI6+72NxFGIFZKx8lvttbbQhbnYWYSw==}
     peerDependencies:
       contentlayer: 0.3.4
@@ -8668,7 +8786,7 @@ packages:
       '@contentlayer/core': 0.3.4(esbuild@0.19.11)
       '@contentlayer/utils': 0.3.4
       contentlayer: 0.3.4(esbuild@0.19.11)
-      next: 14.1.4(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -8678,14 +8796,28 @@ packages:
       - supports-color
     dev: false
 
-  /next-themes@0.2.1(next@14.1.4)(react-dom@18.2.0)(react@18.2.0):
+  /next-sitemap@4.2.3(next@14.2.0-canary.41):
+    resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==}
+    engines: {node: '>=14.18'}
+    hasBin: true
+    peerDependencies:
+      next: '*'
+    dependencies:
+      '@corex/deepmerge': 4.0.43
+      '@next/env': 13.5.6
+      fast-glob: 3.3.2
+      minimist: 1.2.8
+      next: 14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
+  /next-themes@0.2.1(next@14.2.0-canary.41)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
     peerDependencies:
       next: '*'
       react: '*'
       react-dom: '*'
     dependencies:
-      next: 14.1.4(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -8729,7 +8861,7 @@ packages:
       - babel-plugin-macros
     dev: false
 
-  /next@14.1.4(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0):
+  /next@14.1.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==}
     engines: {node: '>=18.17.0'}
     hasBin: true
@@ -8745,7 +8877,6 @@ packages:
         optional: true
     dependencies:
       '@next/env': 14.1.4
-      '@opentelemetry/api': 1.8.0
       '@swc/helpers': 0.5.2
       busboy: 1.6.0
       caniuse-lite: 1.0.30001599
@@ -8769,6 +8900,46 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /next@14.2.0-canary.41(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jqNSTq1COP04WXpj88Bzt8kkCLXFNpCU4tHzQrICAMVWeNtHTZpK2WPR8560SWBw614bW2qHYY85k0tez3YLiA==}
+    engines: {node: '>=18.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 14.2.0-canary.41
+      '@opentelemetry/api': 1.8.0
+      '@swc/helpers': 0.5.5
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001599
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      styled-jsx: 5.1.1(react@18.2.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.0-canary.41
+      '@next/swc-darwin-x64': 14.2.0-canary.41
+      '@next/swc-linux-arm64-gnu': 14.2.0-canary.41
+      '@next/swc-linux-arm64-musl': 14.2.0-canary.41
+      '@next/swc-linux-x64-gnu': 14.2.0-canary.41
+      '@next/swc-linux-x64-musl': 14.2.0-canary.41
+      '@next/swc-win32-arm64-msvc': 14.2.0-canary.41
+      '@next/swc-win32-ia32-msvc': 14.2.0-canary.41
+      '@next/swc-win32-x64-msvc': 14.2.0-canary.41
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
+
   /no-case@2.3.2:
     resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
     dependencies:
diff --git a/supabase/migrations/20221215192558_schema.sql b/supabase/migrations/20221215192558_schema.sql
index 5336521c7..4aea119bf 100644
--- a/supabase/migrations/20221215192558_schema.sql
+++ b/supabase/migrations/20221215192558_schema.sql
@@ -1261,8 +1261,8 @@ grant
 execute on function public.get_account_members (text) to authenticated,
 postgres;
 
-
 create or replace function public.get_account_invitations(account_slug text) returns table (
+  id serial,
   email varchar(255),
   account_id uuid,
   invited_by uuid,