chore: clean up types

The getSocialProviders endpoint was manually pushing "oidc" to the 
providers array when OIDC env vars are present, but Better Auth already 
includes the OIDC provider in ctx.context.socialProviders when it is 
configured. This resulted in ["oidc","oidc"] being returned from 
/api/auth/social-providers, causing a duplicate provider registration 
that led to a TypeError: Cannot read properties of null (reading 'id') 
during the OIDC login callback, preventing all OIDC logins.

Fix: remove the manual providers.push("oidc") block as it is redundant.

.env.example

@@ -2,7 +2,7 @@
 
 # Required environment variables
 NEXT_PUBLIC_BASE_URL= # e.g. https://kan.bn
-BETTER_AUTH_SECRET= # Random 32+ char string (can gen with: openssl rand -base64 24 | tr -dc 'a-zA-Z0-9' | head -c 32)
+BETTER_AUTH_SECRET= # Random 32+ char string (can gen with: openssl rand -base64 26 | tr -dc 'a-zA-Z0-9' | head -c 32)
 
 # Fill if you want to use an external database
 POSTGRES_URL= # e.g. postgresql://kan:your_password@your_host:5432/kan
@@ -28,12 +28,14 @@ S3_ENDPOINT=
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
 S3_FORCE_PATH_STYLE=
+# S3_AVATAR_UPLOAD_LIMIT=2097152 # Avatar upload size limit in bytes (default: 2MB)
 NEXT_PUBLIC_STORAGE_URL=
 NEXT_PUBLIC_AVATAR_BUCKET_NAME=
 NEXT_PUBLIC_ATTACHMENTS_BUCKET_NAME=
 NEXT_PUBLIC_STORAGE_DOMAIN=
 NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS=
 
+
 # Auth config (optional)
 NEXT_PUBLIC_ALLOW_CREDENTIALS=
 NEXT_PUBLIC_DISABLE_SIGN_UP=
@@ -49,6 +51,9 @@ TRELLO_APP_SECRET=
 # If not provided, rate limiting will use in-memory storage
 REDIS_URL= # e.g. redis://default:your_password@your_host:6379
 
+# Logging (optional - debug, info, warn, error; defaults to debug in dev, info in prod)
+LOG_LEVEL=
+
 # OAuth providers (optional)
 BETTER_AUTH_TRUSTED_ORIGINS=
 # Optional: Restrict OIDC/Social sign-ins to specific email domains (comma-separated)

.github/workflows/docker-publish.yml

@@ -6,8 +6,6 @@ name: Docker
 # documentation.
 
 on:
-  schedule:
-    - cron: "21 21 * * *"
   push:
     # Only trigger on tags (releases), not main branch pushes
     # Main branch builds are handled by workflow_run after Translate completes
@@ -26,6 +24,7 @@ env:
   REGISTRY: ghcr.io
   # github.repository as <account>/<repo>
   IMAGE_NAME: ${{ github.repository }}
+  MIGRATE_IMAGE_NAME: ${{ github.repository }}-migrate
 
 jobs:
   build:
@@ -83,7 +82,22 @@ jobs:
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=semver,pattern={{major}}
-            type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=latest,enable=${{ github.ref_type == 'tag' }}
+            type=raw,value=edge,enable={{is_default_branch}}
+
+      - name: Extract Docker metadata (migrate)
+        id: meta-migrate
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.MIGRATE_IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=raw,value=latest,enable=${{ github.ref_type == 'tag' }}
+            type=raw,value=edge,enable={{is_default_branch}}
 
       # Extract version from git tag or ref
       # Uses git describe to get latest tag + commit hash in SemVer format: 1.2.3+abc1234
@@ -138,6 +152,22 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
+      - name: Build and push migrate Docker image
+        id: build-and-push-migrate
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          context: .
+          file: apps/web/Dockerfile
+          target: migrate
+          push: ${{ github.event_name != 'pull_request' }}
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta-migrate.outputs.tags }}
+          labels: ${{ steps.meta-migrate.outputs.labels }}
+          build-args: |
+            APP_VERSION=${{ steps.version.outputs.version }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker
       # repository is public to avoid leaking data.  If you would like to publish
@@ -152,3 +182,10 @@ jobs:
         # This step uses the identity token to provision an ephemeral certificate
         # against the sigstore community Fulcio instance.
         run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}
+
+      - name: Sign the published migrate Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          TAGS: ${{ steps.meta-migrate.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push-migrate.outputs.digest }}
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.gitignore

@@ -54,3 +54,5 @@ i18n.cache
 
 # pgdata
 /apps/web/pgdata
+
+.claude

AGENTS.md

@@ -185,9 +185,17 @@ Use `assertUserInWorkspace` helper for workspace checks.
 
 - Use TRPCError with appropriate codes (UNAUTHORIZED, NOT_FOUND, etc.)
 - Provide user-friendly error messages
-- Log errors appropriately
+- Log errors appropriately using the `@kan/logger` package
 - Show popup notifications for user-facing errors
 
+### Logging
+
+- Import from `@kan/logger`: `import { createLogger } from "@kan/logger"`
+- Create a module-scoped logger: `const logger = createLogger("module-name")`
+- Log level is controlled by `LOG_LEVEL` env var (debug, info, warn, error)
+- Defaults to `debug` in development, `info` in production
+- Never use `console.log` — always use the logger
+
 ## Common Patterns
 
 ### Creating a Card
@@ -219,6 +227,16 @@ Use `assertUserInWorkspace` helper for workspace checks.
 5. **Frontend**: Add UI components in `apps/web/src/`
 6. **i18n**: Add translations for new strings
 
+## Adding a New Environment Variable
+
+Update all of the following:
+
+1. `.env.example` — add the variable with an empty value and a comment explaining it
+2. `turbo.json` — add to `globalEnv` (or `globalPassThroughEnv` for CI/platform vars)
+3. `docker-compose.yml` — add to the `web` service `environment` section
+4. `cloud/docker-compose.yml` — add to the `web` service `environment` section
+5. `README.md` — add a row to the Environment Variables table
+
 ## Database Changes
 
 - Always create migrations (never modify existing migrations)

README.md

@@ -57,39 +57,61 @@ The easiest way to deploy Kan is through Railway. We've partnered with Railway t
 
 ### Docker Compose
 
-Alternatively, you can self-host Kan with Docker Compose. This will set up everything for you including your postgres database.
+Alternatively, you can self-host Kan with Docker Compose. This will set up everything for you including your postgres database and automatically run migrations.
 
