B2B-88: add starter kit structure and elements

2025-06-08 16:18:30 +03:00
parent 657a36a298
commit e7b25600cb
1280 changed files with 77893 additions and 5688 deletions
--- a/app/home/(user)/_components/home-account-selector.tsx
+++ b/app/home/(user)/_components/home-account-selector.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { AccountSelector } from '@kit/accounts/account-selector';
+import { SidebarContext } from '@kit/ui/shadcn-sidebar';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
+const features = {
+  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
+};
+
+export function HomeAccountSelector(props: {
+  accounts: Array<{
+    label: string | null;
+    value: string | null;
+    image: string | null;
+  }>;
+
+  userId: string;
+  collisionPadding?: number;
+}) {
+  const router = useRouter();
+  const context = useContext(SidebarContext);
+
+  return (
+    <AccountSelector
+      collapsed={!context?.open}
+      collisionPadding={props.collisionPadding ?? 20}
+      accounts={props.accounts}
+      features={features}
+      userId={props.userId}
+      onAccountChange={(value) => {
+        if (value) {
+          const path = pathsConfig.app.accountHome.replace('[account]', value);
+          router.replace(path);
+        }
+      }}
+    />
+  );
+}
--- a/app/home/(user)/_components/home-accounts-list.tsx
+++ b/app/home/(user)/_components/home-accounts-list.tsx
@@ -0,0 +1,61 @@
+import { use } from 'react';
+
+import Link from 'next/link';
+
+import {
+  CardButton,
+  CardButtonHeader,
+  CardButtonTitle,
+} from '@kit/ui/card-button';
+import {
+  EmptyState,
+  EmptyStateButton,
+  EmptyStateHeading,
+  EmptyStateText,
+} from '@kit/ui/empty-state';
+import { Trans } from '@kit/ui/trans';
+
+import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
+import { HomeAddAccountButton } from './home-add-account-button';
+
+export function HomeAccountsList() {
+  const { accounts } = use(loadUserWorkspace());
+
+  if (!accounts.length) {
+    return <HomeAccountsListEmptyState />;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {accounts.map((account) => (
+          <CardButton key={account.value} asChild>
+            <Link href={`/home/${account.value}`}>
+              <CardButtonHeader>
+                <CardButtonTitle>{account.label}</CardButtonTitle>
+              </CardButtonHeader>
+            </Link>
+          </CardButton>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function HomeAccountsListEmptyState() {
+  return (
+    <div className={'flex flex-1'}>
+      <EmptyState>
+        <EmptyStateButton asChild>
+          <HomeAddAccountButton className={'mt-4'} />
+        </EmptyStateButton>
+        <EmptyStateHeading>
+          <Trans i18nKey={'account:noTeamsYet'} />
+        </EmptyStateHeading>
+        <EmptyStateText>
+          <Trans i18nKey={'account:createTeam'} />
+        </EmptyStateText>
+      </EmptyState>
+    </div>
+  );
+}
--- a/app/home/(user)/_components/home-add-account-button.tsx
+++ b/app/home/(user)/_components/home-add-account-button.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { useState } from 'react';
+
+import { CreateTeamAccountDialog } from '@kit/team-accounts/components';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function HomeAddAccountButton(props: { className?: string }) {
+  const [isAddingAccount, setIsAddingAccount] = useState(false);
+
+  return (
+    <>
+      <Button
+        className={props.className}
+        onClick={() => setIsAddingAccount(true)}
+      >
+        <Trans i18nKey={'account:createTeamButtonLabel'} />
+      </Button>
+
+      <CreateTeamAccountDialog
+        isOpen={isAddingAccount}
+        setIsOpen={setIsAddingAccount}
+      />
+    </>
+  );
+}
--- a/app/home/(user)/_components/home-menu-navigation.tsx
+++ b/app/home/(user)/_components/home-menu-navigation.tsx
@@ -0,0 +1,68 @@
+import {
+  BorderedNavigationMenu,
+  BorderedNavigationMenuItem,
+} from '@kit/ui/bordered-navigation-menu';
+import { If } from '@kit/ui/if';
+
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+
+// home imports
+import { HomeAccountSelector } from '../_components/home-account-selector';
+import { UserNotifications } from '../_components/user-notifications';
+import { type UserWorkspace } from '../_lib/server/load-user-workspace';
+
+export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
+  const { workspace, user, accounts } = props.workspace;
+
+  const routes = personalAccountNavigationConfig.routes.reduce<
+    Array<{
+      path: string;
+      label: string;
+      Icon?: React.ReactNode;
+      end?: boolean | ((path: string) => boolean);
+    }>
+  >((acc, item) => {
+    if ('children' in item) {
+      return [...acc, ...item.children];
+    }
+
+    if ('divider' in item) {
+      return acc;
+    }
+
+    return [...acc, item];
+  }, []);
+
+  return (
+    <div className={'flex w-full flex-1 justify-between'}>
+      <div className={'flex items-center space-x-8'}>
+        <AppLogo />
+
+        <BorderedNavigationMenu>
+          {routes.map((route) => (
+            <BorderedNavigationMenuItem {...route} key={route.path} />
+          ))}
+        </BorderedNavigationMenu>
+      </div>
+
+      <div className={'flex justify-end space-x-2.5'}>
+        <UserNotifications userId={user.id} />
+
+        <If condition={featuresFlagConfig.enableTeamAccounts}>
+          <HomeAccountSelector userId={user.id} accounts={accounts} />
+        </If>
+
+        <div>
+          <ProfileAccountDropdownContainer
+            user={user}
+            account={workspace}
+            showProfileName={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/home/(user)/_components/home-mobile-navigation.tsx
+++ b/app/home/(user)/_components/home-mobile-navigation.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import Link from 'next/link';
+
+import { LogOut, Menu } from 'lucide-react';
+
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+
+// home imports
+import { HomeAccountSelector } from '../_components/home-account-selector';
+import type { UserWorkspace } from '../_lib/server/load-user-workspace';
+
+export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
+  const signOut = useSignOut();
+
+  const Links = personalAccountNavigationConfig.routes.map((item, index) => {
+    if ('children' in item) {
+      return item.children.map((child) => {
+        return (
+          <DropdownLink
+            key={child.path}
+            Icon={child.Icon}
+            path={child.path}
+            label={child.label}
+          />
+        );
+      });
+    }
+
+    if ('divider' in item) {
+      return <DropdownMenuSeparator key={index} />;
+    }
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu className={'h-9'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
+        <If condition={featuresFlagConfig.enableTeamAccounts}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>
+              <Trans i18nKey={'common:yourAccounts'} />
+            </DropdownMenuLabel>
+
+            <HomeAccountSelector
+              userId={props.workspace.user.id}
+              accounts={props.workspace.accounts}
+              collisionPadding={0}
+            />
+          </DropdownMenuGroup>
+
+          <DropdownMenuSeparator />
+        </If>
+
+        <DropdownMenuGroup>{Links}</DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function DropdownLink(
+  props: React.PropsWithChildren<{
+    path: string;
+    label: string;
+    Icon: React.ReactNode;
+  }>,
+) {
+  return (
+    <DropdownMenuItem asChild key={props.path}>
+      <Link
+        href={props.path}
+        className={'flex h-12 w-full items-center space-x-4'}
+      >
+        {props.Icon}
+
+        <span>
+          <Trans i18nKey={props.label} defaults={props.label} />
+        </span>
+      </Link>
+    </DropdownMenuItem>
+  );
+}
+
+function SignOutDropdownItem(
+  props: React.PropsWithChildren<{
+    onSignOut: () => unknown;
+  }>,
+) {
+  return (
+    <DropdownMenuItem
+      className={'flex h-12 w-full items-center space-x-4'}
+      onClick={props.onSignOut}
+    >
+      <LogOut className={'h-6'} />
+
+      <span>
+        <Trans i18nKey={'common:signOut'} defaults={'Sign out'} />
+      </span>
+    </DropdownMenuItem>
+  );
+}
--- a/app/home/(user)/_components/home-page-header.tsx
+++ b/app/home/(user)/_components/home-page-header.tsx
@@ -0,0 +1,12 @@
+import { PageHeader } from '@kit/ui/page';
+
+export function HomeLayoutPageHeader(
+  props: React.PropsWithChildren<{
+    title: string | React.ReactNode;
+    description: string | React.ReactNode;
+  }>,
+) {
+  return (
+    <PageHeader description={props.description}>{props.children}</PageHeader>
+  );
+}
--- a/app/home/(user)/_components/home-sidebar.tsx
+++ b/app/home/(user)/_components/home-sidebar.tsx
@@ -0,0 +1,61 @@
+import { If } from '@kit/ui/if';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarNavigation,
+} from '@kit/ui/shadcn-sidebar';
+import { cn } from '@kit/ui/utils';
+
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { UserNotifications } from '~/home/(user)/_components/user-notifications';
+
+// home imports
+import type { UserWorkspace } from '../_lib/server/load-user-workspace';
+import { HomeAccountSelector } from './home-account-selector';
+
+interface HomeSidebarProps {
+  workspace: UserWorkspace;
+}
+
+export function HomeSidebar(props: HomeSidebarProps) {
+  const { workspace, user, accounts } = props.workspace;
+  const collapsible = personalAccountNavigationConfig.sidebarCollapsedStyle;
+
+  return (
+    <Sidebar collapsible={collapsible}>
+      <SidebarHeader className={'h-16 justify-center'}>
+        <div className={'flex items-center justify-between gap-x-3'}>
+          <If
+            condition={featuresFlagConfig.enableTeamAccounts}
+            fallback={
+              <AppLogo
+                className={cn(
+                  'p-2 group-data-[minimized=true]:max-w-full group-data-[minimized=true]:py-0',
+                )}
+              />
+            }
+          >
+            <HomeAccountSelector userId={user.id} accounts={accounts} />
+          </If>
+
+          <div className={'group-data-[minimized=true]:hidden'}>
+            <UserNotifications userId={user.id} />
+          </div>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarNavigation config={personalAccountNavigationConfig} />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <ProfileAccountDropdownContainer user={user} account={workspace} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
--- a/app/home/(user)/_components/user-notifications.tsx
+++ b/app/home/(user)/_components/user-notifications.tsx
@@ -0,0 +1,16 @@
+import { NotificationsPopover } from '@kit/notifications/components';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+
+export function UserNotifications(props: { userId: string }) {
+  if (!featuresFlagConfig.enableNotifications) {
+    return null;
+  }
+
+  return (
+    <NotificationsPopover
+      accountIds={[props.userId]}
+      realtime={featuresFlagConfig.realtimeNotifications}
+    />
+  );
+}
--- a/app/home/(user)/_lib/server/load-user-workspace.ts
+++ b/app/home/(user)/_lib/server/load-user-workspace.ts
@@ -0,0 +1,42 @@
+import { cache } from 'react';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+const shouldLoadAccounts = featureFlagsConfig.enableTeamAccounts;
+
+export type UserWorkspace = Awaited<ReturnType<typeof loadUserWorkspace>>;
+
+/**
+ * @name loadUserWorkspace
+ * @description
+ * Load the user workspace data. It's a cached per-request function that fetches the user workspace data.
+ * It can be used across the server components to load the user workspace data.
+ */
+export const loadUserWorkspace = cache(workspaceLoader);
+
+async function workspaceLoader() {
+  const client = getSupabaseServerClient();
+  const api = createAccountsApi(client);
+
+  const accountsPromise = shouldLoadAccounts
+    ? () => api.loadUserAccounts()
+    : () => Promise.resolve([]);
+
+  const workspacePromise = api.getAccountWorkspace();
+
+  const [accounts, workspace, user] = await Promise.all([
+    accountsPromise(),
+    workspacePromise,
+    requireUserInServerComponent(),
+  ]);
+
+  return {
+    accounts,
+    workspace,
+    user,
+  };
+}
--- a/app/home/(user)/billing/_components/personal-account-checkout-form.tsx
+++ b/app/home/(user)/billing/_components/personal-account-checkout-form.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
+import { PlanPicker } from '@kit/billing-gateway/components';
+import { useAppEvents } from '@kit/shared/events';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+
+import { createPersonalAccountCheckoutSession } from '../_lib/server/server-actions';
+
+const EmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return {
+      default: EmbeddedCheckout,
+    };
+  },
+  {
+    ssr: false,
+  },
+);
+
+export function PersonalAccountCheckoutForm(props: {
+  customerId: string | null | undefined;
+}) {
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState(false);
+  const appEvents = useAppEvents();
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
+
+  // only allow trial if the user is not already a customer
+  const canStartTrial = !props.customerId;
+
+  // If the checkout token is set, render the embedded checkout component
+  if (checkoutToken) {
+    return (
+      <EmbeddedCheckout
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+        onClose={() => setCheckoutToken(undefined)}
+      />
+    );
+  }
+
+  // Otherwise, render the plan picker component
+  return (
+    <div>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'common:planCardLabel'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'common:planCardDescription'} />
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className={'space-y-4'}>
+          <If condition={error}>
+            <ErrorAlert />
+          </If>
+
+          <PlanPicker
+            pending={pending}
+            config={billingConfig}
+            canStartTrial={canStartTrial}
+            onSubmit={({ planId, productId }) => {
+              startTransition(async () => {
+                try {
+                  appEvents.emit({
+                    type: 'checkout.started',
+                    payload: { planId },
+                  });
+
+                  const { checkoutToken } =
+                    await createPersonalAccountCheckoutSession({
+                      planId,
+                      productId,
+                    });
+
+                  setCheckoutToken(checkoutToken);
+                } catch {
+                  setError(true);
+                }
+              });
+            }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <ExclamationTriangleIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'common:planPickerAlertErrorTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'common:planPickerAlertErrorDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}
--- a/app/home/(user)/billing/_lib/schema/personal-account-checkout.schema.ts
+++ b/app/home/(user)/billing/_lib/schema/personal-account-checkout.schema.ts
@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const PersonalAccountCheckoutSchema = z.object({
+  planId: z.string().min(1),
+  productId: z.string().min(1),
+});
--- a/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts
+++ b/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts
@@ -0,0 +1,47 @@
+import 'server-only';
+
+import { cache } from 'react';
+
+import { z } from 'zod';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+/**
+ * The variable BILLING_MODE represents the billing mode for a service. It can
+ * have either the value 'subscription' or 'one-time'. If not provided, the default
+ * value is 'subscription'. The value can be overridden by the environment variable
+ * BILLING_MODE.
+ *
+ * If the value is 'subscription', we fetch the subscription data for the user.
+ * If the value is 'one-time', we fetch the orders data for the user.
+ * if none of these suits your needs, please override the below function.
+ */
+const BILLING_MODE = z
+  .enum(['subscription', 'one-time'])
+  .default('subscription')
+  .parse(process.env.BILLING_MODE);
+
+/**
+ * Load the personal account billing page data for the given user.
+ * @param userId
+ * @returns The subscription data or the orders data and the billing customer ID.
+ * This function is cached per-request.
+ */
+export const loadPersonalAccountBillingPageData = cache(
+  personalAccountBillingPageDataLoader,
+);
+
+function personalAccountBillingPageDataLoader(userId: string) {
+  const client = getSupabaseServerClient();
+  const api = createAccountsApi(client);
+
+  const data =
+    BILLING_MODE === 'subscription'
+      ? api.getSubscription(userId)
+      : api.getOrder(userId);
+
+  const customerId = api.getCustomerId(userId);
+
+  return Promise.all([data, customerId]);
+}
--- a/app/home/(user)/billing/_lib/server/server-actions.ts
+++ b/app/home/(user)/billing/_lib/server/server-actions.ts
@@ -0,0 +1,58 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+
+import { PersonalAccountCheckoutSchema } from '../schema/personal-account-checkout.schema';
+import { createUserBillingService } from './user-billing.service';
+
+/**
+ * @name enabled
+ * @description This feature flag is used to enable or disable personal account billing.
+ */
+const enabled = featureFlagsConfig.enablePersonalAccountBilling;
+
+/**
+ * @name createPersonalAccountCheckoutSession
+ * @description Creates a checkout session for a personal account.
+ */
+export const createPersonalAccountCheckoutSession = enhanceAction(
+  async function (data) {
+    if (!enabled) {
+      throw new Error('Personal account billing is not enabled');
+    }
+
+    const client = getSupabaseServerClient();
+    const service = createUserBillingService(client);
+
+    return await service.createCheckoutSession(data);
+  },
+  {
+    schema: PersonalAccountCheckoutSchema,
+  },
+);
+
+/**
+ * @name createPersonalAccountBillingPortalSession
+ * @description Creates a billing Portal session for a personal account
+ */
+export const createPersonalAccountBillingPortalSession = enhanceAction(
+  async () => {
+    if (!enabled) {
+      throw new Error('Personal account billing is not enabled');
+    }
+
+    const client = getSupabaseServerClient();
+    const service = createUserBillingService(client);
+
+    // get url to billing portal
+    const url = await service.createBillingPortalSession();
+
+    return redirect(url);
+  },
+  {},
+);
--- a/app/home/(user)/billing/_lib/server/user-billing.service.ts
+++ b/app/home/(user)/billing/_lib/server/user-billing.service.ts
@@ -0,0 +1,202 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { z } from 'zod';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { getProductPlanPair } from '@kit/billing';
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { getLogger } from '@kit/shared/logger';
+import { requireUser } from '@kit/supabase/require-user';
+
+import appConfig from '~/config/app.config';
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+import { Database } from '~/lib/database.types';
+
+import { PersonalAccountCheckoutSchema } from '../schema/personal-account-checkout.schema';
+
+export function createUserBillingService(client: SupabaseClient<Database>) {
+  return new UserBillingService(client);
+}
+
+/**
+ * @name UserBillingService
+ * @description Service for managing billing for personal accounts.
+ */
+class UserBillingService {
+  private readonly namespace = 'billing.personal-account';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name createCheckoutSession
+   * @description Create a checkout session for the user
+   * @param planId
+   * @param productId
+   */
+  async createCheckoutSession({
+    planId,
+    productId,
+  }: z.infer<typeof PersonalAccountCheckoutSchema>) {
+    // get the authenticated user
+    const { data: user, error } = await requireUser(this.client);
+
+    if (error ?? !user) {
+      throw new Error('Authentication required');
+    }
+
+    const service = await getBillingGatewayProvider(this.client);
+
+    // in the case of personal accounts
+    // the account ID is the same as the user ID
+    const accountId = user.id;
+
+    // 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 api = createAccountsApi(this.client);
+    const customerId = await api.getCustomerId(accountId);
+
+    const product = billingConfig.products.find(
+      (item) => item.id === productId,
+    );
+
+    if (!product) {
+      throw new Error('Product not found');
+    }
+
+    const { plan } = getProductPlanPair(billingConfig, planId);
+    const logger = await getLogger();
+
+    logger.info(
+      {
+        name: `billing.personal-account`,
+        planId,
+        customerId,
+        accountId,
+      },
+      `User requested a personal account checkout session. Contacting provider...`,
+    );
+
+    try {
+      // call the payment gateway to create the checkout session
+      const { checkoutToken } = await service.createCheckoutSession({
+        returnUrl,
+        accountId,
+        customerEmail: user.email,
+        customerId,
+        plan,
+        variantQuantities: [],
+        enableDiscountField: product.enableDiscountField,
+      });
+
+      logger.info(
+        {
+          userId: user.id,
+        },
+        `Checkout session created. Returning checkout token to client...`,
+      );
+
+      // return the checkout token to the client
+      // so we can call the payment gateway to complete the checkout
+      return {
+        checkoutToken,
+      };
+    } catch (error) {
+      logger.error(
+        {
+          name: `billing.personal-account`,
+          planId,
+          customerId,
+          accountId,
+          error,
+        },
+        `Checkout session not created due to an error`,
+      );
+
+      throw new Error(`Failed to create a checkout session`);
+    }
+  }
+
+  /**
+   * @name createBillingPortalSession
+   * @description Create a billing portal session for the user
+   * @returns The URL to redirect the user to the billing portal
+   */
+  async createBillingPortalSession() {
+    const { data, error } = await requireUser(this.client);
+
+    if (error ?? !data) {
+      throw new Error('Authentication required');
+    }
+
+    const service = await getBillingGatewayProvider(this.client);
+    const logger = await getLogger();
+
+    const accountId = data.id;
+    const api = createAccountsApi(this.client);
+    const customerId = await api.getCustomerId(accountId);
+    const returnUrl = getBillingPortalReturnUrl();
+
+    if (!customerId) {
+      throw new Error('Customer not found');
+    }
+
+    const ctx = {
+      name: this.namespace,
+      customerId,
+      accountId,
+    };
+
+    logger.info(
+      ctx,
+      `User requested a Billing Portal session. Contacting provider...`,
+    );
+
+    let url: string;
+
+    try {
+      const session = await service.createBillingPortalSession({
+        customerId,
+        returnUrl,
+      });
+
+      url = session.url;
+    } catch (error) {
+      logger.error(
+        {
+          error,
+          ...ctx,
+        },
+        `Failed to create a Billing Portal session`,
+      );
+
+      throw new Error(
+        `Encountered an error creating the Billing Portal session`,
+      );
+    }
+
+    logger.info(ctx, `Session successfully created.`);
+
+    // redirect user to billing portal
+    return url;
+  }
+}
+
+function getCheckoutSessionReturnUrl() {
+  return new URL(
+    pathsConfig.app.personalAccountBillingReturn,
+    appConfig.url,
+  ).toString();
+}
+
+function getBillingPortalReturnUrl() {
+  return new URL(
+    pathsConfig.app.personalAccountBilling,
+    appConfig.url,
+  ).toString();
+}
--- a/app/home/(user)/billing/error.tsx
+++ b/app/home/(user)/billing/error.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+// We reuse the page from the billing module
+// as there is no need to create a new one.
+import BillingErrorPage from '~/home/[account]/billing/error';
+
+export default BillingErrorPage;
--- a/app/home/(user)/billing/layout.tsx
+++ b/app/home/(user)/billing/layout.tsx
@@ -0,0 +1,15 @@
+import { notFound } from 'next/navigation';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+
+function UserBillingLayout(props: React.PropsWithChildren) {
+  const isEnabled = featureFlagsConfig.enablePersonalAccountBilling;
+
+  if (!isEnabled) {
+    notFound();
+  }
+
+  return <>{props.children}</>;
+}
+
+export default UserBillingLayout;
--- a/app/home/(user)/billing/page.tsx
+++ b/app/home/(user)/billing/page.tsx
@@ -0,0 +1,92 @@
+import {
+  BillingPortalCard,
+  CurrentLifetimeOrderCard,
+  CurrentSubscriptionCard,
+} from '@kit/billing-gateway/components';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { If } from '@kit/ui/if';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+// local imports
+import { HomeLayoutPageHeader } from '../_components/home-page-header';
+import { createPersonalAccountBillingPortalSession } from '../billing/_lib/server/server-actions';
+import { PersonalAccountCheckoutForm } from './_components/personal-account-checkout-form';
+import { loadPersonalAccountBillingPageData } from './_lib/server/personal-account-billing-page.loader';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('account:billingTab');
+
+  return {
+    title,
+  };
+};
+
+async function PersonalAccountBillingPage() {
+  const user = await requireUserInServerComponent();
+
+  const [data, customerId] = await loadPersonalAccountBillingPageData(user.id);
+
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      <PageBody>
+        <div className={'flex flex-col space-y-4'}>
+          <If condition={!data}>
+            <PersonalAccountCheckoutForm customerId={customerId} />
+
+            <If condition={customerId}>
+              <CustomerBillingPortalForm />
+            </If>
+          </If>
+
+          <If condition={data}>
+            {(data) => (
+              <div className={'flex w-full max-w-2xl flex-col space-y-6'}>
+                {'active' in data ? (
+                  <CurrentSubscriptionCard
+                    subscription={data}
+                    config={billingConfig}
+                  />
+                ) : (
+                  <CurrentLifetimeOrderCard
+                    order={data}
+                    config={billingConfig}
+                  />
+                )}
+
+                <If condition={!data}>
+                  <PersonalAccountCheckoutForm customerId={customerId} />
+                </If>
+
+                <If condition={customerId}>
+                  <CustomerBillingPortalForm />
+                </If>
+              </div>
+            )}
+          </If>
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(PersonalAccountBillingPage);
+
+function CustomerBillingPortalForm() {
+  return (
+    <form action={createPersonalAccountBillingPortalSession}>
+      <BillingPortalCard />
+    </form>
+  );
+}
--- a/app/home/(user)/billing/return/page.tsx
+++ b/app/home/(user)/billing/return/page.tsx
@@ -0,0 +1,5 @@
+// We reuse the page from the billing module
+// as there is no need to create a new one.
+import ReturnCheckoutSessionPage from '~/home/[account]/billing/return/page';
+
+export default ReturnCheckoutSessionPage;
--- a/app/home/(user)/layout.tsx
+++ b/app/home/(user)/layout.tsx
@@ -0,0 +1,112 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
+import { z } from 'zod';
+
+import { UserWorkspaceContextProvider } from '@kit/accounts/components';
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
+
+import { AppLogo } from '~/components/app-logo';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// home imports
+import { HomeMenuNavigation } from './_components/home-menu-navigation';
+import { HomeMobileNavigation } from './_components/home-mobile-navigation';
+import { HomeSidebar } from './_components/home-sidebar';
+import { loadUserWorkspace } from './_lib/server/load-user-workspace';
+
+function UserHomeLayout({ children }: React.PropsWithChildren) {
+  const state = use(getLayoutState());
+
+  if (state.style === 'sidebar') {
+    return <SidebarLayout>{children}</SidebarLayout>;
+  }
+
+  return <HeaderLayout>{children}</HeaderLayout>;
+}
+
+export default withI18n(UserHomeLayout);
+
+function SidebarLayout({ children }: React.PropsWithChildren) {
+  const workspace = use(loadUserWorkspace());
+  const state = use(getLayoutState());
+
+  return (
+    <UserWorkspaceContextProvider value={workspace}>
+      <SidebarProvider defaultOpen={state.open}>
+        <Page style={'sidebar'}>
+          <PageNavigation>
+            <HomeSidebar workspace={workspace} />
+          </PageNavigation>
+
+          <PageMobileNavigation className={'flex items-center justify-between'}>
+            <MobileNavigation workspace={workspace} />
+          </PageMobileNavigation>
+
+          {children}
+        </Page>
+      </SidebarProvider>
+    </UserWorkspaceContextProvider>
+  );
+}
+
+function HeaderLayout({ children }: React.PropsWithChildren) {
+  const workspace = use(loadUserWorkspace());
+
+  return (
+    <UserWorkspaceContextProvider value={workspace}>
+      <Page style={'header'}>
+        <PageNavigation>
+          <HomeMenuNavigation workspace={workspace} />
+        </PageNavigation>
+
+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <MobileNavigation workspace={workspace} />
+        </PageMobileNavigation>
+
+        {children}
+      </Page>
+    </UserWorkspaceContextProvider>
+  );
+}
+
+function MobileNavigation({
+  workspace,
+}: {
+  workspace: Awaited<ReturnType<typeof loadUserWorkspace>>;
+}) {
+  return (
+    <>
+      <AppLogo />
+
+      <HomeMobileNavigation workspace={workspace} />
+    </>
+  );
+}
+
+async function getLayoutState() {
+  const cookieStore = await cookies();
+
+  const LayoutStyleSchema = z.enum(['sidebar', 'header', 'custom']);
+
+  const layoutStyleCookie = cookieStore.get('layout-style');
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+
+  const sidebarOpen = sidebarOpenCookie
+    ? sidebarOpenCookie.value === 'false'
+    : !personalAccountNavigationConfig.sidebarCollapsed;
+
+  const parsedStyle = LayoutStyleSchema.safeParse(layoutStyleCookie?.value);
+
+  const style = parsedStyle.success
+    ? parsedStyle.data
+    : personalAccountNavigationConfig.style;
+
+  return {
+    open: sidebarOpen,
+    style,
+  };
+}
--- a/app/home/(user)/loading.tsx
+++ b/app/home/(user)/loading.tsx
@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;
--- a/app/home/(user)/page.tsx
+++ b/app/home/(user)/page.tsx
@@ -0,0 +1,32 @@
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { HomeLayoutPageHeader } from './_components/home-page-header';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('account:homePage');
+
+  return {
+    title,
+  };
+};
+
+function UserHomePage() {
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'common:routes.home'} />}
+        description={<Trans i18nKey={'common:homeTabDescription'} />}
+      />
+
+      <PageBody></PageBody>
+    </>
+  );
+}
+
+export default withI18n(UserHomePage);
--- a/app/home/(user)/settings/layout.tsx
+++ b/app/home/(user)/settings/layout.tsx
@@ -0,0 +1,22 @@
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { Trans } from '@kit/ui/trans';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { HomeLayoutPageHeader } from '../_components/home-page-header';
+
+function UserSettingsLayout(props: React.PropsWithChildren) {
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'account:routes.settings'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      {props.children}
+    </>
+  );
+}
+
+export default withI18n(UserSettingsLayout);
--- a/app/home/(user)/settings/page.tsx
+++ b/app/home/(user)/settings/page.tsx
@@ -0,0 +1,50 @@
+import { use } from 'react';
+
+import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
+import { PageBody } from '@kit/ui/page';
+
+import authConfig from '~/config/auth.config';
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+const features = {
+  enableAccountDeletion: featureFlagsConfig.enableAccountDeletion,
+  enablePasswordUpdate: authConfig.providers.password,
+};
+
+const callbackPath = pathsConfig.auth.callback;
+const accountHomePath = pathsConfig.app.accountHome;
+
+const paths = {
+  callback: callbackPath + `?next=${accountHomePath}`,
+};
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('account:settingsTab');
+
+  return {
+    title,
+  };
+};
+
+function PersonalAccountSettingsPage() {
+  const user = use(requireUserInServerComponent());
+
+  return (
+    <PageBody>
+      <div className={'flex w-full flex-1 flex-col lg:max-w-2xl'}>
+        <PersonalAccountSettingsContainer
+          userId={user.id}
+          features={features}
+          paths={paths}
+        />
+      </div>
+    </PageBody>
+  );
+}
+
+export default withI18n(PersonalAccountSettingsPage);
--- a/app/home/[account]/_components/dashboard-demo-charts.tsx
+++ b/app/home/[account]/_components/dashboard-demo-charts.tsx
@@ -0,0 +1,896 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { ArrowDown, ArrowUp, Menu, TrendingUp } from 'lucide-react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+} from 'recharts';
+
+import { Badge } from '@kit/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@kit/ui/chart';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@kit/ui/table';
+
+export default function DashboardDemo() {
+  const mrr = useMemo(() => generateDemoData(), []);
+  const netRevenue = useMemo(() => generateDemoData(), []);
+  const fees = useMemo(() => generateDemoData(), []);
+  const newCustomers = useMemo(() => generateDemoData(), []);
+
+  return (
+    <div
+      className={
+        'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
+      }
+    >
+      <div
+        className={
+          'grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
+        }
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle className={'flex items-center gap-2.5'}>
+              <span>MRR</span>
+              <Trend trend={'up'}>20%</Trend>
+            </CardTitle>
+
+            <CardDescription>
+              <span>Monthly recurring revenue</span>
+            </CardDescription>
+
+            <div>
+              <Figure>{`$${mrr[1]}`}</Figure>
+            </div>
+          </CardHeader>
+
+          <CardContent className={'space-y-4'}>
+            <Chart data={mrr[0]} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className={'flex items-center gap-2.5'}>
+              <span>Revenue</span>
+              <Trend trend={'up'}>12%</Trend>
+            </CardTitle>
+
+            <CardDescription>
+              <span>Total revenue including fees</span>
+            </CardDescription>
+
+            <div>
+              <Figure>{`$${netRevenue[1]}`}</Figure>
+            </div>
+          </CardHeader>
+
+          <CardContent>
+            <Chart data={netRevenue[0]} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className={'flex items-center gap-2.5'}>
+              <span>Fees</span>
+              <Trend trend={'up'}>9%</Trend>
+            </CardTitle>
+
+            <CardDescription>
+              <span>Total fees collected</span>
+            </CardDescription>
+
+            <div>
+              <Figure>{`$${fees[1]}`}</Figure>
+            </div>
+          </CardHeader>
+
+          <CardContent>
+            <Chart data={fees[0]} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className={'flex items-center gap-2.5'}>
+              <span>New Customers</span>
+              <Trend trend={'down'}>-25%</Trend>
+            </CardTitle>
+
+            <CardDescription>
+              <span>Customers who signed up this month</span>
+            </CardDescription>
+
+            <div>
+              <Figure>{`${Number(newCustomers[1]).toFixed(0)}`}</Figure>
+            </div>
+          </CardHeader>
+
+          <CardContent>
+            <Chart data={newCustomers[0]} />
+          </CardContent>
+        </Card>
+      </div>
+
+      <VisitorsChart />
+
+      <PageViewsChart />
+
+      <div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Best Customers</CardTitle>
+            <CardDescription>Showing the top customers by MRR</CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <CustomersTable />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function generateDemoData() {
+  const today = new Date();
+  const formatter = new Intl.DateTimeFormat('en-us', {
+    month: 'long',
+    year: '2-digit',
+  });
+
+  const data: { value: string; name: string }[] = [];
+
+  for (let n = 8; n > 0; n -= 1) {
+    const date = new Date(today.getFullYear(), today.getMonth() - n, 1);
+
+    data.push({
+      name: formatter.format(date),
+      value: (Math.random() * 10).toFixed(1),
+    });
+  }
+
+  const lastValue = data[data.length - 1]?.value;
+
+  return [data, lastValue] as [typeof data, string];
+}
+
+function Chart(
+  props: React.PropsWithChildren<{ data: { value: string; name: string }[] }>,
+) {
+  const chartConfig = {
+    desktop: {
+      label: 'Desktop',
+      color: 'var(--chart-1)',
+    },
+    mobile: {
+      label: 'Mobile',
+      color: 'var(--chart-2)',
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <ChartContainer config={chartConfig}>
+      <LineChart accessibilityLayer data={props.data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="name"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel />}
+        />
+        <Line
+          dataKey="value"
+          type="natural"
+          stroke="var(--color-desktop)"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
+  );
+}
+
+function CustomersTable() {
+  const customers = [
+    {
+      name: 'John Doe',
+      email: 'john@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$120.5',
+      logins: 1020,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Emma Smith',
+      email: 'emma@makerit.dev',
+      plan: 'Basic',
+      mrr: '$65.4',
+      logins: 570,
+      status: 'Possible Churn',
+      trend: 'stale',
+    },
+    {
+      name: 'Robert Johnson',
+      email: 'robert@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$500.1',
+      logins: 2050,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Olivia Brown',
+      email: 'olivia@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$10',
+      logins: 50,
+      status: 'Churn',
+      trend: 'down',
+    },
+    {
+      name: 'Michael Davis',
+      email: 'michael@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$300.2',
+      logins: 1520,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Emily Jones',
+      email: 'emily@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$75.7',
+      logins: 780,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Daniel Garcia',
+      email: 'daniel@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$50',
+      logins: 320,
+      status: 'Possible Churn',
+      trend: 'stale',
+    },
+    {
+      name: 'Liam Miller',
+      email: 'liam@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$90.8',
+      logins: 1260,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Emma Clark',
+      email: 'emma@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$0',
+      logins: 20,
+      status: 'Churn',
+      trend: 'down',
+    },
+    {
+      name: 'Elizabeth Rodriguez',
+      email: 'liz@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$145.3',
+      logins: 1380,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'James Martinez',
+      email: 'james@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$120.5',
+      logins: 940,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Charlotte Ryan',
+      email: 'carlotte@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$80.6',
+      logins: 460,
+      status: 'Possible Churn',
+      trend: 'stale',
+    },
+    {
+      name: 'Lucas Evans',
+      email: 'lucas@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$210.3',
+      logins: 1850,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Sophia Wilson',
+      email: 'sophia@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$10',
+      logins: 35,
+      status: 'Churn',
+      trend: 'down',
+    },
+    {
+      name: 'William Kelly',
+      email: 'will@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$350.2',
+      logins: 1760,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Oliver Thomas',
+      email: 'olly@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$145.6',
+      logins: 1350,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Samantha White',
+      email: 'sam@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$60.3',
+      logins: 425,
+      status: 'Possible Churn',
+      trend: 'stale',
+    },
+    {
+      name: 'Benjamin Lewis',
+      email: 'ben@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$175.8',
+      logins: 1600,
+      status: 'Healthy',
+      trend: 'up',
+    },
+    {
+      name: 'Zoe Harris',
+      email: 'zoe@makerkit.dev',
+      plan: 'Basic',
+      mrr: '$0',
+      logins: 18,
+      status: 'Churn',
+      trend: 'down',
+    },
+    {
+      name: 'Zachary Nelson',
+      email: 'zac@makerkit.dev',
+      plan: 'Pro',
+      mrr: '$255.9',
+      logins: 1785,
+      status: 'Healthy',
+      trend: 'up',
+    },
+  ];
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Customer</TableHead>
+          <TableHead>Plan</TableHead>
+          <TableHead>MRR</TableHead>
+          <TableHead>Logins</TableHead>
+          <TableHead>Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {customers.map((customer) => (
+          <TableRow key={customer.name}>
+            <TableCell className={'flex flex-col'}>
+              <span>{customer.name}</span>
+              <span className={'text-muted-foreground text-sm'}>
+                {customer.email}
+              </span>
+            </TableCell>
+            <TableCell>{customer.plan}</TableCell>
+            <TableCell>{customer.mrr}</TableCell>
+            <TableCell>{customer.logins}</TableCell>
+            <TableCell>
+              <BadgeWithTrend trend={customer.trend}>
+                {customer.status}
+              </BadgeWithTrend>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function BadgeWithTrend(props: React.PropsWithChildren<{ trend: string }>) {
+  const className = useMemo(() => {
+    switch (props.trend) {
+      case 'up':
+        return 'text-green-500';
+      case 'down':
+        return 'text-destructive';
+      case 'stale':
+        return 'text-orange-500';
+    }
+  }, [props.trend]);
+
+  return (
+    <Badge
+      variant={'outline'}
+      className={'border-transparent px-1.5 font-normal'}
+    >
+      <span className={className}>{props.children}</span>
+    </Badge>
+  );
+}
+
+function Figure(props: React.PropsWithChildren) {
+  return (
+    <div className={'font-heading text-2xl font-semibold'}>
+      {props.children}
+    </div>
+  );
+}
+
+function Trend(
+  props: React.PropsWithChildren<{
+    trend: 'up' | 'down' | 'stale';
+  }>,
+) {
+  const Icon = useMemo(() => {
+    switch (props.trend) {
+      case 'up':
+        return <ArrowUp className={'h-3 w-3 text-green-500'} />;
+      case 'down':
+        return <ArrowDown className={'text-destructive h-3 w-3'} />;
+      case 'stale':
+        return <Menu className={'h-3 w-3 text-orange-500'} />;
+    }
+  }, [props.trend]);
+
+  return (
+    <div>
+      <BadgeWithTrend trend={props.trend}>
+        <span className={'flex items-center space-x-1'}>
+          {Icon}
+          <span>{props.children}</span>
+        </span>
+      </BadgeWithTrend>
+    </div>
+  );
+}
+
+export function VisitorsChart() {
+  const chartData = useMemo(
+    () => [
+      { date: '2024-04-01', desktop: 222, mobile: 150 },
+      { date: '2024-04-02', desktop: 97, mobile: 180 },
+      { date: '2024-04-03', desktop: 167, mobile: 120 },
+      { date: '2024-04-04', desktop: 242, mobile: 260 },
+      { date: '2024-04-05', desktop: 373, mobile: 290 },
+      { date: '2024-04-06', desktop: 301, mobile: 340 },
+      { date: '2024-04-07', desktop: 245, mobile: 180 },
+      { date: '2024-04-08', desktop: 409, mobile: 320 },
+      { date: '2024-04-09', desktop: 59, mobile: 110 },
+      { date: '2024-04-10', desktop: 261, mobile: 190 },
+      { date: '2024-04-11', desktop: 327, mobile: 350 },
+      { date: '2024-04-12', desktop: 292, mobile: 210 },
+      { date: '2024-04-13', desktop: 342, mobile: 380 },
+      { date: '2024-04-14', desktop: 137, mobile: 220 },
+      { date: '2024-04-15', desktop: 120, mobile: 170 },
+      { date: '2024-04-16', desktop: 138, mobile: 190 },
+      { date: '2024-04-17', desktop: 446, mobile: 360 },
+      { date: '2024-04-18', desktop: 364, mobile: 410 },
+      { date: '2024-04-19', desktop: 243, mobile: 180 },
+      { date: '2024-04-20', desktop: 89, mobile: 150 },
+      { date: '2024-04-21', desktop: 137, mobile: 200 },
+      { date: '2024-04-22', desktop: 224, mobile: 170 },
+      { date: '2024-04-23', desktop: 138, mobile: 230 },
+      { date: '2024-04-24', desktop: 387, mobile: 290 },
+      { date: '2024-04-25', desktop: 215, mobile: 250 },
+      { date: '2024-04-26', desktop: 75, mobile: 130 },
+      { date: '2024-04-27', desktop: 383, mobile: 420 },
+      { date: '2024-04-28', desktop: 122, mobile: 180 },
+      { date: '2024-04-29', desktop: 315, mobile: 240 },
+      { date: '2024-04-30', desktop: 454, mobile: 380 },
+      { date: '2024-05-01', desktop: 165, mobile: 220 },
+      { date: '2024-05-02', desktop: 293, mobile: 310 },
+      { date: '2024-05-03', desktop: 247, mobile: 190 },
+      { date: '2024-05-04', desktop: 385, mobile: 420 },
+      { date: '2024-05-05', desktop: 481, mobile: 390 },
+      { date: '2024-05-06', desktop: 498, mobile: 520 },
+      { date: '2024-05-07', desktop: 388, mobile: 300 },
+      { date: '2024-05-08', desktop: 149, mobile: 210 },
+      { date: '2024-05-09', desktop: 227, mobile: 180 },
+      { date: '2024-05-10', desktop: 293, mobile: 330 },
+      { date: '2024-05-11', desktop: 335, mobile: 270 },
+      { date: '2024-05-12', desktop: 197, mobile: 240 },
+      { date: '2024-05-13', desktop: 197, mobile: 160 },
+      { date: '2024-05-14', desktop: 448, mobile: 490 },
+      { date: '2024-05-15', desktop: 473, mobile: 380 },
+      { date: '2024-05-16', desktop: 338, mobile: 400 },
+      { date: '2024-05-17', desktop: 499, mobile: 420 },
+      { date: '2024-05-18', desktop: 315, mobile: 350 },
+      { date: '2024-05-19', desktop: 235, mobile: 180 },
+      { date: '2024-05-20', desktop: 177, mobile: 230 },
+      { date: '2024-05-21', desktop: 82, mobile: 140 },
+      { date: '2024-05-22', desktop: 81, mobile: 120 },
+      { date: '2024-05-23', desktop: 252, mobile: 290 },
+      { date: '2024-05-24', desktop: 294, mobile: 220 },
+      { date: '2024-05-25', desktop: 201, mobile: 250 },
+      { date: '2024-05-26', desktop: 213, mobile: 170 },
+      { date: '2024-05-27', desktop: 420, mobile: 460 },
+      { date: '2024-05-28', desktop: 233, mobile: 190 },
+      { date: '2024-05-29', desktop: 78, mobile: 130 },
+      { date: '2024-05-30', desktop: 340, mobile: 280 },
+      { date: '2024-05-31', desktop: 178, mobile: 230 },
+      { date: '2024-06-01', desktop: 178, mobile: 200 },
+      { date: '2024-06-02', desktop: 470, mobile: 410 },
+      { date: '2024-06-03', desktop: 103, mobile: 160 },
+      { date: '2024-06-04', desktop: 439, mobile: 380 },
+      { date: '2024-06-05', desktop: 88, mobile: 140 },
+      { date: '2024-06-06', desktop: 294, mobile: 250 },
+      { date: '2024-06-07', desktop: 323, mobile: 370 },
+      { date: '2024-06-08', desktop: 385, mobile: 320 },
+      { date: '2024-06-09', desktop: 438, mobile: 480 },
+      { date: '2024-06-10', desktop: 155, mobile: 200 },
+      { date: '2024-06-11', desktop: 92, mobile: 150 },
+      { date: '2024-06-12', desktop: 492, mobile: 420 },
+      { date: '2024-06-13', desktop: 81, mobile: 130 },
+      { date: '2024-06-14', desktop: 426, mobile: 380 },
+      { date: '2024-06-15', desktop: 307, mobile: 350 },
+      { date: '2024-06-16', desktop: 371, mobile: 310 },
+      { date: '2024-06-17', desktop: 475, mobile: 520 },
+      { date: '2024-06-18', desktop: 107, mobile: 170 },
+      { date: '2024-06-19', desktop: 341, mobile: 290 },
+      { date: '2024-06-20', desktop: 408, mobile: 450 },
+      { date: '2024-06-21', desktop: 169, mobile: 210 },
+      { date: '2024-06-22', desktop: 317, mobile: 270 },
+      { date: '2024-06-23', desktop: 480, mobile: 530 },
+      { date: '2024-06-24', desktop: 132, mobile: 180 },
+      { date: '2024-06-25', desktop: 141, mobile: 190 },
+      { date: '2024-06-26', desktop: 434, mobile: 380 },
+      { date: '2024-06-27', desktop: 448, mobile: 490 },
+      { date: '2024-06-28', desktop: 149, mobile: 200 },
+      { date: '2024-06-29', desktop: 103, mobile: 160 },
+      { date: '2024-06-30', desktop: 446, mobile: 400 },
+    ],
+    [],
+  );
+
+  const chartConfig = {
+    visitors: {
+      label: 'Visitors',
+    },
+    desktop: {
+      label: 'Desktop',
+      color: 'var(--chart-1)',
+    },
+    mobile: {
+      label: 'Mobile',
+      color: 'var(--chart-2)',
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Visitors</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <ChartContainer className={'h-64 w-full'} config={chartConfig}>
+          <AreaChart accessibilityLayer data={chartData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value: string) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export function PageViewsChart() {
+  const [activeChart, setActiveChart] =
+    useState<keyof typeof chartConfig>('desktop');
+
+  const chartData = [
+    { date: '2024-04-01', desktop: 222, mobile: 150 },
+    { date: '2024-04-02', desktop: 97, mobile: 180 },
+    { date: '2024-04-03', desktop: 167, mobile: 120 },
+    { date: '2024-04-04', desktop: 242, mobile: 260 },
+    { date: '2024-04-05', desktop: 373, mobile: 290 },
+    { date: '2024-04-06', desktop: 301, mobile: 340 },
+    { date: '2024-04-07', desktop: 245, mobile: 180 },
+    { date: '2024-04-08', desktop: 409, mobile: 320 },
+    { date: '2024-04-09', desktop: 59, mobile: 110 },
+    { date: '2024-04-10', desktop: 261, mobile: 190 },
+    { date: '2024-04-11', desktop: 327, mobile: 350 },
+    { date: '2024-04-12', desktop: 292, mobile: 210 },
+    { date: '2024-04-13', desktop: 342, mobile: 380 },
+    { date: '2024-04-14', desktop: 137, mobile: 220 },
+    { date: '2024-04-15', desktop: 120, mobile: 170 },
+    { date: '2024-04-16', desktop: 138, mobile: 190 },
+    { date: '2024-04-17', desktop: 446, mobile: 360 },
+    { date: '2024-04-18', desktop: 364, mobile: 410 },
+    { date: '2024-04-19', desktop: 243, mobile: 180 },
+    { date: '2024-04-20', desktop: 89, mobile: 150 },
+    { date: '2024-04-21', desktop: 137, mobile: 200 },
+    { date: '2024-04-22', desktop: 224, mobile: 170 },
+    { date: '2024-04-23', desktop: 138, mobile: 230 },
+    { date: '2024-04-24', desktop: 387, mobile: 290 },
+    { date: '2024-04-25', desktop: 215, mobile: 250 },
+    { date: '2024-04-26', desktop: 75, mobile: 130 },
+    { date: '2024-04-27', desktop: 383, mobile: 420 },
+    { date: '2024-04-28', desktop: 122, mobile: 180 },
+    { date: '2024-04-29', desktop: 315, mobile: 240 },
+    { date: '2024-04-30', desktop: 454, mobile: 380 },
+    { date: '2024-05-01', desktop: 165, mobile: 220 },
+    { date: '2024-05-02', desktop: 293, mobile: 310 },
+    { date: '2024-05-03', desktop: 247, mobile: 190 },
+    { date: '2024-05-04', desktop: 385, mobile: 420 },
+    { date: '2024-05-05', desktop: 481, mobile: 390 },
+    { date: '2024-05-06', desktop: 498, mobile: 520 },
+    { date: '2024-05-07', desktop: 388, mobile: 300 },
+    { date: '2024-05-08', desktop: 149, mobile: 210 },
+    { date: '2024-05-09', desktop: 227, mobile: 180 },
+    { date: '2024-05-10', desktop: 293, mobile: 330 },
+    { date: '2024-05-11', desktop: 335, mobile: 270 },
+    { date: '2024-05-12', desktop: 197, mobile: 240 },
+    { date: '2024-05-13', desktop: 197, mobile: 160 },
+    { date: '2024-05-14', desktop: 448, mobile: 490 },
+    { date: '2024-05-15', desktop: 473, mobile: 380 },
+    { date: '2024-05-16', desktop: 338, mobile: 400 },
+    { date: '2024-05-17', desktop: 499, mobile: 420 },
+    { date: '2024-05-18', desktop: 315, mobile: 350 },
+    { date: '2024-05-19', desktop: 235, mobile: 180 },
+    { date: '2024-05-20', desktop: 177, mobile: 230 },
+    { date: '2024-05-21', desktop: 82, mobile: 140 },
+    { date: '2024-05-22', desktop: 81, mobile: 120 },
+    { date: '2024-05-23', desktop: 252, mobile: 290 },
+    { date: '2024-05-24', desktop: 294, mobile: 220 },
+    { date: '2024-05-25', desktop: 201, mobile: 250 },
+    { date: '2024-05-26', desktop: 213, mobile: 170 },
+    { date: '2024-05-27', desktop: 420, mobile: 460 },
+    { date: '2024-05-28', desktop: 233, mobile: 190 },
+    { date: '2024-05-29', desktop: 78, mobile: 130 },
+    { date: '2024-05-30', desktop: 340, mobile: 280 },
+    { date: '2024-05-31', desktop: 178, mobile: 230 },
+    { date: '2024-06-01', desktop: 178, mobile: 200 },
+    { date: '2024-06-02', desktop: 470, mobile: 410 },
+    { date: '2024-06-03', desktop: 103, mobile: 160 },
+    { date: '2024-06-04', desktop: 439, mobile: 380 },
+    { date: '2024-06-05', desktop: 88, mobile: 140 },
+    { date: '2024-06-06', desktop: 294, mobile: 250 },
+    { date: '2024-06-07', desktop: 323, mobile: 370 },
+    { date: '2024-06-08', desktop: 385, mobile: 320 },
+    { date: '2024-06-09', desktop: 438, mobile: 480 },
+    { date: '2024-06-10', desktop: 155, mobile: 200 },
+    { date: '2024-06-11', desktop: 92, mobile: 150 },
+    { date: '2024-06-12', desktop: 492, mobile: 420 },
+    { date: '2024-06-13', desktop: 81, mobile: 130 },
+    { date: '2024-06-14', desktop: 426, mobile: 380 },
+    { date: '2024-06-15', desktop: 307, mobile: 350 },
+    { date: '2024-06-16', desktop: 371, mobile: 310 },
+    { date: '2024-06-17', desktop: 475, mobile: 520 },
+    { date: '2024-06-18', desktop: 107, mobile: 170 },
+    { date: '2024-06-19', desktop: 341, mobile: 290 },
+    { date: '2024-06-20', desktop: 408, mobile: 450 },
+    { date: '2024-06-21', desktop: 169, mobile: 210 },
+    { date: '2024-06-22', desktop: 317, mobile: 270 },
+    { date: '2024-06-23', desktop: 480, mobile: 530 },
+    { date: '2024-06-24', desktop: 132, mobile: 180 },
+    { date: '2024-06-25', desktop: 141, mobile: 190 },
+    { date: '2024-06-26', desktop: 434, mobile: 380 },
+    { date: '2024-06-27', desktop: 448, mobile: 490 },
+    { date: '2024-06-28', desktop: 149, mobile: 200 },
+    { date: '2024-06-29', desktop: 103, mobile: 160 },
+    { date: '2024-06-30', desktop: 446, mobile: 400 },
+  ];
+
+  const chartConfig = {
+    views: {
+      label: 'Page Views',
+    },
+    desktop: {
+      label: 'Desktop',
+      color: 'var(--chart-1)',
+    },
+    mobile: {
+      label: 'Mobile',
+      color: 'var(--chart-2)',
+    },
+  } satisfies ChartConfig;
+
+  const total = useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    [],
+  );
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Page Views</CardTitle>
+
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+
+        <div className="flex">
+          {['desktop', 'mobile'].map((key) => {
+            const chart = key as keyof typeof chartConfig;
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-muted-foreground text-xs">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg leading-none font-bold sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </CardHeader>
+
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-64 w-full"
+        >
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                });
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    });
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
--- a/app/home/[account]/_components/dashboard-demo.tsx
+++ b/app/home/[account]/_components/dashboard-demo.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+
+export const DashboardDemo = dynamic(() => import('./dashboard-demo-charts'), {
+  ssr: false,
+  loading: () => (
+    <LoadingOverlay
+      fullPage={false}
+      className={'flex flex-1 flex-col items-center justify-center'}
+    />
+  ),
+});
--- a/app/home/[account]/_components/team-account-accounts-selector.tsx
+++ b/app/home/[account]/_components/team-account-accounts-selector.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { AccountSelector } from '@kit/accounts/account-selector';
+import { SidebarContext } from '@kit/ui/shadcn-sidebar';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
+const features = {
+  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
+};
+
+export function TeamAccountAccountsSelector(params: {
+  selectedAccount: string;
+  userId: string;
+
+  accounts: Array<{
+    label: string | null;
+    value: string | null;
+    image: string | null;
+  }>;
+}) {
+  const router = useRouter();
+  const ctx = useContext(SidebarContext);
+
+  return (
+    <AccountSelector
+      selectedAccount={params.selectedAccount}
+      accounts={params.accounts}
+      userId={params.userId}
+      collapsed={!ctx?.open}
+      features={features}
+      onAccountChange={(value) => {
+        const path = value
+          ? pathsConfig.app.accountHome.replace('[account]', value)
+          : pathsConfig.app.home;
+
+        router.replace(path);
+      }}
+    />
+  );
+}
--- a/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx
+++ b/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { Home, LogOut, Menu } from 'lucide-react';
+
+import { AccountSelector } from '@kit/accounts/account-selector';
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { Trans } from '@kit/ui/trans';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
+
+type Accounts = Array<{
+  label: string | null;
+  value: string | null;
+  image: string | null;
+}>;
+
+const features = {
+  enableTeamAccounts: featureFlagsConfig.enableTeamAccounts,
+  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
+};
+
+export const TeamAccountLayoutMobileNavigation = (
+  props: React.PropsWithChildren<{
+    account: string;
+    userId: string;
+    accounts: Accounts;
+  }>,
+) => {
+  const signOut = useSignOut();
+
+  const Links = getTeamAccountSidebarConfig(props.account).routes.map(
+    (item, index) => {
+      if ('children' in item) {
+        return item.children.map((child) => {
+          return (
+            <DropdownLink
+              key={child.path}
+              Icon={child.Icon}
+              path={child.path}
+              label={child.label}
+            />
+          );
+        });
+      }
+
+      if ('divider' in item) {
+        return <DropdownMenuSeparator key={index} />;
+      }
+    },
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu className={'h-9'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
+        <TeamAccountsModal
+          userId={props.userId}
+          accounts={props.accounts}
+          account={props.account}
+        />
+
+        {Links}
+
+        <DropdownMenuSeparator />
+
+        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function DropdownLink(
+  props: React.PropsWithChildren<{
+    path: string;
+    label: string;
+    Icon: React.ReactNode;
+  }>,
+) {
+  return (
+    <DropdownMenuItem asChild>
+      <Link
+        href={props.path}
+        className={'flex h-12 w-full items-center gap-x-3 px-3'}
+      >
+        {props.Icon}
+
+        <span>
+          <Trans i18nKey={props.label} defaults={props.label} />
+        </span>
+      </Link>
+    </DropdownMenuItem>
+  );
+}
+
+function SignOutDropdownItem(
+  props: React.PropsWithChildren<{
+    onSignOut: () => unknown;
+  }>,
+) {
+  return (
+    <DropdownMenuItem
+      className={'flex h-12 w-full items-center space-x-2'}
+      onClick={props.onSignOut}
+    >
+      <LogOut className={'h-4'} />
+
+      <span>
+        <Trans i18nKey={'common:signOut'} />
+      </span>
+    </DropdownMenuItem>
+  );
+}
+
+function TeamAccountsModal(props: {
+  accounts: Accounts;
+  userId: string;
+  account: string;
+}) {
+  const router = useRouter();
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <DropdownMenuItem
+          className={'flex h-12 w-full items-center space-x-2'}
+          onSelect={(e) => e.preventDefault()}
+        >
+          <Home className={'h-4'} />
+
+          <span>
+            <Trans i18nKey={'common:yourAccounts'} />
+          </span>
+        </DropdownMenuItem>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'common:yourAccounts'} />
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className={'py-6'}>
+          <AccountSelector
+            className={'w-full max-w-full'}
+            collisionPadding={0}
+            userId={props.userId}
+            accounts={props.accounts}
+            features={features}
+            selectedAccount={props.account}
+            onAccountChange={(value) => {
+              const path = value
+                ? pathsConfig.app.accountHome.replace('[account]', value)
+                : pathsConfig.app.home;
+
+              router.replace(path);
+            }}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/app/home/[account]/_components/team-account-layout-page-header.tsx
+++ b/app/home/[account]/_components/team-account-layout-page-header.tsx
@@ -0,0 +1,13 @@
+import { PageHeader } from '@kit/ui/page';
+
+export function TeamAccountLayoutPageHeader(
+  props: React.PropsWithChildren<{
+    title: string | React.ReactNode;
+    description: string | React.ReactNode;
+    account: string;
+  }>,
+) {
+  return (
+    <PageHeader description={props.description}>{props.children}</PageHeader>
+  );
+}
--- a/app/home/[account]/_components/team-account-layout-sidebar-navigation.tsx
+++ b/app/home/[account]/_components/team-account-layout-sidebar-navigation.tsx
@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
+import { SidebarNavigation } from '@kit/ui/shadcn-sidebar';
+
+export function TeamAccountLayoutSidebarNavigation({
+  config,
+}: React.PropsWithChildren<{
+  config: z.infer<typeof NavigationConfigSchema>;
+}>) {
+  return <SidebarNavigation config={config} />;
+}
--- a/app/home/[account]/_components/team-account-layout-sidebar.tsx
+++ b/app/home/[account]/_components/team-account-layout-sidebar.tsx
@@ -0,0 +1,81 @@
+import type { User } from '@supabase/supabase-js';
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+} from '@kit/ui/shadcn-sidebar';
+
+import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
+import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
+
+import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
+import { TeamAccountLayoutSidebarNavigation } from './team-account-layout-sidebar-navigation';
+
+type AccountModel = {
+  label: string | null;
+  value: string | null;
+  image: string | null;
+};
+
+export function TeamAccountLayoutSidebar(props: {
+  account: string;
+  accountId: string;
+  accounts: AccountModel[];
+  user: User;
+}) {
+  return (
+    <SidebarContainer
+      account={props.account}
+      accountId={props.accountId}
+      accounts={props.accounts}
+      user={props.user}
+    />
+  );
+}
+
+function SidebarContainer(props: {
+  account: string;
+  accountId: string;
+  accounts: AccountModel[];
+  user: User;
+}) {
+  const { account, accounts, user } = props;
+  const userId = user.id;
+
+  const config = getTeamAccountSidebarConfig(account);
+  const collapsible = config.sidebarCollapsedStyle;
+
+  return (
+    <Sidebar collapsible={collapsible}>
+      <SidebarHeader className={'h-16 justify-center'}>
+        <div className={'flex items-center justify-between gap-x-3'}>
+          <TeamAccountAccountsSelector
+            userId={userId}
+            selectedAccount={account}
+            accounts={accounts}
+          />
+
+          <div className={'group-data-[minimized=true]:hidden'}>
+            <TeamAccountNotifications
+              userId={userId}
+              accountId={props.accountId}
+            />
+          </div>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
+        <TeamAccountLayoutSidebarNavigation config={config} />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarContent>
+          <ProfileAccountDropdownContainer user={props.user} />
+        </SidebarContent>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
--- a/app/home/[account]/_components/team-account-navigation-menu.tsx
+++ b/app/home/[account]/_components/team-account-navigation-menu.tsx
@@ -0,0 +1,74 @@
+import {
+  BorderedNavigationMenu,
+  BorderedNavigationMenuItem,
+} from '@kit/ui/bordered-navigation-menu';
+
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
+import { TeamAccountAccountsSelector } from '~/home/[account]/_components/team-account-accounts-selector';
+
+// local imports
+import { TeamAccountWorkspace } from '../_lib/server/team-account-workspace.loader';
+import { TeamAccountNotifications } from './team-account-notifications';
+
+export function TeamAccountNavigationMenu(props: {
+  workspace: TeamAccountWorkspace;
+}) {
+  const { account, user, accounts } = props.workspace;
+
+  const routes = getTeamAccountSidebarConfig(account.slug).routes.reduce<
+    Array<{
+      path: string;
+      label: string;
+      Icon?: React.ReactNode;
+      end?: boolean | ((path: string) => boolean);
+    }>
+  >((acc, item) => {
+    if ('children' in item) {
+      return [...acc, ...item.children];
+    }
+
+    if ('divider' in item) {
+      return acc;
+    }
+
+    return [...acc, item];
+  }, []);
+
+  return (
+    <div className={'flex w-full flex-1 justify-between'}>
+      <div className={'flex items-center space-x-8'}>
+        <AppLogo />
+
+        <BorderedNavigationMenu>
+          {routes.map((route) => (
+            <BorderedNavigationMenuItem {...route} key={route.path} />
+          ))}
+        </BorderedNavigationMenu>
+      </div>
+
+      <div className={'flex items-center justify-end space-x-2.5'}>
+        <TeamAccountNotifications accountId={account.id} userId={user.id} />
+
+        <TeamAccountAccountsSelector
+          userId={user.id}
+          selectedAccount={account.slug}
+          accounts={accounts.map((account) => ({
+            label: account.name,
+            value: account.slug,
+            image: account.picture_url,
+          }))}
+        />
+
+        <div>
+          <ProfileAccountDropdownContainer
+            user={user}
+            account={account}
+            showProfileName={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/home/[account]/_components/team-account-notifications.tsx
+++ b/app/home/[account]/_components/team-account-notifications.tsx
@@ -0,0 +1,19 @@
+import { NotificationsPopover } from '@kit/notifications/components';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+
+export function TeamAccountNotifications(params: {
+  userId: string;
+  accountId: string;
+}) {
+  if (!featuresFlagConfig.enableNotifications) {
+    return null;
+  }
+
+  return (
+    <NotificationsPopover
+      accountIds={[params.userId, params.accountId]}
+      realtime={featuresFlagConfig.realtimeNotifications}
+    />
+  );
+}
--- a/app/home/[account]/_lib/server/team-account-billing-page.loader.ts
+++ b/app/home/[account]/_lib/server/team-account-billing-page.loader.ts
@@ -0,0 +1,43 @@
+import 'server-only';
+
+import { cache } from 'react';
+
+import { z } from 'zod';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { createTeamAccountsApi } from '@kit/team-accounts/api';
+
+/**
+ * The variable BILLING_MODE represents the billing mode for a service. It can
+ * have either the value 'subscription' or 'one-time'. If not provided, the default
+ * value is 'subscription'. The value can be overridden by the environment variable
+ * BILLING_MODE.
+ *
+ * If the value is 'subscription', we fetch the subscription data for the user.
+ * If the value is 'one-time', we fetch the orders data for the user.
+ * if none of these suits your needs, please override the below function.
+ */
+const BILLING_MODE = z
+  .enum(['subscription', 'one-time'])
+  .default('subscription')
+  .parse(process.env.BILLING_MODE);
+
+/**
+ * @name loadTeamAccountBillingPage
+ * @description Load the team account billing page data for the given account.
+ */
+export const loadTeamAccountBillingPage = cache(teamAccountBillingPageLoader);
+
+function teamAccountBillingPageLoader(accountId: string) {
+  const client = getSupabaseServerClient();
+  const api = createTeamAccountsApi(client);
+
+  const data =
+    BILLING_MODE === 'subscription'
+      ? api.getSubscription(accountId)
+      : api.getOrder(accountId);
+
+  const customerId = api.getCustomerId(accountId);
+
+  return Promise.all([data, customerId]);
+}
--- a/app/home/[account]/_lib/server/team-account-workspace.loader.ts
+++ b/app/home/[account]/_lib/server/team-account-workspace.loader.ts
@@ -0,0 +1,47 @@
+import 'server-only';
+
+import { cache } from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { createTeamAccountsApi } from '@kit/team-accounts/api';
+
+import pathsConfig from '~/config/paths.config';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+export type TeamAccountWorkspace = Awaited<
+  ReturnType<typeof loadTeamWorkspace>
+>;
+
+/**
+ * Load the account workspace data.
+ * We place this function into a separate file so it can be reused in multiple places across the server components.
+ *
+ * This function is used in the layout component for the account workspace.
+ * It is cached so that the data is only fetched once per request.
+ *
+ * @param accountSlug
+ */
+export const loadTeamWorkspace = cache(workspaceLoader);
+
+async function workspaceLoader(accountSlug: string) {
+  const client = getSupabaseServerClient();
+  const api = createTeamAccountsApi(client);
+
+  const [workspace, user] = await Promise.all([
+    api.getAccountWorkspace(accountSlug),
+    requireUserInServerComponent(),
+  ]);
+
+  // we cannot find any record for the selected account
+  // so we redirect the user to the home page
+  if (!workspace.data?.account) {
+    return redirect(pathsConfig.app.home);
+  }
+
+  return {
+    ...workspace.data,
+    user,
+  };
+}
--- a/app/home/[account]/billing/_components/embedded-checkout-form.tsx
+++ b/app/home/[account]/billing/_components/embedded-checkout-form.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export const EmbeddedCheckoutForm = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return EmbeddedCheckout;
+  },
+  {
+    ssr: false,
+  },
+);
--- a/app/home/[account]/billing/_components/team-account-checkout-form.tsx
+++ b/app/home/[account]/billing/_components/team-account-checkout-form.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import dynamic from 'next/dynamic';
+import { useParams } from 'next/navigation';
+
+import { PlanPicker } from '@kit/billing-gateway/components';
+import { useAppEvents } from '@kit/shared/events';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+
+import { createTeamAccountCheckoutSession } from '../_lib/server/server-actions';
+
+const EmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return {
+      default: EmbeddedCheckout,
+    };
+  },
+  {
+    ssr: false,
+  },
+);
+
+export function TeamAccountCheckoutForm(params: {
+  accountId: string;
+  customerId: string | null | undefined;
+}) {
+  const routeParams = useParams();
+  const [pending, startTransition] = useTransition();
+  const appEvents = useAppEvents();
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
+
+  // If the checkout token is set, render the embedded checkout component
+  if (checkoutToken) {
+    return (
+      <EmbeddedCheckout
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+        onClose={() => setCheckoutToken(undefined)}
+      />
+    );
+  }
+
+  // only allow trial if the user is not already a customer
+  const canStartTrial = !params.customerId;
+
+  // Otherwise, render the plan picker component
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <Trans i18nKey={'billing:manageTeamPlan'} />
+        </CardTitle>
+
+        <CardDescription>
+          <Trans i18nKey={'billing:manageTeamPlanDescription'} />
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <PlanPicker
+          pending={pending}
+          config={billingConfig}
+          canStartTrial={canStartTrial}
+          onSubmit={({ planId, productId }) => {
+            startTransition(async () => {
+              const slug = routeParams.account as string;
+
+              appEvents.emit({
+                type: 'checkout.started',
+                payload: {
+                  planId,
+                  account: slug,
+                },
+              });
+
+              const { checkoutToken } = await createTeamAccountCheckoutSession({
+                planId,
+                productId,
+                slug,
+                accountId: params.accountId,
+              });
+
+              setCheckoutToken(checkoutToken);
+            });
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}
--- a/app/home/[account]/billing/_lib/schema/team-billing.schema.ts
+++ b/app/home/[account]/billing/_lib/schema/team-billing.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const TeamBillingPortalSchema = z.object({
+  accountId: z.string().uuid(),
+  slug: z.string().min(1),
+});
+
+export const TeamCheckoutSchema = z.object({
+  slug: z.string().min(1),
+  productId: z.string().min(1),
+  planId: z.string().min(1),
+  accountId: z.string().uuid(),
+});
--- a/app/home/[account]/billing/_lib/server/server-actions.ts
+++ b/app/home/[account]/billing/_lib/server/server-actions.ts
@@ -0,0 +1,65 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+
+// billing imports
+import {
+  TeamBillingPortalSchema,
+  TeamCheckoutSchema,
+} from '../schema/team-billing.schema';
+import { createTeamBillingService } from './team-billing.service';
+
+/**
+ * @name enabled
+ * @description This feature flag is used to enable or disable team account billing.
+ */
+const enabled = featureFlagsConfig.enableTeamAccountBilling;
+
+/**
+ * @name createTeamAccountCheckoutSession
+ * @description Creates a checkout session for a team account.
+ */
+export const createTeamAccountCheckoutSession = enhanceAction(
+  async (data) => {
+    if (!enabled) {
+      throw new Error('Team account billing is not enabled');
+    }
+
+    const client = getSupabaseServerClient();
+    const service = createTeamBillingService(client);
+
+    return service.createCheckout(data);
+  },
+  {
+    schema: TeamCheckoutSchema,
+  },
+);
+
+/**
+ * @name createBillingPortalSession
+ * @description Creates a Billing Session Portal and redirects the user to the
+ * provider's hosted instance
+ */
+export const createBillingPortalSession = enhanceAction(
+  async (formData: FormData) => {
+    if (!enabled) {
+      throw new Error('Team account billing is not enabled');
+    }
+
+    const params = TeamBillingPortalSchema.parse(Object.fromEntries(formData));
+
+    const client = getSupabaseServerClient();
+    const service = createTeamBillingService(client);
+
+    // get url to billing portal
+    const url = await service.createBillingPortalSession(params);
+
+    return redirect(url);
+  },
+  {},
+);
--- a/app/home/[account]/billing/_lib/server/team-billing.service.ts
+++ b/app/home/[account]/billing/_lib/server/team-billing.service.ts
@@ -0,0 +1,325 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { z } from 'zod';
+
+import { LineItemSchema } from '@kit/billing';
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { getLogger } from '@kit/shared/logger';
+import { requireUser } from '@kit/supabase/require-user';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { createTeamAccountsApi } from '@kit/team-accounts/api';
+
+import appConfig from '~/config/app.config';
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+import { Database } from '~/lib/database.types';
+
+import { TeamCheckoutSchema } from '../schema/team-billing.schema';
+
+export function createTeamBillingService(client: SupabaseClient<Database>) {
+  return new TeamBillingService(client);
+}
+
+/**
+ * @name TeamBillingService
+ * @description Service for managing billing for team accounts.
+ */
+class TeamBillingService {
+  private readonly namespace = 'billing.team-account';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name createCheckout
+   * @description Creates a checkout session for a Team account
+   */
+  async createCheckout(params: z.infer<typeof TeamCheckoutSchema>) {
+    // we require the user to be authenticated
+    const { data: user } = await requireUser(this.client);
+
+    if (!user) {
+      throw new Error('Authentication required');
+    }
+
+    const userId = user.id;
+    const accountId = params.accountId;
+    const logger = await getLogger();
+
+    const ctx = {
+      userId,
+      accountId,
+      name: this.namespace,
+    };
+
+    logger.info(ctx, `Requested checkout session. Processing...`);
+
+    const api = createTeamAccountsApi(this.client);
+
+    // verify permissions to manage billing
+    const hasPermission = await api.hasPermission({
+      userId,
+      accountId,
+      permission: 'billing.manage',
+    });
+
+    // if the user does not have permission to manage billing for the account
+    // then we should not proceed
+    if (!hasPermission) {
+      logger.warn(
+        ctx,
+        `User without permissions attempted to create checkout.`,
+      );
+
+      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(this.client);
+
+    // retrieve the plan from the configuration
+    // so we can assign the correct checkout data
+    const { plan, product } = getPlanDetails(params.productId, params.planId);
+
+    // find the customer ID for the account if it exists
+    // (eg. if the account has been billed before)
+    const customerId = await api.getCustomerId(accountId);
+    const customerEmail = user.email;
+
+    // the return URL for the checkout session
+    const returnUrl = getCheckoutSessionReturnUrl(params.slug);
+
+    // get variant quantities
+    // useful for setting an initial quantity value for certain line items
+    // such as per seat
+    const variantQuantities = await this.getVariantQuantities(
+      plan.lineItems,
+      accountId,
+    );
+
+    logger.info(
+      {
+        ...ctx,
+        planId: plan.id,
+      },
+      `Creating checkout session...`,
+    );
+
+    try {
+      // call the payment gateway to create the checkout session
+      const { checkoutToken } = await service.createCheckoutSession({
+        accountId,
+        plan,
+        returnUrl,
+        customerEmail,
+        customerId,
+        variantQuantities,
+        enableDiscountField: product.enableDiscountField,
+      });
+
+      // return the checkout token to the client
+      // so we can call the payment gateway to complete the checkout
+      return {
+        checkoutToken,
+      };
+    } catch (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        `Error creating the checkout session`,
+      );
+
+      throw new Error(`Checkout not created`);
+    }
+  }
+
+  /**
+   * @name createBillingPortalSession
+   * @description Creates a new billing portal session for a team account
+   * @param accountId
+   * @param slug
+   */
+  async createBillingPortalSession({
+    accountId,
+    slug,
+  }: {
+    accountId: string;
+    slug: string;
+  }) {
+    const client = getSupabaseServerClient();
+    const logger = await getLogger();
+
+    logger.info(
+      {
+        accountId,
+        name: this.namespace,
+      },
+      `Billing portal session requested. Processing...`,
+    );
+
+    const { data: user, error } = await requireUser(client);
+
+    if (error ?? !user) {
+      throw new Error('Authentication required');
+    }
+
+    const userId = user.id;
+
+    const api = createTeamAccountsApi(client);
+
+    // we require the user to have permissions to manage billing for the account
+    const hasPermission = await api.hasPermission({
+      userId,
+      accountId,
+      permission: 'billing.manage',
+    });
+
+    // if the user does not have permission to manage billing for the account
+    // then we should not proceed
+    if (!hasPermission) {
+      logger.warn(
+        {
+          userId,
+          accountId,
+          name: this.namespace,
+        },
+        `User without permissions attempted to create billing portal session.`,
+      );
+
+      throw new Error('Permission denied');
+    }
+
+    const customerId = await api.getCustomerId(accountId);
+
+    if (!customerId) {
+      throw new Error('Customer not found');
+    }
+
+    logger.info(
+      {
+        userId,
+        customerId,
+        accountId,
+        name: this.namespace,
+      },
+      `Creating billing portal session...`,
+    );
+
+    // get the billing gateway provider
+    const service = await getBillingGatewayProvider(client);
+
+    try {
+      const returnUrl = getBillingPortalReturnUrl(slug);
+
+      const { url } = await service.createBillingPortalSession({
+        customerId,
+        returnUrl,
+      });
+
+      // redirect the user to the billing portal
+      return url;
+    } catch (error) {
+      logger.error(
+        {
+          userId,
+          customerId,
+          accountId,
+          name: this.namespace,
+          error,
+        },
+        `Billing Portal session was not created`,
+      );
+
+      throw new Error(`Error creating Billing Portal`);
+    }
+  }
+
+  /**
+   * Retrieves variant quantities for line items.
+   */
+  private async getVariantQuantities(
+    lineItems: z.infer<typeof LineItemSchema>[],
+    accountId: string,
+  ) {
+    const variantQuantities: Array<{
+      quantity: number;
+      variantId: string;
+    }> = [];
+
+    for (const lineItem of lineItems) {
+      // check if the line item is a per seat type
+      const isPerSeat = lineItem.type === 'per_seat';
+
+      if (isPerSeat) {
+        // get the current number of members in the account
+        const quantity = await this.getCurrentMembersCount(accountId);
+
+        const item = {
+          quantity,
+          variantId: lineItem.id,
+        };
+
+        variantQuantities.push(item);
+      }
+    }
+
+    // set initial quantity for the line items
+    return variantQuantities;
+  }
+
+  private async getCurrentMembersCount(accountId: string) {
+    const api = createTeamAccountsApi(this.client);
+    const logger = await getLogger();
+
+    try {
+      const count = await api.getMembersCount(accountId);
+
+      return count ?? 1;
+    } catch (error) {
+      logger.error(
+        {
+          accountId,
+          error,
+          name: `billing.checkout`,
+        },
+        `Encountered an error while fetching the number of existing seats`,
+      );
+
+      return Promise.reject(error as Error);
+    }
+  }
+}
+
+function getCheckoutSessionReturnUrl(accountSlug: string) {
+  return getAccountUrl(pathsConfig.app.accountBillingReturn, accountSlug);
+}
+
+function getBillingPortalReturnUrl(accountSlug: string) {
+  return getAccountUrl(pathsConfig.app.accountBilling, accountSlug);
+}
+
+function getAccountUrl(path: string, slug: string) {
+  return new URL(path, appConfig.url).toString().replace('[account]', slug);
+}
+
+function getPlanDetails(productId: string, planId: string) {
+  const product = billingConfig.products.find(
+    (product) => product.id === productId,
+  );
+
+  if (!product) {
+    throw new Error('Product not found');
+  }
+
+  const plan = product?.plans.find((plan) => plan.id === planId);
+
+  if (!plan) {
+    throw new Error('Plan not found');
+  }
+
+  return { plan, product };
+}
--- a/app/home/[account]/billing/error.tsx
+++ b/app/home/[account]/billing/error.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
+import { useCaptureException } from '@kit/monitoring/hooks';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { Button } from '@kit/ui/button';
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+export default function BillingErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useCaptureException(error);
+
+  return (
+    <>
+      <PageHeader description={<AppBreadcrumbs />} />
+
+      <PageBody>
+        <div className={'flex flex-col space-y-4'}>
+          <Alert variant={'destructive'}>
+            <ExclamationTriangleIcon className={'h-4'} />
+
+            <AlertTitle>
+              <Trans i18nKey={'billing:planPickerAlertErrorTitle'} />
+            </AlertTitle>
+
+            <AlertDescription>
+              <Trans i18nKey={'billing:planPickerAlertErrorDescription'} />
+            </AlertDescription>
+          </Alert>
+
+          <div>
+            <Button variant={'outline'} onClick={reset}>
+              <Trans i18nKey={'common:retry'} />
+            </Button>
+          </div>
+        </div>
+      </PageBody>
+    </>
+  );
+}
--- a/app/home/[account]/billing/layout.tsx
+++ b/app/home/[account]/billing/layout.tsx
@@ -0,0 +1,15 @@
+import { notFound } from 'next/navigation';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+
+function TeamAccountBillingLayout(props: React.PropsWithChildren) {
+  const isEnabled = featureFlagsConfig.enableTeamAccountBilling;
+
+  if (!isEnabled) {
+    notFound();
+  }
+
+  return <>{props.children}</>;
+}
+
+export default TeamAccountBillingLayout;
--- a/app/home/[account]/billing/page.tsx
+++ b/app/home/[account]/billing/page.tsx
@@ -0,0 +1,135 @@
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
+import {
+  BillingPortalCard,
+  CurrentLifetimeOrderCard,
+  CurrentSubscriptionCard,
+} from '@kit/billing-gateway/components';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { If } from '@kit/ui/if';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
+
+import billingConfig from '~/config/billing.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { TeamAccountLayoutPageHeader } from '../_components/team-account-layout-page-header';
+import { loadTeamAccountBillingPage } from '../_lib/server/team-account-billing-page.loader';
+import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
+import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form';
+import { createBillingPortalSession } from './_lib/server/server-actions';
+
+interface TeamAccountBillingPageProps {
+  params: Promise<{ account: string }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('teams:billing.pageTitle');
+
+  return {
+    title,
+  };
+};
+
+async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
+  const account = (await params).account;
+  const workspace = await loadTeamWorkspace(account);
+  const accountId = workspace.account.id;
+
+  const [data, customerId] = await loadTeamAccountBillingPage(accountId);
+
+  const canManageBilling =
+    workspace.account.permissions.includes('billing.manage');
+
+  const Checkout = () => {
+    if (!canManageBilling) {
+      return <CannotManageBillingAlert />;
+    }
+
+    return (
+      <TeamAccountCheckoutForm customerId={customerId} accountId={accountId} />
+    );
+  };
+
+  const BillingPortal = () => {
+    if (!canManageBilling || !customerId) {
+      return null;
+    }
+
+    return (
+      <form action={createBillingPortalSession}>
+        <input type="hidden" name={'accountId'} value={accountId} />
+        <input type="hidden" name={'slug'} value={account} />
+
+        <BillingPortalCard />
+      </form>
+    );
+  };
+
+  return (
+    <>
+      <TeamAccountLayoutPageHeader
+        account={account}
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      <PageBody>
+        <div
+          className={cn(`flex w-full flex-col space-y-4`, {
+            'max-w-2xl': data,
+          })}
+        >
+          <If
+            condition={data}
+            fallback={
+              <div>
+                <Checkout />
+              </div>
+            }
+          >
+            {(data) => {
+              if ('active' in data) {
+                return (
+                  <CurrentSubscriptionCard
+                    subscription={data}
+                    config={billingConfig}
+                  />
+                );
+              }
+
+              return (
+                <CurrentLifetimeOrderCard order={data} config={billingConfig} />
+              );
+            }}
+          </If>
+
+          <BillingPortal />
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(TeamAccountBillingPage);
+
+function CannotManageBillingAlert() {
+  return (
+    <Alert variant={'warning'}>
+      <ExclamationTriangleIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'billing:cannotManageBillingAlertTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'billing:cannotManageBillingAlertDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}
--- a/app/home/[account]/billing/return/page.tsx
+++ b/app/home/[account]/billing/return/page.tsx
@@ -0,0 +1,87 @@
+import { notFound, redirect } from 'next/navigation';
+
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { BillingSessionStatus } from '@kit/billing-gateway/components';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import billingConfig from '~/config/billing.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+import { EmbeddedCheckoutForm } from '../_components/embedded-checkout-form';
+
+interface SessionPageProps {
+  searchParams: Promise<{
+    session_id: string;
+  }>;
+}
+
+async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
+  const sessionId = (await searchParams).session_id;
+
+  if (!sessionId) {
+    redirect('../');
+  }
+
+  const { customerEmail, checkoutToken } = await loadCheckoutSession(sessionId);
+
+  if (checkoutToken) {
+    return (
+      <EmbeddedCheckoutForm
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className={'fixed top-48 left-0 z-50 mx-auto w-full'}>
+        <BillingSessionStatus
+          redirectPath={'../billing'}
+          customerEmail={customerEmail ?? ''}
+        />
+      </div>
+
+      <BlurryBackdrop />
+    </>
+  );
+}
+
+export default withI18n(ReturnCheckoutSessionPage);
+
+function BlurryBackdrop() {
+  return (
+    <div
+      className={
+        'bg-background/30 fixed top-0 left-0 w-full backdrop-blur-sm' +
+        ' !m-0 h-full'
+      }
+    />
+  );
+}
+
+async function loadCheckoutSession(sessionId: string) {
+  await requireUserInServerComponent();
+
+  const client = getSupabaseServerClient();
+  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,
+  };
+}
--- a/app/home/[account]/layout.tsx
+++ b/app/home/[account]/layout.tsx
@@ -0,0 +1,147 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
+import { z } from 'zod';
+
+import { TeamAccountWorkspaceContextProvider } from '@kit/team-accounts/components';
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
+
+import { AppLogo } from '~/components/app-logo';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { TeamAccountLayoutMobileNavigation } from './_components/team-account-layout-mobile-navigation';
+import { TeamAccountLayoutSidebar } from './_components/team-account-layout-sidebar';
+import { TeamAccountNavigationMenu } from './_components/team-account-navigation-menu';
+import { loadTeamWorkspace } from './_lib/server/team-account-workspace.loader';
+
+type TeamWorkspaceLayoutProps = React.PropsWithChildren<{
+  params: Promise<{ account: string }>;
+}>;
+
+function TeamWorkspaceLayout({ children, params }: TeamWorkspaceLayoutProps) {
+  const account = use(params).account;
+  const state = use(getLayoutState(account));
+
+  if (state.style === 'sidebar') {
+    return <SidebarLayout account={account}>{children}</SidebarLayout>;
+  }
+
+  return <HeaderLayout account={account}>{children}</HeaderLayout>;
+}
+
+function SidebarLayout({
+  account,
+  children,
+}: React.PropsWithChildren<{
+  account: string;
+}>) {
+  const data = use(loadTeamWorkspace(account));
+  const state = use(getLayoutState(account));
+
+  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
+    label: name,
+    value: slug,
+    image: picture_url,
+  }));
+
+  return (
+    <TeamAccountWorkspaceContextProvider value={data}>
+      <SidebarProvider defaultOpen={state.open}>
+        <Page style={'sidebar'}>
+          <PageNavigation>
+            <TeamAccountLayoutSidebar
+              account={account}
+              accountId={data.account.id}
+              accounts={accounts}
+              user={data.user}
+            />
+          </PageNavigation>
+
+          <PageMobileNavigation className={'flex items-center justify-between'}>
+            <AppLogo />
+
+            <div className={'flex space-x-4'}>
+              <TeamAccountLayoutMobileNavigation
+                userId={data.user.id}
+                accounts={accounts}
+                account={account}
+              />
+            </div>
+          </PageMobileNavigation>
+
+          {children}
+        </Page>
+      </SidebarProvider>
+    </TeamAccountWorkspaceContextProvider>
+  );
+}
+
+function HeaderLayout({
+  account,
+  children,
+}: React.PropsWithChildren<{
+  account: string;
+}>) {
+  const data = use(loadTeamWorkspace(account));
+
+  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
+    label: name,
+    value: slug,
+    image: picture_url,
+  }));
+
+  return (
+    <TeamAccountWorkspaceContextProvider value={data}>
+      <Page style={'header'}>
+        <PageNavigation>
+          <TeamAccountNavigationMenu workspace={data} />
+        </PageNavigation>
+
+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <AppLogo />
+
+          <div className={'group-data-[mobile:hidden]'}>
+            <TeamAccountLayoutMobileNavigation
+              userId={data.user.id}
+              accounts={accounts}
+              account={account}
+            />
+          </div>
+        </PageMobileNavigation>
+
+        {children}
+      </Page>
+    </TeamAccountWorkspaceContextProvider>
+  );
+}
+
+async function getLayoutState(account: string) {
+  const cookieStore = await cookies();
+  const config = getTeamAccountSidebarConfig(account);
+
+  const LayoutStyleSchema = z
+    .enum(['sidebar', 'header', 'custom'])
+    .default(config.style);
+
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+  const layoutCookie = cookieStore.get('layout-style');
+
+  const layoutStyle = LayoutStyleSchema.safeParse(layoutCookie?.value);
+
+  const sidebarOpenCookieValue = sidebarOpenCookie
+    ? sidebarOpenCookie.value === 'false'
+    : !config.sidebarCollapsed;
+
+  const style = layoutStyle.success ? layoutStyle.data : config.style;
+
+  return {
+    open: sidebarOpenCookieValue,
+    style,
+  };
+}
+
+export default withI18n(TeamWorkspaceLayout);
--- a/app/home/[account]/loading.tsx
+++ b/app/home/[account]/loading.tsx
@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;
--- a/app/home/[account]/members/_lib/server/members-page.loader.ts
+++ b/app/home/[account]/members/_lib/server/members-page.loader.ts
@@ -0,0 +1,79 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
+import { Database } from '~/lib/database.types';
+
+/**
+ * Load data for the members page
+ * @param client
+ * @param slug
+ */
+export async function loadMembersPageData(
+  client: SupabaseClient<Database>,
+  slug: string,
+) {
+  return Promise.all([
+    loadAccountMembers(client, slug),
+    loadInvitations(client, slug),
+    canAddMember,
+    loadTeamWorkspace(slug),
+  ]);
+}
+
+/**
+ * @name canAddMember
+ * @description Check if the current user can add a member to the account
+ *
+ * This needs additional logic to determine if the user can add a member to the account
+ * Please implement the logic and return a boolean value
+ *
+ * The same check needs to be added when creating an invitation
+ *
+ */
+async function canAddMember() {
+  return Promise.resolve(true);
+}
+
+/**
+ * Load account members
+ * @param client
+ * @param account
+ */
+async function loadAccountMembers(
+  client: SupabaseClient<Database>,
+  account: string,
+) {
+  const { data, error } = await client.rpc('get_account_members', {
+    account_slug: account,
+  });
+
+  if (error) {
+    console.error(error);
+    throw error;
+  }
+
+  return data ?? [];
+}
+
+/**
+ * Load account invitations
+ * @param client
+ * @param account
+ */
+async function loadInvitations(
+  client: SupabaseClient<Database>,
+  account: string,
+) {
+  const { data, error } = await client.rpc('get_account_invitations', {
+    account_slug: account,
+  });
+
+  if (error) {
+    console.error(error);
+    throw error;
+  }
+
+  return data ?? [];
+}
--- a/app/home/[account]/members/page.tsx
+++ b/app/home/[account]/members/page.tsx
@@ -0,0 +1,135 @@
+import { PlusCircle } from 'lucide-react';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import {
+  AccountInvitationsTable,
+  AccountMembersTable,
+  InviteMembersDialogContainer,
+} from '@kit/team-accounts/components';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { If } from '@kit/ui/if';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { TeamAccountLayoutPageHeader } from '../_components/team-account-layout-page-header';
+import { loadMembersPageData } from './_lib/server/members-page.loader';
+
+interface TeamAccountMembersPageProps {
+  params: Promise<{ account: string }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('teams:members.pageTitle');
+
+  return {
+    title,
+  };
+};
+
+async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
+  const client = getSupabaseServerClient();
+  const slug = (await params).account;
+
+  const [members, invitations, canAddMember, { user, account }] =
+    await loadMembersPageData(client, slug);
+
+  const canManageRoles = account.permissions.includes('roles.manage');
+  const canManageInvitations = account.permissions.includes('invites.manage');
+
+  const isPrimaryOwner = account.primary_owner_user_id === user.id;
+  const currentUserRoleHierarchy = account.role_hierarchy_level;
+
+  return (
+    <>
+      <TeamAccountLayoutPageHeader
+        title={<Trans i18nKey={'common:routes.members'} />}
+        description={<AppBreadcrumbs />}
+        account={account.slug}
+      />
+
+      <PageBody>
+        <div className={'flex w-full max-w-4xl flex-col space-y-4 pb-32'}>
+          <Card>
+            <CardHeader className={'flex flex-row justify-between'}>
+              <div className={'flex flex-col space-y-1.5'}>
+                <CardTitle>
+                  <Trans i18nKey={'common:accountMembers'} />
+                </CardTitle>
+
+                <CardDescription>
+                  <Trans i18nKey={'common:membersTabDescription'} />
+                </CardDescription>
+              </div>
+
+              <If condition={canManageInvitations && canAddMember}>
+                <InviteMembersDialogContainer
+                  userRoleHierarchy={currentUserRoleHierarchy}
+                  accountSlug={account.slug}
+                >
+                  <Button size={'sm'} data-test={'invite-members-form-trigger'}>
+                    <PlusCircle className={'mr-2 w-4'} />
+
+                    <span>
+                      <Trans i18nKey={'teams:inviteMembersButton'} />
+                    </span>
+                  </Button>
+                </InviteMembersDialogContainer>
+              </If>
+            </CardHeader>
+
+            <CardContent>
+              <AccountMembersTable
+                userRoleHierarchy={currentUserRoleHierarchy}
+                currentUserId={user.id}
+                currentAccountId={account.id}
+                members={members}
+                isPrimaryOwner={isPrimaryOwner}
+                canManageRoles={canManageRoles}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className={'flex flex-row justify-between'}>
+              <div className={'flex flex-col space-y-1.5'}>
+                <CardTitle>
+                  <Trans i18nKey={'teams:pendingInvitesHeading'} />
+                </CardTitle>
+
+                <CardDescription>
+                  <Trans i18nKey={'teams:pendingInvitesDescription'} />
+                </CardDescription>
+              </div>
+            </CardHeader>
+
+            <CardContent>
+              <AccountInvitationsTable
+                permissions={{
+                  canUpdateInvitation: canManageRoles,
+                  canRemoveInvitation: canManageRoles,
+                  currentUserRoleHierarchy,
+                }}
+                invitations={invitations}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(TeamAccountMembersPage);
--- a/app/home/[account]/page.tsx
+++ b/app/home/[account]/page.tsx
@@ -0,0 +1,44 @@
+import { use } from 'react';
+
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { DashboardDemo } from './_components/dashboard-demo';
+import { TeamAccountLayoutPageHeader } from './_components/team-account-layout-page-header';
+
+interface TeamAccountHomePageProps {
+  params: Promise<{ account: string }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('teams:home.pageTitle');
+
+  return {
+    title,
+  };
+};
+
+function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
+  const account = use(params).account;
+
+  return (
+    <>
+      <TeamAccountLayoutPageHeader
+        account={account}
+        title={<Trans i18nKey={'common:routes.dashboard'} />}
+        description={<AppBreadcrumbs />}
+      />
+      
+      <PageBody>
+        <DashboardDemo />
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(TeamAccountHomePage);
--- a/app/home/[account]/settings/page.tsx
+++ b/app/home/[account]/settings/page.tsx
@@ -0,0 +1,70 @@
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { createTeamAccountsApi } from '@kit/team-accounts/api';
+import { TeamAccountSettingsContainer } from '@kit/team-accounts/components';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+
+// local imports
+import { TeamAccountLayoutPageHeader } from '../_components/team-account-layout-page-header';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('teams:settings:pageTitle');
+
+  return {
+    title,
+  };
+};
+
+interface TeamAccountSettingsPageProps {
+  params: Promise<{ account: string }>;
+}
+
+const paths = {
+  teamAccountSettings: pathsConfig.app.accountSettings,
+};
+
+async function TeamAccountSettingsPage(props: TeamAccountSettingsPageProps) {
+  const api = createTeamAccountsApi(getSupabaseServerClient());
+  const slug = (await props.params).account;
+  const data = await api.getTeamAccount(slug);
+
+  const account = {
+    id: data.id,
+    name: data.name,
+    pictureUrl: data.picture_url,
+    slug: data.slug as string,
+    primaryOwnerUserId: data.primary_owner_user_id,
+  };
+
+  const features = {
+    enableTeamDeletion: featuresFlagConfig.enableTeamDeletion,
+  };
+
+  return (
+    <>
+      <TeamAccountLayoutPageHeader
+        account={account.slug}
+        title={<Trans i18nKey={'teams:settings.pageTitle'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      <PageBody>
+        <div className={'flex max-w-2xl flex-1 flex-col'}>
+          <TeamAccountSettingsContainer
+            account={account}
+            paths={paths}
+            features={features}
+          />
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default TeamAccountSettingsPage;
--- a/app/home/loading.tsx
+++ b/app/home/loading.tsx
@@ -0,0 +1,5 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default function Loading() {
+  return <GlobalLoader fullPage />;
+}