-1. Create a new file called `docker-compose.yml` and paste the following configuration:
+1. Create a `.env` file with your environment variables (see [Environment Variables](#environment-variables-) section below)
+
+2. Use the provided `docker-compose.yml` file or create your own with the following configuration:
 
 ```yaml
 services:
+  migrate:
+    image: ghcr.io/kanbn/kan-migrate:latest
+    container_name: kan-migrate
+    networks:
+      - kan-network
+    environment:
+      - POSTGRES_URL=${POSTGRES_URL}
+    depends_on:
+      postgres:
+        condition: service_healthy
+    restart: "no"
+
   web:
     image: ghcr.io/kanbn/kan:latest
     container_name: kan-web
     ports:
-      - "3000:3000"
+      - "${WEB_PORT:-3000}:3000"
     networks:
       - kan-network
+    env_file:
+      - .env
     environment:
-      NEXT_PUBLIC_BASE_URL: http://localhost:3000
-      BETTER_AUTH_SECRET: your_auth_secret
-      POSTGRES_URL: postgresql://kan:your_postgres_password@postgres:5432/kan_db
-      NEXT_PUBLIC_ALLOW_CREDENTIALS: true
+      - NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
+      - BETTER_AUTH_SECRET=${BETTER_AUTH_SECRET}
+      - POSTGRES_URL=${POSTGRES_URL}
+      - NEXT_PUBLIC_ALLOW_CREDENTIALS=true
     depends_on:
-      - postgres
+      migrate:
+        condition: service_completed_successfully
     restart: unless-stopped
 
   postgres:
     image: postgres:15
     container_name: kan-db
     environment:
-      POSTGRES_DB: kan_db
-      POSTGRES_USER: kan
-      POSTGRES_PASSWORD: your_postgres_password
+      - POSTGRES_DB=kan_db
+      - POSTGRES_USER=kan
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
     ports:
       - 5432:5432
     volumes:
       - kan_postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U kan -d kan_db"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
     restart: unless-stopped
     networks:
       - kan-network
@@ -101,23 +123,23 @@ volumes:
   kan_postgres_data:
 ```
 
-2. Start the containers in detached mode:
+3. Start the containers in detached mode:
 
 ```bash
 docker compose up -d
 ```
 
-3. Access Kan at http://localhost:3000
+The `migrate` service will automatically run database migrations before the web service starts. The application will be available at http://localhost:3000 (or the port specified in `WEB_PORT`).
 
-The application will be running in the background. You can manage the containers using these commands:
+**Managing containers:**
 
 - To stop the containers: `docker compose down`
 - To view logs: `docker compose logs -f`
+- To view logs for a specific service: `docker compose logs -f web` or `docker compose logs -f migrate`
 - To restart the containers: `docker compose restart`
+- To rebuild after code changes: `docker compose up -d --build`
 
-For the complete Docker Compose configuration, see [docker-compose.yml](./docker-compose.yml) in the repository.
-
-> **Note**: The Docker Compose configuration shown above is a minimal example. For a complete setup with all features (email, OAuth, file uploads, etc.), you'll need to create a `.env` file with the required environment variables. See the Environment Variables section below for the full list of available options.
+For the complete Docker Compose configuration with all optional features, see [docker-compose.yml](./docker-compose.yml) in the repository.
 
 ## Local Development 🧑‍💻
 
@@ -181,6 +203,7 @@ pnpm dev
 | `S3_ACCESS_KEY_ID`                        | S3 access key                                             | For file uploads (optional with IRSA) | `xxx`                                                       |
 | `S3_SECRET_ACCESS_KEY`                    | S3 secret key                                             | For file uploads (optional with IRSA) | `xxx`                                                       |
 | `S3_FORCE_PATH_STYLE`                     | Use path-style URLs for S3                                | For file uploads                      | `true`                                                      |
+| `S3_AVATAR_UPLOAD_LIMIT`                  | Maximum avatar file size in bytes                         | For file uploads                      | `2097152` (2MB)                                             |
 | `NEXT_PUBLIC_STORAGE_URL`                 | Storage service URL                                       | For file uploads                      | `https://storage.kanbn.com`                                 |
 | `NEXT_PUBLIC_STORAGE_DOMAIN`              | Storage domain name                                       | For file uploads                      | `kanbn.com`                                                 |
 | `NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS`     | Use virtual-hosted style URLs (bucket.domain.com)         | For file uploads (optional)           | `true`                                                      |
@@ -190,6 +213,7 @@ pnpm dev
 | `NEXT_PUBLIC_DISABLE_SIGN_UP`             | Disable sign up                                           | For authentication                    | `false`                                                     |
 | `NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY` | Hide “Powered by kan.bn” on public boards (self-host)     | For white labelling                   | `true`                                                      |
 | `KAN_ADMIN_API_KEY`                       | Admin API key for stats and admin endpoints               | For admin/monitoring                  | `your-secret-admin-key`                                     |
+| `LOG_LEVEL`                               | Log verbosity level (debug, info, warn, error)            | No (defaults to debug in dev, info in prod) | `info`                                                 |
 
 See `.env.example` for a complete list of supported environment variables.
 

apps/docs/api-reference/introduction.mdx

@@ -11,10 +11,10 @@ https://kan.bn/api/v1
 
 ## Authentication
 
-Most endpoints require authentication using your API key. You can create one in the [settings page](https://kan.bn/settings) of your account. Include this key in the `x-api-key` header of each request.
+Most endpoints require authentication using your API key. You can create one in the [settings page](https://kan.bn/settings) of your account. Include this key as a Bearer token in the `Authorization` header of each request.
 
 ```
-'x-api-key': kan_123456789
+'Authorization': 'Bearer kan_123456789'
 ```
 
 ## Response codes

apps/web/next.config.js

@@ -28,6 +28,7 @@ const config = {
     ],
   },
 
+
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: [
     "@kan/api",
@@ -65,6 +66,8 @@ const config = {
       },
     },
   },
+  serverExternalPackages: ["pino"],
+
   experimental: {
     // instrumentationHook: true,
     swcPlugins: [["@lingui/swc-plugin", {}]],

apps/web/package.json

@@ -27,6 +27,7 @@
     "@kan/api": "workspace:*",
     "@kan/auth": "workspace:*",
     "@kan/db": "workspace:^",
+    "@kan/logger": "workspace:^",
     "@kan/shared": "workspace:^",
     "@lingui/babel-preset-react": "^2.9.2",
     "@lingui/conf": "^5.3.2",

apps/web/public/manifest.json

@@ -0,0 +1,39 @@
+{
+  "background_color": "#000000",
+  "categories": [
+    "business",
+    "productivity",
+    "utilities"
+  ],
+  "description": "The open source Trello alternative.",
+  "display": "standalone",
+  "icons": [
+    {
+      "sizes": "512x512",
+      "src": "/icon-512.png",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "id": "/",
+  "screenshots": [
+    {
+      "sizes": "1624x1561",
+      "src": "/screenshot-wide.png",
+      "type": "image/png",
+      "form_factor": "wide"
+    },
+    {
+      "sizes": "1290x2796",
+      "src": "/screenshot-narrow.png",
+      "type": "image/png",
+      "form_factor": "narrow"
+    }
+  ],
+  "orientation": "portrait-primary",
+  "name": "Kan.bn | The open source alternative to Trello",
+  "scope": "/",
+  "short_name": "Kan.bn",
+  "start_url": "/",
+  "theme_color": "#000000"
+}

apps/web/src/components/CommandPallette.tsx

@@ -145,7 +145,6 @@ export default function CommandPallette({
                         value={result}
                         className="cursor-pointer select-none px-4 py-3 data-[focus]:bg-light-200 hover:bg-light-200 focus:outline-none dark:data-[focus]:bg-dark-200 dark:hover:bg-dark-200"
                         onClick={() => {
-                          console.log("clicked", url);
                           void router.push(url);
                           onClose();
                           setQuery("");

apps/web/src/components/Dashboard.tsx

@@ -1,4 +1,6 @@
 import { useTheme } from "next-themes";
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
 import { useEffect, useRef, useState } from "react";
 import {
   TbLayoutSidebarLeftCollapse,
@@ -43,6 +45,7 @@ export default function Dashboard({
   const { resolvedTheme } = useTheme();
   const { openModal } = useModal();
   const { availableWorkspaces, hasLoaded } = useWorkspace();
+  const router = useRouter();
 
   const { data: session, isPending: sessionLoading } = authClient.useSession();
   const { data: user, isLoading: userLoading } = api.user.getUser.useQuery(
@@ -98,9 +101,13 @@ export default function Dashboard({
 
   useEffect(() => {
     if (hasLoaded && availableWorkspaces.length === 0) {
-      openModal("NEW_WORKSPACE", undefined, undefined, false);
+      if (env("NEXT_PUBLIC_KAN_ENV") === "cloud") {
+        router.push(`/onboarding/select-plan?returnUrl=${encodeURIComponent(window.location.pathname)}`);
+      } else {
+        openModal("NEW_WORKSPACE", undefined, undefined, false);
+      }
     }
-  }, [hasLoaded, availableWorkspaces.length, openModal]);
+  }, [hasLoaded, availableWorkspaces.length, openModal, router]);
 
   const isDarkMode = resolvedTheme === "dark";
 

apps/web/src/components/DateSelector.tsx

@@ -17,9 +17,14 @@ import { twMerge } from "tailwind-merge";
 interface DateSelectorProps {
   selectedDate?: Date | null;
   onDateSelect?: (date: Date | undefined) => void;
+  weekStartsOn?: 0 | 1 | 6;
 }
 
-const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
+const DateSelector = ({
+  selectedDate,
+  onDateSelect,
+  weekStartsOn = 1,
+}: DateSelectorProps) => {
   const [currentMonth, setCurrentMonth] = useState(() => {
     return selectedDate ? startOfMonth(selectedDate) : startOfMonth(new Date());
   });
@@ -28,18 +33,18 @@ const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
   const year = format(currentMonth, "yyyy");
 
   const dayHeaders = useMemo(() => {
-    const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 }); // Monday
+    const weekStart = startOfWeek(new Date(), { weekStartsOn });
     return eachDayOfInterval({
       start: weekStart,
       end: new Date(weekStart.getTime() + 6 * 24 * 60 * 60 * 1000),
     }).map((date) => format(date, "EEEEEE")); // Shortest localized day name
-  }, []);
+  }, [weekStartsOn]);
 
   const days = useMemo(() => {
     const monthStart = startOfMonth(currentMonth);
     const monthEnd = endOfMonth(currentMonth);
-    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 }); // Monday
-    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 }); // Monday
+    const calendarStart = startOfWeek(monthStart, { weekStartsOn });
+    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn });
 
     return eachDayOfInterval({ start: calendarStart, end: calendarEnd }).map(
       (date) => {
@@ -53,7 +58,7 @@ const DateSelector = ({ selectedDate, onDateSelect }: DateSelectorProps) => {
         };
       },
     );
-  }, [currentMonth, selectedDate]);
+  }, [currentMonth, selectedDate, weekStartsOn]);
 
   const handlePreviousMonth = () => {
     setCurrentMonth(subMonths(currentMonth, 1));

apps/web/src/components/Editor.tsx

@@ -85,7 +85,7 @@ export interface RenderSuggestionsProps {
 export interface WorkspaceMember {
   publicId: string;
   user: {
-    id: string;
+    id: string | null;
     name: string | null;
     image: string | null;
   } | null;

apps/web/src/components/FontSizeSelector.tsx

@@ -0,0 +1,32 @@
+import { t } from "@lingui/core/macro";
+import { HiOutlineAdjustmentsHorizontal } from "react-icons/hi2";
+
+import { useFontSize, type FontSize } from "~/providers/font-size";
+
+const fontSizeOptions: { value: FontSize; label: () => string }[] = [
+  { value: "small", label: () => t`Small` },
+  { value: "medium", label: () => t`Medium` },
+  { value: "large", label: () => t`Large` },
+];
+
+export function FontSizeSelector() {
+  const { fontSize, setFontSize } = useFontSize();
+
+  return (
+    <div className="relative">
+      <HiOutlineAdjustmentsHorizontal className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+      <select
+        id="font-size-select"
+        value={fontSize}
+        onChange={(e) => setFontSize(e.target.value as FontSize)}
+        className="block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 text-sm shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500"
+      >
+        {fontSizeOptions.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label()}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

apps/web/src/components/Input.tsx

@@ -88,7 +88,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             </button>
           )}
           {iconRight && type !== "password" && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 leading-[0]">
               {iconRight}
             </div>
           )}

apps/web/src/components/LabelForm.tsx

@@ -39,7 +39,7 @@ export function LabelForm({
       labelPublicId: entityId,
     },
     {
-      enabled: isEdit && !!entityId,
+      enabled: !!isEdit && entityId.length >= 12,
     },
   );
 
@@ -75,7 +75,7 @@ export function LabelForm({
           reset(newFormState);
         }
       } catch (e) {
-        console.log(e);
+        console.error(e);
       }
     },
   });
@@ -207,7 +207,7 @@ export function LabelForm({
         />
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isEdit && (
           <Toggle
             label={t`Create another`}
@@ -231,9 +231,7 @@ export function LabelForm({
           <Button
             type="submit"
             isLoading={updateLabel.isPending || createLabel.isPending}
-            disabled={
-              !watch("name")
-            }
+            disabled={!watch("name")}
           >
             {isEdit ? t`Update label` : t`Create label`}
           </Button>

apps/web/src/components/NewWorkspaceForm.tsx

@@ -1,21 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import {
-  HiBolt,
-  HiCheck,
-  HiCheckBadge,
-  HiInformationCircle,
-  HiXMark,
-} from "react-icons/hi2";
+import { HiCheck, HiXMark } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
-import Toggle from "~/components/Toggle";
 import { useDebounce } from "~/hooks/useDebounce";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -54,7 +47,6 @@ export function NewWorkspaceForm() {
     watch,
     trigger,
     clearErrors,
-    setValue,
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: {
@@ -67,16 +59,10 @@ export function NewWorkspaceForm() {
 
   const hasAvailableWorkspaces = availableWorkspaces.length > 0;
 
-  const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
-
   const slug = watch("slug");
   const [debouncedSlug] = useDebounce(slug, 500);
   const isTyping = slug !== debouncedSlug;
 
-  // Pro toggle state management
-  const [isProToggleEnabled, setIsProToggleEnabled] = useState(false);
-  const [lastAvailableSlug, setLastAvailableSlug] = useState<string>("");
-
   // Validate slug only after debounce
   useEffect(() => {
     if (isTyping) {
@@ -101,7 +87,7 @@ export function NewWorkspaceForm() {
   const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
 
   const createWorkspace = api.workspace.create.useMutation({
-    onSuccess: async (values, variables) => {
+    onSuccess: (values) => {
       if (values.publicId && values.name) {
         void utils.workspace.all.invalidate();
         switchWorkspace({
@@ -111,44 +97,9 @@ export function NewWorkspaceForm() {
           slug: values.slug,
           plan: values.plan,
           role: "admin",
+          weekStartDay: 1,
         });
 
-        // If in cloud and Pro toggle is enabled, create checkout session for pro
-        if (env("NEXT_PUBLIC_KAN_ENV") === "cloud" && isProToggleEnabled) {
-          try {
-            const response = await fetch(
-              "/api/stripe/create_checkout_session",
-              {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                  slug: slug || undefined,
-                  workspacePublicId: values.publicId,
-                  cancelUrl: "/settings/workspace?upgrade=pro",
-                  successUrl: "/boards",
-                }),
-              },
-            );
-
-            const data = await response.json();
-            const url = (data as { url: string }).url;
-
-            if (url) {
-              window.location.href = url;
-              return; // Don't close modal if redirecting to checkout
-            }
-          } catch (error) {
-            console.error("Error creating checkout session:", error);
-            showPopup({
-              header: t`Error upgrading to Pro`,
-              message: t`Workspace created successfully. You can upgrade later in settings.`,
-              icon: "warning",
-            });
-          }
-        }
-
         closeModal();
       }
     },
@@ -167,57 +118,8 @@ export function NewWorkspaceForm() {
     if (nameElement) nameElement.focus();
   }, []);
 
-  const [shouldShowBenefits, setShouldShowBenefits] = useState(false);
-
   const isValidSlug = slug && slug.length >= 3 && !errors.slug;
 
-  useEffect(() => {
-    if (
-      isCloudEnv &&
-      !checkWorkspaceSlugAvailability.isPending &&
-      isValidSlug
-    ) {
-      const isAvailable = isWorkspaceSlugAvailable?.isAvailable === true;
-      setShouldShowBenefits(isAvailable);
-
-      // Automatically enable Pro toggle when slug is available
-      if (isAvailable) {
-        setIsProToggleEnabled(true);
-        setLastAvailableSlug(slug);
-      }
-    }
-  }, [
-    isValidSlug,
-    isWorkspaceSlugAvailable?.isAvailable,
-    checkWorkspaceSlugAvailability.isPending,
-    slug,
-    isCloudEnv,
-  ]);
-
-  // Reset benefits when slug becomes invalid
-  useEffect(() => {
-    if (!isValidSlug) {
-      setShouldShowBenefits(false);
-    }
-  }, [isValidSlug]);
-
-  // Handle Pro toggle changes
-  const handleProToggleChange = () => {
-    if (isProToggleEnabled) {
-      // Turning off: clear the slug and disable Pro
-      setValue("slug", "");
-      setIsProToggleEnabled(false);
-    } else {
-      // Turning on: restore the last available slug if we have one
-      if (lastAvailableSlug) {
-        setValue("slug", lastAvailableSlug);
-      }
-      setIsProToggleEnabled(true);
-    }
-  };
-
-  const showProBenefits = isProToggleEnabled;
-
   const onSubmit = (values: FormValues) => {
     // Don't submit if slug is provided but not available
     if (values.slug && isWorkspaceSlugAvailable?.isAvailable === false) {
@@ -226,7 +128,7 @@ export function NewWorkspaceForm() {
 
     createWorkspace.mutate({
       name: values.name,
-      slug: !isCloudEnv && values.slug ? values.slug : undefined,
+      slug: values.slug,
     });
   };
 
@@ -289,11 +191,7 @@ export function NewWorkspaceForm() {
                   ? t`This workspace URL is reserved`
                   : undefined)
             }
-            prefix={
-              env("NEXT_PUBLIC_KAN_ENV") === "cloud"
-                ? "kan.bn/"
-                : `${env("NEXT_PUBLIC_BASE_URL")}/`
-            }
+            prefix={`${env("NEXT_PUBLIC_BASE_URL")}/`}
             iconRight={
               slug && slug.length >= 3 && !errors.slug ? (
                 isWorkspaceSlugAvailable?.isAvailable ? (
@@ -310,68 +208,9 @@ export function NewWorkspaceForm() {
               }
             }}
           />
-
-          {slug && slug.length >= 3 && shouldShowBenefits && (
-            <div className="mt-2 flex items-center gap-1">
-              <HiInformationCircle className="h-4 w-4 text-dark-900" />
-              <p className="text-xs text-gray-500 dark:text-dark-900">
-                {t`Custom URLs require upgrading to a Pro plan`}
-              </p>
-            </div>
-          )}
         </div>
-
-        {showProBenefits && (
-          <div className="mt-6">
-            <div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
-              <div className="space-y-3">
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                      {t`Unlimited members`}
-                    </span>
-                    <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
-                      {t`Launch offer`}
-                    </span>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                    {t`Custom workspace URL`}
-                  </span>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                      {t`Board analytics`}
-                    </span>
-                    <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
-                      {t`Coming soon`}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
-      <div
-        className={twMerge(
-          "mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600",
-          !showProBenefits && "mt-12",
-        )}
-      >
-        {/* Pro Toggle - only show in cloud environment */}
-        {isCloudEnv && (
-          <Toggle
-            isChecked={isProToggleEnabled}
-            onChange={handleProToggleChange}
-            label={t`Upgrade to Pro ($29/month)`}
-          />
-        )}
+      <div className="mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <div>
           <Button
             type="submit"

apps/web/src/components/PageHead.tsx

@@ -8,6 +8,7 @@ export const PageHead = ({ title }: { title: string }) => {
         name="viewport"
         content="width=device-width, initial-scale=1, maximum-scale=1"
       />
+      <link rel="manifest" href="/manifest.json" />
     </Head>
   );
 };

apps/web/src/components/PlainTextEditor.tsx

@@ -0,0 +1,130 @@
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useEffect, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface PlainTextEditorProps {
+  content: string;
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onEnter?: (value: string) => void;
+  onEscape?: () => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function PlainTextEditor({
+  content,
+  onChange,
+  onBlur,
+  onEnter,
+  onEscape,
+  readOnly = false,
+  placeholder,
+  className,
+}: PlainTextEditorProps) {
+  const onEnterRef = useRef(onEnter);
+  const onEscapeRef = useRef(onEscape);
+  const onBlurRef = useRef(onBlur);
+  const onChangeRef = useRef(onChange);
+  const contentRef = useRef(content);
+
+  useEffect(() => {
+    onEnterRef.current = onEnter;
+  }, [onEnter]);
+  useEffect(() => {
+    onEscapeRef.current = onEscape;
+  }, [onEscape]);
+  useEffect(() => {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    contentRef.current = content;
+  }, [content]);
+
+  const editor = useEditor(
+    {
+      extensions: [
+        StarterKit.configure({
+          bold: false,
+          italic: false,
+          strike: false,
+          code: false,
+          codeBlock: false,
+          blockquote: false,
+          heading: false,
+          bulletList: false,
+          orderedList: false,
+          listItem: false,
+          horizontalRule: false,
+          hardBreak: false,
+        }),
+        Placeholder.configure({ placeholder }),
+      ],
+      content,
+      editable: !readOnly,
+      onUpdate: ({ editor }) => onChangeRef.current?.(editor.getText()),
+      onBlur: ({ editor }) => onBlurRef.current?.(editor.getText()),
+      editorProps: {
+        handleKeyDown: (view, event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onEnterRef.current?.(view.state.doc.textContent.trim());
+            return true;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            // Reset to original content before calling the callback
+            editor?.commands.setContent(contentRef.current, false);
+            editor?.commands.blur();
+            onEscapeRef.current?.();
+            return true;
+          }
+          return false;
+        },
+        attributes: {
+          class: "outline-none focus:outline-none focus-visible:ring-0",
+        },
+      },
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+    if (content !== editor.getText()) {
+      editor.commands.setContent(content, false);
+    }
+  }, [content, editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!readOnly);
+  }, [readOnly, editor]);
+
+  return (
+    <>
+      <style jsx global>{`
+        .plain-text-editor p.is-empty::before {
+          content: attr(data-placeholder);
+          float: left;
+          height: 0;
+          pointer-events: none;
+          color: var(--placeholder-color, #9ca3af);
+        }
+        .plain-text-editor .tiptap p {
+          margin: 0 !important;
+        }
+      `}</style>
+      <EditorContent
+        editor={editor}
+        className={twMerge("plain-text-editor", className)}
+      />
+    </>
+  );
+}

apps/web/src/components/SettingsLayout.tsx

@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
 import {
   HiChevronDown,
   HiOutlineBanknotes,
+  HiOutlineBolt,
   HiOutlineCodeBracketSquare,
   HiOutlineRectangleGroup,
   HiOutlineShieldCheck,
@@ -64,6 +65,12 @@ export function SettingsLayout({ children, currentTab }: SettingsLayoutProps) {
       label: t`API`,
       condition: true,
     },
+    {
+      key: "webhooks",
+      icon: <HiOutlineBolt />,
+      label: t`Webhooks`,
+      condition: isAdmin,
+    },
     {
       key: "integrations",
       icon: <HiOutlineCodeBracketSquare />,

apps/web/src/components/Toggle.tsx

@@ -7,15 +7,17 @@ const Toggle = ({
   label,
   disabled,
   showLabel = true,
+  labelPosition = "before",
 }: {
   isChecked: boolean;
   onChange: () => void;
   label: string;
   disabled?: boolean;
   showLabel?: boolean;
+  labelPosition?: "before" | "after";
 }) => (
-  <div className="mr-4 flex items-center justify-end">
-    {showLabel && (
+  <div className="flex items-center">
+    {showLabel && labelPosition === "before" && (
       <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
         {label}
       </span>
@@ -38,6 +40,11 @@ const Toggle = ({
         )}
       />
     </Switch>
+    {showLabel && labelPosition === "after" && (
+      <span className="ml-2 text-xs text-light-900 dark:text-dark-900">
+        {label}
+      </span>
+    )}
   </div>
 );
 

apps/web/src/components/WorkspaceMenu.tsx

@@ -1,5 +1,7 @@
 import { Button, Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
 import { Fragment, useState } from "react";
 import { HiCheck, HiMagnifyingGlass } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
@@ -18,6 +20,7 @@ export default function WorkspaceMenu({
   const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
     useWorkspace();
   const { openModal } = useModal();
+  const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
 
   const { tooltipContent: commandPaletteShortcutTooltipContent } =
@@ -147,7 +150,11 @@ export default function WorkspaceMenu({
             <div className="border-t-[1px] border-light-600 p-1 dark:border-dark-500">
               <Menu.Item>
                 <button
-                  onClick={() => openModal("NEW_WORKSPACE")}
+                  onClick={() =>
+                    env("NEXT_PUBLIC_KAN_ENV") === "cloud"
+                      ? router.push(`/onboarding/select-plan?returnUrl=${encodeURIComponent(window.location.pathname)}`)
+                      : openModal("NEW_WORKSPACE")
+                  }
                   className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
                 >
                   {t`Create workspace`}

apps/web/src/hooks/useLocalisation.ts

@@ -1,6 +1,6 @@
 import type { Locale as DateFnsLocale } from "date-fns";
 import { useLingui } from "@lingui/react";
-import { de, enGB, es, fr, it, nl, pl, ru, ptBR} from "date-fns/locale";
+import { de, enGB, es, fr, it, nl, pl, ptBR, ru } from "date-fns/locale";
 
 import type { Locale } from "~/locales";
 import { useLinguiContext } from "~/providers/lingui";
@@ -19,7 +19,7 @@ export function useLocalisation() {
     nl,
     ru,
     pl,
-    "pt-BR": ptBR,
+    ptbr: ptBR,
   };
 
   const currentDateLocale = dateLocaleMap[locale] ?? enGB;

apps/web/src/hooks/useScrollRestore.ts

@@ -0,0 +1,44 @@
+import type { RefObject } from "react";
+import type { NextRouter } from "next/router";
+import { useEffect, useRef } from "react";
+
+const scrollPositions = new Map<string, number>();
+
+export function useScrollRestore(
+  boardId: string | null | undefined,
+  scrollRef: RefObject<HTMLElement | null>,
+  router: NextRouter,
+  isReady: boolean,
+) {
+  const restored = useRef(false);
+
+  useEffect(() => {
+    if (!boardId) return;
+
+    restored.current = false;
+
+    const saveScrollPosition = () => {
+      if (scrollRef.current) {
+        scrollPositions.set(boardId, scrollRef.current.scrollLeft);
+      }
+    };
+
+    router.events.on("routeChangeStart", saveScrollPosition);
+    return () => router.events.off("routeChangeStart", saveScrollPosition);
+  }, [boardId, router.events, scrollRef]);
+
+  useEffect(() => {
+    if (restored.current || !isReady || !boardId) return;
+    restored.current = true;
+
+    const saved = scrollPositions.get(boardId);
+    if (saved === undefined) return;
+
+    // StrictModeDroppable delays rendering by one requestAnimationFrame
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (scrollRef.current) scrollRef.current.scrollLeft = saved;
+      });
+    });
+  }, [isReady, scrollRef, boardId]);
+}

apps/web/src/pages/404.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+
+import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
+
+export default function NotFoundPage() {
+  return (
+    <>
+      <PageHead title={t`404 - Page Not Found | kan.bn`} />
+      <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
+        <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
+          <div className="z-10 flex w-full flex-col items-center">
+            <Link href="/">
+              <h1 className="mb-6 text-lg font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+                kan.bn
+              </h1>
+            </Link>
+            <p className="mb-4 text-8xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              404
+            </p>
+            <p className="mb-10 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              <Trans>Page not found</Trans>
+            </p>
+            <div className="w-full rounded-lg border border-light-500 bg-light-300 px-4 py-10 dark:border-dark-400 dark:bg-dark-200 sm:max-w-md lg:px-10">
+              <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+                <p className="mb-6 text-center text-light-900 dark:text-dark-900">
+                  <Trans>
+                    The page you're looking for doesn't exist or has been moved.
+                  </Trans>
+                </p>
+                <div className="flex flex-col gap-3">
+                  <Link
+                    href="/"
+                    className="flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-100 shadow-sm hover:bg-light-900 dark:bg-dark-1000 dark:text-dark-100 dark:hover:bg-dark-900"
+                  >
+                    <Trans>Go to homepage</Trans>
+                  </Link>
+                  <Link
+                    href="/boards"
+                    className="flex w-full justify-center rounded-md border border-light-500 bg-light-100 px-3 py-2 text-sm font-semibold text-light-1000 shadow-sm hover:bg-light-200 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 dark:hover:bg-dark-300"
+                  >
+                    <Trans>Go to boards</Trans>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <PatternedBackground />
+        </div>
+      </main>
+    </>
+  );
+}

apps/web/src/pages/_app.tsx

@@ -12,6 +12,7 @@ import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import { useEffect } from "react";
 
+import { FontSizeProvider } from "~/providers/font-size";
 import { KeyboardShortcutProvider } from "~/providers/keyboard-shortcuts";
 import { LinguiProviderWrapper } from "~/providers/lingui";
 import { ModalProvider } from "~/providers/modal";
@@ -83,19 +84,21 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
       <main className="font-sans">
         <KeyboardShortcutProvider>
           <LinguiProviderWrapper>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <ModalProvider>
-                <PopupProvider>
-                  {posthogKey ? (
-                    <PostHogProvider client={posthog}>
-                      {getLayout(<Component {...pageProps} />)}
-                    </PostHogProvider>
-                  ) : (
-                    getLayout(<Component {...pageProps} />)
-                  )}
-                </PopupProvider>
-              </ModalProvider>
-            </ThemeProvider>
+            <FontSizeProvider>
+              <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+                <ModalProvider>
+                  <PopupProvider>
+                    {posthogKey ? (
+                      <PostHogProvider client={posthog}>
+                        {getLayout(<Component {...pageProps} />)}
+                      </PostHogProvider>
+                    ) : (
+                      getLayout(<Component {...pageProps} />)
+                    )}
+                  </PopupProvider>
+                </ModalProvider>
+              </ThemeProvider>
+            </FontSizeProvider>
           </LinguiProviderWrapper>
         </KeyboardShortcutProvider>
       </main>

apps/web/src/pages/api/download/attatchment.ts

@@ -1,49 +1,75 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 
+import { env } from "~/env";
+
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "GET") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
-
-  const { url, filename } = req.query;
-
-  if (!url || typeof url !== "string") {
-    return res.status(400).json({
-      message: "url parameter is required",
-    });
-  }
-
-  try {
-    const downloadFilename = typeof filename === "string"
-      ? encodeURIComponent(filename)
-      : "attachment";
-
-    const upstream = await fetch(url);
-
-    if (!upstream.ok) {
-      return res.status(upstream.status).json({
-        message: "Failed to fetch attachment",
-      });
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "GET") {
+      return res.status(405).json({ message: "Method not allowed" });
     }
 
-    const contentType =
-      upstream.headers.get("Content-Type") ?? "application/octet-stream";
+    const { url, filename } = req.query;
 
-    res.setHeader("Content-Type", contentType);
-    res.setHeader(
-      "Content-Disposition",
-      `attachment; filename="${downloadFilename}"; filename*=UTF-8''${downloadFilename}`,
-    );
+    if (!url || typeof url !== "string") {
+      return res.status(400).json({ message: "url parameter is required" });
+    }
 
-    const buffer = await upstream.arrayBuffer();
-    return res.send(Buffer.from(buffer));
-  } catch (error) {
-    console.error("Error downloading attachment:", error);
-    return res.status(500).json({ message: "Failed to download attachment" });
-  }
-  },
+    const s3Endpoint = env.S3_ENDPOINT;
+
+    if (s3Endpoint) {
+      let parsed: URL;
+      try {
+        parsed = new URL(url);
+      } catch {
+        return res.status(400).json({ message: "Invalid URL" });
+      }
+
+      const hostname = parsed.hostname.toLowerCase();
+      let allowedHost: string;
+      try {
+        allowedHost = new URL(s3Endpoint).hostname.toLowerCase();
+      } catch {
+        return res
+          .status(500)
+          .json({ message: "Storage endpoint misconfigured" });
+      }
+
+      if (hostname !== allowedHost && !hostname.endsWith(`.${allowedHost}`)) {
+        return res.status(403).json({ message: "URL not allowed" });
+      }
+    }
+
+    try {
+      const downloadFilename =
+        typeof filename === "string"
+          ? encodeURIComponent(filename)
+          : "attachment";
+
+      const upstream = await fetch(url);
+
+      if (!upstream.ok) {
+        return res
+          .status(upstream.status)
+          .json({ message: "Failed to fetch attachment" });
+      }
+
+      const contentType =
+        upstream.headers.get("Content-Type") ?? "application/octet-stream";
+
+      res.setHeader("Content-Type", contentType);
+      res.setHeader(
+        "Content-Disposition",
+        `attachment; filename="${downloadFilename}"; filename*=UTF-8''${downloadFilename}`,
+      );
+
+      const buffer = await upstream.arrayBuffer();
+      return res.send(Buffer.from(buffer));
+    } catch (error) {
+      return res.status(500).json({ message: "Failed to download attachment" });
+    }
+  }),
 );

apps/web/src/pages/api/oss-friends.ts

@@ -1,25 +1,25 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "GET") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
-
-  try {
-    const response = await fetch("https://formbricks.com/api/oss-friends");
-    if (!response.ok) {
-      throw new Error("Failed to fetch from Formbricks");
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "GET") {
+      return res.status(405).json({ message: "Method not allowed" });
     }
-    const data = await response.json();
 
-    return res.status(200).json(data);
-  } catch (error) {
-    console.error("Error fetching OSS friends:", error);
-    return res.status(500).json({ message: "Failed to fetch OSS friends" });
-  }
-  },
+    try {
+      const response = await fetch("https://formbricks.com/api/oss-friends");
+      if (!response.ok) {
+        throw new Error("Failed to fetch from Formbricks");
+      }
+      const data = await response.json();
+
+      return res.status(200).json(data);
+    } catch (error) {
+      return res.status(500).json({ message: "Failed to fetch OSS friends" });
+    }
+  }),
 );

apps/web/src/pages/api/stripe/create_billing_session.ts

@@ -2,34 +2,34 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { env } from "next-runtime-env";
 
 import { createNextApiContext } from "@kan/api/trpc";
-import { createStripeClient } from "@kan/stripe";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
+import { createStripeClient } from "@kan/stripe";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  const stripe = createStripeClient();
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    const stripe = createStripeClient();
 
-  if (req.method !== "POST") {
-    return res.status(405).json({ error: "Method not allowed" });
-  }
-
-  try {
-    const { user } = await createNextApiContext(req);
-
-    if (!user?.stripeCustomerId) {
-      return res.status(404).json({ error: "No billing account found" });
+    if (req.method !== "POST") {
+      return res.status(405).json({ error: "Method not allowed" });
     }
 
-    const session = await stripe.billingPortal.sessions.create({
-      customer: user.stripeCustomerId,
-      return_url: `${env("NEXT_PUBLIC_BASE_URL")}/settings`,
-    });
+    try {
+      const { user } = await createNextApiContext(req);
 
-    return res.status(200).json({ url: session.url });
-  } catch (error) {
-    console.error("Error:", error);
-    return res.status(500).json({ error: "Error creating portal session" });
-  }
-  },
+      if (!user?.stripeCustomerId) {
+        return res.status(404).json({ error: "No billing account found" });
+      }
+
+      const session = await stripe.billingPortal.sessions.create({
+        customer: user.stripeCustomerId,
+        return_url: `${env("NEXT_PUBLIC_BASE_URL")}/settings`,
+      });
+
+      return res.status(200).json({ url: session.url });
+    } catch (error) {
+      return res.status(500).json({ error: "Error creating portal session" });
+    }
+  }),
 );

apps/web/src/pages/api/stripe/create_checkout_session.ts

@@ -3,10 +3,13 @@ import { env } from "next-runtime-env";
 import { z } from "zod";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
+import { assertPermission } from "@kan/api/utils/permissions";
+import { withRateLimit } from "@kan/api/utils/rateLimit";
 import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
+import { generateUID } from "@kan/shared/utils";
 import { createStripeClient } from "@kan/stripe";
-import { withRateLimit } from "@kan/api/utils/rateLimit";
 
 const workspaceSlugSchema = z
   .string()
@@ -17,21 +20,24 @@ const workspaceSlugSchema = z
 interface CheckoutSessionRequest {
   successUrl: string;
   cancelUrl: string;
-  slug: string;
-  workspacePublicId: string;
-  stripeCustomerId: string;
+  plan: "team" | "pro";
+  billing?: string;
+  workspacePublicId?: string;
+  slug?: string;
+  workspaceName?: string;
+  workspaceDescription?: string;
+  workspaceSlug?: string;
 }
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  const stripe = createStripeClient();
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    const stripe = createStripeClient();
 
-  if (req.method !== "POST") {
-    return res.status(405).json({ error: "Method not allowed" });
-  }
+    if (req.method !== "POST") {
+      return res.status(405).json({ error: "Method not allowed" });
+    }
 
-  try {
     const { user, db } = await createNextApiContext(req);
 
     if (!user) {
@@ -39,81 +45,107 @@ export default withRateLimit(
     }
 
     const body = req.body as CheckoutSessionRequest;
-    const { successUrl, cancelUrl, slug, workspacePublicId } = body;
+    const {
+      successUrl,
+      cancelUrl,
+      plan,
+      billing,
+      workspacePublicId,
+      slug,
+      workspaceName,
+      workspaceDescription,
+      workspaceSlug,
+    } = body;
 
-    if (!successUrl || !cancelUrl || !workspacePublicId) {
+    if (!successUrl || !cancelUrl || !plan) {
       return res.status(400).json({ error: "Missing required fields" });
     }
 
-    if (slug) {
-      const slugResult = workspaceSlugSchema.safeParse(slug);
+    if (!workspacePublicId && !workspaceName) {
+      return res
+        .status(400)
+        .json({ error: "Must provide workspacePublicId or workspaceName" });
+    }
 
+    const resolvedSlug = slug ?? workspaceSlug;
+
+    if (resolvedSlug) {
+      const slugResult = workspaceSlugSchema.safeParse(resolvedSlug);
       if (!slugResult.success) {
-        return new Response(
-          JSON.stringify({ error: "Invalid workspace slug" }),
-          {
-            status: 400,
-            headers: { "Content-Type": "application/json" },
-          },
-        );
+        return res.status(400).json({ error: "Invalid workspace slug" });
       }
     }
 
-    const workspace = await workspaceRepo.getAllByUserId(db, user.id);
+    let resolvedWorkspacePublicId = workspacePublicId;
+    let subscriptionId: number | undefined;
 
-    const isMemberOfWorkspace = workspace.some(
-      ({ workspace }) => workspace.publicId === body.workspacePublicId,
-    );
+    if (workspacePublicId) {
+      // Existing workspace upgrade
+      const workspace = await workspaceRepo.getByPublicId(
+        db,
+        workspacePublicId,
+      );
 
-    if (!isMemberOfWorkspace) {
-      return new Response(JSON.stringify({ error: "Unauthorized" }), {
-        status: 403,
-        headers: { "Content-Type": "application/json" },
+      if (!workspace) {
+        return res.status(404).json({ error: "Workspace not found" });
+      }
+
+      try {
+        await assertPermission(db, user.id, workspace.id, "workspace:manage");
+      } catch {
+        return res.status(403).json({ error: "Unauthorized" });
+      }
+
+      const subscription = await subscriptionRepo.create(db, {
+        plan: plan,
+        referenceId: workspacePublicId,
+        userId: user.id,
+        stripeCustomerId: user.stripeCustomerId ?? "",
+        status: "incomplete",
       });
+
+      subscriptionId = subscription?.id;
+
+      if (!subscriptionId) {
+        return res.status(500).json({ error: "Error creating subscription" });
+      }
+    } else {
+      resolvedWorkspacePublicId = generateUID();
     }
 
-    const subscription = await subscriptionRepo.create(db, {
-      plan: "pro",
-      referenceId: workspacePublicId,
-      userId: user.id,
-      stripeCustomerId: user.stripeCustomerId ?? "",
-      status: "incomplete",
-    });
-
-    const subscriptionId = subscription?.id;
-
-    if (!subscriptionId) {
-      return res.status(500).json({ error: "Error creating subscription" });
-    }
+    const isTeam = body.plan === "team";
+    const annualPriceId = isTeam
+      ? (process.env.STRIPE_TEAM_PLAN_YEARLY_PRICE_ID ??
+        process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID)
+      : (process.env.STRIPE_PRO_PLAN_YEARLY_PRICE_ID ??
+        process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID);
+    const monthlyPriceId = isTeam
+      ? process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID
+      : process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID;
+    const priceId = billing === "annual" ? annualPriceId : monthlyPriceId;
 
     const session = await stripe.checkout.sessions.create({
       mode: "subscription",
       payment_method_collection: "always",
-      line_items: [
-        {
-          price: process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID,
-          quantity: 1,
-        },
-      ],
-      subscription_data: {
-        trial_period_days: 14,
-      },
-      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}`,
+      line_items: [{ price: priceId, quantity: 1 }],
+      subscription_data: { trial_period_days: 14 },
+      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}?workspacePublicId=${resolvedWorkspacePublicId}`,
       cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
-      client_reference_id: workspacePublicId,
+      client_reference_id: resolvedWorkspacePublicId,
       customer: user.stripeCustomerId ?? undefined,
       metadata: {
-        ...(slug && { workspaceSlug: slug }),
-        workspacePublicId,
+        workspacePublicId: resolvedWorkspacePublicId!,
         userId: user.id,
-        subscriptionId,
+        userEmail: user.email ?? "",
+        ...(resolvedSlug && { workspaceSlug: resolvedSlug }),
+        ...(workspaceName && { workspaceName }),
+        ...(workspaceDescription && { workspaceDescription }),
+        ...(subscriptionId && { subscriptionId: String(subscriptionId) }),
+        plan: plan,
+        isNewWorkspace: workspaceName ? "true" : "false",
       },
     });
 
     return res.status(200).json({ url: session.url });
-  } catch (error) {
-    console.error("Error:", error);
-    return res.status(500).json({ error: "Error creating checkout session" });
-  }
-  },
+  }),
 );

apps/web/src/pages/api/stripe/webhook.ts

@@ -1,10 +1,15 @@
+import { randomUUID } from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 import type { Readable } from "node:stream";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
+import { createLogger } from "@kan/logger";
 import { createStripeClient } from "@kan/stripe";
 
+const log = createLogger("api");
+
 async function buffer(readable: Readable) {
   const chunks = [];
   for await (const chunk of readable) {
@@ -18,6 +23,9 @@ export default async function handler(
   res: NextApiResponse,
 ) {
   const stripe = createStripeClient();
+  const start = Date.now();
+  const requestId = randomUUID();
+  const procedure = req.url?.split("?")[0] ?? "/api/stripe/webhook";
 
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
@@ -44,24 +52,82 @@ export default async function handler(
     switch (event.type) {
       case "checkout.session.completed": {
         const checkoutSession = event.data.object;
+        const meta = checkoutSession.metadata;
 
-        const metaData = checkoutSession.metadata;
+        if (!meta?.workspacePublicId) break;
 
-        if (metaData?.workspacePublicId) {
-          await workspaceRepo.update(db, metaData.workspacePublicId, {
-            ...(metaData.workspaceSlug && { slug: metaData.workspaceSlug }),
-            plan: "pro",
+        const plan = meta.plan === "team" ? "team" : ("pro" as const);
+
+        if (
+          meta.isNewWorkspace === "true" &&
+          meta.workspaceName &&
+          meta.userId &&
+          meta.userEmail
+        ) {
+          const existing = await workspaceRepo.getByPublicId(db, meta.workspacePublicId);
+
+          if (!existing) {
+            const slug = meta.workspaceSlug ?? meta.workspacePublicId;
+
+            await workspaceRepo.create(db, {
+              publicId: meta.workspacePublicId,
+              name: meta.workspaceName,
+              slug,
+              plan,
+              createdBy: meta.userId,
+              createdByEmail: meta.userEmail,
+              ...(meta.workspaceDescription && {
+                description: meta.workspaceDescription,
+              }),
+            });
+
+            await subscriptionRepo.create(db, {
+              plan,
+              referenceId: meta.workspacePublicId,
+              userId: meta.userId,
+              stripeCustomerId: checkoutSession.customer as string,
+              status: "active",
+            });
+          }
+        } else {
+          // Existing workspace upgrade — update plan (and slug for pro)
+          await workspaceRepo.update(db, meta.workspacePublicId, {
+            plan,
+            ...(plan === "pro" && meta.workspaceSlug && { slug: meta.workspaceSlug }),
           });
         }
+
         break;
       }
       default:
-        console.log(`Unhandled event type: ${event.type}`);
+        log.warn({ eventType: event.type }, "Unhandled Stripe event type");
     }
 
+    log.info(
+      {
+        requestId,
+        procedure,
+        transport: "rest",
+        duration: Date.now() - start,
+        status: 200,
+        input: { eventType: event.type, eventId: event.id },
+      },
+      "API OK",
+    );
+
     return res.status(200).json({ received: true });
   } catch (err) {
-    console.error("Webhook error:", err);
+    log.error(
+      {
+        requestId,
+        procedure,
+        transport: "rest",
+        duration: Date.now() - start,
+        status: 400,
+        err,
+      },
+      "API error",
+    );
     return res.status(400).json({ message: "Webhook handler failed" });
   }
 }

apps/web/src/pages/api/trello/authenticate.ts

@@ -1,52 +1,58 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { addYears } from "date-fns";
 
 import { createNextApiContext } from "@kan/api/trpc";
-import { integrations } from "@kan/db/schema";
-import { addYears } from "date-fns";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
+import { integrations } from "@kan/db/schema";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "POST") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "POST") {
+      return res.status(405).json({ message: "Method not allowed" });
+    }
 
-  const { user } = await createNextApiContext(req);
+    const { user } = await createNextApiContext(req);
 
-  if (!user)
-    return res.status(401).json({ message: "User not authenticated" });
+    if (!user)
+      return res.status(401).json({ message: "User not authenticated" });
 
-  const apiKey = process.env.TRELLO_APP_API_KEY;
+    const apiKey = process.env.TRELLO_APP_API_KEY;
 
-  if (!apiKey)
-    return res.status(500).json({ message: "Trello API key not set in Environment Variables" });
+    if (!apiKey)
+      return res
+        .status(500)
+        .json({ message: "Trello API key not set in Environment Variables" });
 
-  const token = req.body.token;
+    const token = req.body.token;
 
-  if (!token)
-    return res.status(400).json({ message: "No token found" });
+    if (!token) return res.status(400).json({ message: "No token found" });
 
-  try {
-    const { db } = await createNextApiContext(req);
+    try {
+      const { db } = await createNextApiContext(req);
 
-    await db.insert(integrations).values({
-      provider: "trello",
-      userId: user.id,
-      accessToken: token,
-      expiresAt: addYears(new Date(), 1),
-    }).onConflictDoUpdate({
-      set: {
-        accessToken: token,
-        expiresAt: addYears(new Date(), 1),
-      },
-      target: [integrations.userId, integrations.provider],
-    });
+      await db
+        .insert(integrations)
+        .values({
+          provider: "trello",
+          userId: user.id,
+          accessToken: token,
+          expiresAt: addYears(new Date(), 1),
+        })
+        .onConflictDoUpdate({
+          set: {
+            accessToken: token,
+            expiresAt: addYears(new Date(), 1),
+          },
+          target: [integrations.userId, integrations.provider],
+        });
 
-    return res.status(200).json({ message: "Trello authentication successful" });
-  } catch (err) {
-    console.error("Trello authentication error:", err);
-    return res.status(400).json({ message: "Trello authentication failed" });
-  }
-  },
-);
+      return res
+        .status(200)
+        .json({ message: "Trello authentication successful" });
+    } catch (err) {
+      return res.status(400).json({ message: "Trello authentication failed" });
+    }
+  }),
+);

apps/web/src/pages/api/unsubscribe.ts

@@ -3,9 +3,11 @@ import { Novu } from "@novu/api";
 import { jwtVerify } from "jose";
 import { z } from "zod";
 
-import { env } from "~/env";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 
+import { env } from "~/env";
+
 const requestSchema = z.object({
   token: z.string().min(1),
 });
@@ -22,84 +24,85 @@ const textEncoder = new TextEncoder();
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
-  if (process.env.NEXT_PUBLIC_KAN_ENV !== "cloud") {
-    return res.status(404).json({
-      success: false,
-      error: "Unsubscribe endpoint is not available.",
-      code: "UNAVAILABLE",
-    });
-  }
+  withApiLogging(
+    async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+      if (process.env.NEXT_PUBLIC_KAN_ENV !== "cloud") {
+        return res.status(404).json({
+          success: false,
+          error: "Unsubscribe endpoint is not available.",
+          code: "UNAVAILABLE",
+        });
+      }
 
-  if (req.method !== "POST") {
-    res.setHeader("Allow", "POST");
-    return res.status(405).json({
-      success: false,
-      error: "Method not allowed.",
-      code: "METHOD_NOT_ALLOWED",
-    });
-  }
+      if (req.method !== "POST") {
+        res.setHeader("Allow", "POST");
+        return res.status(405).json({
+          success: false,
+          error: "Method not allowed.",
+          code: "METHOD_NOT_ALLOWED",
+        });
+      }
 
-  const parsedBody = requestSchema.safeParse(req.body);
+      const parsedBody = requestSchema.safeParse(req.body);
 
-  if (!parsedBody.success) {
-    return res.status(400).json({
-      success: false,
-      error: "Invalid request payload.",
-      code: "BAD_REQUEST",
-    });
-  }
+      if (!parsedBody.success) {
+        return res.status(400).json({
+          success: false,
+          error: "Invalid request payload.",
+          code: "BAD_REQUEST",
+        });
+      }
 
-  if (!env.EMAIL_UNSUBSCRIBE_SECRET || !env.NOVU_API_KEY) {
-    return res.status(500).json({
-      success: false,
-      error: "Unsubscribe service is not configured.",
-      code: "NOT_CONFIGURED",
-    });
-  }
+      if (!env.EMAIL_UNSUBSCRIBE_SECRET || !env.NOVU_API_KEY) {
+        return res.status(500).json({
+          success: false,
+          error: "Unsubscribe service is not configured.",
+          code: "NOT_CONFIGURED",
+        });
+      }
 
-  let payload: z.infer<typeof tokenPayloadSchema>;
+      let payload: z.infer<typeof tokenPayloadSchema>;
 
-  try {
-    const verified = await jwtVerify(
-      parsedBody.data.token,
-      textEncoder.encode(env.EMAIL_UNSUBSCRIBE_SECRET),
-      {
-        // We intentionally do not use exp/iat claims –
-        // tokens are long-lived and validated only by signature + payload.
-        clockTolerance: "0s",
-      },
-    );
-    payload = tokenPayloadSchema.parse(verified.payload);
-  } catch {
-    return res.status(401).json({
-      success: false,
-      error: "Your unsubscribe link is invalid or has expired.",
-      code: "INVALID_TOKEN",
-    });
-  }
+      try {
+        const verified = await jwtVerify(
+          parsedBody.data.token,
+          textEncoder.encode(env.EMAIL_UNSUBSCRIBE_SECRET),
+          {
+            // We intentionally do not use exp/iat claims –
+            // tokens are long-lived and validated only by signature + payload.
+            clockTolerance: "0s",
+          },
+        );
+        payload = tokenPayloadSchema.parse(verified.payload);
+      } catch {
+        return res.status(401).json({
+          success: false,
+          error: "Your unsubscribe link is invalid or has expired.",
+          code: "INVALID_TOKEN",
+        });
+      }
 
-  const novu = new Novu({ secretKey: env.NOVU_API_KEY });
+      const novu = new Novu({ secretKey: env.NOVU_API_KEY });
 
-  try {
-    await novu.subscribers.preferences.update(
-      {
-        channels: {
-          email: false,
-        },
-      },
-      payload.subscriberId,
-    );
-  } catch (error) {
-    console.error("Failed to update Novu preferences", error);
-    return res.status(502).json({
-      success: false,
-      error:
-        "We could not update your email preferences right now. Please try again later.",
-      code: "NOVU_ERROR",
-    });
-  }
+      try {
+        await novu.subscribers.preferences.update(
+          {
+            channels: {
+              email: false,
+            },
+          },
+          payload.subscriberId,
+        );
+      } catch (error) {
+        return res.status(502).json({
+          success: false,
+          error:
+            "We could not update your email preferences right now. Please try again later.",
+          code: "NOVU_ERROR",
+        });
+      }
 
-  return res.status(200).json({ success: true });
-  },
+      return res.status(200).json({ success: true });
+    },
+  ),
 );

apps/web/src/pages/api/upload/attachment.ts

@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { Upload } from "@aws-sdk/lib-storage";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { assertPermission } from "@kan/api/utils/permissions";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 import * as cardRepo from "@kan/db/repository/card.repo";
@@ -22,7 +23,7 @@ export const config = {
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method !== "POST") {
       return res.status(405).json({ error: "Method not allowed" });
     }
@@ -36,7 +37,9 @@ export default withRateLimit(
 
       const bucket = env.NEXT_PUBLIC_ATTACHMENTS_BUCKET_NAME;
       if (!bucket) {
-        return res.status(500).json({ error: "Attachments bucket not configured" });
+        return res
+          .status(500)
+          .json({ error: "Attachments bucket not configured" });
       }
 
       const cardPublicId = req.query.cardPublicId;
@@ -55,7 +58,9 @@ export default withRateLimit(
       }
 
       if (!Number.isFinite(contentLength) || contentLength <= 0) {
-        return res.status(400).json({ error: "Missing or invalid content length" });
+        return res
+          .status(400)
+          .json({ error: "Missing or invalid content length" });
       }
 
       if (contentLength > MAX_SIZE_BYTES) {
@@ -129,8 +134,7 @@ export default withRateLimit(
 
       return res.status(200).json({ attachment });
     } catch (error) {
-      console.error("Attachment upload failed", error);
       return res.status(500).json({ error: "Internal server error" });
     }
-  },
+  }),
 );

apps/web/src/pages/api/upload/avatar.ts

@@ -2,13 +2,17 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { PutObjectCommand } from "@aws-sdk/client-s3";
 
 import { createNextApiContext } from "@kan/api/trpc";
-import * as userRepo from "@kan/db/repository/user.repo";
-
-import { env } from "~/env";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
+import * as userRepo from "@kan/db/repository/user.repo";
 import { createS3Client } from "@kan/shared/utils";
 
-const MAX_SIZE_BYTES = 2 * 1024 * 1024; // 2MB
+import { env } from "~/env";
+
+const MAX_SIZE_BYTES = parseInt(
+  process.env.S3_AVATAR_UPLOAD_LIMIT || "2097152",
+  10,
+); // Default 2MB
 const allowedContentTypes = ["image/jpeg", "image/png", "image/webp"];
 
 export const config = {
@@ -19,7 +23,7 @@ export const config = {
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method !== "POST") {
       return res.status(405).json({ error: "Method not allowed" });
     }
@@ -51,7 +55,9 @@ export default withRateLimit(
       }
 
       if (!Number.isFinite(contentLength) || contentLength <= 0) {
-        return res.status(400).json({ error: "Missing or invalid content length" });
+        return res
+          .status(400)
+          .json({ error: "Missing or invalid content length" });
       }
 
       if (contentLength > MAX_SIZE_BYTES) {
@@ -93,9 +99,7 @@ export default withRateLimit(
         user: updatedUser,
       });
     } catch (error) {
-      console.error("Avatar upload failed", error);
       return res.status(500).json({ error: "Internal server error" });
     }
-  },
+  }),
 );
-

apps/web/src/pages/onboarding/select-plan.tsx

@@ -0,0 +1,31 @@
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { env } from "next-runtime-env";
+
+import { authClient } from "@kan/auth/client";
+
+import { PageHead } from "~/components/PageHead";
+import SelectPlanView from "~/views/onboarding/select-plan";
+
+export default function SelectPlanPage() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && !session?.user) {
+      router.push("/login");
+    }
+    if (!isPending && env("NEXT_PUBLIC_KAN_ENV") !== "cloud") {
+      router.push("/boards");
+    }
+  }, [session, isPending, router]);
+
+  if (isPending || !session?.user) return null;
+
+  return (
+    <>
+      <PageHead title="Select plan | kan.bn" />
+      <SelectPlanView />
+    </>
+  );
+}

apps/web/src/pages/onboarding/workspace.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
+import { useEffect } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import { PageHead } from "~/components/PageHead";
+import WorkspaceDetailsView from "~/views/onboarding/workspace-details";
+
+export default function WorkspaceDetailsPage() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && !session?.user) router.push("/login");
+    if (!isPending && env("NEXT_PUBLIC_KAN_ENV") !== "cloud")
+      router.push("/boards");
+  }, [session, isPending, router]);
+
+  if (isPending || !session?.user) return null;
+
+  return (
+    <>
+      <PageHead title="Create workspace | kan.bn" />
+      <WorkspaceDetailsView />
+    </>
+  );
+}

apps/web/src/pages/settings/trello/authorize.tsx

@@ -1,24 +1,25 @@
 import { useEffect } from "react";
 
 export default function TrelloAuthorize() {
-    useEffect(() => {
-        const hash = window.location.hash;
-        const token = hash.split("=")[1];
-        if (token) {
-            console.log("Posting token to /api/trello/authenticate", token);
-            fetch("/api/trello/authenticate", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ token }),
-            }).then(() => {
-                window.close();
-            });
-        }
-    }, []);
+  useEffect(() => {
+    const hash = window.location.hash;
+    const token = hash.split("=")[1];
+    if (token) {
+      fetch("/api/trello/authenticate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ token }),
+      }).then(() => {
+        window.close();
+      });
+    }
+  }, []);
 
-    return <div className="flex h-[200px] items-center justify-center">
-        <p className="text-center">Connecting to Trello...</p>
-    </div>;
-}
+  return (
+    <div className="flex h-[200px] items-center justify-center">
+      <p className="text-center">Connecting to Trello...</p>
+    </div>
+  );
+}

apps/web/src/pages/settings/webhooks.tsx

@@ -0,0 +1,16 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import { SettingsLayout } from "~/components/SettingsLayout";
+import WebhookSettings from "~/views/settings/WebhookSettings";
+
+const WebhookSettingsPage: NextPageWithLayout = () => {
+  return (
+    <SettingsLayout currentTab="webhooks">
+      <WebhookSettings />
+    </SettingsLayout>
+  );
+};
+
+WebhookSettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default WebhookSettingsPage;

apps/web/src/providers/font-size.tsx

@@ -0,0 +1,57 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type FontSize = "small" | "medium" | "large";
+
+const fontSizeMap: Record<FontSize, string> = {
+  small: "14px",
+  medium: "16px",
+  large: "18px",
+};
+
+interface FontSizeContextProps {
+  fontSize: FontSize;
+  setFontSize: (size: FontSize) => void;
+}
+
+const FontSizeContext = createContext<FontSizeContextProps | undefined>(
+  undefined,
+);
+
+export const FontSizeProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [fontSize, setFontSizeState] = useState<FontSize>("medium");
+
+  const setFontSize = (size: FontSize) => {
+    document.documentElement.style.fontSize = fontSizeMap[size];
+    localStorage.setItem("fontSize", size);
+    setFontSizeState(size);
+  };
+
+  useEffect(() => {
+    const stored = localStorage.getItem("fontSize") as FontSize | null;
+    const size = stored && fontSizeMap[stored] ? stored : "medium";
+    document.documentElement.style.fontSize = fontSizeMap[size];
+    setFontSizeState(size);
+  }, []);
+
+  return (
+    <FontSizeContext.Provider value={{ fontSize, setFontSize }}>
+      {children}
+    </FontSizeContext.Provider>
+  );
+};
+
+export const useFontSize = (): FontSizeContextProps => {
+  const context = useContext(FontSizeContext);
+  if (!context) {
+    throw new Error("useFontSize must be used within a FontSizeProvider");
+  }
+  return context;
+};

apps/web/src/providers/workspace.tsx

@@ -17,8 +17,9 @@ interface Workspace {
   description: string | null | undefined;
   publicId: string;
   slug: string | undefined;
-  plan: "free" | "pro" | "enterprise" | undefined;
+  plan: "free" | "team" | "pro" | "enterprise" | undefined;
   role: "admin" | "member" | "guest";
+  weekStartDay: 0 | 1 | 6;
 }
 
 const initialWorkspace: Workspace = {
@@ -26,15 +27,16 @@ const initialWorkspace: Workspace = {
   description: null,
   publicId: "",
   slug: "",
-  plan: "free",
+  plan: "free" as const,
   role: "member",
+  weekStartDay: 1,
 };
 
 const initialAvailableWorkspaces: Workspace[] = [];
 
-export const WorkspaceContext = createContext<WorkspaceContextProps | undefined>(
-  undefined,
-);
+export const WorkspaceContext = createContext<
+  WorkspaceContextProps | undefined
+>(undefined);
 
 export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   children,
@@ -48,7 +50,15 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
 
   const workspacePublicId = useSearchParams().get("workspacePublicId");
 
-  const { data, isLoading } = api.workspace.all.useQuery();
+  const [pendingWorkspaceId, setPendingWorkspaceId] = useState<string | null>(
+    workspacePublicId,
+  );
+  const pollAttemptsRef = React.useRef(0);
+  const MAX_POLL_ATTEMPTS = 5;
+
+  const { data, isLoading } = api.workspace.all.useQuery(undefined, {
+    refetchInterval: pendingWorkspaceId ? 2000 : false,
+  });
   const utils = api.useUtils();
 
   const switchWorkspace = (_workspace: Workspace) => {
@@ -79,6 +89,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         slug: workspace.slug,
         description: workspace.description,
         plan: workspace.plan,
+        weekStartDay: workspace.weekStartDay,
         hasLoaded: true,
       })) as Workspace[];
 
@@ -91,7 +102,16 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         ({ workspace }) => workspace.publicId === storedWorkspaceId,
       );
 
-      if (!selectedWorkspace?.workspace) return;
+      if (!selectedWorkspace?.workspace) {
+        pollAttemptsRef.current += 1;
+        if (pollAttemptsRef.current >= MAX_POLL_ATTEMPTS) {
+          setPendingWorkspaceId(null);
+        }
+        return;
+      }
+
+      pollAttemptsRef.current = 0;
+      setPendingWorkspaceId(null);
 
       setWorkspace({
         publicId: selectedWorkspace.workspace.publicId,
@@ -100,6 +120,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         plan: selectedWorkspace.workspace.plan,
         description: selectedWorkspace.workspace.description,
         role: selectedWorkspace.role,
+        weekStartDay: selectedWorkspace.workspace.weekStartDay as 0 | 1 | 6,
       });
 
       if (workspacePublicId) {
@@ -119,6 +140,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         plan: primaryWorkspace.plan,
         description: primaryWorkspace.description,
         role: primaryWorkspaceRole,
+        weekStartDay: primaryWorkspace.weekStartDay as 0 | 1 | 6,
       });
     }
   }, [data, isLoading, workspacePublicId, router]);

apps/web/src/styles/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 14px;
+}
+
 [contenteditable="true"]:empty:before {
   content: attr(placeholder);
   display: block;

apps/web/src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import { env } from "next-runtime-env";
+
 export const formatToArray = (
   value: string | string[] | undefined,
 ): string[] => {
@@ -50,5 +52,21 @@ export const getAvatarUrl = (imageOrKey: string | null) => {
     return imageOrKey;
   }
 
+  // Construct URL from S3 key
+  const useVirtualHosted = env("NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS") === "true";
+  const storageDomain = env("NEXT_PUBLIC_STORAGE_DOMAIN");
+  const storageUrl = env("NEXT_PUBLIC_STORAGE_URL");
+  const bucket = env("NEXT_PUBLIC_AVATAR_BUCKET_NAME");
+
+  if (useVirtualHosted && storageDomain && bucket) {
+    // Virtual-hosted style: https://{bucket}.{domain}/{key}
+    return `https://${bucket}.${storageDomain}/${imageOrKey}`;
+  }
+
+  if (storageUrl && bucket) {
+    // Path-style: {storageUrl}/{bucket}/{key}
+    return `${storageUrl}/${bucket}/${imageOrKey}`;
+  }
+
   return "";
 };

apps/web/src/utils/i18n.ts

@@ -22,8 +22,8 @@ const loadMessages = async (locale: Locale) => {
       return (await import("~/locales/ru/messages")).messages;
     case "pl":
       return (await import("~/locales/pl/messages")).messages;
-    case "pt-BR":
-      return (await import("~/locales/pt-BR/messages")).messages;
+    case "ptbr":
+      return (await import("~/locales/ptbr/messages")).messages;
     default:
       return enMessages;
   }

apps/web/src/views/board/components/BoardDropdown.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import {
   HiEllipsisHorizontal,
@@ -29,6 +30,7 @@ export default function BoardDropdown({
   isFavorite?: boolean;
   boardName?: string;
 }) {
+  const router = useRouter();
   const { openModal } = useModal();
   const { showPopup } = usePopup();
   const { canEditBoard, canDeleteBoard, canCreateBoard, canArchiveBoard } =
@@ -47,6 +49,7 @@ export default function BoardDropdown({
             : t`The board has been unarchived.`,
           icon: "success",
         });
+        void router.push(`/boards`);
       } else if (variables.favorite !== undefined) {
         showPopup({
           header: variables.favorite

apps/web/src/views/board/components/CardContextDueDateModal.tsx

@@ -0,0 +1,41 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import { DueDateSelector } from "~/views/card/components/DueDateSelector";
+
+export function CardContextDueDateModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Set due date`}
+      </h2>
+      {isLoading ? (
+        <div className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300" />
+      ) : (
+        <DueDateSelector
+          cardPublicId={cardPublicId}
+          dueDate={card?.dueDate ?? null}
+        />
+      )}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={closeModal}
+          className="rounded-md border border-light-300 bg-light-50 px-3 py-1.5 text-sm font-medium text-light-1000 hover:bg-light-200 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300"
+        >
+          {t`Done`}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextDuplicateModal.tsx

@@ -0,0 +1,284 @@
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { useState } from "react";
+import { HiChevronDown } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface CardContextDuplicateModalProps {
+  boardPublicId?: string;
+  isTemplate?: boolean;
+}
+
+export function CardContextDuplicateModal({
+  boardPublicId: boardPublicIdProp,
+  isTemplate: isTemplateProp,
+}: CardContextDuplicateModalProps = {}) {
+  const { entityId: cardPublicId, closeModal, getModalState } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const modalState = getModalState("CARD_CONTEXT_DUPLICATE") as
+    | { boardPublicId: string; isTemplate?: boolean }
+    | undefined;
+  const boardPublicId =
+    boardPublicIdProp ?? modalState?.boardPublicId ?? "";
+  const isTemplate = isTemplateProp ?? modalState?.isTemplate ?? false;
+
+  const [listPublicId, setListPublicId] = useState("");
+  const [copyLabels, setCopyLabels] = useState(true);
+  const [copyMembers, setCopyMembers] = useState(true);
+  const [copyChecklists, setCopyChecklists] = useState(true);
+  const [position, setPosition] = useState<string>("");
+  const [title, setTitle] = useState("");
+
+  const { data: card, isLoading: isCardLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const boardType = isTemplate ? "template" : "regular";
+  const { data: board } = api.board.byId.useQuery(
+    { boardPublicId, type: boardType },
+    { enabled: !!boardPublicId },
+  );
+  const lists = board?.lists ?? [];
+  const listOptions = lists.map((l) => ({ publicId: l.publicId, name: l.name }));
+  const currentListPublicId = card?.list?.publicId;
+  const hasLabels = (card?.labels?.length ?? 0) > 0;
+  const hasMembers = (card?.members?.length ?? 0) > 0;
+  const hasChecklists = (card?.checklists?.length ?? 0) > 0;
+  const hasAnyCopyOption = hasLabels || hasMembers || hasChecklists;
+
+  const duplicateCard = api.card.duplicate.useMutation({
+    onSuccess: () => {
+      showPopup({
+        header: t`Card duplicated`,
+        icon: "success",
+        message: t`The card has been duplicated.`,
+      });
+      closeModal();
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to duplicate card`,
+        message: t`Please try again.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.board.byId.invalidate();
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!cardPublicId || !listPublicId) return;
+    const indexNum =
+      position === "" ? undefined : parseInt(position, 10);
+    if (
+      position !== "" &&
+      (indexNum === undefined || isNaN(indexNum) || indexNum < 0)
+    )
+      return;
+    duplicateCard.mutate({
+      cardPublicId,
+      listPublicId,
+      copyLabels,
+      copyMembers,
+      copyChecklists,
+      ...(typeof indexNum === "number" && { index: indexNum }),
+      title: title.trim() || undefined,
+    });
+  };
+
+  if (!cardPublicId) return null;
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Duplicate card`}
+      </h2>
+
+      <div className="space-y-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`List`}
+          </label>
+          <Listbox value={listPublicId} onChange={setListPublicId}>
+            <div className="relative">
+              <ListboxButton
+                className={twMerge(
+                  "relative w-full cursor-pointer rounded-md border border-light-300 bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-light-400 focus:ring-offset-0 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:focus:ring-dark-500",
+                  !listPublicId && "text-light-600 dark:text-dark-600",
+                )}
+              >
+                <span className="block truncate">
+                  {listPublicId
+                    ? listOptions.find((o) => o.publicId === listPublicId)
+                        ?.name
+                    : t`Select a list`}
+                </span>
+                <span className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center">
+                  <HiChevronDown
+                    className="h-4 w-4 text-light-600 dark:text-dark-600"
+                    aria-hidden
+                  />
+                </span>
+              </ListboxButton>
+              <Transition
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <ListboxOptions className="absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-light-200 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-200">
+                  <div className="max-h-60 overflow-y-auto py-1 pr-1 scrollbar scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600">
+                    {listOptions.map((option) => {
+                      const isCurrentList =
+                        option.publicId === currentListPublicId;
+                      return (
+                        <ListboxOption
+                          key={option.publicId}
+                          value={option.publicId}
+                          disabled={isCurrentList}
+                          className={({ focus }) =>
+                            twMerge(
+                              "relative select-none py-2 pl-3 pr-9 text-sm",
+                              isCurrentList
+                                ? "cursor-default opacity-50"
+                                : "cursor-pointer",
+                              !isCurrentList && focus
+                                ? "bg-light-200 text-light-1000 dark:bg-dark-400 dark:text-dark-1000"
+                                : "text-light-900 dark:text-dark-900",
+                            )
+                          }
+                        >
+                          {option.name}
+                        </ListboxOption>
+                      );
+                    })}
+                  </div>
+                </ListboxOptions>
+              </Transition>
+            </div>
+          </Listbox>
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`Title (optional)`}
+          </label>
+          <Input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={card?.title ?? ""}
+            className="w-full"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`Position in list (0 = first, leave empty for end)`}
+          </label>
+          <Input
+            type="number"
+            min={0}
+            value={position}
+            onChange={(e) => setPosition(e.target.value)}
+            placeholder={t`End of list`}
+            className="w-full"
+          />
+        </div>
+
+        {hasAnyCopyOption && (
+          <div className="flex flex-col gap-2">
+            {hasLabels && (
+              <div className="flex items-center gap-3">
+                <label className="relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-pointer items-center justify-center">
+                  <input
+                    type="checkbox"
+                    checked={copyLabels}
+                    onChange={(e) => setCopyLabels(e.target.checked)}
+                    className={twMerge(
+                      "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+                      "cursor-pointer",
+                    )}
+                  />
+                </label>
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Copy labels`}
+                </span>
+              </div>
+            )}
+            {hasMembers && (
+              <div className="flex items-center gap-3">
+                <label className="relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-pointer items-center justify-center">
+                  <input
+                    type="checkbox"
+                    checked={copyMembers}
+                    onChange={(e) => setCopyMembers(e.target.checked)}
+                    className={twMerge(
+                      "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+                      "cursor-pointer",
+                    )}
+                  />
+                </label>
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Copy members`}
+                </span>
+              </div>
+            )}
+            {hasChecklists && (
+              <div className="flex items-center gap-3">
+                <label className="relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-pointer items-center justify-center">
+                  <input
+                    type="checkbox"
+                    checked={copyChecklists}
+                    onChange={(e) => setCopyChecklists(e.target.checked)}
+                    className={twMerge(
+                      "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+                      "cursor-pointer",
+                    )}
+                  />
+                </label>
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Copy checklists`}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6 flex justify-end gap-2">
+        <Button type="button" variant="secondary" onClick={closeModal}>
+          {t`Cancel`}
+        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={
+            !listPublicId ||
+            duplicateCard.isPending ||
+            isCardLoading ||
+            lists.length === 0
+          }
+        >
+          {duplicateCard.isPending ? t`Duplicating…` : t`Duplicate`}
+        </Button>
+      </div>
+    </form>
+  );
+}

apps/web/src/views/board/components/CardContextLabelsModal.tsx

@@ -0,0 +1,53 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import LabelIcon from "~/components/LabelIcon";
+import LabelSelector from "~/views/card/components/LabelSelector";
+
+export function CardContextLabelsModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const boardLabels = card?.list?.board?.labels ?? [];
+  const selectedLabels = card?.labels ?? [];
+
+  const formattedLabels = boardLabels.map((label) => ({
+    key: label.publicId,
+    value: label.name,
+    selected: selectedLabels.some((l) => l.publicId === label.publicId),
+    leftIcon: <LabelIcon colourCode={label.colourCode} />,
+  }));
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Labels`}
+      </h2>
+      {isLoading ? (
+        <div className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300" />
+      ) : (
+        <LabelSelector
+          cardPublicId={cardPublicId}
+          labels={formattedLabels}
+          isLoading={isLoading}
+        />
+      )}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={closeModal}
+          className="rounded-md border border-light-300 bg-light-50 px-3 py-1.5 text-sm font-medium text-light-1000 hover:bg-light-200 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300"
+        >
+          {t`Done`}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextMembersModal.tsx

@@ -0,0 +1,73 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
+import Avatar from "~/components/Avatar";
+import MemberSelector from "~/views/card/components/MemberSelector";
+
+export function CardContextMembersModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const board = card?.list?.board;
+  const workspaceMembers = board?.workspace?.members ?? [];
+  const selectedMembers = card?.members ?? [];
+
+  const formattedMembers = workspaceMembers.map((member) => {
+    const isSelected = selectedMembers.some(
+      (m) => m.publicId === member.publicId,
+    );
+    return {
+      key: member.publicId,
+      value: formatMemberDisplayName(
+        member.user?.name ?? null,
+        member.user?.email ?? member.email,
+      ),
+      imageUrl: member.user?.image ? getAvatarUrl(member.user.image) : undefined,
+      selected: isSelected,
+      leftIcon: (
+        <Avatar
+          size="xs"
+          name={member.user?.name ?? ""}
+          imageUrl={
+            member.user?.image ? getAvatarUrl(member.user.image) : undefined
+          }
+          email={member.user?.email ?? member.email}
+        />
+      ),
+    };
+  });
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Manage members`}
+      </h2>
+      {isLoading ? (
+        <div className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300" />
+      ) : (
+        <MemberSelector
+          cardPublicId={cardPublicId}
+          members={formattedMembers}
+          isLoading={isLoading}
+        />
+      )}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={closeModal}
+          className="rounded-md border border-light-300 bg-light-50 px-3 py-1.5 text-sm font-medium text-light-1000 hover:bg-light-200 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300"
+        >
+          {t`Done`}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextMenu.tsx

@@ -0,0 +1,130 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useRef } from "react";
+import {
+  HiLink,
+  HiOutlineCalendar,
+  HiOutlineDocumentDuplicate,
+  HiOutlineTag,
+  HiOutlineTrash,
+  HiOutlineUserGroup,
+  HiOutlineArrowRightCircle,
+} from "react-icons/hi2";
+
+export type CardContextMenuAction =
+  | "members"
+  | "move"
+  | "labels"
+  | "dueDate"
+  | "copyLink"
+  | "duplicate"
+  | "delete";
+
+interface CardContextMenuProps {
+  x: number;
+  y: number;
+  onClose: () => void;
+  onAction: (action: CardContextMenuAction) => void;
+  canEdit: boolean;
+}
+
+const MENU_ITEMS: {
+  action: CardContextMenuAction;
+  label: string;
+  icon: React.ReactNode;
+  requiresEdit: boolean;
+}[] = [
+  {
+    action: "members",
+    label: t`Manage members`,
+    icon: <HiOutlineUserGroup className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "move",
+    label: t`Move to another list`,
+    icon: <HiOutlineArrowRightCircle className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "labels",
+    label: t`Add / edit label`,
+    icon: <HiOutlineTag className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "dueDate",
+    label: t`Set due date`,
+    icon: <HiOutlineCalendar className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "copyLink",
+    label: t`Copy link to card`,
+    icon: <HiLink className="h-4 w-4 shrink-0" />,
+    requiresEdit: false,
+  },
+  {
+    action: "duplicate",
+    label: t`Duplicate card`,
+    icon: <HiOutlineDocumentDuplicate className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "delete",
+    label: t`Delete card`,
+    icon: <HiOutlineTrash className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+];
+
+export function CardContextMenu({
+  x,
+  y,
+  onClose,
+  onAction,
+  canEdit,
+}: CardContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+
+  const items = MENU_ITEMS.filter((item) => !item.requiresEdit || canEdit);
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-[200] min-w-[200px] rounded-md border border-light-200 bg-white py-1 shadow-lg dark:border-dark-400 dark:bg-dark-200"
+      style={{ left: x, top: y }}
+    >
+      {items.map(({ action, label, icon }) => (
+        <button
+          key={action}
+          type="button"
+          onClick={() => {
+            onAction(action);
+            onClose();
+          }}
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
+        >
+          {icon}
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextMoveListModal.tsx

@@ -0,0 +1,101 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+import { invalidateCard } from "~/utils/cardInvalidation";
+
+export function CardContextMoveListModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const updateCardList = api.card.update.useMutation({
+    onMutate: async (vars) => {
+      if (!cardPublicId) return undefined;
+      await utils.card.byId.cancel();
+      const previous = utils.card.byId.getData({ cardPublicId });
+      utils.card.byId.setData({ cardPublicId }, (old) => {
+        if (!old) return old;
+        const list = old.list.board?.lists?.find(
+          (l) => l.publicId === vars.listPublicId,
+        );
+        if (!list) return old;
+        return {
+          ...old,
+          list: { ...old.list, publicId: list.publicId, name: list.name },
+        };
+      });
+      return { previous };
+    },
+    onError: (_err, _vars, ctx) => {
+      if (cardPublicId && ctx?.previous) {
+        utils.card.byId.setData({ cardPublicId }, ctx.previous);
+      }
+      showPopup({
+        header: t`Unable to move card`,
+        message: t`Please try again.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      if (cardPublicId) {
+        await invalidateCard(utils, cardPublicId);
+        await utils.board.byId.invalidate();
+      }
+    },
+  });
+
+  const lists = card?.list?.board?.lists ?? [];
+  const currentListPublicId = card?.list?.publicId;
+
+  const handleSelectList = (listPublicId: string) => {
+    if (listPublicId === currentListPublicId || !cardPublicId) return;
+    updateCardList.mutate(
+      { cardPublicId, listPublicId, index: 0 },
+      { onSuccess: closeModal },
+    );
+  };
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Move to list`}
+      </h2>
+      {isLoading ? (
+        <div className="space-y-2">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300"
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="max-h-[60vh] overflow-y-auto pr-1 scrollbar scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600">
+          <ul className="space-y-1">
+            {lists.map((list) => (
+              <li key={list.publicId}>
+                <button
+                  type="button"
+                  onClick={() => handleSelectList(list.publicId)}
+                  disabled={list.publicId === currentListPublicId}
+                  className="w-full rounded-md px-3 py-2 text-left text-sm hover:bg-light-200 disabled:opacity-50 dark:hover:bg-dark-400"
+                >
+                  {list.name}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/views/board/components/NewCardForm.tsx

@@ -24,6 +24,7 @@ import Toggle from "~/components/Toggle";
 import { useModalFormState } from "~/hooks/useModalFormState";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
 
@@ -53,6 +54,7 @@ export function NewCardForm({
   queryParams,
 }: NewCardFormProps) {
   const { showPopup } = usePopup();
+  const { workspace } = useWorkspace();
   const { closeModal, openModal, modalStates, clearModalState } = useModal();
 
   const utils = api.useUtils();
@@ -156,6 +158,9 @@ export function NewCardForm({
                     ...member,
                     deletedAt: null,
                   })) ?? [],
+              comments: [],
+              checklists: [],
+              attachments: [],
               _filteredLabels: labelPublicIds.map((id) => ({ publicId: id })),
               _filteredMembers: memberPublicIds.map((id) => ({ publicId: id })),
               index: position === "start" ? 0 : list.cards.length,
@@ -491,6 +496,7 @@ export function NewCardForm({
                       setValue("dueDate", date ?? null);
                       setIsDateSelectorOpen(false);
                     }}
+                    weekStartsOn={workspace.weekStartDay}
                   />
                 </div>
               </>
@@ -512,7 +518,7 @@ export function NewCardForm({
         </div>
       </div>
 
-      <div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-5 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Create another`}
           isChecked={isCreateAnotherEnabled}

apps/web/src/views/board/components/NewListForm.tsx

@@ -136,7 +136,7 @@ export function NewListForm({
           }}
         />
       </div>
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Create another`}
           isChecked={isCreateAnotherEnabled}

apps/web/src/views/board/index.tsx

@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { keepPreviousData } from "@tanstack/react-query";
+import { env } from "next-runtime-env";
 import { useEffect, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
@@ -15,6 +16,7 @@ import {
 
 import type { UpdateBoardInput } from "@kan/api/types";
 
+import type { CardContextMenuAction } from "./components/CardContextMenu";
 import Button from "~/components/Button";
 import { DeleteLabelConfirmation } from "~/components/DeleteLabelConfirmation";
 import { LabelForm } from "~/components/LabelForm";
@@ -27,14 +29,22 @@ import { Tooltip } from "~/components/Tooltip";
 import { EditYouTubeModal } from "~/components/YouTubeEmbed/EditYouTubeModal";
 import { useDragToScroll } from "~/hooks/useDragToScroll";
 import { usePermissions } from "~/hooks/usePermissions";
+import { useScrollRestore } from "~/hooks/useScrollRestore";
 import { useKeyboardShortcut } from "~/providers/keyboard-shortcuts";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { formatToArray } from "~/utils/helpers";
+import { DeleteCardConfirmation } from "~/views/card/components/DeleteCardConfirmation";
 import BoardDropdown from "./components/BoardDropdown";
 import Card from "./components/Card";
+import { CardContextDueDateModal } from "./components/CardContextDueDateModal";
+import { CardContextDuplicateModal } from "./components/CardContextDuplicateModal";
+import { CardContextLabelsModal } from "./components/CardContextLabelsModal";
+import { CardContextMembersModal } from "./components/CardContextMembersModal";
+import { CardContextMenu } from "./components/CardContextMenu";
+import { CardContextMoveListModal } from "./components/CardContextMoveListModal";
 import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
 import { DeleteListConfirmation } from "./components/DeleteListConfirmation";
 import Filters from "./components/Filters";
@@ -54,11 +64,18 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
-  const { openModal, modalContentType, entityId, isOpen } = useModal();
+  const { openModal, modalContentType, entityId, isOpen, setModalState } =
+    useModal();
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
   const [isInitialLoading, setIsInitialLoading] = useState(true);
 
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    cardPublicId: string;
+  } | null>(null);
+
   const { ref: scrollRef, onMouseDown } = useDragToScroll({
     enabled: true,
     direction: "horizontal",
@@ -124,11 +141,24 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
     data: boardData,
     isSuccess,
     isLoading: isQueryLoading,
+    error,
   } = api.board.byId.useQuery(queryParams, {
     enabled: !!boardId,
     placeholderData: keepPreviousData,
   });
 
+  // Redirect to 404 if board doesn't exist
+  useEffect(() => {
+    if (router.isReady && boardId && !isQueryLoading) {
+      if (
+        error?.data?.code === "NOT_FOUND" ||
+        (!boardData && !isQueryLoading)
+      ) {
+        router.replace("/404");
+      }
+    }
+  }, [router, boardId, isQueryLoading, error, boardData]);
+
   const refetchBoard = async () => {
     if (boardId) await utils.board.byId.refetch({ boardPublicId: boardId });
   };
@@ -141,6 +171,13 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
 
   const isLoading = isInitialLoading || isQueryLoading;
 
+  useScrollRestore(
+    boardId,
+    scrollRef,
+    router,
+    !isLoading && (boardData?.lists.length ?? 0) > 0,
+  );
+
   const updateListMutation = api.list.update.useMutation({
     onMutate: async (args) => {
       await utils.board.byId.cancel();
@@ -254,6 +291,56 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
     setSelectedPublicListId(publicBoardId);
   };
 
+  const handleCardContextMenuAction = (action: CardContextMenuAction) => {
+    const cardPublicId = contextMenu?.cardPublicId;
+    if (!cardPublicId) return;
+    setContextMenu(null);
+    if (action === "copyLink") {
+      const path = isTemplate
+        ? `/templates/${boardId}/cards/${cardPublicId}`
+        : `/cards/${cardPublicId}`;
+      const url = `${typeof window !== "undefined" ? window.location.origin : ""}${path}`;
+      void navigator.clipboard.writeText(url).then(
+        () => {
+          showPopup({
+            header: t`Link copied`,
+            icon: "success",
+            message: t`Card URL copied to clipboard`,
+          });
+        },
+        () => {
+          showPopup({
+            header: t`Unable to copy link`,
+            icon: "error",
+            message: t`Please try again.`,
+          });
+        },
+      );
+      return;
+    }
+    if (action === "duplicate") {
+      setModalState("CARD_CONTEXT_DUPLICATE", {
+        boardPublicId: boardId ?? "",
+        isTemplate: !!isTemplate,
+      });
+      openModal("CARD_CONTEXT_DUPLICATE", cardPublicId);
+      return;
+    }
+    if (action === "delete") {
+      openModal("DELETE_CARD", cardPublicId);
+      return;
+    }
+    const modalType =
+      action === "members"
+        ? "CARD_CONTEXT_MEMBERS"
+        : action === "move"
+          ? "CARD_CONTEXT_MOVE_LIST"
+          : action === "labels"
+            ? "CARD_CONTEXT_LABELS"
+            : "CARD_CONTEXT_DUE_DATE";
+    openModal(modalType, cardPublicId);
+  };
+
   const onDragEnd = ({
     source: _source,
     destination,
@@ -390,6 +477,49 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
         >
           <EditYouTubeModal />
         </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_MEMBERS"}
+        >
+          <CardContextMembersModal />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_MOVE_LIST"}
+        >
+          <CardContextMoveListModal />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_LABELS"}
+        >
+          <CardContextLabelsModal />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_DUE_DATE"}
+        >
+          <CardContextDueDateModal />
+        </Modal>
+        <Modal
+          modalSize="md"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_DUPLICATE"}
+        >
+          <CardContextDuplicateModal
+            boardPublicId={boardId ?? ""}
+            isTemplate={!!isTemplate}
+          />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "DELETE_CARD"}
+        >
+          <DeleteCardConfirmation
+            cardPublicId={entityId}
+            boardPublicId={boardId ?? ""}
+          />
+        </Modal>
       </>
     );
   };
@@ -592,18 +722,35 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
                                             )
                                               e.preventDefault();
                                           }}
+                                          onContextMenu={(e) => {
+                                            if (
+                                              card.publicId.startsWith(
+                                                "PLACEHOLDER",
+                                              ) ||
+                                              env("NEXT_PUBLIC_KAN_ENV") ===
+                                                "cloud"
+                                            )
+                                              return;
+                                            e.preventDefault();
+                                            setContextMenu({
+                                              x: e.clientX,
+                                              y: e.clientY,
+                                              cardPublicId: card.publicId,
+                                            });
+                                          }}
                                           key={card.publicId}
                                           href={
                                             isTemplate
                                               ? `/templates/${boardId}/cards/${card.publicId}`
                                               : `/cards/${card.publicId}`
                                           }
-                                          className={`mb-2 flex !cursor-pointer flex-col ${card.publicId.startsWith(
-                                            "PLACEHOLDER",
-                                          )
-                                            ? "pointer-events-none"
-                                            : ""
-                                            }`}
+                                          className={`mb-2 flex !cursor-pointer flex-col ${
+                                            card.publicId.startsWith(
+                                              "PLACEHOLDER",
+                                            )
+                                              ? "pointer-events-none"
+                                              : ""
+                                          }`}
                                           ref={provided.innerRef}
                                           {...provided.draggableProps}
                                           {...provided.dragHandleProps}
@@ -640,6 +787,15 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
             </>
           ) : null}
         </div>
+        {contextMenu && (
+          <CardContextMenu
+            x={contextMenu.x}
+            y={contextMenu.y}
+            onClose={() => setContextMenu(null)}
+            onAction={handleCardContextMenuAction}
+            canEdit={!!canEditCard}
+          />
+        )}
         {renderModalContent()}
       </div>
     </>

apps/web/src/views/boards/components/ImportBoardsForm.tsx

@@ -4,7 +4,7 @@ import { t } from "@lingui/core/macro";
 import { Plural, Trans } from "@lingui/react/macro";
 import { Fragment, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { FaTrello } from "react-icons/fa";
+import { FaGithub, FaTrello } from "react-icons/fa";
 import {
   HiChevronUpDown,
   HiMiniArrowTopRightOnSquare,
@@ -27,12 +27,23 @@ const integrationProviders: Record<
     name: "Trello",
     icon: <FaTrello />,
   },
+  github: {
+    name: "GitHub",
+    icon: <FaGithub />,
+  },
 };
 
-const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
+const SelectSource = ({
+  handleNextStep,
+}: {
+  handleNextStep: (provider: string) => void;
+}) => {
   const { data: integrations, refetch: refetchIntegrations } =
     api.integration.providers.useQuery();
-  const { control, handleSubmit } = useForm({
+  const { data: githubStatus, refetch: refetchGithubStatus } =
+    api.integration.getGitHubStatus.useQuery();
+
+  const { control, handleSubmit, watch } = useForm({
     defaultValues: {
       source: integrations?.[0]?.provider ?? "trello",
     },
@@ -47,23 +58,36 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
     },
   );
 
-  const hasIntegrations = integrations && integrations.length > 0;
+  const availableIntegrations = [
+    ...(integrations ?? []),
+    ...(githubStatus?.connected ? [{ provider: "github" }] : []),
+  ];
+
+  const hasIntegrations = availableIntegrations.length > 0;
 
   useEffect(() => {
     const handleFocus = () => {
-      refetchIntegrations();
+      void refetchIntegrations();
+      void refetchGithubStatus();
     };
     window.addEventListener("focus", handleFocus);
     return () => {
       window.removeEventListener("focus", handleFocus);
     };
-  }, [refetchIntegrations]);
+  }, [refetchIntegrations, refetchGithubStatus]);
 
   const onSubmit = () => {
-    if (!hasIntegrations && trelloUrl) {
-      window.open(trelloUrl.url, "trello_auth", "height=800,width=600");
+    const selected = watch("source");
+    if (
+      selected === "trello" &&
+      !integrations?.some((i) => i.provider === "trello")
+    ) {
+      if (trelloUrl)
+        window.open(trelloUrl.url, "trello_auth", "height=800,width=600");
+    } else if (selected === "github" && !githubStatus?.connected) {
+      window.open("/settings/integrations", "_blank");
     } else {
-      handleNextStep();
+      handleNextStep(selected);
     }
   };
 
@@ -102,7 +126,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                     >
                       <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-1 text-base text-neutral-900 shadow-lg ring-1 ring-light-600 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
                         {hasIntegrations ? (
-                          integrations.map((integration, index) => (
+                          availableIntegrations.map((integration, index) => (
                             <Listbox.Option
                               key={`source_${index}`}
                               className="relative cursor-default select-none px-1"
@@ -123,18 +147,32 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                             </Listbox.Option>
                           ))
                         ) : (
-                          <Listbox.Option
-                            key="trello_placeholder"
-                            className="font-sm relative cursor-default select-none px-1"
-                            value="trello"
-                          >
-                            <div className="flex items-center rounded-[5px] p-1 text-sm hover:bg-light-200 dark:hover:bg-dark-400">
-                              {integrationProviders.trello?.icon}
-                              <span className="ml-2 block truncate text-sm">
-                                {integrationProviders.trello?.name}
-                              </span>
-                            </div>
-                          </Listbox.Option>
+                          <>
+                            <Listbox.Option
+                              key="trello_placeholder"
+                              className="font-sm relative cursor-default select-none px-1"
+                              value="trello"
+                            >
+                              <div className="flex items-center rounded-[5px] p-1 text-sm hover:bg-light-200 dark:hover:bg-dark-400">
+                                {integrationProviders.trello?.icon}
+                                <span className="ml-2 block truncate text-sm">
+                                  {integrationProviders.trello?.name}
+                                </span>
+                              </div>
+                            </Listbox.Option>
+                            <Listbox.Option
+                              key="github_placeholder"
+                              className="font-sm relative cursor-default select-none px-1"
+                              value="github"
+                            >
+                              <div className="flex items-center rounded-[5px] p-1 text-sm hover:bg-light-200 dark:hover:bg-dark-400">
+                                {integrationProviders.github?.icon}
+                                <span className="ml-2 block truncate text-sm">
+                                  {integrationProviders.github?.name}
+                                </span>
+                              </div>
+                            </Listbox.Option>
+                          </>
                         )}
                       </Listbox.Options>
                     </Transition>
@@ -146,7 +184,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
         />
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <div>
           <Button
             type="submit"
@@ -154,7 +192,159 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
               !hasIntegrations ? <HiMiniArrowTopRightOnSquare /> : undefined
             }
           >
-            {hasIntegrations ? t`Select source` : t`Connect Trello`}
+            {hasIntegrations ? t`Select source` : t`Connect`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+const ImportGithub: React.FC = () => {
+  const utils = api.useUtils();
+  const { closeModal } = useModal();
+  const { workspace } = useWorkspace();
+  const { showPopup } = usePopup();
+  const [isSelectAllEnabled, setIsSelectAllEnabled] = useState(false);
+
+  const refetchBoards = () => utils.board.all.refetch();
+
+  const { data: projects, isLoading: projectsLoading } =
+    api.import.github.getProjects.useQuery();
+
+  const {
+    register: registerProjects,
+    handleSubmit: handleSubmitProjects,
+    setValue,
+    watch,
+  } = useForm({
+    defaultValues: Object.fromEntries(
+      projects?.map((project) => [project.id, true]) ?? [],
+    ),
+  });
+
+  const importProjects = api.import.github.importProjects.useMutation({
+    onSuccess: async () => {
+      showPopup({
+        header: t`Import complete`,
+        message: t`Your projects have been imported.`,
+        icon: "success",
+      });
+      try {
+        await refetchBoards();
+        closeModal();
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    onError: () => {
+      showPopup({
+        header: t`Import failed`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const projectWatchers = projects?.map((project) => ({
+    id: project.id,
+    value: watch(project.id),
+  }));
+
+  const projectCount =
+    projectWatchers?.filter((w) => w.value === true).length ?? 0;
+
+  const onSubmitProjects = (values: Record<string, boolean>) => {
+    const projectIds = Object.keys(values).filter(
+      (key) => values[key] === true,
+    );
+
+    importProjects.mutate({
+      projectIds,
+      workspacePublicId: workspace.publicId,
+    });
+  };
+
+  const renderContent = () => {
+    if (projectsLoading) {
+      return (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-1">
+          <div className="h-[30px] w-full animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-300" />
+          <div className="h-[30px] w-full animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-300" />
+          <div className="h-[30px] w-full animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-300" />
+        </div>
+      );
+    }
+
+    if (!projects?.length) {
+      return (
+        <div className="flex h-full w-full items-center justify-center">
+          <p className="text-sm text-neutral-500 dark:text-dark-900">
+            {t`No projects found`}
+          </p>
+        </div>
+      );
+    }
+
+    return projects.map((project) => (
+      <div key={project.id}>
+        <label
+          className="flex cursor-pointer items-center rounded-[5px] p-2 hover:bg-light-100 dark:hover:bg-dark-300"
+          htmlFor={project.id}
+        >
+          <input
+            id={project.id}
+            type="checkbox"
+            className="h-[14px] w-[14px] rounded bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
+            {...registerProjects(project.id)}
+          />
+          <span className="ml-3 text-sm text-neutral-900 dark:text-dark-1000">
+            {project.name}
+          </span>
+        </label>
+      </div>
+    ));
+  };
+
+  return (
+    <form onSubmit={handleSubmitProjects(onSubmitProjects)}>
+      <div className="h-[105px] overflow-auto px-5">{renderContent()}</div>
+
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <Toggle
+          label={t`Select all`}
+          isChecked={!!isSelectAllEnabled}
+          onChange={() => {
+            const newState = !isSelectAllEnabled;
+            setIsSelectAllEnabled(newState);
+
+            for (const project of projects ?? []) {
+              setValue(project.id, newState);
+            }
+          }}
+        />
+        <div className="space-x-2">
+          <Button
+            type="submit"
+            isLoading={importProjects.isPending}
+            disabled={
+              importProjects.isPending ||
+              projectsLoading ||
+              !projects?.length ||
+              !projects.some(
+                (project) =>
+                  projectWatchers?.find((w) => w.id === project.id)?.value ===
+                  true,
+              )
+            }
+          >
+            <Trans>
+              <Plural
+                value={projectCount}
+                one={`Import project (1)`}
+                other={`Import projects (${projectCount})`}
+              />
+            </Trans>
           </Button>
         </div>
       </div>
@@ -196,7 +386,7 @@ const ImportTrello: React.FC = () => {
         await refetchBoards();
         closeModal();
       } catch (e) {
-        console.log(e);
+        console.error(e);
       }
     },
     onError: () => {
@@ -213,7 +403,7 @@ const ImportTrello: React.FC = () => {
     value: watch(board.id),
   }));
 
-  const boardCount = boardWatchers?.filter((w) => w.value === true).length || 0;
+  const boardCount = boardWatchers?.filter((w) => w.value === true).length ?? 0;
 
   const onSubmitBoards = (values: Record<string, boolean>) => {
     const boardIds = Object.keys(values).filter((key) => values[key] === true);
@@ -267,9 +457,9 @@ const ImportTrello: React.FC = () => {
 
   return (
     <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
-      <div className="h-[105px] overflow-scroll px-5">{renderContent()}</div>
+      <div className="h-[105px] overflow-auto px-5">{renderContent()}</div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Select all`}
           isChecked={!!isSelectAllEnabled}
@@ -277,7 +467,7 @@ const ImportTrello: React.FC = () => {
             const newState = !isSelectAllEnabled;
             setIsSelectAllEnabled(newState);
 
-            for (const board of boards || []) {
+            for (const board of boards ?? []) {
               setValue(board.id, newState);
             }
           }}
@@ -313,6 +503,7 @@ const ImportTrello: React.FC = () => {
 export function ImportBoardsForm() {
   const { closeModal } = useModal();
   const [step, setStep] = useState(1);
+  const [provider, setProvider] = useState<string | null>(null);
 
   return (
     <div>
@@ -339,8 +530,16 @@ export function ImportBoardsForm() {
         </button>
       </div>
 
-      {step === 1 && <SelectSource handleNextStep={() => setStep(step + 1)} />}
-      {step === 2 && <ImportTrello />}
+      {step === 1 && (
+        <SelectSource
+          handleNextStep={(p) => {
+            setProvider(p);
+            setStep(step + 1);
+          }}
+        />
+      )}
+      {step === 2 && provider === "trello" && <ImportTrello />}
+      {step === 2 && provider === "github" && <ImportGithub />}
     </div>
   );
 }

apps/web/src/views/boards/components/NewBoardForm.tsx

@@ -148,7 +148,7 @@ export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
         showTemplates={showTemplates}
         customTemplates={formattedTemplates ?? []}
       />
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isTemplate && (
           <Toggle
             label={t`Use template`}

apps/web/src/views/card/components/ActivityList.tsx

@@ -525,7 +525,6 @@ const ActivityList = ({
               comment={activity.comment?.comment}
               isEdited={!!activity.comment?.updatedAt}
               isAuthor={activity.comment?.createdBy === sessionData?.user.id}
-              isAdmin={isAdmin ?? false}
               isViewOnly={!!isViewOnly}
             />
           );

apps/web/src/views/card/components/ChecklistItemRow.tsx

@@ -1,11 +1,11 @@
 import type { DraggableProvided } from "react-beautiful-dnd";
 import { t } from "@lingui/core/macro";
-import { useEffect, useState } from "react";
-import ContentEditable from "react-contenteditable";
+import { useState } from "react";
 import { HiXMark } from "react-icons/hi2";
 import { RiDraggable } from "react-icons/ri";
 import { twMerge } from "tailwind-merge";
 
+import PlainTextEditor from "~/components/PlainTextEditor";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { invalidateCard } from "~/utils/cardInvalidation";
@@ -33,9 +33,7 @@ export default function ChecklistItemRow({
 }: ChecklistItemRowProps) {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
-
-  const [title, setTitle] = useState("");
-  const [completed, setCompleted] = useState(false);
+  const [completed, setCompleted] = useState(item.completed);
 
   const updateItem = api.checklist.updateItem.useMutation({
     onMutate: async (vars) => {
@@ -103,21 +101,6 @@ export default function ChecklistItemRow({
     },
   });
 
-  // Only resync from props when switching items to avoid clobbering edits
-  useEffect(() => {
-    setTitle(item.title);
-    setCompleted(item.completed);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [item.publicId]);
-
-  const sanitizeHtmlToPlainText = (html: string): string =>
-    html
-      .replace(/<br\s*\/?>(\n)?/gi, "\n")
-      .replace(/<div><br\s*\/?><\/div>/gi, "")
-      .replace(/<[^>]*>/g, "")
-      .replace(/&nbsp;/g, " ")
-      .trim();
-
   const handleToggleCompleted = () => {
     if (viewOnly) return;
     setCompleted((prev) => !prev);
@@ -127,14 +110,8 @@ export default function ChecklistItemRow({
     });
   };
 
-  const commitTitle = (rawHtml: string) => {
-    if (viewOnly) return;
-    const plain = sanitizeHtmlToPlainText(rawHtml);
-    if (!plain || plain === item.title) {
-      setTitle(item.title);
-      return;
-    }
-    setTitle(plain);
+  const commitTitle = (plain: string) => {
+    if (!plain || plain === item.title) return;
     updateItem.mutate({
       checklistItemPublicId: item.publicId,
       title: plain,
@@ -183,36 +160,26 @@ export default function ChecklistItemRow({
           )}
         />
       </label>
+
       <div className="flex-1 pr-7">
-        <ContentEditable
-          html={title}
-          disabled={viewOnly}
-          onChange={(e) => setTitle(e.target.value)}
-          // @ts-expect-error - valid event
-          onBlur={(e: Event) => {
-            const innerHTML = (e.target as HTMLElement).innerHTML;
-            commitTitle(innerHTML);
+        <PlainTextEditor
+          key={item.publicId}
+          content={item.title}
+          readOnly={viewOnly}
+          placeholder={t`Add details...`}
+          onBlur={commitTitle}
+          onEnter={(plain) => {
+            commitTitle(plain);
+            onCreateNewItem?.();
           }}
+          onEscape={() => undefined}
           className={twMerge(
-            "m-0 min-h-[20px] w-full p-0 text-sm leading-[20px] text-light-950 outline-none focus-visible:outline-none dark:text-dark-950",
+            "m-0 min-h-[20px] w-full p-0 text-sm leading-[20px] text-light-950 dark:text-dark-950",
             viewOnly && "cursor-default",
           )}
-          placeholder={t`Add details...`}
-          onKeyDown={(e) => {
-            if (viewOnly) return;
-            if (e.key === "Enter") {
-              e.preventDefault();
-              const innerHTML = (e.currentTarget as HTMLElement).innerHTML;
-              commitTitle(innerHTML);
-              onCreateNewItem?.();
-            }
-            if (e.key === "Escape") {
-              e.preventDefault();
-              setTitle(item.title);
-            }
-          }}
         />
       </div>
+
       {!viewOnly && (
         <button
           type="button"

apps/web/src/views/card/components/DueDateSelector.tsx

@@ -5,6 +5,7 @@ import { HiMiniPlus } from "react-icons/hi2";
 
 import DateSelector from "~/components/DateSelector";
 import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { invalidateCard } from "~/utils/cardInvalidation";
 
@@ -22,6 +23,7 @@ export function DueDateSelector({
   disabled = false,
 }: DueDateSelectorProps) {
   const { showPopup } = usePopup();
+  const { workspace } = useWorkspace();
   const utils = api.useUtils();
   const [isOpen, setIsOpen] = useState(false);
   const [pendingDate, setPendingDate] = useState<Date | null | undefined>(
@@ -135,6 +137,7 @@ export function DueDateSelector({
             <DateSelector
               selectedDate={pendingDate ?? undefined}
               onDateSelect={handleDateSelect}
+              weekStartsOn={workspace.weekStartDay}
             />
           </div>
         </>

apps/web/src/views/card/components/LabelSelector.tsx

@@ -78,6 +78,7 @@ export default function LabelSelector({
     },
     onSettled: async () => {
       await invalidateCard(utils, cardPublicId);
+      await utils.board.byId.invalidate();
     },
   });
 

apps/web/src/views/card/components/ListSelector.tsx

@@ -58,6 +58,7 @@ export default function ListSelector({
     },
     onSettled: async () => {
       await invalidateCard(utils, cardPublicId);
+      await utils.board.byId.invalidate();
     },
   });
 

apps/web/src/views/card/components/MemberSelector.tsx

@@ -85,6 +85,7 @@ export default function MemberSelector({
     },
     onSettled: async () => {
       await invalidateCard(utils, cardPublicId);
+      await utils.board.byId.invalidate();
     },
   });
 

apps/web/src/views/card/index.tsx

@@ -3,8 +3,8 @@ import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { IoChevronForwardSharp } from "react-icons/io5";
 import { HiXMark } from "react-icons/hi2";
+import { IoChevronForwardSharp } from "react-icons/io5";
 
 import { authClient } from "@kan/auth/client";
 
@@ -185,11 +185,20 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
     ? router.query.cardId[0]
     : router.query.cardId;
 
-  const { data: card, isLoading } = api.card.byId.useQuery(
+  const { data: card, isLoading, error } = api.card.byId.useQuery(
     { cardPublicId: cardId ?? "" },
     { enabled: !!cardId && cardId.length >= 12 },
   );
 
+  // Redirect to 404 if card doesn't exist
+  useEffect(() => {
+    if (router.isReady && cardId && !isLoading) {
+      if (error?.data?.code === "NOT_FOUND" || (!card && !isLoading)) {
+        router.replace("/404");
+      }
+    }
+  }, [router, cardId, isLoading, error, card]);
+
   const isCreator = card?.createdBy && session?.user.id === card.createdBy;
   const canEdit = canEditCard || isCreator;
 
@@ -302,7 +311,6 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
 
   if (!cardId) return <></>;
 
-
   return (
     <>
       <PageHead
@@ -345,7 +353,7 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
                   className="flex h-7 w-7 items-center justify-center rounded-[5px] text-light-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200"
                   aria-label={t`Close`}
                 >
-                  <HiXMark className="h-5 w-5" />
+                  <HiXMark className="h-4 w-4" />
                 </Link>
               </div>
             </>

apps/web/src/views/members/components/InviteMemberForm.tsx

@@ -341,7 +341,7 @@ export function InviteMemberForm({
         )}
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={
             isShareInviteLinkEnabled

apps/web/src/views/onboarding/select-plan/index.tsx

@@ -0,0 +1,289 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { Radio, RadioGroup } from "@headlessui/react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+import { HiUser } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import { api } from "~/utils/api";
+
+type PlanId = "solo" | "team" | "pro";
+type Billing = "monthly" | "annual";
+
+// Each user orbits via a zero-size pivot div at center (144,144) that rotates.
+// The icon is offset from the pivot by `radius` pixels along the x-axis.
+// A counter-rotation on the icon keeps it upright.
+const ORBIT_USERS: Record<
+  PlanId,
+  { id: string; angle: number; radius: number; duration: number }[]
+> = {
+  solo: [],
+  team: [
+    { id: "t1", angle: 45, radius: 104, duration: 50 },
+    { id: "t2", angle: 170, radius: 104, duration: 50 },
+    { id: "t3", angle: 290, radius: 104, duration: 50 },
+  ],
+  pro: [
+    { id: "t1", angle: 45, radius: 104, duration: 50 },
+    { id: "t2", angle: 170, radius: 104, duration: 50 },
+    { id: "t3", angle: 290, radius: 104, duration: 50 },
+    { id: "p1", angle: 10, radius: 144, duration: 70 },
+    { id: "p2", angle: 120, radius: 144, duration: 70 },
+    { id: "p4", angle: 240, radius: 144, duration: 70 },
+    { id: "p3", angle: 230, radius: 64, duration: 30 },
+  ],
+};
+
+export default function SelectPlanView() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [selected, setSelected] = useState<PlanId>(
+    (searchParams.get("plan") as PlanId | null) ?? "solo",
+  );
+  const [billing, setBilling] = useState<Billing>(
+    (searchParams.get("billing") as Billing | null) ?? "annual",
+  );
+  const returnUrl = searchParams.get("returnUrl") ?? "/boards";
+  const { data: workspaces } = api.workspace.all.useQuery();
+  const { data: session } = authClient.useSession();
+  const { data: user } = api.user.getUser.useQuery(undefined, {
+    enabled: !!session?.user,
+  });
+
+  const userImage = user?.image ?? session?.user.image ?? null;
+
+  const hasExistingWorkspace = !!workspaces?.length;
+
+  const FREQUENCIES: { value: Billing; label: string }[] = [
+    { value: "monthly", label: t`Monthly` },
+    { value: "annual", label: t`Annual` },
+  ];
+
+  const PLANS: {
+    id: PlanId;
+    name: string;
+    monthly: string;
+    annual: string;
+    description: string;
+    trial?: boolean;
+  }[] = [
+    {
+      id: "solo",
+      name: t`Solo`,
+      monthly: t`Free`,
+      annual: t`Free`,
+      description: t`Good for individuals starting out who just need the essentials.`,
+    },
+    {
+      id: "team",
+      name: t`Team`,
+      monthly: "$10/user/mo",
+      annual: "$8/user/mo",
+      description: t`Best for small teams who want to collaborate and move faster together.`,
+      trial: true,
+    },
+    {
+      id: "pro",
+      name: t`Pro`,
+      monthly: "$29/mo",
+      annual: "$23/mo",
+      description: t`Unlimited members and a custom workspace username for teams ready to scale.`,
+      trial: true,
+    },
+  ];
+
+  const handleSelectPlan = (plan: PlanId) => {
+    setSelected(plan);
+    router.replace(`/onboarding/select-plan?plan=${plan}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`);
+  };
+
+  const handleSetBilling = (b: Billing) => {
+    setBilling(b);
+    router.replace(`/onboarding/select-plan?plan=${selected}&billing=${b}&returnUrl=${encodeURIComponent(returnUrl)}`);
+  };
+
+  const handleContinue = () =>
+    router.push(`/onboarding/workspace?plan=${selected}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`);
+
+  const handleCancel = () => router.push(returnUrl);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-light-100 px-4 py-8 dark:bg-dark-50 md:px-6">
+      <div className="w-full max-w-3xl overflow-hidden rounded-xl border border-light-400 bg-light-200 shadow-xl dark:border-dark-400 dark:bg-dark-100">
+        <div className="flex flex-col md:h-[520px] md:flex-row">
+          {/* Left panel */}
+          <div className="flex flex-col p-6 md:w-[55%] md:p-8">
+            <div className="flex-1">
+              <h2 className="text-xl font-bold text-light-1000 dark:text-dark-1000">
+                {t`Choose a plan`}
+              </h2>
+              <p className="mt-1 text-sm text-light-800 dark:text-dark-800">
+                {t`Pick a plan to get started. All paid plans include a 14-day free trial.`}
+              </p>
+
+              {/* Billing toggle */}
+              <div className="mt-4 flex justify-end">
+                <RadioGroup
+                  value={billing}
+                  onChange={handleSetBilling}
+                  className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold ring-1 ring-inset ring-light-600 dark:ring-dark-600"
+                >
+                  {FREQUENCIES.map((f) => (
+                    <Radio
+                      key={f.value}
+                      value={f.value}
+                      className={twMerge(
+                        "cursor-pointer rounded-full px-2.5 py-0.5 text-xs transition-colors",
+                        billing === f.value
+                          ? "bg-dark-50 text-white dark:bg-light-50 dark:text-dark-50"
+                          : "text-light-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200",
+                      )}
+                    >
+                      {f.label}
+                    </Radio>
+                  ))}
+                </RadioGroup>
+              </div>
+
+              <div className="mt-4 space-y-3">
+                {PLANS.map((plan) => {
+                  const badge =
+                    billing === "annual" ? plan.annual : plan.monthly;
+                  return (
+                    <button
+                      key={plan.id}
+                      type="button"
+                      onClick={() => handleSelectPlan(plan.id)}
+                      className={`relative w-full rounded-lg border px-4 py-3 text-left transition-colors ${
+                        selected === plan.id
+                          ? "border-light-700 bg-light-300 dark:border-dark-600 dark:bg-dark-200"
+                          : "border-light-500 bg-light-200 hover:border-light-600 dark:border-dark-500 dark:bg-dark-100 dark:hover:border-dark-600"
+                      }`}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1 pr-8">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-semibold text-light-1000 dark:text-dark-1000">
+                              {plan.name}
+                            </span>
+                            <span className="rounded-full bg-neutral-700 px-2 py-px text-[11px] font-medium text-neutral-200">
+                              {badge}
+                            </span>
+                            {plan.trial && billing === "annual" && (
+                              <span className="rounded-full bg-emerald-500/10 px-2 py-px text-[11px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400">
+                                -20%
+                              </span>
+                            )}
+                          </div>
+                          <p className="mt-1 text-xs text-light-800 dark:text-dark-800">
+                            {plan.description}
+                          </p>
+                        </div>
+                        <div className="mt-0.5 flex-shrink-0">
+                          <div
+                            className={`flex h-4 w-4 items-center justify-center rounded-full border-2 ${
+                              selected === plan.id
+                                ? "border-light-900 bg-light-900 dark:border-dark-900 dark:bg-dark-900"
+                                : "border-light-700 dark:border-dark-700"
+                            }`}
+                          >
+                            {selected === plan.id && (
+                              <div className="h-1.5 w-1.5 rounded-full bg-light-100 dark:bg-dark-100" />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="mt-6 flex justify-end gap-2 md:mt-8">
+              {hasExistingWorkspace && (
+                <Button variant="ghost" onClick={handleCancel}>
+                  {t`Cancel`}
+                </Button>
+              )}
+              <Button onClick={handleContinue}>{t`Continue`}</Button>
+            </div>
+          </div>
+
+          {/* Right panel */}
+          <div className="hidden items-center justify-center bg-light-200 dark:bg-dark-200 md:flex md:w-[45%]">
+            <div className="relative h-72 w-72">
+              {/* Orbit rings */}
+              <div className="absolute inset-0 m-auto h-72 w-72 rounded-full border border-light-400 dark:border-dark-400" />
+              <div className="absolute inset-0 m-auto h-52 w-52 rounded-full border border-light-400 dark:border-dark-400" />
+              <div className="absolute inset-0 m-auto h-32 w-32 rounded-full border border-light-400 dark:border-dark-400" />
+
+              {/* Centre person */}
+              <div className="absolute inset-0 m-auto flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-light-300 dark:bg-dark-300">
+                {userImage ? (
+                  <img
+                    src={userImage}
+                    alt={t`Your avatar`}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <HiUser className="h-7 w-7 text-light-700 dark:text-dark-700" />
+                )}
+              </div>
+
+              {/* Orbiting users — zero-size pivot at center rotates; icon offset by radius stays on the ring */}
+              <AnimatePresence>
+                {ORBIT_USERS[selected].map((u) => (
+                  <motion.div
+                    key={u.id}
+                    style={{ position: "absolute", left: 144, top: 144 }}
+                    initial={{ opacity: 0, rotate: u.angle }}
+                    animate={{ opacity: 1, rotate: u.angle + 360 }}
+                    exit={{ opacity: 0 }}
+                    transition={{
+                      opacity: { duration: 0.3 },
+                      rotate: {
+                        duration: u.duration,
+                        repeat: Infinity,
+                        ease: "linear",
+                        repeatType: "loop",
+                      },
+                    }}
+                  >
+                    {/* Counter-rotate icon so it stays upright */}
+                    <motion.div
+                      style={{
+                        position: "absolute",
+                        left: u.radius - 12,
+                        top: -12,
+                      }}
+                      initial={{ rotate: -u.angle }}
+                      animate={{ rotate: -(u.angle + 360) }}
+                      transition={{
+                        duration: u.duration,
+                        repeat: Infinity,
+                        ease: "linear",
+                        repeatType: "loop",
+                      }}
+                      className="flex h-6 w-6 items-center justify-center rounded-full bg-light-400 dark:bg-dark-400"
+                    >
+                      <HiUser className="h-3.5 w-3.5 text-light-800 dark:text-dark-800" />
+                    </motion.div>
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
+      </div>
+      {!hasExistingWorkspace && (
+        <Button variant="ghost" onClick={() => authClient.signOut()}>
+          {t`Sign out`}
+        </Button>
+      )}
+    </div>
+  );
+}

apps/web/src/views/onboarding/workspace-details/index.tsx

@@ -0,0 +1,368 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import {
+  HiArrowLeft,
+  HiArrowPath,
+  HiArrowRight,
+  HiCheck,
+  HiEllipsisVertical,
+  HiInformationCircle,
+  HiLockClosed,
+} from "react-icons/hi2";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import LoadingSpinner from "~/components/LoadingSpinner";
+import Toggle from "~/components/Toggle";
+import { Tooltip } from "~/components/Tooltip";
+import { useDebounce } from "~/hooks/useDebounce";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+function slugify(value: string) {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .slice(0, 60);
+}
+
+export default function WorkspaceNameView() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const plan = searchParams.get("plan") ?? "solo";
+  const billing = searchParams.get("billing") ?? "annual";
+  const returnUrl = searchParams.get("returnUrl") ?? "/boards";
+  const { showPopup } = usePopup();
+  const [isProToggle, setIsProToggle] = useState(plan === "pro");
+  const effectivePlan = isProToggle ? "pro" : plan;
+
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+  const [description, setDescription] = useState("");
+
+  const handleNameChange = (value: string) => {
+    setName(value);
+    if (isProToggle && !slugManuallyEdited) {
+      setSlug(slugify(value));
+    }
+  };
+
+  const [debouncedSlug] = useDebounce(slug, 500);
+  const isTyping = slug !== debouncedSlug;
+
+  const slugAvailability = api.workspace.checkSlugAvailability.useQuery(
+    { workspaceSlug: debouncedSlug },
+    { enabled: isProToggle && debouncedSlug.length >= 3 && !isTyping },
+  );
+
+  const isSlugAvailable =
+    slugAvailability.data?.isAvailable && !slugAvailability.data?.isReserved;
+  const isSlugTaken =
+    slugAvailability.data?.isAvailable === false &&
+    !slugAvailability.data?.isReserved;
+  const isSlugReserved = slugAvailability.data?.isReserved === true;
+
+  const slugError = isSlugTaken
+    ? t`This URL has already been taken`
+    : isSlugReserved
+      ? t`This URL is reserved`
+      : undefined;
+
+  const { data: session } = authClient.useSession();
+  const { data: user } = api.user.getUser.useQuery(undefined, {
+    enabled: !!session?.user,
+  });
+  const { data: workspaces } = api.workspace.all.useQuery();
+  const hasExistingWorkspace = !!workspaces?.length;
+
+  const utils = api.useUtils();
+
+  const previewSlug = isProToggle
+    ? slugify(slug) || slugify(name) || "your-workspace"
+    : "your-workspace";
+
+  const createWorkspace = api.workspace.create.useMutation({
+    onSuccess: async (workspace) => {
+      if (!workspace.publicId) return;
+      localStorage.setItem("workspacePublicId", workspace.publicId);
+      void utils.workspace.all.invalidate();
+      router.push("/boards");
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to create workspace`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const [isRedirectingToCheckout, setIsRedirectingToCheckout] = useState(false);
+
+  const handleContinue = async () => {
+    if (!name.trim()) return;
+
+    if (effectivePlan === "solo") {
+      createWorkspace.mutate({
+        name: name.trim(),
+        ...(description.trim() && { description: description.trim() }),
+      });
+      return;
+    }
+
+    // team/pro: redirect to Stripe — workspace created on checkout_success
+    setIsRedirectingToCheckout(true);
+    try {
+      const response = await fetch("/api/stripe/create_checkout_session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          workspaceName: name.trim(),
+          ...(description.trim() && {
+            workspaceDescription: description.trim(),
+          }),
+          ...(effectivePlan === "pro" && slug ? { workspaceSlug: slug } : {}),
+          cancelUrl: `${window.location.pathname}?plan=${effectivePlan}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`,
+          successUrl: "/boards",
+          billing,
+          plan: effectivePlan,
+        }),
+      });
+      const data = await response.json();
+      const url = (data as { url: string }).url;
+      if (url) {
+        window.location.href = url;
+        return;
+      }
+    } catch {
+      // fall through
+    }
+    setIsRedirectingToCheckout(false);
+    showPopup({
+      header: t`Unable to start checkout`,
+      message: t`Please try again later, or contact customer support.`,
+      icon: "error",
+    });
+  };
+
+  useEffect(() => {
+    document.getElementById("workspace-name-input")?.focus();
+  }, []);
+
+  const displayName = user?.name ?? session?.user.name ?? "";
+
+  const BOARDS = [t`Roadmap`, t`Engineering`, t`Marketing`];
+  const [visibleCount, setVisibleCount] = useState(1);
+
+  useEffect(() => {
+    const timers = BOARDS.slice(1).map((_, i) =>
+      setTimeout(() => setVisibleCount(i + 2), (i + 1) * 2000),
+    );
+    return () => timers.forEach(clearTimeout);
+  }, []);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-light-100 px-4 py-8 dark:bg-dark-50 md:px-6">
+      <div className="w-full max-w-3xl overflow-hidden rounded-xl border border-light-400 bg-light-200 shadow-xl dark:border-dark-400 dark:bg-dark-100">
+        <div className="flex flex-col md:h-[520px] md:flex-row">
+          {/* Left panel */}
+          <div className="flex flex-col p-6 md:w-[55%] md:p-8">
+            <div className="flex-1">
+              <h2 className="text-xl font-bold text-light-1000 dark:text-dark-1000">
+                {t`Set up your workspace`}
+              </h2>
+              <p className="mt-1 text-sm text-light-800 dark:text-dark-800">
+                {t`You can always change these later in settings.`}
+              </p>
+
+              <div className="mt-6 space-y-3">
+                <Input
+                  id="workspace-name-input"
+                  placeholder={t`Workspace name`}
+                  value={name}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && handleContinue()}
+                  maxLength={64}
+                />
+
+                <div className="space-y-2">
+                  <Input
+                    placeholder={t`your-workspace`}
+                    value={isProToggle ? slug : t`your-workspace`}
+                    onChange={(e) => {
+                      setSlugManuallyEdited(true);
+                      setSlug(
+                        e.target.value
+                          .toLowerCase()
+                          .replace(/[^a-z0-9\s-]/g, "")
+                          .replace(/\s+/g, "-")
+                          .replace(/-+/g, "-")
+                          .slice(0, 60),
+                      );
+                    }}
+                    disabled={!isProToggle}
+                    prefix="kan.bn/"
+                    className={
+                      !isProToggle ? "cursor-not-allowed opacity-50" : ""
+                    }
+                    errorMessage={slugError}
+                    iconRight={
+                      !isProToggle ? (
+                        <Tooltip
+                          content={
+                            <span className="text-xs">{t`Custom usernames require upgrading to a Pro plan`}</span>
+                          }
+                          placement="top"
+                          delay={0}
+                        >
+                          <HiInformationCircle className="h-4 w-4 leading-[0] text-dark-700 dark:text-dark-700" />
+                        </Tooltip>
+                      ) : isProToggle && slug.length >= 3 ? (
+                        isTyping || slugAvailability.isPending ? (
+                          <LoadingSpinner />
+                        ) : isSlugAvailable ? (
+                          <HiCheck className="h-4 w-4 text-white" />
+                        ) : null
+                      ) : null
+                    }
+                  />
+                </div>
+
+                {plan !== "pro" && (
+                  <div className="pb-2">
+                    <Toggle
+                      isChecked={isProToggle}
+                      onChange={() => setIsProToggle((v) => !v)}
+                      label={t`Upgrade to Pro ($29/month)`}
+                      labelPosition="after"
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <textarea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder={t`Workspace description`}
+                    maxLength={280}
+                    rows={3}
+                    className="block w-full resize-none rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6"
+                  />
+                  <p className="mt-1 text-right text-[10px] text-light-700 dark:text-dark-700">
+                    {description.length}/280
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 flex flex-wrap items-center justify-between gap-3">
+              <div className="ml-auto flex gap-2">
+                <Button
+                  variant="ghost"
+                  onClick={() =>
+                    router.replace(
+                      `/onboarding/select-plan?plan=${effectivePlan}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`,
+                    )
+                  }
+                >
+                  {t`Back`}
+                </Button>
+                <Button
+                  onClick={() => void handleContinue()}
+                  disabled={
+                    !name.trim() ||
+                    createWorkspace.isPending ||
+                    isRedirectingToCheckout ||
+                    (isProToggle &&
+                      slug.length >= 3 &&
+                      (isTyping || slugAvailability.isPending || !!slugError))
+                  }
+                  isLoading={
+                    createWorkspace.isPending || isRedirectingToCheckout
+                  }
+                >
+                  {t`Continue`}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Right panel — browser mockup */}
+          <div className="hidden flex-col bg-light-300 dark:bg-dark-200 md:flex md:w-[45%]">
+            {/* Browser chrome */}
+            <div className="flex items-center gap-2 border-b border-light-400 px-3 py-2.5 dark:border-dark-400">
+              <div className="flex items-center gap-1.5 text-light-700 dark:text-dark-700">
+                <HiArrowLeft className="h-3.5 w-3.5" />
+                <HiArrowRight className="h-3.5 w-3.5" />
+                <HiArrowPath className="h-3.5 w-3.5" />
+              </div>
+              <div className="flex flex-1 items-center gap-1.5 rounded-md bg-light-200 px-2.5 py-1 dark:bg-dark-300">
+                <HiLockClosed className="h-3 w-3 flex-shrink-0 text-light-700 dark:text-dark-700" />
+                <span className="truncate text-xs text-light-900 dark:text-dark-900">
+                  kan.bn/
+                  <span className="text-light-1000 dark:text-dark-1000">
+                    {previewSlug}
+                  </span>
+                </span>
+              </div>
+              <HiEllipsisVertical className="h-4 w-4 flex-shrink-0 text-light-700 dark:text-dark-700" />
+            </div>
+
+            {/* Browser content */}
+            <div className="flex flex-1 flex-col items-center overflow-hidden px-14 py-8">
+              {/* Workspace name + description */}
+              <p className="text-center text-xs font-bold text-light-1000 dark:text-dark-1000">
+                {name || t`Your workspace`}
+              </p>
+              <p className="mt-0.5 line-clamp-2 break-all text-center text-[10px] text-light-800 dark:text-dark-800">
+                {description || t`Your workspace description`}
+              </p>
+
+              {/* Boards area */}
+              <div className="mt-3 flex w-full flex-1 flex-col rounded-lg bg-light-200 p-2 dark:bg-dark-300">
+                <div className="flex flex-1 flex-col gap-1.5">
+                  {BOARDS.map((board, i) => (
+                    <motion.div
+                      key={board}
+                      initial={{ opacity: 0, y: -12 }}
+                      animate={
+                        i < visibleCount
+                          ? { opacity: 1, y: 0 }
+                          : { opacity: 0, y: -12 }
+                      }
+                      transition={{
+                        opacity: { duration: 0.2 },
+                        y: { duration: 0.25, ease: "easeOut" },
+                      }}
+                      className="flex w-full flex-1 items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900"
+                    >
+                      {board}
+                    </motion.div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Footer */}
+              <p className="mt-2 text-[10px] font-semibold text-light-900 dark:text-dark-900">
+                kan.bn
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      {!hasExistingWorkspace && (
+        <Button variant="ghost" onClick={() => authClient.signOut()}>
+          {t`Sign out`}
+        </Button>
+      )}
+    </div>
+  );
+}

apps/web/src/views/pricing/components/FeatureComparisonTable.tsx

@@ -8,10 +8,10 @@ type FrequencyValue = "monthly" | "annually";
 interface PlanFeature {
   key: string;
   label: string;
-  free: string | boolean | { text: string; highlight?: string };
-  teams: string | boolean | { text: string; highlight?: string };
-  pro: string | boolean | { text: string; highlight?: string };
-  enterprise: string | boolean | { text: string; highlight?: string };
+  free: string | boolean | { text: string; highlight?: boolean; highlightFirstWord?: boolean };
+  teams: string | boolean | { text: string; highlight?: boolean; highlightFirstWord?: boolean };
+  pro: string | boolean | { text: string; highlight?: boolean; highlightFirstWord?: boolean };
+  enterprise: string | boolean | { text: string; highlight?: boolean; highlightFirstWord?: boolean };
 }
 
 interface FeatureSection {
@@ -71,34 +71,34 @@ const FeatureComparisonTable = ({
     {
       key: "boards",
       label: t`Boards`,
-      free: { text: t`Unlimited boards`, highlight: "Unlimited" },
-      teams: { text: t`Unlimited boards`, highlight: "Unlimited" },
-      pro: { text: t`Unlimited boards`, highlight: "Unlimited" },
-      enterprise: { text: t`Unlimited boards`, highlight: "Unlimited" },
+      free: { text: t`Unlimited boards`, highlightFirstWord: true },
+      teams: { text: t`Unlimited boards`, highlightFirstWord: true },
+      pro: { text: t`Unlimited boards`, highlightFirstWord: true },
+      enterprise: { text: t`Unlimited boards`, highlightFirstWord: true },
     },
     {
       key: "members",
       label: t`Members`,
-      free: { text: t`1 user`, highlight: "1" },
-      teams: { text: t`Per-seat pricing`, highlight: "Per-seat" },
-      pro: { text: t`Unlimited members`, highlight: "Unlimited" },
-      enterprise: { text: t`Unlimited members`, highlight: "Unlimited" },
+      free: { text: t`1 user`, highlightFirstWord: true },
+      teams: { text: t`Per-seat pricing`, highlightFirstWord: true },
+      pro: { text: t`Unlimited members`, highlightFirstWord: true },
+      enterprise: { text: t`Unlimited members`, highlightFirstWord: true },
     },
     {
       key: "file-uploads",
       label: t`File uploads`,
-      free: { text: t`10mb file uploads`, highlight: "10mb" },
-      teams: { text: t`Unlimited file uploads`, highlight: "Unlimited" },
-      pro: { text: t`Unlimited file uploads`, highlight: "Unlimited" },
-      enterprise: { text: t`Unlimited file uploads`, highlight: "Unlimited" },
+      free: { text: t`10mb file uploads`, highlightFirstWord: true },
+      teams: { text: t`Unlimited file uploads`, highlightFirstWord: true },
+      pro: { text: t`Unlimited file uploads`, highlightFirstWord: true },
+      enterprise: { text: t`Unlimited file uploads`, highlightFirstWord: true },
     },
       {
         key: "workspace-username",
         label: t`Workspace username`,
-        free: { text: t`Default username`, highlight: "Default" },
-        teams: { text: t`Default username`, highlight: "Default" },
-        pro: { text: t`Custom username`, highlight: "Custom" },
-        enterprise: { text: t`Custom username`, highlight: "Custom" },
+        free: { text: t`Default username`, highlightFirstWord: true },
+        teams: { text: t`Default username`, highlightFirstWord: true },
+        pro: { text: t`Custom username`, highlightFirstWord: true },
+        enterprise: { text: t`Custom username`, highlightFirstWord: true },
       },
   ];
 
@@ -236,9 +236,9 @@ const FeatureComparisonTable = ({
       key: "rest-api",
       label: t`API`,
       free: { text: t`Limited API access` },
-      teams: { text: t`Full API access` },
-      pro: { text: t`Full API access` },
-      enterprise: { text: t`Full API access` },
+      teams: { text: t`Full API access`, highlight: true },
+      pro: { text: t`Full API access`, highlight: true },
+      enterprise: { text: t`Full API access`, highlight: true },
     },
     {
       key: "self-hostable",
@@ -254,18 +254,18 @@ const FeatureComparisonTable = ({
     {
       key: "sso",
       label: t`SSO`,
-      free: { text: t`Google SSO` },
-      teams: { text: t`Google SSO` },
-      pro: { text: t`Google SSO` },
-      enterprise: { text: t`Google SSO + SAML` },
+      free: { text: t`Google SSO`, highlight: true },
+      teams: { text: t`Google SSO`, highlight: true },
+      pro: { text: t`Google SSO`, highlight: true },
+      enterprise: { text: t`Google SSO + SAML`, highlight: true },
     },
     {
       key: "admin-roles",
       label: t`Admin roles`,
-      free: { text: t`Admin roles` },
-      teams: { text: t`Admin roles` },
-      pro: { text: t`Admin roles` },
-      enterprise: { text: t`Advanced admin roles` },
+      free: { text: t`Admin roles`, highlight: true },
+      teams: { text: t`Admin roles`, highlight: true },
+      pro: { text: t`Admin roles`, highlight: true },
+      enterprise: { text: t`Advanced admin roles`, highlight: true },
     },
   ];
 
@@ -334,59 +334,37 @@ const FeatureComparisonTable = ({
     { id: "enterprise", name: t`Enterprise`, tierId: "tier-enterprise" },
   ];
 
-  const isHighlightValue = (
-    value: string | boolean | { text: string; highlight?: string },
-  ): value is { text: string; highlight?: string } => {
-    return typeof value === "object" && value !== null && "text" in value;
-  };
-
-  const shouldHighlight = (text: string): boolean => {
-    const lowerText = text.toLowerCase();
-    return ["unlimited", "multiple", "per-seat", "custom", "mentions", "full", "sso", "admin"].some(
-      (keyword) => lowerText.includes(keyword),
-    );
-  };
-
   const CellValue = ({
     value,
     label,
   }: {
-    value: string | boolean | { text: string; highlight?: string };
+    value: string | boolean | { text: string; highlight?: boolean; highlightFirstWord?: boolean };
     label: string;
   }) => {
-    // Handle object with text and highlight
-    if (isHighlightValue(value)) {
-      const { text, highlight } = value;
-      const isUnlimited = shouldHighlight(text);
-      
-      let displayText;
-      if (highlight) {
-        const parts = text.split(new RegExp(`(${highlight})`, "gi"));
-        displayText = (
-          <>
-            {parts.map((part, index) =>
-              part.toLowerCase() === highlight.toLowerCase() ? (
-                <span key={index} className="text-light-1000 dark:text-dark-1000">
-                  {part}
-                </span>
-              ) : (
-                <span key={index} className="text-light-950 dark:text-dark-800">
-                  {part}
-                </span>
-              ),
-            )}
-          </>
+    if (typeof value === "object" && value !== null) {
+      const { text, highlight, highlightFirstWord } = value;
+
+      if (highlightFirstWord) {
+        const spaceIndex = text.indexOf(" ");
+        const firstWord = spaceIndex === -1 ? text : text.slice(0, spaceIndex);
+        const rest = spaceIndex === -1 ? "" : text.slice(spaceIndex);
+        return (
+          <div className="flex items-center gap-2.5">
+            <HiCheckCircle className="mt-0.5 h-4 w-4 shrink-0 text-light-1000 dark:text-dark-1000" />
+            <span className="text-sm font-medium">
+              <span className="text-light-1000 dark:text-dark-1000">{firstWord}</span>
+              <span className="text-light-950 dark:text-dark-800">{rest}</span>
+            </span>
+          </div>
         );
-      } else {
-        displayText = text;
       }
-      
+
       return (
         <div className="flex items-center gap-2.5">
           <HiCheckCircle
             className={twMerge(
               "mt-0.5 h-4 w-4 shrink-0",
-              isUnlimited
+              highlight
                 ? "text-light-1000 dark:text-dark-1000"
                 : "text-light-400 dark:text-dark-600",
             )}
@@ -394,44 +372,18 @@ const FeatureComparisonTable = ({
           <span
             className={twMerge(
               "text-sm font-medium",
-              isUnlimited
+              highlight
                 ? "text-light-1000 dark:text-dark-950"
                 : "text-light-950 dark:text-dark-800",
             )}
           >
-            {displayText}
-          </span>
-        </div>
-      );
-    }
-    
-    if (typeof value === "string") {
-      const isUnlimited = shouldHighlight(value);
-      return (
-        <div className="flex items-center gap-2.5">
-          <HiCheckCircle
-            className={twMerge(
-              "mt-0.5 h-4 w-4 shrink-0",
-              isUnlimited
-                ? "text-light-1000 dark:text-dark-1000"
-                : "text-light-400 dark:text-dark-600",
-            )}
-          />
-          <span
-            className={twMerge(
-              "text-sm font-medium",
-              isUnlimited
-                ? "text-light-1000 dark:text-dark-950"
-                : "text-light-950 dark:text-dark-800",
-            )}
-          >
-            {value}
+            {text}
           </span>
         </div>
       );
     }
+
     if (value) {
-      // Boolean true - show checkmark icon
       return (
         <div className="flex items-center gap-2.5">
           <HiCheckCircle className="mt-0.5 h-4 w-4 shrink-0 text-light-1000 dark:text-dark-1000" />
@@ -441,7 +393,7 @@ const FeatureComparisonTable = ({
         </div>
       );
     }
-    // Boolean false - show cross icon
+
     return (
       <div className="flex items-center gap-2.5">
         <HiXCircle className="mt-0.5 h-4 w-4 shrink-0 text-light-400 dark:text-dark-600" />
@@ -455,7 +407,7 @@ const FeatureComparisonTable = ({
   const getFeatureValue = (
     feature: PlanFeature,
     planId: string,
-  ): string | boolean | { text: string; highlight?: string } => {
+  ): string | boolean | { text: string; highlight?: boolean; highlightFirstWord?: boolean } => {
     switch (planId) {
       case "free":
         return feature.free;

apps/web/src/views/public/board/CardModal.tsx

@@ -47,7 +47,7 @@ export function CardModal({
     }
   };
 
-  const { data, isLoading } = api.card.byId.useQuery(
+  const { data, isLoading, error } = api.card.byId.useQuery(
     {
       cardPublicId: cardPublicId ?? "",
     },
@@ -56,6 +56,17 @@ export function CardModal({
     },
   );
 
+  // Redirect to 404 if card doesn't exist
+  useEffect(() => {
+    if (isOpen && cardPublicId && !isLoading) {
+      if (error?.data?.code === "NOT_FOUND" || (!data && !isLoading && error)) {
+        // Close modal first, then redirect
+        closeModal();
+        router.replace("/404");
+      }
+    }
+  }, [isOpen, cardPublicId, isLoading, error, data, closeModal, router]);
+
   const labels = data?.labels ?? [];
 
   const handleScroll = () => {

apps/web/src/views/public/boards/index.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { t } from "@lingui/core/macro";
 import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";
@@ -12,13 +13,22 @@ export default function PublicBoardsView() {
     ? router.query.workspaceSlug[0]
     : router.query.workspaceSlug;
 
-  const { data, isLoading } = api.workspace.bySlug.useQuery(
+  const { data, isLoading, error } = api.workspace.bySlug.useQuery(
     {
       workspaceSlug: workspaceSlug ?? "",
     },
     { enabled: !!workspaceSlug },
   );
 
+  // Redirect to 404 if workspace doesn't exist
+  useEffect(() => {
+    if (router.isReady && workspaceSlug && !isLoading) {
+      if (error?.data?.code === "NOT_FOUND" || (!data && !isLoading)) {
+        router.replace("/404");
+      }
+    }
+  }, [router, workspaceSlug, isLoading, error, data]);
+
   const BoardsList = ({
     isLoading,
     boards,

apps/web/src/views/settings/AccountSettings.tsx

@@ -3,6 +3,7 @@ import { env } from "next-runtime-env";
 
 import Button from "~/components/Button";
 import FeedbackModal from "~/components/FeedbackModal";
+import { FontSizeSelector } from "~/components/FontSizeSelector";
 import { LanguageSelector } from "~/components/LanguageSelector";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -54,6 +55,16 @@ export default function AccountSettings() {
           <LanguageSelector />
         </div>
 
+        <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Font size`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Change the application font size.`}
+          </p>
+          <FontSizeSelector />
+        </div>
+
         <div className="mb-8 border-t border-light-300 dark:border-dark-300">
           <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
             {t`Delete account`}

apps/web/src/views/settings/IntegrationsSettings.tsx

@@ -1,9 +1,13 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
 import { useEffect } from "react";
+import { useForm } from "react-hook-form";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+import { z } from "zod";
 
 import Button from "~/components/Button";
 import FeedbackModal from "~/components/FeedbackModal";
+import Input from "~/components/Input";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -11,10 +15,28 @@ import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 
+const githubTokenSchema = z.object({
+  token: z.string().min(1, { message: t`Token is required` }),
+});
+
+type GitHubTokenFormValues = z.infer<typeof githubTokenSchema>;
+
 export default function IntegrationsSettings() {
   const { modalContentType, isOpen } = useModal();
   const { showPopup } = usePopup();
 
+  const {
+    register,
+    handleSubmit,
+    formState: { isDirty, errors },
+    reset,
+  } = useForm<GitHubTokenFormValues>({
+    resolver: zodResolver(githubTokenSchema),
+    defaultValues: {
+      token: "",
+    },
+  });
+
   const {
     data: integrations,
     refetch: refetchIntegrations,
@@ -34,21 +56,25 @@ export default function IntegrationsSettings() {
       },
     );
 
+  const { data: githubStatus, refetch: refetchGithubStatus } =
+    api.integration.getGitHubStatus.useQuery();
+
   useEffect(() => {
     const handleFocus = () => {
-      refetchIntegrations();
+      void refetchIntegrations();
+      void refetchGithubStatus();
     };
     window.addEventListener("focus", handleFocus);
     return () => {
       window.removeEventListener("focus", handleFocus);
     };
-  }, [refetchIntegrations]);
+  }, [refetchIntegrations, refetchGithubStatus]);
 
   const { mutateAsync: disconnectTrello } =
     api.integration.disconnect.useMutation({
       onSuccess: () => {
-        refetchIntegrations();
-        refetchTrelloUrl();
+        void refetchIntegrations();
+        void refetchTrelloUrl();
         showPopup({
           header: t`Trello disconnected`,
           message: t`Your Trello account has been disconnected.`,
@@ -64,6 +90,49 @@ export default function IntegrationsSettings() {
       },
     });
 
+  const { mutateAsync: saveGithubToken, isPending: isSavingGithubToken } =
+    api.integration.saveGitHubToken.useMutation({
+      onSuccess: () => {
+        void refetchGithubStatus();
+        reset();
+        showPopup({
+          header: t`GitHub connected`,
+          message: t`Your GitHub account has been connected.`,
+          icon: "success",
+        });
+      },
+      onError: () => {
+        showPopup({
+          header: t`Error connecting GitHub`,
+          message: t`An error occurred while connecting your GitHub account.`,
+          icon: "error",
+        });
+      },
+    });
+
+  const onSubmitGithubToken = (data: GitHubTokenFormValues) => {
+    void saveGithubToken({ token: data.token });
+  };
+
+  const { mutateAsync: disconnectGithub } =
+    api.integration.disconnectGitHub.useMutation({
+      onSuccess: () => {
+        void refetchGithubStatus();
+        showPopup({
+          header: t`GitHub disconnected`,
+          message: t`Your GitHub account has been disconnected.`,
+          icon: "success",
+        });
+      },
+      onError: () => {
+        showPopup({
+          header: t`Error disconnecting GitHub`,
+          message: t`An error occurred while disconnecting your GitHub account.`,
+          icon: "error",
+        });
+      },
+    });
+
   return (
     <>
       <PageHead title={t`Settings | Integrations`} />
@@ -112,6 +181,51 @@ export default function IntegrationsSettings() {
         )}
       </div>
 
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`GitHub`}
+        </h2>
+        {!githubStatus?.connected ? (
+          <>
+            <p className="mb-4 text-sm text-neutral-500 dark:text-dark-900">
+              {t`Connect your GitHub account to import projects.`}
+            </p>
+            <form
+              onSubmit={handleSubmit(onSubmitGithubToken)}
+              className="flex gap-2"
+            >
+              <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
+                <Input
+                  type="password"
+                  placeholder="Personal Access Token"
+                  {...register("token")}
+                  errorMessage={errors.token?.message}
+                />
+              </div>
+              <div>
+                <Button
+                  variant="secondary"
+                  type="submit"
+                  disabled={!isDirty || isSavingGithubToken}
+                  isLoading={isSavingGithubToken}
+                >
+                  {t`Connect GitHub`}
+                </Button>
+              </div>
+            </form>
+          </>
+        ) : (
+          <>
+            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+              {t`Your GitHub account is connected.`}
+            </p>
+            <Button variant="secondary" onClick={() => disconnectGithub()}>
+              {t`Disconnect GitHub`}
+            </Button>
+          </>
+        )}
+      </div>
+
       {/* Global modals */}
       <Modal
         modalSize="md"

apps/web/src/views/settings/WebhookSettings.tsx

@@ -0,0 +1,78 @@
+import { t } from "@lingui/core/macro";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { useWorkspace } from "~/providers/workspace";
+import { DeleteWebhookConfirmation } from "./components/DeleteWebhookConfirmation";
+import { NewWebhookModal } from "./components/NewWebhookModal";
+import WebhookList from "./components/WebhookList";
+
+export default function WebhookSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const { workspace } = useWorkspace();
+
+  if (!workspace) {
+    return null;
+  }
+
+  return (
+    <>
+      <PageHead title={t`Settings | Webhooks`} />
+
+      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Webhooks`}
+        </h2>
+        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+          {t`Configure webhooks to receive notifications when cards are created, updated, moved, or deleted.`}
+        </p>
+
+        <div className="mb-4 flex items-center justify-between">
+          <Button variant="primary" onClick={() => openModal("NEW_WEBHOOK")}>
+            {t`Add webhook`}
+          </Button>
+        </div>
+
+        <WebhookList workspacePublicId={workspace.publicId} />
+      </div>
+
+      {/* Webhook-specific modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_WEBHOOK"}
+      >
+        <NewWebhookModal workspacePublicId={workspace.publicId} />
+      </Modal>
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "EDIT_WEBHOOK"}
+      >
+        <NewWebhookModal workspacePublicId={workspace.publicId} isEdit />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "DELETE_WEBHOOK"}
+      >
+        <DeleteWebhookConfirmation workspacePublicId={workspace.publicId} />
+      </Modal>
+
+      {/* Global modals */}
+      <Modal
+        modalSize="md"
+        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+      >
+        <FeedbackModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+      >
+        <NewWorkspaceForm />
+      </Modal>
+    </>
+  );
+}

apps/web/src/views/settings/WorkspaceSettings.tsx

@@ -17,6 +17,7 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
+import UpdateWeekStartDayForm from "./components/UpdateWeekStartDayForm";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
 import UpdateWorkspaceEmailVisibilityForm from "./components/UpdateWorkspaceEmailVisibilityForm";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
@@ -86,6 +87,15 @@ export default function WorkspaceSettings() {
           disabled={!canEditWorkspace}
         />
 
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Week start day`}
+        </h2>
+        <UpdateWeekStartDayForm
+          workspacePublicId={workspace.publicId}
+          weekStartDay={workspaceData?.weekStartDay ?? 1}
+          disabled={!canEditWorkspace}
+        />
+
         <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
           {t`Email visibility`}
         </h2>

apps/web/src/views/settings/components/Avatar.tsx

@@ -110,18 +110,17 @@ export default function Avatar({
     const cropYpx = (crop.y / 100) * image.naturalHeight;
     const cropWpx = (crop.width / 100) * image.naturalWidth;
     const cropHpx = (crop.height / 100) * image.naturalHeight;
-    canvas.width = Math.max(1, Math.floor(cropWpx));
-    canvas.height = Math.max(1, Math.floor(cropHpx));
+
+    // Cap output at 512x512 — avatars display at 64x64, so higher res is wasteful
+    // and causes "File too large" errors on HiDPI screens
+    const maxSize = 512;
+    const scale = Math.min(maxSize / cropWpx, maxSize / cropHpx, 1);
+    canvas.width = Math.max(1, Math.floor(cropWpx * scale));
+    canvas.height = Math.max(1, Math.floor(cropHpx * scale));
     const ctx = canvas.getContext("2d");
     if (!ctx) throw new Error("Canvas not supported");
 
-    // For better quality on HiDPI screens
-    const pixelRatio = window.devicePixelRatio || 1;
-    canvas.width = canvas.width * pixelRatio;
-    canvas.height = canvas.height * pixelRatio;
-    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
     ctx.imageSmoothingQuality = "high";
-
     ctx.drawImage(
       image,
       cropXpx,
@@ -130,8 +129,8 @@ export default function Avatar({
       cropHpx,
       0,
       0,
-      canvas.width / pixelRatio,
-      canvas.height / pixelRatio,
+      canvas.width,
+      canvas.height,
     );
 
     const mime = selectedFile?.type ?? "image/jpeg";
@@ -139,6 +138,7 @@ export default function Avatar({
       canvas.toBlob(
         (b) => (b ? resolve(b) : reject(new Error("toBlob failed"))),
         mime,
+        0.85,
       );
     });
     return blob;

apps/web/src/views/settings/components/DeleteWebhookConfirmation.tsx

@@ -0,0 +1,87 @@
+import { t } from "@lingui/core/macro";
+import { HiXMark } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface DeleteWebhookConfirmationProps {
+  workspacePublicId: string;
+}
+
+export function DeleteWebhookConfirmation({
+  workspacePublicId,
+}: DeleteWebhookConfirmationProps) {
+  const {
+    closeModal,
+    entityId: webhookPublicId,
+    entityLabel: webhookName,
+  } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const deleteWebhookMutation = api.webhook.delete.useMutation({
+    onSuccess: () => {
+      void utils.webhook.list.invalidate({ workspacePublicId });
+      showPopup({
+        header: t`Webhook deleted`,
+        message: t`Webhook deleted successfully`,
+        icon: "success",
+      });
+      closeModal();
+    },
+    onError: (error) => {
+      showPopup({
+        header: t`Unable to delete webhook`,
+        message: error.message || t`Failed to delete webhook`,
+        icon: "error",
+      });
+    },
+  });
+
+  const handleDelete = () => {
+    if (!webhookPublicId) return;
+    deleteWebhookMutation.mutate({
+      workspacePublicId,
+      webhookPublicId: webhookPublicId,
+    });
+  };
+
+  return (
+    <div>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+          <h2 className="text-sm font-bold">{t`Delete webhook`}</h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+
+        <p className="text-sm text-neutral-500 dark:text-dark-900">
+          {t`Are you sure you want to delete the webhook "${webhookName}"? This action cannot be undone.`}
+        </p>
+      </div>
+
+      <div className="mt-8 flex items-center justify-end gap-3 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <Button variant="secondary" onClick={() => closeModal()}>
+          {t`Cancel`}
+        </Button>
+        <Button
+          variant="danger"
+          onClick={handleDelete}
+          isLoading={deleteWebhookMutation.isPending}
+        >
+          {t`Delete`}
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/settings/components/NewWebhookModal.tsx

@@ -0,0 +1,350 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { HiXMark } from "react-icons/hi2";
+import { z } from "zod";
+
+import { webhookEvents } from "@kan/db/schema";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+const newWebhookSchema = z.object({
+  name: z
+    .string()
+    .min(1, { message: t`Webhook name is required` })
+    .max(255, { message: t`Webhook name cannot exceed 255 characters` }),
+  url: z
+    .string()
+    .min(1, { message: t`Webhook URL is required` })
+    .url({ message: t`Please enter a valid URL` })
+    .max(2048, { message: t`URL cannot exceed 2048 characters` }),
+  secret: z
+    .string()
+    .max(512, { message: t`Secret cannot exceed 512 characters` })
+    .optional(),
+  events: z
+    .array(z.enum(webhookEvents))
+    .min(1, { message: t`Select at least one event` }),
+  active: z.boolean(),
+});
+
+type WebhookFormData = z.infer<typeof newWebhookSchema>;
+
+interface NewWebhookModalProps {
+  workspacePublicId: string;
+  isEdit?: boolean;
+}
+
+export function NewWebhookModal({
+  workspacePublicId,
+  isEdit = false,
+}: NewWebhookModalProps) {
+  const {
+    closeModal,
+    entityId: webhookPublicId,
+    getModalState,
+    clearModalState,
+  } = useModal();
+  const { showPopup } = usePopup();
+  const [isTestingWebhook, setIsTestingWebhook] = useState(false);
+
+  const modalState = isEdit ? getModalState("EDIT_WEBHOOK") : null;
+
+  const utils = api.useUtils();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+  } = useForm<WebhookFormData>({
+    resolver: zodResolver(newWebhookSchema),
+    defaultValues: {
+      name: "",
+      url: "",
+      secret: "",
+      events: [...webhookEvents],
+      active: true,
+    },
+  });
+
+  useEffect(() => {
+    if (isEdit && webhookPublicId && modalState) {
+      reset({
+        name: modalState.name ?? "",
+        url: modalState.url ?? "",
+        secret: "",
+        events: modalState.events ?? ["card.created"],
+        active: modalState.active ?? true,
+      });
+    } else if (!isEdit) {
+      reset({
+        name: "",
+        url: "",
+        secret: "",
+        events: [...webhookEvents],
+        active: true,
+      });
+    }
+  }, [isEdit, webhookPublicId, modalState, reset]);
+
+  // Clear modal state when closing
+  useEffect(() => {
+    return () => {
+      if (isEdit) {
+        clearModalState("EDIT_WEBHOOK");
+      }
+    };
+  }, [isEdit, clearModalState]);
+
+  const createWebhookMutation = api.webhook.create.useMutation({
+    onSuccess: () => {
+      void utils.webhook.list.invalidate({ workspacePublicId });
+      showPopup({
+        header: t`Webhook created`,
+        message: t`Webhook created successfully`,
+        icon: "success",
+      });
+      closeModal();
+    },
+    onError: (error) => {
+      showPopup({
+        header: t`Unable to create webhook`,
+        message: error.message || t`Failed to create webhook`,
+        icon: "error",
+      });
+    },
+  });
+
+  const updateWebhookMutation = api.webhook.update.useMutation({
+    onSuccess: () => {
+      void utils.webhook.list.invalidate({ workspacePublicId });
+      showPopup({
+        header: t`Webhook updated`,
+        message: t`Webhook updated successfully`,
+        icon: "success",
+      });
+      closeModal();
+    },
+    onError: (error) => {
+      showPopup({
+        header: t`Unable to update webhook`,
+        message: error.message || t`Failed to update webhook`,
+        icon: "error",
+      });
+    },
+  });
+
+  const testWebhookMutation = api.webhook.test.useMutation({
+    onSuccess: (result) => {
+      if (result.success) {
+        showPopup({
+          header: t`Test sent`,
+          message: t`Test webhook sent successfully!`,
+          icon: "success",
+        });
+      } else {
+        showPopup({
+          header: t`Test failed`,
+          message: result.error || t`Webhook test failed`,
+          icon: "error",
+        });
+      }
+      setIsTestingWebhook(false);
+    },
+    onError: (error) => {
+      showPopup({
+        header: t`Unable to test webhook`,
+        message: error.message || t`Failed to test webhook`,
+        icon: "error",
+      });
+      setIsTestingWebhook(false);
+    },
+  });
+
+  const onSubmit = (data: WebhookFormData) => {
+    if (isEdit && webhookPublicId) {
+      updateWebhookMutation.mutate({
+        workspacePublicId,
+        webhookPublicId: webhookPublicId,
+        name: data.name,
+        url: data.url,
+        secret: data.secret || undefined,
+        events: data.events,
+        active: data.active,
+      });
+    } else {
+      createWebhookMutation.mutate({
+        workspacePublicId,
+        name: data.name,
+        url: data.url,
+        secret: data.secret || undefined,
+        events: data.events,
+      });
+    }
+  };
+
+  const handleTestWebhook = () => {
+    if (!webhookPublicId) return;
+    setIsTestingWebhook(true);
+    testWebhookMutation.mutate({
+      workspacePublicId,
+      webhookPublicId: webhookPublicId,
+    });
+  };
+
+  const isPending =
+    createWebhookMutation.isPending || updateWebhookMutation.isPending;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+          <h2 className="text-sm font-bold">
+            {isEdit ? t`Edit webhook` : t`New webhook`}
+          </h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+              {t`Name`}
+            </label>
+            <Input
+              id="name"
+              placeholder={t`My webhook`}
+              {...register("name")}
+              errorMessage={errors.name?.message}
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+              {t`URL`}
+            </label>
+            <Input
+              id="url"
+              placeholder="https://example.com/webhook"
+              {...register("url")}
+              errorMessage={errors.url?.message}
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+              {t`Secret (optional)`}
+            </label>
+            <Input
+              id="secret"
+              type="password"
+              placeholder={
+                isEdit
+                  ? t`Enter new secret to update`
+                  : t`HMAC secret for signature verification`
+              }
+              {...register("secret")}
+              errorMessage={errors.secret?.message}
+            />
+            <p className="mt-1 text-xs text-neutral-500 dark:text-dark-800">
+              {t`Used to sign webhook payloads for verification. Leave blank to keep existing secret.`}
+            </p>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-medium text-light-900 dark:text-dark-900">
+              {t`Events`}
+            </label>
+            <Controller
+              name="events"
+              control={control}
+              render={({ field }) => (
+                <div className="space-y-2">
+                  {webhookEvents.map((event) => (
+                    <label
+                      key={event}
+                      className="flex cursor-pointer items-center space-x-2"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={field.value.includes(event)}
+                        onChange={(e) => {
+                          if (e.target.checked) {
+                            field.onChange([...field.value, event]);
+                          } else {
+                            field.onChange(
+                              field.value.filter((v) => v !== event),
+                            );
+                          }
+                        }}
+                        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-light-400 dark:border-dark-400"
+                      />
+                      <span className="text-sm text-light-900 dark:text-dark-900">
+                        {event}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              )}
+            />
+            {errors.events && (
+              <p className="mt-1 text-xs text-red-500">
+                {errors.events.message}
+              </p>
+            )}
+          </div>
+
+          {isEdit && (
+            <div>
+              <label className="flex cursor-pointer items-center space-x-2">
+                <input
+                  type="checkbox"
+                  {...register("active")}
+                  className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-light-400 dark:border-dark-400"
+                />
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Active`}
+                </span>
+              </label>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-8 flex items-center justify-between border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <div>
+          {isEdit && webhookPublicId && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={handleTestWebhook}
+              isLoading={isTestingWebhook}
+            >
+              {t`Send test`}
+            </Button>
+          )}
+        </div>
+        <div>
+          <Button type="submit" isLoading={isPending}>
+            {isEdit ? t`Save changes` : t`Create webhook`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

apps/web/src/views/settings/components/UpdateWeekStartDayForm.tsx

@@ -0,0 +1,59 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
+
+import { api } from "~/utils/api";
+
+export default function UpdateWeekStartDayForm({
+  workspacePublicId,
+  weekStartDay,
+  disabled = false,
+}: {
+  workspacePublicId: string;
+  weekStartDay: number;
+  disabled?: boolean;
+}) {
+  const utils = api.useUtils();
+  const [value, setValue] = useState(weekStartDay);
+
+  useEffect(() => {
+    setValue(weekStartDay);
+  }, [weekStartDay]);
+
+  const updateWorkspace = api.workspace.update.useMutation({
+    onSuccess: () => {
+      if (workspacePublicId && workspacePublicId.length >= 12) {
+        void utils.workspace.byId.invalidate({
+          workspacePublicId,
+        });
+        void utils.workspace.all.invalidate();
+      }
+    },
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (disabled) return;
+    const newValue = Number(e.target.value);
+    setValue(newValue);
+    updateWorkspace.mutate({
+      workspacePublicId,
+      weekStartDay: newValue as 0 | 1 | 6,
+    });
+  };
+
+  return (
+    <div className="flex gap-2">
+      <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
+        <select
+          value={value}
+          onChange={handleChange}
+          disabled={disabled || updateWorkspace.isPending}
+          className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6"
+        >
+          <option value={0}>{t`Sunday`}</option>
+          <option value={1}>{t`Monday`}</option>
+          <option value={6}>{t`Saturday`}</option>
+        </select>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx

@@ -20,7 +20,7 @@ const UpdateWorkspaceUrlForm = ({
 }: {
   workspacePublicId: string;
   workspaceUrl: string;
-  workspacePlan: "free" | "pro" | "enterprise";
+  workspacePlan: "free" | "team" | "pro" | "enterprise";
   disabled?: boolean;
 }) => {
   const utils = api.useUtils();