feat: extend apiKey rate limit

* Fix for minor spelling mistakes and contextually better sounding
sentences

* chore: compile lang

* chore: rebuild translations

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

.env.example

@@ -1,6 +1,6 @@
 # https://github.com/kanbn/kan?tab=readme-ov-file#environment-variables-)
 
-# Required environment variables 
+# 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)
 
@@ -18,6 +18,9 @@ SMTP_PASSWORD=
 EMAIL_FROM= # e.g. "Kan <hello@mail.kan.bn>"
 SMTP_SECURE= # set to "false" to use port 587
 
+# Switch email features off entirely (optional)
+NEXT_PUBLIC_DISABLE_EMAIL=
+
 # S3 storage (optional)
 S3_REGION=
 S3_ENDPOINT=

README.md

@@ -27,7 +27,7 @@
 - 🔍 **Labels & Filters**: Organise and find cards quickly
 - 💬 **Comments**: Discuss and collaborate with your team
 - 📝 **Activity Log**: Track all card changes with detailed activity history
-- 🎨 **Templates (coming soon)** : Save time with reusable board templates
+- 🎨 **Templates** : Save time with reusable custom board templates
 - ⚡️ **Integrations (coming soon)** : Connect your favourite tools
 
 See our [roadmap](https://kan.bn/kan/roadmap) for upcoming features.
@@ -147,6 +147,7 @@ pnpm dev
 | `SMTP_USER`                               | SMTP username/email                                      | No                       | `resend`                                                    |
 | `SMTP_PASSWORD`                           | SMTP password/token                                      | No                       | `re_xxxx`                                                   |
 | `SMTP_SECURE`                             | Use secure SMTP connection (defaults to true if not set) | For Email                | `true`                                                      |
+| `NEXT_PUBLIC_DISABLE_EMAIL`               | To disable all email features                            | For Email                | `true`                                                      |
 | `NEXT_PUBLIC_BASE_URL`                    | Base URL of your installation                            | Yes                      | `http://localhost:3000`                                     |
 | `BETTER_AUTH_SECRET`                      | Auth encryption secret                                   | Yes                      | Random 32+ char string                                      |
 | `BETTER_AUTH_TRUSTED_ORIGINS`             | Allowed callback origins                                 | No                       | `http://localhost:3000,http://localhost:3001`               |

apps/docs/guides/self-hosting/introduction.mdx

@@ -0,0 +1,140 @@
+---
+title: "Introduction"
+description: "Overview and quick start to run Kan on your own infrastructure using Docker Compose."
+mode: "wide"
+tag: "NEW"
+---
+
+This guide introduces how to self-host Kan. It starts with the minimal Docker Compose setup (web + PostgreSQL) and points you to optional features like email and S3-based file storage.
+
+## What you’ll set up
+
+<CardGroup cols={2}>
+  <Card title="Kan" icon="globe" color="#0284c7" horizontal>
+    Next.js application served on port 3000.
+  </Card>
+  <Card title="PostgreSQL 15" icon="database" color="#65a30d" horizontal>
+    Primary database for Kan data.
+  </Card>
+</CardGroup>
+
+<Note>
+  For file uploads (avatars), OAuth, and other advanced options, see the
+  Environment Variables section in the README and the dedicated [S3
+  guide](/guides/self-hosting/s3). The [full
+  compose](https://github.com/kanbn/kan/blob/main/docker-compose.yml) in the
+  repo includes a richer configuration via <code>.env</code>.
+</Note>
+
+## Prerequisites
+
+- Docker and Docker Compose
+- A long random string for <code>BETTER_AUTH_SECRET</code> (32+ chars)
+
+## Quick start
+
+<Steps>
+  <Step title="Create a docker-compose.yml">
+    Paste the following minimal configuration into a new <code>docker-compose.yml</code> file:
+
+    ```yaml
+    services:
+      web:
+        image: ghcr.io/kanbn/kan:latest
+        container_name: kan-web
+        ports:
+          - "3000:3000"
+        networks:
+          - kan-network
+        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
+        depends_on:
+          - postgres
+        restart: unless-stopped
+
+      postgres:
+        image: postgres:15
+        container_name: kan-db
+        environment:
+          POSTGRES_DB: kan_db
+          POSTGRES_USER: kan
+          POSTGRES_PASSWORD: your_postgres_password
+        ports:
+          - 5432:5432
+        volumes:
+          - kan_postgres_data:/var/lib/postgresql/data
+        restart: unless-stopped
+        networks:
+          - kan-network
+
+    networks:
+      kan-network:
+
+    volumes:
+      kan_postgres_data:
+    ```
+
+    <Tip>
+      The example above is intentionally minimal. The repository provides a more feature-complete compose file at [docker-compose.yml](https://github.com/kanbn/kan/blob/main/docker-compose.yml) if you want environment-based configuration, OAuth, S3, and more.
+    </Tip>
+
+  </Step>
+
+  <Step title="Start the stack">
+    Bring everything up in detached mode:
+
+    ```bash
+    docker compose up -d
+    ```
+
+    Once started, open [http://localhost:3000](http://localhost:3000).
+
+  </Step>
+
+  <Step title="Manage the containers">
+    Useful commands while developing or testing:
+
+    - Stop the containers: <code>docker compose down</code>
+    - View logs: <code>docker compose logs -f</code>
+    - Restart: <code>docker compose restart</code>
+
+  </Step>
+
+  <Step title="Configure environment (optional)">
+    For a production-like setup and more features (email, OAuth, file uploads, etc.), create a <code>.env</code> file and set the relevant variables shown in the README’s Environment Variables section.
+
+    <Accordion title="Common variables">
+      ```bash
+      # Required
+      NEXT_PUBLIC_BASE_URL=http://localhost:3000
+      BETTER_AUTH_SECRET=replace_with_long_random_string
+      POSTGRES_URL=postgresql://kan:your_postgres_password@postgres:5432/kan_db
+
+      # Optional: Email
+      EMAIL_FROM="Kan <hello@mail.kan.bn>"
+      SMTP_HOST=smtp.resend.com
+      SMTP_PORT=465
+      SMTP_USER=resend
+      SMTP_PASSWORD=re_xxxx
+      SMTP_SECURE=true
+
+      # Optional: Auth toggles
+      NEXT_PUBLIC_ALLOW_CREDENTIALS=true
+      NEXT_PUBLIC_DISABLE_SIGN_UP=false
+      ```
+
+      <Note type="warning">
+        If you plan to enable file uploads (avatars, etc.), you’ll also need S3 variables (<code>S3_ENDPOINT</code>, <code>S3_ACCESS_KEY_ID</code>, <code>S3_SECRET_ACCESS_KEY</code>, <code>NEXT_PUBLIC_STORAGE_URL</code>, <code>NEXT_PUBLIC_STORAGE_DOMAIN</code>, …). See the S3 guide linked at the top.
+      </Note>
+    </Accordion>
+
+  </Step>
+</Steps>
+
+## Reference
+
+- [GitHub README](https://github.com/kanbn/kan/blob/main/README.md#self-hosting-)
+- [GitHub docker-compose.yml](https://github.com/kanbn/kan/blob/main/docker-compose.yml)

apps/docs/guides/self-hosting/s3.mdx

@@ -0,0 +1,397 @@
+---
+title: "Kan + MinIO (S3)"
+mode: "wide"
+tag: "NEW"
+---
+
+Deploy Kan with PostgreSQL and MinIO (S3-compatible storage) using Docker Compose, with clear steps and production notes.
+
+## What you’ll set up
+
+<CardGroup cols={2}>
+  <Card title="Kan" icon="globe" color="#0284c7" horizontal>
+    Kan web app (Next.js), on port 3000.
+  </Card>
+  <Card title="PostgreSQL 15" icon="database" color="#65a30d" horizontal>
+    PostgreSQL database for Kan.
+  </Card>
+</CardGroup>
+<Card title="MinIO (S3-compatible)" icon="cloud" color="#ca8a04" horizontal>
+  MinIO object storage (console port 9001, S3 API port 9000).
+</Card>
+
+## How it works
+
+- Kan stores data in PostgreSQL.
+- Kan uploads files (e.g., avatars) to MinIO over the S3 API.
+- The browser fetches public files directly from MinIO’s public URL.
+- The Next.js image optimizer in Kan must be explicitly allowed to fetch from your storage host.
+
+Key domain settings:
+
+- <code>NEXT_PUBLIC_BASE_URL</code> → the Kan site
+- <code>NEXT_PUBLIC_STORAGE_URL</code> → the public S3 base URL
+- <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> → the exact S3 hostname (no scheme)
+
+## Prerequisites
+
+- Docker and Docker Compose
+- Open local ports: 3000 (Kan), 5432 (Postgres), 9000/9001 (MinIO)
+- A long random string for <code>BETTER_AUTH_SECRET</code> (32+ chars)
+
+<Note type="warning">
+  For production you’ll want a reverse proxy (Traefik/Nginx/Caddy), valid TLS
+  certificates, and DNS for your domains (e.g., <code>kan.example.com</code>,{" "}
+  <code>s3.example.com</code>).
+</Note>
+
+## Quick start
+
+<Tip type="info">
+  Why <code>localtest.me</code>? It resolves to <code>127.0.0.1</code>{" "}
+  automatically, so you can test domain-based configs locally without editing
+  hosts.
+</Tip>
+
+<Steps>
+  <Step title="Set environment variables">
+    Provide the minimum required configuration (local example):
+
+    ```bash
+    NEXT_PUBLIC_BASE_URL=http://kan.localtest.me:3000
+    BETTER_AUTH_SECRET=<long random string>
+    POSTGRES_URL=postgresql://kan:<password>@postgres:5432/kan_db
+
+    # MinIO/S3
+    S3_ENDPOINT=http://s3.localtest.me:9000
+    S3_ACCESS_KEY_ID=<minio-access-key>
+    S3_SECRET_ACCESS_KEY=<minio-secret-key>
+    S3_REGION=none
+    S3_FORCE_PATH_STYLE=true
+
+    # Public storage access
+    NEXT_PUBLIC_STORAGE_URL=http://s3.localtest.me:9000
+    NEXT_PUBLIC_STORAGE_DOMAIN=s3.localtest.me
+    NEXT_PUBLIC_AVATAR_BUCKET_NAME=kan
+    ```
+
+    <Note type="info">
+      Issue #109 fix: make sure <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> exactly
+      equals the hostname that serves your images (no scheme, no port).
+    </Note>
+
+    Optional (see README for full list): Email (`EMAIL_FROM`, `SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASSWORD`, `SMTP_SECURE`), OAuth/OIDC (`GOOGLE_*`, `GITHUB_*`, `OIDC_*`), auth toggles, Trello import, etc.
+
+  </Step>
+
+  <Step title="Create or review Docker Compose files">
+    You can start from the minimal compose at the repository root (<code>docker-compose.yml</code>) and review the production-oriented settings in <code>cloud/docker-compose.yml</code>.
+
+    Start with the minimal setup (web + postgres + minio) and ensure environment variables are passed to the web service.
+
+    <Accordion title="Docker Compose example">
+
+    ```yaml
+    services:
+      postgres:
+        image: postgres:15
+        container_name: kan-db
+        ports:
+          - "5432:5432"
+        environment:
+          POSTGRES_USER: kan
+          POSTGRES_PASSWORD: changeme
+          POSTGRES_DB: kan_db
+        volumes:
+          - pg_data:/var/lib/postgresql/data
+        restart: unless-stopped
+
+      minio:
+        image: minio/minio:latest
+        container_name: kan-minio
+        command: server /data --console-address ":9001"
+        ports:
+          - "9000:9000" # S3 API
+          - "9001:9001" # Console
+        environment:
+          # Use the same credentials in your .env
+          # as S3_ACCESS_KEY_ID / S3_SECRET_ACCESS_KEY
+          MINIO_ROOT_USER: minio
+          MINIO_ROOT_PASSWORD: minio123456789
+        volumes:
+          - minio_data:/data
+        restart: unless-stopped
+
+      web:
+        image: ghcr.io/kanbn/kan:latest
+        container_name: kan-web
+        depends_on:
+          - postgres
+          - minio
+        ports:
+          - "3000:3000"
+        # Load variables from .env
+        # (see the "Set environment variables" step)
+        env_file:
+          - .env
+        restart: unless-stopped
+
+    volumes:
+      pg_data:
+      minio_data:
+    ```
+
+    <Note type="info">
+      Ensure your <code>.env</code> contains values that match this compose file.
+      For example:
+      <ul>
+        <li>
+          <code>POSTGRES_URL=postgresql://kan:changeme@postgres:5432/kan_db</code>
+        </li>
+        <li>
+          <code>S3_ENDPOINT=http://s3.localtest.me:9000</code>
+        </li>
+        <li>
+          <code>S3_ACCESS_KEY_ID=minio</code> and{" "}
+          <code>S3_SECRET_ACCESS_KEY=minio123456789</code>
+        </li>
+        <li>
+          <code>S3_FORCE_PATH_STYLE=true</code>
+        </li>
+        <li>
+          <code>NEXT_PUBLIC_STORAGE_URL=http://s3.localtest.me:9000</code>
+        </li>
+        <li>
+          <code>NEXT_PUBLIC_STORAGE_DOMAIN=s3.localtest.me</code>
+        </li>
+        <li>
+          <code>NEXT_PUBLIC_AVATAR_BUCKET_NAME=kan</code>
+        </li>
+      </ul>
+    </Note>
+
+    </Accordion>
+
+  </Step>
+
+  <Step title="Start services">
+
+    ```bash
+    docker compose up -d
+    ```
+
+    Then open:
+
+    <ul>
+      <li>
+        Kan: <a href="http://kan.localtest.me:3000">http://kan.localtest.me:3000</a>
+      </li>
+      <li>
+        MinIO Console:{" "}
+        <a href="http://minio.localtest.me:9001">http://minio.localtest.me:9001</a>
+      </li>
+      <li>
+        MinIO S3 API:{" "}
+        <a href="http://s3.localtest.me:9000">http://s3.localtest.me:9000</a>
+      </li>
+    </ul>
+
+  </Step>
+
+  <Step title="Initialize MinIO">
+    1) Log into the MinIO Console (http://minio.localtest.me:9001).
+
+    2. Create a bucket (e.g., <code>kan</code>).
+
+    3. For simple public avatars, apply a read-only policy so GET requests are allowed for objects:
+
+    ```json
+    {
+      "Version": "2012-10-17",
+      "Statement": [
+        {
+          "Effect": "Allow",
+          "Principal": { "AWS": ["*"] },
+          "Action": ["s3:GetBucketLocation", "s3:ListBucket"],
+          "Resource": ["arn:aws:s3:::kan"]
+        },
+        {
+          "Effect": "Allow",
+          "Principal": { "AWS": ["*"] },
+          "Action": ["s3:GetObject"],
+          "Resource": ["arn:aws:s3:::kan/*"]
+        }
+      ]
+    }
+    ```
+
+    <Note type="warning">
+      Alternatively, keep the bucket private and use presigned URLs. In that case,
+      ensure your server and browser access paths are correctly configured.
+    </Note>
+
+  </Step>
+
+  <Step title="Verify the setup">
+    <ul>
+      <li>Sign in to Kan and upload an avatar (Settings).</li>
+      <li>Confirm the object is created in your MinIO bucket.</li>
+      <li>The avatar should render without errors.</li>
+    </ul>
+
+    If you see a 400 from <code>/\_next/image</code> with “url parameter is not allowed”:
+
+    <ul>
+      <li>
+        <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> must exactly match the S3 hostname
+        that serves images.
+      </li>
+      <li>
+        <code>NEXT_PUBLIC_STORAGE_URL</code> should use the same host (with
+        scheme/port).
+      </li>
+      <li>Ensure you’re using the latest Kan image.</li>
+    </ul>
+
+  </Step>
+</Steps>
+
+## Production setup
+
+<Tabs>
+  <Tab title="Local">
+
+  <ul>
+    <li><code>NEXT_PUBLIC_BASE_URL=http://kan.localtest.me:3000</code></li>
+    <li><code>S3_ENDPOINT=http://s3.localtest.me:9000</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_URL=http://s3.localtest.me:9000</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_DOMAIN=s3.localtest.me</code></li>
+    <li>Keep <code>S3_FORCE_PATH_STYLE=true</code> for MinIO.</li>
+  </ul>
+  </Tab>
+  <Tab title="Production">
+
+  <ul>
+    <li><code>NEXT_PUBLIC_BASE_URL=https://kan.example.com</code></li>
+    <li><code>S3_ENDPOINT=https://s3.example.com</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_URL=https://s3.example.com</code></li>
+    <li><code>NEXT_PUBLIC_STORAGE_DOMAIN=s3.example.com</code></li>
+    <li>Keep <code>S3_FORCE_PATH_STYLE=true</code> for MinIO.</li>
+    <li>Put Kan and MinIO behind HTTPS with a reverse proxy (Traefik/Nginx) and valid TLS.</li>
+  </ul>
+  </Tab>
+</Tabs>
+
+## Troubleshooting
+
+<AccordionGroup>
+  <Accordion title="Files upload but don’t display">
+    <ul>
+      <li>If public: confirm GET is allowed on objects (bucket policy).</li>
+      <li>If private: ensure presigned URLs are generated and valid.</li>
+      <li>403 AccessDenied indicates permissions, not CORS. CORS is not required for simple <code>&lt;img&gt;</code> GETs.</li>
+    </ul>
+  </Accordion>
+
+  <Accordion title="Make the bucket public (read-only) with mc" defaultOpen>
+    Use your MinIO root credentials to allow anonymous reads:
+
+    ```bash
+    # Replace with your MINIO_ROOT_PASSWORD
+    MINIO_PASS='<your-minio-password>'
+
+    # Point mc at MinIO via the container network (no ports required)
+    docker run --rm --network container:kan-minio minio/mc \
+      mc alias set local http://127.0.0.1:9000 minio "$MINIO_PASS"
+
+    # Allow public downloads from the bucket
+    docker run --rm --network container:kan-minio minio/mc \
+      mc anonymous set download local/kan
+
+    # Optional: verify anonymous status
+    docker run --rm --network container:kan-minio minio/mc \
+      mc anonymous get local/kan
+    ```
+
+  </Accordion>
+
+  <Accordion title="Alternative: S3 bucket policy (AWS CLI)">
+    If you prefer a bucket policy, apply a public-read policy for objects:
+
+    ```json policy.json
+    {
+      "Version": "2012-10-17",
+      "Statement": [
+        {
+          "Sid": "PublicReadGetObject",
+          "Effect": "Allow",
+          "Principal": "*",
+          "Action": ["s3:GetObject"],
+          "Resource": ["arn:aws:s3:::kan/*"]
+        }
+      ]
+    }
+    ```
+
+    ```bash
+    # Use your MinIO root credentials
+    MINIO_PASS='<your-minio-password>'
+
+    docker run --rm --network container:kan-minio \
+      -e AWS_ACCESS_KEY_ID=minio \
+      -e AWS_SECRET_ACCESS_KEY="$MINIO_PASS" \
+      -e AWS_DEFAULT_REGION=us-east-1 -e AWS_S3_FORCE_PATH_STYLE=true \
+      -v "$PWD:/work" amazon/aws-cli \
+      s3api put-bucket-policy --bucket kan --policy file:///work/policy.json \
+      --endpoint-url http://127.0.0.1:9000
+    ```
+
+  </Accordion>
+
+<Accordion title="Next.js optimizer 400 — url parameter is not allowed">
+  <ul>
+    <li>
+      Exact match on <code>NEXT_PUBLIC_STORAGE_DOMAIN</code> with your storage
+      host.
+    </li>
+    <li>
+      Same host in <code>NEXT_PUBLIC_STORAGE_URL</code>.
+    </li>
+    <li>Update to the latest Kan image.</li>
+  </ul>
+</Accordion>
+
+  <Accordion title="Next/Image: “url parameter is valid but upstream response is invalid”">
+    <ul>
+      <li>This means Next.js accepted the URL, but the upstream returned a non-image (e.g., 403 HTML/XML).</li>
+      <li>Fix: make the bucket/object publicly readable (see above), or use presigned URLs.</li>
+      <li>Sanity test from the web network (replace with your image URL):</li>
+    </ul>
+
+    ```bash
+    IMG_URL="https://s3.example.com/kan/path/to/avatar.jpg"
+
+    # Headers/content-type as seen from the app network
+    docker run --rm --network container:kan-web curlimages/curl:8.9.1 \
+      -I -L --max-redirs 5 "$IMG_URL"
+
+    # Quick status + content-type summary
+    docker run --rm --network container:kan-web curlimages/curl:8.9.1 \
+      -s -o /dev/null -w "HTTP:%{http_code} CT:%{content_type} URL:%{url_effective}\n" -L "$IMG_URL"
+    ```
+
+  </Accordion>
+
+  <Accordion title="Connectivity checks">
+    <ul>
+      <li>The Kan container must reach <code>S3_ENDPOINT</code>.</li>
+      <li>Verify DNS/ports inside the container (e.g., <code>docker exec -it &lt;kan-container&gt; sh</code>).</li>
+    </ul>
+  </Accordion>
+</AccordionGroup>
+
+## References
+
+- [Kan README](https://github.com/kanbn/kan/blob/main/README.md)
+- [Cloud compose reference](https://github.com/kanbn/kan/blob/main/cloud/docker-compose.yml)
+- [Kan #109 Issue](https://github.com/kanbn/kan/issues/109)

apps/docs/mint.json

@@ -44,6 +44,18 @@
       "group": "Get Started",
       "pages": ["introduction"]
     },
+    {
+      "group": "Guides",
+      "pages": [
+        {
+          "group": "Self-Hosting",
+          "pages": [
+            "guides/self-hosting/introduction",
+            "guides/self-hosting/s3"
+          ]
+        }
+      ]
+    },
     {
       "group": "Import",
       "pages": ["imports/trello"]

apps/web/i18n.json

@@ -2,7 +2,7 @@
   "version": 0,
   "locale": {
     "source": "en",
-    "targets": ["fr", "de", "es", "it", "nl"]
+    "targets": ["fr", "de", "es", "it", "nl", "ru", "pl"]
   },
   "buckets": {
     "po": {

apps/web/i18n.lock

@@ -3,15 +3,19 @@ checksums:
   8033ed03a24d7c4898c90a5365297c20:
     "%20(edited)/singular": 666ee7e6d86957a87c23fa12b21b773f
     "%2C%20or%20see%20our/singular": e8a8f2a078fcaea03481710dcaccce5d
+    "%7B0%7D/singular": 18782768c8a0b3c2078747b34fbbcd24
     "%7B0%7D%20%7C%20%7B1%7D/singular": 4628f9c6ec13c2dc2984a6ab80e19f8b
     "%7B0%7D%20labels/singular": 785f92bedf786ff3e285adfc07c69d18
+    "%7B0%7D%20not%20found/singular": a2665fc66f128fee1a80ffec61c9f1a1
     "%7BboardCount%2C%20plural%2C%20one%20%7BImport%20board%20(1)%7D%20other%20%7BImport%20boards%20(%7BboardCount%7D)%7D%7D/singular": 72358c550bd1a99fcb6e8952f0f947ef
     "%2410%2Fmonth/singular": cab5e752ed83096e34fca780d90e1fb9
     "%248%2Fmonth/singular": 4667034934bb2bc3d569c70b94205b51
     1%20user/singular: 3b547431ab12f0fba84307e6a81109d8
     A%20powerful%2C%20flexible%20kanban%20app%20that%20helps%20you%20organise%20work%2C%20track%20progress%2C%20and%20deliver%20results%E2%80%94all%20in%20one%20place./singular: d405b83b0d631cb72f4347c10bcbb643
+    Account/singular: 01215c12fb1cdb93bd0c84c1382bef56
     Account%20deleted/singular: a25da96a1579c4491be0a95669ef18a4
     Activity/singular: 1948763de8e531483a798b68195e297e
+    Activity%20log/singular: 3ec6755040306fdc9ce801bcf6ab28e1
     Activity%20logs/singular: 8b1f0bb96a905646ecfad1cfdfa42168
     Add%20a%20card/singular: 9d80becc4fe65a74e0004e4fd290735d
     Add%20a%20comment.../singular: c28cfccc0cc69a2a2487e37eb9988028
@@ -29,23 +33,32 @@ checksums:
     added%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: bdd202da20b1fffbec21792c5453f90c
     added%20label%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: b32be052b3d57de0c9120fa7f9fc86ee
     Adding%20a%20new%20member%20will%20cost%20an%20additional%20%7Bprice%7D%20(%7BbillingType%7D)%20per%20seat./singular: 12e88573028306110fbc15ef1e714892
+    Adjust%20the%20square%20crop%20to%20fit%20your%20avatar./singular: a4df26bbce6f14c6962fac1324db00a8
     Admin%20roles/singular: 32a5d78073b9bb9a246773afba8831df
     All%20systems%20operational/singular: ee943a4046b09e6334cceeea9fda2bfc
     Already%20have%20an%20account%3F%20%3C0%3E%3C1%3ESign%20in%3C%2F1%3E%3C%2F0%3E/singular: 2959fd276248208b65cb27ed46b20135
     An%20error%20occurred%20while%20disconnecting%20your%20Trello%20account./singular: 0aa3973b860c1faf8d9123aebf567e40
     An%20unexpected%20error%20occurred.%20Please%20try%20again%20later./singular: 1b5749b0cca6a62d75a577bee6804074
+    Anyone%20with%20this%20link%20can%20join%20your%20workspace/singular: 2366ed295eb2c03c425559c24cb31606
+    API/singular: 01d9819514e27056dcc69463194b63d2
+    API%20key%20created/singular: 8dbb2b60a719b0d120e774d6666c8c45
+    API%20key%20name/singular: 2d8aeb08b2cce3b750a584bbc5ce6d1d
+    API%20key%20name%20cannot%20exceed%2030%20characters/singular: 3ea1c7d68e1074a75128017b097b727a
+    API%20key%20name%20is%20required/singular: 870970743b14cb56e7fb7b410af0e933
     API%20keys/singular: 07f3620a30e08136f0b072c9af8d1eef
     API%20Reference/singular: 7dcc877064bfdf889ec55dbc9e06a242
     Applicants/singular: 4babd8331a1441e91087f855f43e57f8
     Approval/singular: 2f5426445800ecd5a3102aac940d459c
     Are%20you%20sure%20want%20to%20remove%20%7BentityLabel%7D%3F/singular: f9b67026c5ef86ac4d5944380d571961
     Are%20you%20sure%20you%20want%20to%20delete%20the%20workspace%20%7B0%7D%3F/singular: 27ba2854202dd77c51e78c64e5c93946
+    Are%20you%20sure%20you%20want%20to%20delete%20this%20%7B0%7D%3F/singular: e980ce9469e329ddfed14c7da2cb5e52
     Are%20you%20sure%20you%20want%20to%20delete%20this%20card%3F/singular: 131a5a7cccca7be8b32c987d9fa0b0c0
     Are%20you%20sure%20you%20want%20to%20delete%20this%20checklist%3F/singular: 7c0f540603474b1a30462dda087fd2f0
     Are%20you%20sure%20you%20want%20to%20delete%20this%20comment%3F/singular: 55fe6f1b52b71b91b2a079cfda3cc7fe
     Are%20you%20sure%20you%20want%20to%20delete%20this%20label%3F/singular: 037fbaf1d04356937e6afb574714f51f
     Are%20you%20sure%20you%20want%20to%20delete%20your%20account%3F/singular: 428b74d781063224c3e63980e1094ec3
     assigned%20%3C0%3E%7B0%7D%3C%2F0%3E%20to%20the%20card/singular: 9df6d89fa83706123dedd8cba2243d04
+    Assignees/singular: 96fc0e28a783d80decfd4716a440ac08
     Awaiting%20Customer/singular: 122c108794f321c10e05a08f09b11457
     Backlog/singular: 35919fd5b10ad212839a75e72829fe4e
     Basic%20Kanban/singular: e46ebc406749486f3907436970d4d6c7
@@ -55,10 +68,11 @@ checksums:
     Billing%20portal/singular: dc3afa14ffe19f5920992a0c9d49d525
     Blog%20Post/singular: 38e027f212be445dc530e427fc642a20
     Board/singular: 101ff39aab674c033c15ab978d0d8bac
-    Board%20analytics%20(coming%20soon)/singular: 3f648e6fe3849ee2ac5cdf410ac9ea06
+    Board%20analytics/singular: 336a8c70a91adc49c15266167ee84cc0
     Board%20name%20cannot%20exceed%20100%20characters/singular: 985c0177744ec56d8dac84f66ec284ca
     Board%20name%20is%20required/singular: dbd0c6cc945ab19e702fc27f970a023b
     Board%20not%20found/singular: 5af9844595fa8aed5985066620435515
+    Board%20sharing%20%26%20invites/singular: c9222fbcfac4e99dcaa859b46c163e55
     Board%20URL%20can%20only%20contain%20letters%2C%20numbers%2C%20and%20hyphens/singular: ba018946ffdf85e55d701a9c27595b4d
     Board%20URL%20cannot%20exceed%2060%20characters/singular: 8fd3417559a56aa42d297b14d480c382
     Board%20URL%20copied%20to%20clipboard/singular: 5ef04fee9c8e5299a2fd1ad223eb95c9
@@ -66,7 +80,6 @@ checksums:
     Board%20visibility/singular: b4205f3058297833a626156057c24b26
     Board%20visibility%20updated/singular: 8e2f5d622fa9c94481e7c1629a154ecf
     Boards/singular: 8fff51c5872e051beb9b718336665e80
-    Boards%20%7C%20%7B0%7D/singular: 70c349df806f4b2d8bd28136a45496f0
     Brainstorming/singular: 736332f2e4488609e42d2be8547d296e
     Bug/singular: 4509fffdb5931f8905063c80cf802d71
     Bug%20Report/singular: e558d1f100e21230c2f495a8913ac5ec
@@ -74,16 +87,20 @@ checksums:
     Card%20not%20found/singular: 91509e2f92b0b3b11330b6983139fdbf
     Card%20title/singular: 7c34f59f4005e6cb3a6ff546ea0b96e3
     Change%20Password/singular: a552fc5c4189ebc3e2e6018edda7d18f
-    Change%20the%20language%20of%20the%20app./singular: fb20db145e28ed44aba89c146ded7bfc
+    Change%20your%20language%20preferences./singular: 293d49fc3c75e9c425b64bd7126e6b46
     Check%20your%20inbox/singular: e9a430fcd298def74212238df0f680d6
     Checklist%20name/singular: 5eb5de823f7ca5a4d97bb41e6a3f675a
+    Checklists/singular: 6f79129c8f08ee54d858a2af57d16dd9
     Clear%20filters/singular: 8f40ab5af527e4b190da94e7b6221379
     Click%20on%20the%20link%20we've%20sent%20to%20%7BmagicLinkRecipient%7D%20to%20sign%20in./singular: 210b6ff8727f976182ec3f29ea3c7667
+    Close/singular: 2c2e22f8424a1031de89063bd0022e16
     Code%20Review/singular: a2da6c2339301e7c3ddf068c4ff9f7e8
     Collaborate%20seamlessly%20with%20your%20team./singular: c5f10e431aaf8b51519bc009a4a4080c
     Coming%20soon/singular: ee2b0671e00972773210c5be5a9ccb89
     Comments/singular: 502237cd1044491c48494aa60967a985
+    Comments%20%26%20mentions/singular: 1f3a822f4f97a9b07db82d24c4204f75
     Company/singular: 9e36d11fa82d1bd4563eef2abc4fcfba
+    Compare%20our%20features%20to%20see%20why%20Kan%20is%20the%20best%20choice./singular: c186ed37ff27cfc2a1ac11e66b2b30f1
     Complete/singular: d3e36d723de0cfdea51c5b4171d30b4d
     Complete%20control%20and%20ownership%3A/singular: 0d8b682ba873272217425ccfc96aa9cd
     completed%20a%20checklist%20item/singular: 757b04c6c80cc927e1c597c0ad4fda33
@@ -98,30 +115,41 @@ checksums:
     Continue%20with%20/singular: 8ed03cf7c5e60a6edf3470a4558ff058
     Continue%20with%20%7B0%7D/singular: 2eaf6e1da91e208f7c5fb6bf862fe8a6
     Control%20who%20can%20view%20and%20edit%20your%20boards./singular: 2a7e0bec29bac26280de707e2fe8bce5
+    Core%20features/singular: da95932e7a1465a5d21aa3b855a46dc2
+    Create%20%7B0%7D/singular: d37c29be6ccc0eb6062237f8508c3178
     Create%20another/singular: 2de8a82a416eb78c0462aa36278edc9a
-    Create%20board/singular: 155b62818bfab0e34f0089e1b34a32f3
+    Create%20API%20key/singular: 70ed8431c6ed5f7fdef122cc34f75b41
     Create%20card/singular: 32792935dd5837a9433909b04021c22b
     Create%20checklist/singular: 5cbca15a7004558c4e6d381f83a34da2
+    Create%20invite%20link/singular: bef23fe786978f7abf78dece49a35a26
     Create%20label/singular: c64e8180fa956f005edc1fd9b8e65abb
     Create%20list/singular: 858c3d514aa95765ec82114393199144
-    Create%20new%20board/singular: cbb87b1f4cc46b336ad9510c9f19407c
+    Create%20new%20%7B0%7D/singular: 163dbd5cf86d512fadd4c3eaf9709a11
     Create%20new%20key/singular: 236bdf75e42b42ec7fb25639bdc035af
     Create%20new%20label/singular: 6be30980847b577847baa01bb5f29711
     Create%20new%20list/singular: ce61ca8be7b3f6c26c32b684a42a2c26
+    Create%20template/singular: 57bfe6b58c42958a90f67d605a69ecdc
     Create%20workspace/singular: 2e6718e79964ea5ce22d76c2189c77ca
     created%20the%20card/singular: 605475f5aaeb4dbccbf7c4eb9107b43d
     Critical/singular: eb327cd411b50aee954f8d1d215d003a
+    Crop%20your%20avatar/singular: eb25e2d5972ec36a0b40481c8136ab15
     Current%20password%20is%20required/singular: 72536bca9598680027f2be8ce80ac280
+    Custom%20board%20templates/singular: c2966b352d76bc53421c01e9c99474bb
     Custom%20domain/singular: b09e7a9c187b7163b4a6cfc78042fe42
+    Custom%20templates/singular: f8caaad67e168f106a298c8e0a66240c
+    Custom%20URLs%20require%20upgrading%20to%20a%20Pro%20plan/singular: f7275e3b473b8f7b39dab6b37eb26fea
+    Custom%20workspace%20link/singular: 8a19ae46ccea9c54b65ae183cea70b44
     Custom%20workspace%20URL/singular: 7ba841d0946eb04fa3d17d74365be37b
     Customer%20Support/singular: 50e3c77e22e41061ca85ea2f02625a2e
     Dark/singular: 73e6e208ba628b26e90fcf6dce15e1b2
+    Deactivate%20invite%20link/singular: 8cf4bf82e153e4dc82d026448cb4dd10
     Delete/singular: 8bcf303dd10a645b5baacb02b47d72c9
     Delete%20account/singular: a9d11113f1a1d7e20582bdcc9633bcef
     Delete%20board/singular: e915cd160651ad4b61a67e8da0737c23
     Delete%20card/singular: 18811ccf76fbb7a2772d648f7c5f0ea7
     Delete%20comment/singular: a3dae0c9ddbc73677aad9812e3dffd69
     Delete%20list/singular: b694f58e4c973d8797a78e746b550b1f
+    Delete%20template/singular: bdf3e8342f581d498b7238cdd4897a4b
     Delete%20workspace/singular: 9017c821209528d9b20d40a488854cdf
     deleted%20a%20checklist/singular: c54f922dc6c238c9141c700cb3180baf
     deleted%20a%20checklist%20item/singular: 2b7a861600102ac5c271dd25c1df261a
@@ -154,7 +182,10 @@ checksums:
     Enter%20your%20name/singular: cd95fbdd0533f2c2e8edf9d9bd9aa8df
     Enter%20your%20new%20password/singular: c67251e3002b68bc20a7cf5de23e43ac
     Enter%20your%20password/singular: ea4fdd034522dead21bae0c0abb52eae
+    Error/singular: 3c95bcb32c2104b99a46f5b3dd015248
     Error%20Changing%20Password/singular: ebecb5c1b72ba4b063117241f5ba4f2d
+    Error%20creating%20invite%20link/singular: cbedc3f3213dfc4fdc8b7503ae1a5cd6
+    Error%20deactivating%20invite%20link/singular: ccf42cd5aa8481692003e87e836de66c
     Error%20deleting%20account/singular: d42965a9bc9e5ec4ed57890268924643
     Error%20deleting%20label/singular: 94387e3a45ec768ae7715701ae00136e
     Error%20deleting%20workspace/singular: 0aec9bd8170bc84f5ea5c9a47c52ed26
@@ -166,13 +197,20 @@ checksums:
     Error%20updating%20workspace%20name/singular: 46025f42a7d5eff689e9cb8bed14a1e4
     Error%20updating%20workspace%20URL/singular: 9da6c012e1b512d8c7fbd812626c4675
     Error%20upgrading%20subscription/singular: 57cc47581c7faaffb3b1721b6352b576
+    Error%20upgrading%20to%20Pro/singular: 934c6867d9bdbe6099b2c0f5a3107f78
     Error%20uploading%20profile%20image/singular: 0ba02753a797a74c6ea7b622c9f69c71
     Everything%20in%20the%20free%20plan%2C%20plus%3A/singular: 62b44c4973b92b806c69a4b15e0256dc
     Everything%20you%20need%2C%20free%20forever.%20Unlimited%20boards%2C%20unlimited%20lists%2C%20unlimited%20cards.%20Upgrade%20any%20time./singular: fa21632ab1468edf10acda2fe7b71323
     Execution/singular: cbac4a3c721123cbc6a883560bf29800
+    Failed%20to%20accept%20invitation.%20Please%20try%20again%20later%2C%20or%20contact%20customer%20support./singular: e4505a9df3a81e93a8a8b103c6e3ebc4
+    Failed%20to%20copy%20invite%20link/singular: 635884d5ed8d6ee20b85a003939b4ae7
+    Failed%20to%20create%20board/singular: a746e2afe881c3bf0a8e82a931ca3495
     Failed%20to%20login%20with%20%7B0%7D.%20Please%20try%20again./singular: 669a4b4247a73f53fb9b8b16e42d166f
+    FAQ/singular: 47e0ee2eb40b4e7e732e05e2233fc71c
     FAQs/singular: dc36d7992372ccd419b39ef51cf5b16c
+    Fast%20%26%20lightweight/singular: 4f2a80c555a5427b94eef5124aa10775
     Feature/singular: 58f5f3f37862b6312a2f20ec1a1fd0e8
+    Feature%20breakdown/singular: cae23c2a3fbb21735289571f2e1f60db
     Feature%20Request/singular: c9de91b9a7020213381977f7d147064f
     Features/singular: 341ff316a339b106a178f0b8d362951b
     Feedback/singular: 6fac88806e0c269a30777b283988c61c
@@ -187,13 +225,14 @@ checksums:
     Fun/singular: 395bdc48e943762b6cde649f4a96771d
     Get%20started/singular: 5c783951b0100a168bdd2161ff294833
     Get%20Started/singular: 1d5f030c4ec9c869e647ae060518b948
-    Get%20started%20by%20creating%20a%20new%20board/singular: 8fe63ba47e12bbf950f3eb33d1008993
+    Get%20started%20by%20creating%20a%20new%20%7B0%7D/singular: 4ca5ef637c08104e9dbb5ff9f49f0680
     Get%20started%20by%20creating%20a%20new%20list/singular: bd6bf0806c95788a15ab438e2b09f885
     Get%20started%20for%20free%20today/singular: 41e129eba0f6411337b54a7a08ea1709
     Get%20started%20for%20free%2C%20with%20no%20usage%20limits.%20For%20collaboration%2C%20upgrade%20to%20a%20plan%20that%20fits%20the%20size%20of%20your%20team./singular: ddea69fa5d7b4023724296e1287872b6
     Get%20started%20on%20Cloud/singular: ed926f526266ad2063283c58e6f4284a
     Getting%20started/singular: 8e5e7bd026b5bec46bbfdce02ab9e0b8
     GitHub/singular: 6e1cf3c00fa6fbe24afcc78ea3b5f3e4
+    Go%20Home/singular: 6251589da1964d55afabdfd64c84c335
     Go%20to%20app/singular: 896d0441384dcd2bfb3b23d61ff1944d
     High%20Priority/singular: 5d231ff8254aabc875f194c4b4f49c97
     Hired/singular: e5a9b1bd409b007141fe3d7890022f9a
@@ -210,27 +249,41 @@ checksums:
     Import/singular: 348b8ab981de5b7f1fca6d7302263bbd
     Import%20complete/singular: 7e749df6f068b9cdf1055ea38c9a80af
     Import%20failed/singular: bcec1f271c82ddffc91ebc22021b03cb
+    Import%20from%20Trello/singular: 9cce591a63763174952ffc11ae829f0c
     Import%20your%20Trello%20boards%20and%20hit%20the%20ground%20running./singular: d66d13649f81342f8b3a4f3b54370c20
     Important/singular: 4cf0e8fc8e4e7c5c9b9458059a172a2b
     Importing%20from%20Trello/singular: 1e3a46fb9bd8ce8c7d632f9555b5bd7c
     Importing%20your%20Trello%20boards%20into%20Kan%20is%20easy.%20You%20can%20follow%20our%20step-by-step%20guide%20%3C0%3Ehere%3C%2F0%3E./singular: ca88dc22801fef08fee1ecfb1bf6914e
+    in/singular: 1f06ad6763244d5e9927853e65cc6274
     In%20Progress/singular: 3de9afebcb9d4ce8ac42e14995f79ffd
     Individuals/singular: 83bfc81f20e60556c44ec80c7d0603ec
     Integrations/singular: 0ccce343287704cd90150c32e2fcad36
+    Intelligent%20search/singular: da688e7cfb2775f719a12df6dd606f6e
     Interviewing/singular: 4ccdcdc784547e925077c3297bddee95
     Invalid%20email%20address/singular: b2d9f25626f2d15c7c63e0281bccc247
+    Invalid%20invitation/singular: 4b936a8811a2295a5f58b41473c608f3
     Invite/singular: 181884cea804cbde665f160811ee7ad0
-    Invite%20another/singular: acb543563dab7edbcf46060a53ade3a3
+    Invite%20link%20copied/singular: 4046f23a78e1cd5166671c3fb8a7ea6e
+    Invite%20link%20copied%20to%20clipboard/singular: 6fc055a0ea0ed1aa58c5e0c502efe17f
+    Invite%20links/singular: 36ea61a3193245fa1b57d3392f342aaa
+    Invite%20links%20require%20a%20Team%20or%20Pro%20subscription.%20Please%20upgrade%20your%20workspace./singular: 18db646fc55f99789572c8df0539ee69
     Invite%20member/singular: ade922db1be6b26bc979565ce5de2bc7
     Inviting%20members%20requires%20a%20Team%20Plan.%20You'll%20be%20redirected%20to%20upgrade%20your%20workspace./singular: 03eeed2d715e770259f722ba48a61ab3
+    Join%20workspace/singular: f5d035df672b05abd760bd022309c719
+    Join%20workspace%20%7C%20kan.bn/singular: 97855216a0e00214b2dcf917e93164f2
     Junior/singular: ed1bd2c59a824fdcdd56fc8a0660fe9f
+    Kan/singular: dd1232a5a28bf47e939d3b8a199bc229
+    Kan%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: d13f4467d3dc0a0786c3843a9b50785d
     Kanban%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: a77bee43046b260797c8936ad23e9223
     Kanban%20reimagined/singular: 613ccfdd9f54c66cbf68cfa313498766
     Keep%20in%20mind%20that%20this%20action%20is%20irreversible./singular: 79702b2ad3be71cb8b87f1122a60c199
     Labels/singular: 6f15627a90002323eac018274b6922d6
+    Labels%20%26%20filters/singular: e1ceda0c6cc32fb04cb9423582ad8fe4
     Labels%20%26%20Filters/singular: 8f0bdd6084516f8241cb613178114390
     Language/singular: 277fd1a41cc237a437cd1d5e4a80463b
     Launch%20offer/singular: 624592ba2ecf647a3fe60d493c1ee71a
+    Launch%20offer%3A%20Get%20unlimited%20members%20with%20Pro/singular: 8c1be80f5b2fcc112922282afbe30287
+    Launch%20offer%3A%20unlimited%20seats%20for%20just%20%2429%2Fmonth%20with%20Pro/singular: 235d1cda21811c296afdc0dcc438cc24
     Learning/singular: 90e91da3f870f065f2da9aa9adf53514
     Legal/singular: 00d3f08da61a21887009819cf93fb414
     License/singular: ac2bcac75151e2fcd9eb768cea275a77
@@ -243,6 +296,7 @@ checksums:
     Long-term/singular: 51cb6f0b112250c5a091ca5f0866904b
     Low%20Priority/singular: 509b5cb7c1e8a185e0aa6d38c64c90e8
     magic%20link/singular: db9d17a5bd98bba8aa0d8068c68579f3
+    Make%20template/singular: 7a1c63b75cea690b3fda6c3f203e31ff
     marked%20a%20checklist%20item%20as%20incomplete/singular: 35d0822f65971b97774b962561b02649
     marked%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E%20as%20incomplete/singular: 4c38799ff25321ea25017bf4cd8e2e4f
     Medium%20Priority/singular: 1f527cd6d1ed602930bcaa303f503b51
@@ -255,7 +309,8 @@ checksums:
     Name/singular: 9368b5a047572b6051f334af5aa76819
     Need%20help%3F/singular: 04e7322f2d3ffb2d73ff2f64b71637c8
     New/singular: 126d036fae5fb6b629728ecb97e6195b
-    New%20board/singular: 63f4e979e29a7fc2f5c09ff91fa75966
+    New%20%7B0%7D/singular: 67b6a22a65e0956f2091d00e6966652b
+    New%20API%20key/singular: db3088aedba6e4a99b46451c5b3d36ed
     New%20card/singular: a33f6219a756127f91c2523cfe845a19
     New%20checklist/singular: 58252b71e9693ae0f4d2d0b72108a569
     New%20import/singular: e8fddfe15dd170277df919e5d37efd47
@@ -263,36 +318,46 @@ checksums:
     New%20list/singular: 146c2e642b11056a0b07ed65733e4178
     New%20password%20is%20required/singular: f88427a4cca058631199a4384cb5622e
     New%20password%20must%20be%20different%20from%20current%20password/singular: db33013fcc6c40995cf8a37deb3d5667
+    New%20template/singular: 10dca64383235d1596a010e559b2e35a
     New%20Ticket/singular: 665ff16ec736cba20e8a1b3beb3baa09
     New%20workspace/singular: 8eecf05b4ce29aa880adfed2e11476af
     Newsletter/singular: dcfb9666301924431ac8ae88e5b6f9d7
     Next%20Steps/singular: 12392fe73ae60b6e5a9d851256b8477e
-    No%20boards/singular: e4397619e69b105e4317dda4560ff4a6
+    No%20%7B0%7D/singular: a7a95e1dfdb4396da9e2be0e27f42323
     No%20boards%20found/singular: e044088d2c51b6bdf660fafa86ee1e17
     No%20credit%20card%20required/singular: 2090aa4171dc0b60735069f89b592883
     No%20lists/singular: cedf633d99c77ff4356e089f2d98c0a6
+    No%20results%20found%20for%20%22%7BdebouncedQuery%7D%22./singular: 5db6294712528cd897b15ae36f4fd834
     Offer/singular: 82b4e0c9a3f5b4bd93590847de7c32a1
     Onboarding/singular: 52b23f9c62ff199d4c09920e7641829e
     Once%20you%20delete%20your%20account%2C%20there%20is%20no%20going%20back.%20This%20action%20cannot%20be%20undone./singular: 9cf7aa6ef30890e5124e266c081bae1c
     Once%20you%20delete%20your%20workspace%2C%20there%20is%20no%20going%20back.%20This%20action%20cannot%20be%20undone./singular: c9ce6a516ed1f361653e8f8db3dd5ffd
+    Open%20source/singular: 81a747dc664de1a3389b495c8f84843b
     or/singular: 7b133c38bec0d5ee23cc6bcf9a8de50b
     Organize%20and%20find%20cards%20quickly%20with%20powerful%20filtering%20tools./singular: 1b9898c4b21e9dff413b4f76dc59db56
     Own%20your%20data/singular: cc2178dac4bdf6b07f030cfc2a7510e6
+    Owned%20by%20Atlassian/singular: ace4ed076a5318ad48c296fa09afed69
     Part-time/singular: 213d63da450f35dabb3ab0e35e29feed
     Password%20Changed/singular: 1fcebe9ddb46f722a57f195efddc695d
+    Password%20is%20required%20to%20login./singular: a09c76294ca7b27b38658b34618a7119
+    Password%20is%20required%20to%20sign%20up./singular: 3fa1abbf2e6ac8ac4d18c215191bdbcc
     Password%20must%20be%20at%20least%208%20characters/singular: 4c30501d085eaccea47af34212bb26a7
     Passwords%20do%20not%20match/singular: 37ca1f4e0afc9a0b8e9617f767103c92
+    Paused/singular: edb1f7b7219e1c9b7aa67159090d6991
     Payment%20frequency/singular: 63ded0e4ffb462ca8bd33d38e4691d86
     Pending/singular: 030a6f3395d5d4efddd3cc67d6009039
     per%20user%2Fmonth/singular: 72af182c1ba6df6732640f4d8a78d360
     Personal%20Project/singular: d7820b1bf4efecc61ed89234567aaa9c
     Planning/singular: 353f58c75248275fe091740607501610
+    Platform/singular: c68862170146325333c7f25af11a3fa2
     Please%20confirm%20your%20new%20password/singular: 43d0307b9307238cc6c199cfa66caff2
     Please%20enter%20a%20valid%20email%20address/singular: 8de4bc8832b11b380bc4cbcedc16e48b
     Please%20enter%20a%20valid%20name/singular: f2d741f1b5cae722e35cb5206786f932
     Please%20enter%20a%20valid%20password/singular: 4b32c17e19b79bcbf0bb092c06ba310f
     Please%20select%20a%20file%20to%20upload./singular: de315bf594047f8ef9307a7fa9285844
     Please%20try%20again%20later%2C%20or%20contact%20customer%20support./singular: 21ffcf0b00e7cd7b64f7454a95762e1d
+    Please%20try%20again%20later./singular: 325dea6dd0348a27a6818db2c1340c98
+    Price%20per%20user%2Fmonth/singular: ae4b93ad0f9fad454b40f82010372fc2
     Pricing/singular: ce27f1aeacccc542a174c4b2bce022b0
     Priority%20email%20support/singular: 678538c912a770b1e1416ecdb8e299b1
     Privacy%20policy/singular: 462c6a536b52873e4498785c66dd48c8
@@ -319,24 +384,32 @@ checksums:
     Research/singular: 3368e9638d1619babd6df9fad592274f
     Resolution/singular: 6d8bd9e1bd7dae5ae38c93061d32990e
     Resources/singular: ec7fb05ed963bb6781a35782b3475502
+    REST%20API/singular: 54c9f8d98f45f50399b6b93ba70af0d6
     Review/singular: 299f75db25382980b2895622d7712927
-    Revoke/singular: be57685a85b6dfeaeb6eab4e9560b520
     Roadmap/singular: c60f4a1acf30e566861bf130f13b9ae7
     Role/singular: 53743bbb6ca938f5b893552e839d067f
     Run%20on%20your%20own%20infrastructure/singular: eba804911562b8dbf9d69c3e27f1d708
     Save/singular: f7a2929f33bc420195e59ac5a8bcd454
     Save%20time%20with%20reusable%20board%20templates./singular: d0f2d7d0fd682ceaf4ca12c6353fd75a
     Screening/singular: 0327bfb25db87bdacf00d4dc297f8b26
+    Search%20boards%20and%20cards.../singular: 137017b2b3e885c4894ca8c899af5bc2
     Select%20all/singular: eedc7cdb02de467c15dc418a066a77f2
     Select%20source/singular: c7b0ec447415ff62856803a4d7838bd6
     Self%20Host/singular: 43fbce2027548b712002e489a20a621a
     Self%20host%20with%20Github/singular: 972155419bcc9f8f9bad9f5ad3538774
     self-assigned%20the%20card/singular: 24a8d97bcd747643772ebe883be69698
+    Self-hostable/singular: 3e3597145cc17f03b8b5646b80d59592
     Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
     Senior/singular: 3fff865dc00435f82896fc302ea45630
     Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
-    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
+    Settings%20%7C%20Account/singular: 050e18406849ec057edac877c297c3e1
+    Settings%20%7C%20API/singular: 85101e4b802a09ad9e3f01ff116f0894
+    Settings%20%7C%20Billing/singular: e44cba741d5414035a0b499c5766c203
+    Settings%20%7C%20Integrations/singular: d04992e28016452f6d3d7dcc0b592415
+    Settings%20%7C%20Workspace/singular: 5d0bacf7ff696da940f232df45edfd39
     Sign%20in/singular: cb8757c7450e17de1e226e82fb0fa4a2
+    Sign%20In/singular: ec7b8f314fe9bc6591006707484ede61
+    Sign%20Up/singular: 0dd2ae69be4618c1f9e615774a4509ca
     Sign%20up%20%7C%20kan.bn/singular: f3de2a110c90358e6eac07d0b2f663a6
     Sign%20up%20disabled/singular: 9581b1f75b404ac0ecb7e603e0d4189c
     Sign%20up%20is%20currently%20disabled.%20Please%20try%20again%20later./singular: c6cb7c455ec053b351a27029158ff166
@@ -346,6 +419,7 @@ checksums:
     Social%20Media/singular: 2227508afb0d38a027e323207e47d4a2
     Software%20Development/singular: 67659097ef6bcb194839858b2c4f3a3c
     Star%20on%20Github/singular: e5cb0428f1ac6485688f120d78742875
+    Subscription%20Required/singular: 05f2b4abfc36def17756a6969983cf86
     Success/singular: c43827becada6750f7a25890905f38b9
     Supercharge%20your%20workspace%20for%20just%20%2429%2Fmonth.%20Here's%20what%20you'll%20get%3A/singular: 21af8119141afcce5f12da489f34db6a
     Support/singular: 55aab5fd0f31a9cb055a2edeeedfaf63
@@ -353,6 +427,11 @@ checksums:
     System/singular: 803281c327a02a2feba182f4a2b38311
     Team%20Plan/singular: 3f0ae9c914f16ceb9a0d7db868f4aa20
     Teams/singular: b63448c05270497973ac4407047dae02
+    Template/singular: 87c2704ff2033e3c76bc97a45ae57d5c
+    Template%20created/singular: 2c7a515a5d8a9afb26de6365cdaa0c92
+    Template%20created%20successfully/singular: 2750600da57c5cd3c3c072810c8c9604
+    Template%20name%20cannot%20exceed%20100%20characters/singular: 14527c9246e558a085ceee2e8d4e6560
+    Template%20name%20is%20required/singular: 34d674d59c414c2051ef5bc0a62e3c00
     Templates/singular: 8ed62f56c81fa96c0f3182acb331bf63
     Terms%20of%20service/singular: 0b8a8b23aff021a6cde79613fdb39c28
     Thank%20you%20for%20your%20feedback!/singular: 07edd8c50685a52c0969d711df26d768
@@ -363,14 +442,19 @@ checksums:
     Theme/singular: 21fe00b7a518089576fb83c08631107a
     They%20won't%20be%20able%20to%20access%20this%20workspace./singular: 93b740350fe3430319fbca85349e41d9
     This%20action%20can't%20be%20undone./singular: cb222ff89715d8c971e8c25d121e1dbd
+    This%20API%20key%20will%20only%20be%20shown%20once.%20Please%20save%20it%20in%20a%20secure%20location./singular: 7df18d2978d317375f780822f8321c4d
     This%20board%20is%20private%20or%20does%20not%20exist/singular: a217ff3f04463b4df8c86adb6f83c6bc
     This%20board%20URL%20has%20already%20been%20taken/singular: 1d8b40332a031b5b77a3658e48dd51ca
+    This%20invitation%20link%20is%20invalid%20or%20has%20expired./singular: 11cc7ef8f1512e7e058e1fbbe5644001
     This%20will%20result%20in%20the%20permanent%20deletion%20of%20all%20data%20associated%20with%20this%20workspace./singular: a31141558af793635c1ddd2fa0a33499
     This%20will%20result%20in%20the%20permanent%20deletion%20of%20all%20data%20associated%20with%20your%20account./singular: b49224632bd6c3b7f5e462912aeb1081
+    This%20workspace%20URL%20has%20already%20been%20taken/singular: b455329e2a71da677acab91d3a00bad6
+    This%20workspace%20URL%20is%20reserved/singular: 7e47c892b93d4334c1606010c06e875e
     This%20workspace%20username%20has%20already%20been%20taken/singular: b7eadb89c615874f416d9658d0428c4c
     To%20Do/singular: d60813ea824f373462471e092d136eed
     Toggle%20menu/singular: 29dea3e0b6238874f8c7a27619df8e36
     Track%20all%20card%20changes%20with%20detailed%20activity%20history./singular: 0d3bac559c71ec4b8734f9f212320de5
+    Trello/singular: b5131f6488b5a439d58db3e22d6de45b
     Trello%20disconnected/singular: 54b24a3e6c9a7eedd8c8d1060ab1175d
     Trello%20imports/singular: 6827eca403faa8f89891d17827e72af9
     Triaging/singular: 1d40799fcae53a8a27688fdae2a48dee
@@ -379,6 +463,7 @@ checksums:
     Unable%20to%20create%20card/singular: 90112ea12ec6fa42097a6e022ae048a4
     Unable%20to%20create%20checklist/singular: 94eed122e42e0951cd08b9ec62f5eeb6
     Unable%20to%20create%20list/singular: 7fbbf8314f8d08a4123c7daef09fed05
+    Unable%20to%20create%20template/singular: 7495f1434c9188849bffd015811d5337
     Unable%20to%20create%20workspace/singular: c1c949477e121d73ed6683eddf9cd874
     Unable%20to%20delete%20card/singular: 50ff06aa1265fe464f776aba33f1bef9
     Unable%20to%20delete%20checklist/singular: d7067e2c009f4919f0cca77df3c228ee
@@ -404,6 +489,7 @@ checksums:
     Unlimited%20comments/singular: 31dbcf487c49a9997142e96bb3ab0040
     Unlimited%20lists/singular: 5c418701b27b9acbc5dd199719007362
     Unlimited%20members/singular: f2949ca2dc18b0063af92e60779abb65
+    Unlimited%20workspaces/singular: b504d01997bf908af1d486d9942fed36
     Update/singular: 079fc039262fd31b10532929685c2d1b
     Update%20label/singular: 97880b503dfe956941c5f23025a1c102
     updated%20a%20checklist%20item/singular: 198e1d1d503f4b69b752dd84d0cc0e9d
@@ -412,6 +498,7 @@ checksums:
     updated%20the%20title%20to%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: aca196d729401d8adc5c8ca9d558840e
     Upgrade/singular: 63c3b52882e0d779859307d672c178c2
     Upgrade%20to%20Pro/singular: 972773025e763ddf53273df6d37a729a
+    Upgrade%20to%20Pro%20(%2429%2Fmonth)/singular: 9a91ea70f5eb55aac96640bf0fd7feff
     Upgrade%20to%20Team%20Plan/singular: 40e2ef151266937f8bbe63b3d361f645
     Urgent/singular: e79afcd4398e52e10e7e8243a7eecabe
     URL%20can%20only%20contain%20letters%2C%20numbers%2C%20and%20hyphens/singular: 875d37d2d920f98ef60a314eda8a5d9a
@@ -434,8 +521,10 @@ checksums:
     What%20license%20are%20you%20using%3F/singular: 59d00e1bf28edc21b77fec94875f57ca
     What's%20the%20difference%20between%20Kan%20and%20Trello%3F/singular: 7a02f507dd6abbfab1fdae0b172d31b7
     When%20Trello%20launched%20in%202011%2C%20it%20blew%20everyone%20away%20with%20its%20carefully%20designed%20simplicity%2C%20but%20over%20time%20(and%20atlassification)%20it%20lost%20its%20magic%20and%20grew%20into%20something%20closer%20to%20%22Jira%20Lite%22.%20This%20project%20is%20our%20attempt%20to%20recapture%20the%20original%20magic%20of%20Trello's%20simplicity%2C%20in%20open%20source./singular: 60a55e9bd16c3d1beff1a6c7633c5911
+    White%20label/singular: 2570386f73a010b07219e7658aaf9d9b
     Why%20make%20an%20open%20source%20Trello%3F/singular: 090833338ba8c64ef7a75e0f2615b34b
     Workspace/singular: b63ef0e99ee6f7fef6cbe4971ca6cf0f
+    Workspace%20created%20successfully.%20You%20can%20upgrade%20later%20in%20settings./singular: 8bbaba9f82ff076a08185ada1ee7eb94
     Workspace%20deleted/singular: bc5c267ce3f04de94ff1379cf2ca48a3
     Workspace%20description/singular: 7159d620b7ef5c5afef734989a5be08b
     Workspace%20description%20cannot%20exceed%20280%20characters/singular: d0e83b9a0304d7c36cf8c85d98783ce2
@@ -444,10 +533,12 @@ checksums:
     Workspace%20members/singular: 1857292f9567c556c781a23bd7e10544
     Workspace%20name/singular: 855614bbf862fd6a9f6a3e76943f92d4
     Workspace%20name%20cannot%20exceed%2024%20characters/singular: c8b8f79fb83abf8329cc34c1f51fcfc9
+    Workspace%20name%20is%20required/singular: b8c5162dd08c4d941bc57f9d0cbee451
     Workspace%20name%20must%20be%20at%20least%203%20characters%20long/singular: e448ea97418d44b18b4c21c22b8ba779
     Workspace%20name%20updated/singular: 3206ea410ee1ea4182b27ac0d89f92a1
     Workspace%20slug%20updated/singular: 527b92711d38cb35b40741df43aef047
     Workspace%20URL/singular: f4397a838da0f3a44cbd3ebe408ed6c3
+    workspace-url/singular: 2d034732ec536f3a2667f956fa50d394
     Writing/singular: 4f5f3ee3320c252921f80c42653c5d49
     Yearly/singular: 87f43e016c19cb25860f456549a2f431
     Yes%2C%20we%20offer%20an%20forever%20free%20plan%20for%20individual%20use.%20No%20restrictions%2C%20no%20paywalls%2C%20no%20limits./singular: 963cee303d0ff13c1719f4575e774fe3
@@ -458,6 +549,8 @@ checksums:
     You%20have%20been%20logged%20in%20successfully./singular: ef8fad1dce13ae4112f17c5258655fea
     You%20have%20been%20signed%20up%20successfully./singular: f614a6e3b45f5ffb9a3b0fb420fef84b
     You%20have%20unlimited%20seats%20with%20your%20Pro%20Plan.%20There%20is%20no%20additional%20charge%20for%20new%20members!/singular: e3dc59a5ba7211cd3d8516b3a79d85ca
+    You've%20been%20invited%20to%20join%20a%20workspace%20on%20kan.bn./singular: 257b840726f972f384243a72767f880f
+    You've%20been%20invited%20to%20join%20a%20workspace./singular: 24fc6cdc8740f37a83df85f582f03293
     Your%20account%20has%20been%20deleted./singular: 8c8d944e07388c5877effdb2c2803dcf
     Your%20boards%20have%20been%20imported./singular: 403972e7a25afc2415762c1c2b1ec868
     Your%20display%20name%20has%20been%20updated./singular: 15e5fff36c554c16ec5214427fae1bf4

apps/web/lingui.config.ts

@@ -1,7 +1,7 @@
 import type { LinguiConfig } from "@lingui/conf";
 
 const config: LinguiConfig = {
-  locales: ["en", "fr", "de", "es", "it", "nl"],
+  locales: ["en", "fr", "de", "es", "it", "nl", "ru", "pl"],
   sourceLocale: "en",
   catalogs: [
     {

apps/web/next.config.js

@@ -52,6 +52,15 @@ const config = {
     // instrumentationHook: true,
     swcPlugins: [["@lingui/swc-plugin", {}]],
   },
+
+  async rewrites() {
+    return [
+      {
+        source: "/settings",
+        destination: "/settings/account",
+      },
+    ];
+  },
 };
 
 // Only allow external images when OIDC is configured (for OIDC provider avatars)

apps/web/package.json

@@ -59,6 +59,7 @@
     "react-dom": "catalog:react18",
     "react-hook-form": "^7.51.1",
     "react-icons": "^5.5.0",
+    "react-image-crop": "^11.0.10",
     "react-lottie-player": "^1.5.5",
     "react-markdown": "^10.1.0",
     "superjson": "2.2.1",

apps/web/src/components/AuthForm.tsx

@@ -1,10 +1,11 @@
 import type { SocialProvider } from "better-auth/social-providers";
+import { useSearchParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useQuery } from "@tanstack/react-query";
 import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import {
   FaApple,
@@ -152,18 +153,29 @@ const availableSocialProviders = {
 };
 
 export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
+  const [isCloudEnv, setIsCloudEnv] = useState(false);
   const [isLoginWithProviderPending, setIsLoginWithProviderPending] =
     useState<null | AuthProvider>(null);
   const [isCredentialsEnabled, setIsCredentialsEnabled] = useState(false);
+  const [isEmailSendingEnabled, setIsEmailSendingEnabled] = useState(false);
   const [isLoginWithEmailPending, setIsLoginWithEmailPending] = useState(false);
   const [loginError, setLoginError] = useState<string | null>(null);
   const { showPopup } = usePopup();
   const oidcProviderName = "OIDC";
+  const passwordRef = useRef<HTMLInputElement | null>(null);
+
+  const redirect = useSearchParams().get("next");
+  const callbackURL = redirect ?? "/boards";
 
   // Safely get environment variables on client side to avoid hydration mismatch
   useEffect(() => {
     const credentialsAllowed =
       env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+    const emailSendingEnabled =
+      env("NEXT_PUBLIC_DISABLE_EMAIL")?.toLowerCase() !== "true";
+    const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
+    setIsCloudEnv(isCloudEnv);
+    setIsEmailSendingEnabled(emailSendingEnabled);
     setIsCredentialsEnabled(credentialsAllowed);
   }, []);
 
@@ -183,7 +195,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
 
   const handleLoginWithEmail = async (
     email: string,
-    password?: string,
+    password?: string | null,
     name?: string,
   ) => {
     setIsLoginWithEmailPending(true);
@@ -195,7 +207,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
             name,
             email,
             password,
-            callbackURL: "/boards",
+            callbackURL,
           },
           {
             onSuccess: () =>
@@ -212,7 +224,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
           {
             email,
             password,
-            callbackURL: "/boards",
+            callbackURL,
           },
           {
             onSuccess: () =>
@@ -226,16 +238,26 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
         );
       }
     } else {
-      await authClient.signIn.magicLink(
-        {
-          email,
-          callbackURL: "/boards",
-        },
-        {
-          onSuccess: () => setIsMagicLinkSent(true, email),
-          onError: ({ error }) => setLoginError(error.message),
-        },
-      );
+      // Only allow magic link if email sending is enabled and not in sign up mode
+      if (isCloudEnv || (isEmailSendingEnabled && !isSignUp)) {
+        await authClient.signIn.magicLink(
+          {
+            email,
+            callbackURL,
+          },
+          {
+            onSuccess: () => setIsMagicLinkSent(true, email),
+            onError: ({ error }) => setLoginError(error.message),
+          },
+        );
+      } else {
+        // Provide a clear error feedback when password omitted but magic link unavailable
+        setLoginError(
+          isSignUp
+            ? t`Password is required to sign up.`
+            : t`Password is required to login.`,
+        );
+      }
     }
 
     setIsLoginWithEmailPending(false);
@@ -250,14 +272,14 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
       // Use oauth2 signin for OIDC provider
       const result = await authClient.signIn.oauth2({
         providerId: "oidc",
-        callbackURL: "/boards",
+        callbackURL,
       });
       error = result.error;
     } else {
       // Use social signin for traditional social providers
       const result = await authClient.signIn.social({
         provider,
-        callbackURL: "/boards",
+        callbackURL,
       });
       error = result.error;
     }
@@ -272,11 +294,43 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   };
 
   const onSubmit = async (values: FormValues) => {
-    await handleLoginWithEmail(values.email, values.password, values.name);
+    // Treat empty password string as undefined to trigger magic link path
+    const sanitizedPassword = values.password?.trim()
+      ? values.password
+      : undefined;
+    await handleLoginWithEmail(values.email, sanitizedPassword, values.name);
   };
 
   const password = watch("password");
 
+  // Determine if we should operate in magic link mode for current form state (login only)
+  const isMagicLinkMode = useMemo(() => {
+    // Magic link only viable when email sending enabled AND not sign up.
+    if (!isEmailSendingEnabled || isSignUp) return false;
+    // If credentials disabled we always default to magic link.
+    if (!isCredentialsEnabled) return true;
+    // Credentials enabled: user chooses magic link by leaving password blank.
+    return !password;
+  }, [isEmailSendingEnabled, isSignUp, isCredentialsEnabled, password]);
+
+  // Auto-focus password field when an error indicates it's required
+  useEffect(() => {
+    if (!isCredentialsEnabled) return;
+    // Focus when: sign up and missing password; login error requiring password; validation error on password.
+    const pwdEmpty = (password ?? "").length === 0;
+    let needsPassword = false;
+    if (isSignUp && pwdEmpty) {
+      needsPassword = true;
+    } else if (loginError?.toLowerCase().includes("password")) {
+      needsPassword = true;
+    } else if (errors.password) {
+      needsPassword = true;
+    }
+    if (needsPassword && passwordRef.current) {
+      passwordRef.current.focus();
+    }
+  }, [isSignUp, password, loginError, errors.password, isCredentialsEnabled]);
+
   return (
     <div className="space-y-6">
       {socialProviders?.length !== 0 && (
@@ -347,7 +401,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
               />
               {errors.password && (
                 <p className="mt-2 text-xs text-red-400">
-                  {t`Please enter a valid password`}
+                  {errors.password.message ?? t`Please enter a valid password`}
                 </p>
               )}
             </div>
@@ -364,9 +418,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
             variant="secondary"
           >
             {isSignUp ? t`Sign up with ` : t`Continue with `}
-            {!isCredentialsEnabled || (password && password.length !== 0)
-              ? t`email`
-              : t`magic link`}
+            {isMagicLinkMode ? t`magic link` : t`email`}
           </Button>
         </div>
       </form>

apps/web/src/components/CommandPallette.tsx

@@ -0,0 +1,193 @@
+import { useRouter } from "next/router";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+} from "@headlessui/react";
+import { t } from "@lingui/macro";
+import { useState } from "react";
+import { HiDocumentText, HiFolder, HiMagnifyingGlass } from "react-icons/hi2";
+
+import { useDebounce } from "~/hooks/useDebounce";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+
+type SearchResult =
+  | {
+      publicId: string;
+      title: string;
+      description: string | null;
+      slug: string;
+      updatedAt: Date | null;
+      createdAt: Date;
+      type: "board";
+    }
+  | {
+      publicId: string;
+      title: string;
+      description: string | null;
+      boardPublicId: string;
+      boardName: string;
+      listName: string;
+      updatedAt: Date | null;
+      createdAt: Date;
+      type: "card";
+    };
+
+export default function CommandPallette({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const { workspace } = useWorkspace();
+  const router = useRouter();
+
+  // Debounce to avoid too many reqs
+  const [debouncedQuery] = useDebounce(query, 300);
+
+  const {
+    data: searchResults,
+    isLoading,
+    isFetched,
+    isPlaceholderData,
+  } = api.workspace.search.useQuery(
+    {
+      workspacePublicId: workspace.publicId,
+      query: debouncedQuery,
+    },
+    {
+      enabled: Boolean(workspace.publicId && debouncedQuery.trim().length > 0),
+      placeholderData: (previousData) => previousData,
+    },
+  );
+
+  // Clear results when query is empty, otherwise show search results
+  const results =
+    debouncedQuery.trim().length === 0
+      ? []
+      : ((searchResults ?? []) as SearchResult[]);
+
+  const hasSearched = Boolean(debouncedQuery.trim().length > 0);
+
+  return (
+    <Dialog
+      className="relative z-50"
+      open={isOpen}
+      onClose={() => {
+        onClose();
+        setQuery("");
+      }}
+    >
+      <DialogBackdrop
+        transition
+        className="data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in fixed inset-0 bg-light-50 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40"
+      />
+
+      <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
+          <DialogPanel
+            transition
+            className="data-closed:opacity-0 data-closed:translate-y-4 data-closed:sm:translate-y-0 data-closed:sm:scale-95 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in relative mt-[25vh] w-full max-w-[550px] transform divide-y divide-gray-100 overflow-hidden rounded-lg border border-light-600 bg-white/90 shadow-3xl-light backdrop-blur-[6px] transition-all dark:divide-white/10 dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark"
+          >
+            <Combobox>
+              <div className="grid grid-cols-1">
+                <ComboboxInput
+                  autoFocus
+                  className="col-start-1 row-start-1 h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-light-900 placeholder:text-light-700 focus:outline-none focus:ring-0 dark:text-dark-900 dark:placeholder:text-dark-700"
+                  placeholder={t`Search boards and cards...`}
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" && results.length > 0) {
+                      event.preventDefault();
+
+                      // Find the active option or fallback to first option
+                      const targetOption =
+                        document.querySelector(
+                          '[data-headlessui-state*="active"][role="option"]',
+                        ) ?? document.querySelector('[role="option"]');
+
+                      if (targetOption) {
+                        (targetOption as HTMLElement).click();
+                      }
+                    }
+                  }}
+                />
+                <HiMagnifyingGlass
+                  className="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-light-700 dark:text-dark-700"
+                  aria-hidden="true"
+                />
+              </div>
+
+              {results.length > 0 && (
+                <ComboboxOptions
+                  static
+                  className={`max-h-72 scroll-py-2 overflow-y-auto py-2 ${
+                    isPlaceholderData ? "opacity-75" : ""
+                  }`}
+                >
+                  {results.map((result) => {
+                    const url =
+                      result.type === "board"
+                        ? `/boards/${result.publicId}`
+                        : `/cards/${result.publicId}`;
+
+                    return (
+                      <ComboboxOption
+                        key={`${result.type}-${result.publicId}`}
+                        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("");
+                        }}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className="mt-0.5 flex-shrink-0">
+                            {result.type === "board" ? (
+                              <HiFolder className="h-4 w-4 text-light-600 dark:text-dark-600" />
+                            ) : (
+                              <HiDocumentText className="h-4 w-4 text-light-600 dark:text-dark-600" />
+                            )}
+                          </div>
+                          <div className="min-w-0 flex-1 text-left">
+                            <div className="truncate text-sm font-bold text-light-900 dark:text-dark-900">
+                              {result.title}
+                            </div>
+                            {result.type === "card" && (
+                              <div className="truncate text-xs text-light-700 dark:text-dark-700">
+                                {`${t`in`} ${result.boardName} → ${result.listName}`}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </ComboboxOption>
+                    );
+                  })}
+                </ComboboxOptions>
+              )}
+
+              {hasSearched &&
+                !isLoading &&
+                searchResults !== undefined &&
+                results.length === 0 && (
+                  <div className="p-4 text-sm text-light-950 dark:text-dark-950">
+                    {t`No results found for "${debouncedQuery}".`}
+                  </div>
+                )}
+            </Combobox>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

apps/web/src/components/Dropdown.tsx

@@ -15,7 +15,7 @@ export default function Dropdown({
       <div>
         <Menu.Button
           disabled={disabled}
-          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200"
+          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 focus:outline-none dark:hover:bg-dark-200"
         >
           {children}
         </Menu.Button>
@@ -30,7 +30,7 @@ export default function Dropdown({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
+        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex flex-col">
             {items.map((item) => (
               <Menu.Item key={item.label}>

apps/web/src/components/LanguageSelector.tsx

@@ -13,7 +13,7 @@ export function LanguageSelector() {
         id="language-select"
         value={locale}
         onChange={(e) => setLocale(e.target.value as any)}
-        className="mt-8 block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 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 sm:text-sm"
+        className="mt-8 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"
       >
         {availableLocales.map((loc) => (
           <option key={loc} value={loc}>

apps/web/src/components/NewWorkspaceForm.tsx

@@ -1,30 +1,106 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
-import { useEffect } from "react";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { HiXMark } from "react-icons/hi2";
+import {
+  HiBolt,
+  HiCheck,
+  HiCheckBadge,
+  HiInformationCircle,
+  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";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
+import LoadingSpinner from "./LoadingSpinner";
 
-interface FormValues {
-  name: string;
-}
+const schema = z.object({
+  name: z.string().min(1, { message: t`Workspace name is required` }),
+  slug: z
+    .string()
+    .min(3, {
+      message: t`URL must be at least 3 characters long`,
+    })
+    .max(24, { message: t`URL cannot exceed 24 characters` })
+    .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
+      message: t`URL can only contain letters, numbers, and hyphens`,
+    })
+    .optional()
+    .or(z.literal("")),
+});
+
+type FormValues = z.infer<typeof schema>;
 
 export function NewWorkspaceForm() {
   const { closeModal } = useModal();
   const { showPopup } = usePopup();
-  const { switchWorkspace } = useWorkspace();
-  const { register, handleSubmit } = useForm<FormValues>();
+  const { switchWorkspace, availableWorkspaces } = useWorkspace();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    trigger,
+    clearErrors,
+    setValue,
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      slug: "",
+    },
+    mode: "onSubmit",
+  });
   const utils = api.useUtils();
 
+  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) {
+      // Clear errors while typing
+      clearErrors("slug");
+    } else if (debouncedSlug) {
+      // Validate after debounce
+      void trigger("slug");
+    }
+  }, [isTyping, debouncedSlug, trigger, clearErrors]);
+
+  const checkWorkspaceSlugAvailability =
+    api.workspace.checkSlugAvailability.useQuery(
+      {
+        workspaceSlug: debouncedSlug ?? "",
+      },
+      {
+        enabled: !!debouncedSlug && debouncedSlug.length >= 3 && !errors.slug,
+      },
+    );
+
+  const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
+
   const createWorkspace = api.workspace.create.useMutation({
-    onSuccess: (values) => {
+    onSuccess: async (values, variables) => {
       if (values.publicId && values.name) {
-        utils.workspace.all.invalidate();
+        void utils.workspace.all.invalidate();
         switchWorkspace({
           publicId: values.publicId,
           name: values.name,
@@ -33,6 +109,43 @@ export function NewWorkspaceForm() {
           plan: values.plan,
           role: "admin",
         });
+
+        // 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();
       }
     },
@@ -51,12 +164,74 @@ 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) {
+      return;
+    }
+
     createWorkspace.mutate({
       name: values.name,
+      slug: !isCloudEnv && values.slug ? values.slug : undefined,
     });
   };
 
+  const isSlugAvailable =
+    isValidSlug &&
+    isWorkspaceSlugAvailable?.isAvailable &&
+    !isWorkspaceSlugAvailable?.isReserved;
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
@@ -66,7 +241,10 @@ export function NewWorkspaceForm() {
           </h2>
           <button
             type="button"
-            className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
+            className={twMerge(
+              "rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300",
+              !hasAvailableWorkspaces && "invisible",
+            )}
             onClick={(e) => {
               e.preventDefault();
               closeModal();
@@ -80,6 +258,7 @@ export function NewWorkspaceForm() {
           id="workspace-name"
           placeholder={t`Workspace name`}
           {...register("name")}
+          errorMessage={errors.name?.message}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -87,10 +266,121 @@ export function NewWorkspaceForm() {
             }
           }}
         />
+
+        <div className="mt-4">
+          <Input
+            id="workspace-slug"
+            placeholder={t`workspace-url`}
+            {...register("slug")}
+            className={`${
+              isSlugAvailable
+                ? "focus:ring-green-500 dark:focus:ring-green-500"
+                : ""
+            }`}
+            errorMessage={
+              errors.slug?.message ??
+              (isWorkspaceSlugAvailable?.isAvailable === false &&
+              isWorkspaceSlugAvailable?.isReserved === false
+                ? t`This workspace URL has already been taken`
+                : isWorkspaceSlugAvailable?.isReserved
+                  ? t`This workspace URL is reserved`
+                  : undefined)
+            }
+            prefix={
+              env("NEXT_PUBLIC_KAN_ENV") === "cloud"
+                ? "kan.bn/"
+                : `${env("NEXT_PUBLIC_BASE_URL")}/`
+            }
+            iconRight={
+              slug && slug.length >= 3 && !errors.slug ? (
+                isWorkspaceSlugAvailable?.isAvailable ? (
+                  <HiCheck className="h-4 w-4 text-green-500" />
+                ) : checkWorkspaceSlugAvailability.isPending || isTyping ? (
+                  <LoadingSpinner />
+                ) : null
+              ) : null
+            }
+            onKeyDown={async (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
+          />
+
+          {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="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <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>
-          <Button type="submit" isLoading={createWorkspace.isPending}>
+          <Button
+            type="submit"
+            isLoading={createWorkspace.isPending}
+            disabled={
+              createWorkspace.isPending ||
+              (!!slug &&
+                (checkWorkspaceSlugAvailability.isPending ||
+                  isWorkspaceSlugAvailable?.isAvailable === false ||
+                  isTyping))
+            }
+          >
             {t`Create workspace`}
           </Button>
         </div>

apps/web/src/components/SettingsLayout.tsx

@@ -0,0 +1,148 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
+import {
+  HiChevronDown,
+  HiOutlineBanknotes,
+  HiOutlineCodeBracketSquare,
+  HiOutlineRectangleGroup,
+  HiOutlineUser,
+} from "react-icons/hi2";
+
+interface SettingsLayoutProps {
+  children: React.ReactNode;
+  currentTab: string;
+}
+
+export function SettingsLayout({ children, currentTab }: SettingsLayoutProps) {
+  const router = useRouter();
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const settingsTabs = [
+    {
+      key: "account",
+      icon: <HiOutlineUser />,
+      label: t`Account`,
+      condition: true,
+    },
+    {
+      key: "workspace",
+      icon: <HiOutlineRectangleGroup />,
+      label: t`Workspace`,
+      condition: true,
+    },
+    {
+      key: "billing",
+      label: t`Billing`,
+      icon: <HiOutlineBanknotes />,
+      condition: env("NEXT_PUBLIC_KAN_ENV") === "cloud",
+    },
+    {
+      key: "api",
+      icon: <HiOutlineCodeBracketSquare />,
+      label: t`API`,
+      condition: true,
+    },
+    {
+      key: "integrations",
+      icon: <HiOutlineCodeBracketSquare />,
+      label: t`Integrations`,
+      condition: true,
+    },
+  ];
+
+  const availableTabs = settingsTabs.filter((tab) => tab.condition);
+
+  // Update selected tab when currentTab prop changes
+  useEffect(() => {
+    const tabIndex = availableTabs.findIndex((tab) => tab.key === currentTab);
+    if (tabIndex !== -1) {
+      setSelectedTabIndex(tabIndex);
+    }
+  }, [currentTab, availableTabs]);
+
+  const isTabActive = (tabKey: string) => {
+    return currentTab === tabKey;
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]">
+        <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
+          <div className="mb-8 flex w-full justify-between">
+            <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+              {t`Settings`}
+            </h1>
+          </div>
+
+          <div className="focus:outline-none">
+            <div className="sm:hidden">
+              {/* Mobile dropdown */}
+              <Listbox
+                value={selectedTabIndex}
+                onChange={(index) => {
+                  const tabKey = availableTabs[index]?.key;
+                  if (tabKey) {
+                    void router.push(`/settings/${tabKey}`);
+                  }
+                }}
+              >
+                <div className="relative mb-4">
+                  <ListboxButton className="w-full appearance-none rounded-lg border-0 bg-light-50 py-2 pl-3 pr-10 text-left text-sm text-light-1000 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">
+                    {availableTabs[selectedTabIndex]?.label || "Select a tab"}
+                    <HiChevronDown
+                      aria-hidden="true"
+                      className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-light-900 dark:text-dark-900"
+                    />
+                  </ListboxButton>
+                  <ListboxOptions className="absolute z-10 mt-1 w-full rounded-lg bg-light-50 py-1 text-sm shadow-lg ring-1 ring-inset ring-light-300 dark:bg-dark-50 dark:ring-dark-300">
+                    {availableTabs.map((tab) => (
+                      <ListboxOption
+                        key={tab.key}
+                        value={availableTabs.indexOf(tab)}
+                        className="relative cursor-pointer select-none py-2 pl-3 pr-9 text-light-1000 dark:text-dark-1000"
+                      >
+                        {tab.label}
+                      </ListboxOption>
+                    ))}
+                  </ListboxOptions>
+                </div>
+              </Listbox>
+            </div>
+            <div className="hidden sm:block">
+              <div className="border-b border-gray-200 dark:border-white/10">
+                <nav
+                  aria-label="Tabs"
+                  className="-mb-px flex space-x-8 focus:outline-none"
+                >
+                  {availableTabs.map((tab) => (
+                    <Link
+                      key={tab.key}
+                      href={`/settings/${tab.key}`}
+                      className={`whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium transition-colors focus:outline-none ${
+                        isTabActive(tab.key)
+                          ? "border-light-1000 text-light-1000 dark:border-dark-1000 dark:text-dark-1000"
+                          : "border-transparent text-light-900 hover:border-light-950 hover:text-light-950 dark:text-dark-900 dark:hover:border-white/20 dark:hover:text-dark-950"
+                      }`}
+                    >
+                      {tab.label}
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+            </div>
+            <div className="focus:outline-none">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/SideNavigation.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Button } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import {
   TbLayoutSidebarLeftCollapse,
@@ -15,10 +16,11 @@ import membersIconDark from "~/assets/members-dark.json";
 import membersIconLight from "~/assets/members-light.json";
 import settingsIconDark from "~/assets/settings-dark.json";
 import settingsIconLight from "~/assets/settings-light.json";
+import templatesIconDark from "~/assets/templates-dark.json";
+import templatesIconLight from "~/assets/templates-light.json";
 import ReactiveButton from "~/components/ReactiveButton";
 import UserMenu from "~/components/UserMenu";
 import WorkspaceMenu from "~/components/WorkspaceMenu";
-import { useTheme } from "next-themes";
 
 interface SideNavigationProps {
   user: UserType;
@@ -69,6 +71,11 @@ export default function SideNavigation({
       href: "/boards",
       icon: isDarkMode ? boardsIconDark : boardsIconLight,
     },
+    {
+      name: t`Templates`,
+      href: "/templates",
+      icon: isDarkMode ? templatesIconDark : templatesIconLight,
+    },
     {
       name: t`Members`,
       href: "/members",

apps/web/src/components/Toggle.tsx

@@ -5,10 +5,12 @@ const Toggle = ({
   isChecked,
   onChange,
   label,
+  disabled,
 }: {
   isChecked: boolean;
   onChange: () => void;
   label: string;
+  disabled?: boolean;
 }) => (
   <div className="mr-4 flex items-center justify-end">
     <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
@@ -17,6 +19,7 @@ const Toggle = ({
     <Switch
       checked={isChecked}
       onChange={onChange}
+      disabled={disabled}
       className={twMerge(
         "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-light-800 transition-colors duration-200 ease-in-out focus:outline-none dark:bg-dark-800",
         isChecked && "bg-indigo-600 dark:bg-indigo-600",

apps/web/src/components/WorkspaceMenu.tsx

@@ -1,11 +1,12 @@
-import { Menu, Transition } from "@headlessui/react";
+import { Button, Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
-import { Fragment } from "react";
-import { HiCheck } from "react-icons/hi2";
+import { Fragment, useEffect, useState } from "react";
+import { HiCheck, HiMagnifyingGlass } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
+import CommandPallette from "./CommandPallette";
 
 export default function WorkspaceMenu({
   isCollapsed = false,
@@ -15,110 +16,143 @@ export default function WorkspaceMenu({
   const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
     useWorkspace();
   const { openModal } = useModal();
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        setIsOpen(true);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
   return (
-    <Menu as="div" className="relative inline-block w-full pb-3 text-left">
-      <div>
-        {isLoading ? (
-          <div className={twMerge("mb-1", isCollapsed && "md:flex md:p-1.5")}>
-            <div className="h-6 w-6 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
-            <div
-              className={twMerge(
-                "ml-2 h-6 w-[150px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
-                isCollapsed && "hidden md:block",
-              )}
-            />
-          </div>
-        ) : (
-          <Menu.Button
-            className={twMerge(
-              "mb-1 flex h-[34px] w-full items-center rounded-md p-1.5 hover:bg-light-200 dark:hover:bg-dark-200",
-              isCollapsed && "md:mb-1.5 md:h-9 md:p-1",
-            )}
-            title={isCollapsed ? workspace.name : undefined}
-          >
-            <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-indigo-700">
-              <span className="text-xs font-bold leading-none text-white">
-                {workspace.name.charAt(0).toUpperCase()}
-              </span>
-            </span>
-            <span
-              className={twMerge(
-                "ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000",
-                isCollapsed && "md:hidden",
-              )}
-            >
-              {workspace.name}
-            </span>
-            {workspace.plan === "pro" && (
-              <span
+    <>
+      <CommandPallette isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      <Menu as="div" className="relative inline-block w-full pb-3 text-left">
+        <div>
+          {isLoading ? (
+            <div className={twMerge("mb-1 flex", isCollapsed && "md:p-1.5")}>
+              <div className="h-6 w-6 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+              <div
                 className={twMerge(
-                  "ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700",
+                  "ml-2 h-6 w-[150px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
                   isCollapsed && "md:hidden",
                 )}
+              />
+            </div>
+          ) : (
+            <div
+              className={twMerge(
+                "flex items-center gap-1",
+                isCollapsed && "md:flex-col-reverse md:items-stretch",
+              )}
+            >
+              <Menu.Button
+                className={twMerge(
+                  "mb-1 flex h-[34px] flex-1 items-center rounded-md p-1.5 hover:bg-light-200 dark:hover:bg-dark-200",
+                  isCollapsed &&
+                    "md:mb-1.5 md:h-9 md:w-9 md:flex-none md:justify-center md:p-0",
+                )}
+                title={isCollapsed ? workspace.name : undefined}
               >
-                Pro
-              </span>
-            )}
-          </Menu.Button>
-        )}
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items
-          className={twMerge(
-            "absolute left-0 z-10 origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300",
-            isCollapsed ? "w-48" : "w-full",
-          )}
-        >
-          <div className="p-1">
-            {availableWorkspaces.map((availableWorkspace) => (
-              <div key={availableWorkspace.publicId} className="flex">
-                <Menu.Item>
-                  <button
-                    onClick={() => switchWorkspace(availableWorkspace)}
-                    className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
-                  >
-                    <div>
-                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
-                        <span className="text-xs font-medium leading-none text-white">
-                          {availableWorkspace.name.charAt(0).toUpperCase()}
-                        </span>
-                      </span>
-                      <span className="ml-2 text-xs font-medium">
-                        {availableWorkspace.name}
-                      </span>
-                    </div>
-                    {workspace.name === availableWorkspace.name && (
-                      <span>
-                        <HiCheck className="h-4 w-4" aria-hidden="true" />
-                      </span>
+                <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-indigo-700">
+                  <span className="text-xs font-bold leading-none text-white">
+                    {workspace.name.charAt(0).toUpperCase()}
+                  </span>
+                </span>
+                <span
+                  className={twMerge(
+                    "ml-2 truncate text-sm font-bold text-neutral-900 dark:text-dark-1000",
+                    isCollapsed && "md:hidden",
+                  )}
+                >
+                  {workspace.name}
+                </span>
+                {workspace.plan === "pro" && (
+                  <span
+                    className={twMerge(
+                      "ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700",
+                      isCollapsed && "md:hidden",
                     )}
-                  </button>
-                </Menu.Item>
-              </div>
-            ))}
-          </div>
-          <div className="border-t-[1px] border-light-600 p-1 dark:border-dark-500">
-            <Menu.Item>
-              <button
-                onClick={() => 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"
+                  >
+                    Pro
+                  </span>
+                )}
+              </Menu.Button>
+              <Button
+                className={twMerge(
+                  "mb-1 h-[34px] w-[34px] flex-shrink-0 rounded-lg bg-light-200 p-2 hover:bg-light-300 focus:outline-none dark:bg-dark-200 dark:hover:bg-dark-300",
+                  isCollapsed && "md:mb-2 md:h-9 md:w-9 md:self-center",
+                )}
+                onClick={() => setIsOpen(true)}
               >
-                {t`Create workspace`}
-              </button>
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+                <HiMagnifyingGlass className="h-4 w-4" aria-hidden="true" />
+              </Button>
+            </div>
+          )}
+        </div>
+
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            className={twMerge(
+              "absolute left-0 z-10 origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300",
+              isCollapsed ? "w-48" : "w-full",
+            )}
+          >
+            <div className="p-1">
+              {availableWorkspaces.map((availableWorkspace) => (
+                <div key={availableWorkspace.publicId} className="flex">
+                  <Menu.Item>
+                    <button
+                      onClick={() => switchWorkspace(availableWorkspace)}
+                      className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
+                    >
+                      <div className="flex min-w-0 flex-1 items-center">
+                        <span className="inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-[5px] bg-indigo-700">
+                          <span className="text-xs font-medium leading-none text-white">
+                            {availableWorkspace.name.charAt(0).toUpperCase()}
+                          </span>
+                        </span>
+                        <span className="ml-2 truncate text-xs font-medium">
+                          {availableWorkspace.name}
+                        </span>
+                      </div>
+                      {workspace.publicId === availableWorkspace.publicId && (
+                        <span>
+                          <HiCheck className="h-4 w-4" aria-hidden="true" />
+                        </span>
+                      )}
+                    </button>
+                  </Menu.Item>
+                </div>
+              ))}
+            </div>
+            <div className="border-t-[1px] border-light-600 p-1 dark:border-dark-500">
+              <Menu.Item>
+                <button
+                  onClick={() => 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`}
+                </button>
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
   );
 }

apps/web/src/components/modal.tsx

@@ -34,7 +34,7 @@ const Modal: React.FC<Props> = ({
 
   return (
     <Transition.Root show={shouldShow} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className="relative z-50" onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -47,7 +47,7 @@ const Modal: React.FC<Props> = ({
           <div className="fixed inset-0 bg-light-50 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
           <div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
             <Transition.Child
               as={Fragment}

apps/web/src/hooks/useClipboard.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+export function useClipboard({ timeout = 500 } = {}) {
+  const [error, setError] = useState<string | Error | null | undefined>(null);
+  const [copied, setCopied] = useState<boolean>(false);
+  const [copyTimeout, setCopyTimeout] = useState<number | undefined>(undefined);
+
+  const handleCopyResult = (hasError: boolean) => {
+    clearTimeout(copyTimeout);
+
+    setCopyTimeout(
+      setTimeout(() => setCopied(false), timeout) as unknown as number,
+    );
+
+    setCopied(hasError);
+  };
+
+  const copy = (value: string) => {
+    if ("clipboard" in navigator) {
+      navigator.clipboard
+        .writeText(value)
+        .then(() => handleCopyResult(true))
+        .catch((err) => setError(err));
+    } else {
+      setError(new Error("Error: navigator.clipboard is not supported"));
+    }
+  };
+
+  const reset = () => {
+    setError(null);
+    setCopied(false);
+    clearTimeout(copyTimeout);
+  };
+
+  return { copy, reset, error, copied };
+}

apps/web/src/locales/index.ts

@@ -1,4 +1,13 @@
-export const locales = ["en", "fr", "de", "es", "it", "nl"] as const;
+export const locales = [
+  "en",
+  "fr",
+  "de",
+  "es",
+  "it",
+  "nl",
+  "ru",
+  "pl",
+] as const;
 
 export type Locale = (typeof locales)[number];
 
@@ -11,4 +20,6 @@ export const localeNames: Record<Locale, string> = {
   es: "Español",
   it: "Italiano",
   nl: "Nederlands",
+  ru: "Русский",
+  pl: "Polski",
 };

apps/web/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import type { ReactElement, ReactNode } from "react";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Script from "next/script";
 import { env } from "next-runtime-env";
+import { ThemeProvider } from "next-themes";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import { useEffect } from "react";
@@ -14,7 +15,6 @@ import { useEffect } from "react";
 import { LinguiProviderWrapper } from "~/providers/lingui";
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
-import { ThemeProvider } from "next-themes";
 import { api } from "~/utils/api";
 
 const jakarta = Plus_Jakarta_Sans({
@@ -82,8 +82,8 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
       <main className="font-sans">
         <LinguiProviderWrapper>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <ModalProvider>
-                <PopupProvider>
+            <ModalProvider>
+              <PopupProvider>
                 {posthogKey ? (
                   <PostHogProvider client={posthog}>
                     {getLayout(<Component {...pageProps} />)}
@@ -91,8 +91,8 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
                 ) : (
                   getLayout(<Component {...pageProps} />)
                 )}
-                </PopupProvider>
-              </ModalProvider>
+              </PopupProvider>
+            </ModalProvider>
           </ThemeProvider>
         </LinguiProviderWrapper>
       </main>

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

@@ -47,9 +47,9 @@ export default async function handler(
 
         const metaData = checkoutSession.metadata;
 
-        if (metaData?.workspacePublicId && metaData.workspaceSlug) {
+        if (metaData?.workspacePublicId) {
           await workspaceRepo.update(db, metaData.workspacePublicId, {
-            slug: metaData.workspaceSlug,
+            ...(metaData.workspaceSlug && { slug: metaData.workspaceSlug }),
             plan: "pro",
           });
         }

apps/web/src/pages/invite/[code].tsx

@@ -0,0 +1,5 @@
+import InviteView from "~/views/invite";
+
+export default function InvitePage() {
+  return <InviteView />;
+}

apps/web/src/pages/pricing/index.tsx

@@ -0,0 +1,5 @@
+import PricingView from "~/views/pricing";
+
+export default function Pricing() {
+  return <PricingView />;
+}

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

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

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

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

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

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

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

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

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

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

apps/web/src/pages/templates/[boardId]/cards/[cardId]/index.tsx

@@ -0,0 +1,18 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import Popup from "~/components/Popup";
+import CardView, { CardRightPanel } from "~/views/card";
+
+const CardPage: NextPageWithLayout = () => {
+  return (
+    <>
+      <CardView isTemplate />
+      <Popup />
+    </>
+  );
+};
+
+CardPage.getLayout = (page) =>
+  getDashboardLayout(page, <CardRightPanel isTemplate />, true);
+
+export default CardPage;

apps/web/src/pages/templates/[boardId]/index.tsx

@@ -1,17 +1,17 @@
 import type { NextPageWithLayout } from "~/pages/_app";
 import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
-import SettingsView from "~/views/settings";
+import BoardView from "~/views/board";
 
-const SettingsPage: NextPageWithLayout = () => {
+const TemplatePage: NextPageWithLayout = () => {
   return (
     <>
-      <SettingsView />
+      <BoardView isTemplate />
       <Popup />
     </>
   );
 };
 
-SettingsPage.getLayout = (page) => getDashboardLayout(page);
+TemplatePage.getLayout = (page) => getDashboardLayout(page);
 
-export default SettingsPage;
+export default TemplatePage;

apps/web/src/pages/templates/index.tsx

@@ -0,0 +1,17 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import Popup from "~/components/Popup";
+import BoardsView from "~/views/boards";
+
+const TemplatesPage: NextPageWithLayout = () => {
+  return (
+    <>
+      <BoardsView isTemplate />
+      <Popup />
+    </>
+  );
+};
+
+TemplatesPage.getLayout = (page) => getDashboardLayout(page);
+
+export default TemplatesPage;

apps/web/src/providers/modal.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 
 interface ModalState {
   contentType: string;
@@ -42,57 +42,59 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
   const entityId = currentModal?.entityId || "";
   const entityLabel = currentModal?.entityLabel || "";
 
-  const openModal = (
-    contentType: string,
-    entityId?: string,
-    entityLabel?: string,
-  ) => {
-    const newModal: ModalState = { contentType, entityId, entityLabel };
-    setModalStack((prev) => [...prev, newModal]);
-  };
+  const openModal = useCallback(
+    (contentType: string, entityId?: string, entityLabel?: string) => {
+      const newModal: ModalState = { contentType, entityId, entityLabel };
+      setModalStack((prev) => [...prev, newModal]);
+    },
+    [],
+  );
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     setModalStack((prev) => {
       if (prev.length <= 1) {
         return [];
       }
       return prev.slice(0, -1);
     });
-  };
+  }, []);
 
-  const closeModals = (count: number) => {
-    setModalStack(prev => {
+  const closeModals = useCallback((count: number) => {
+    setModalStack((prev) => {
       const newLength = Math.max(0, prev.length - count);
       return prev.slice(0, newLength);
     });
-  };
+  }, []);
 
-  const clearAllModals = () => {
+  const clearAllModals = useCallback(() => {
     setModalStack([]);
-  };
+  }, []);
 
-  const setModalState = (modalType: string, state: any) => {
+  const setModalState = useCallback((modalType: string, state: any) => {
     setModalStates((prev) => ({
       ...prev,
       [modalType]: state,
     }));
-  };
+  }, []);
 
-  const getModalState = (modalType: string) => {
-    return modalStates[modalType];
-  };
+  const getModalState = useCallback(
+    (modalType: string) => {
+      return modalStates[modalType];
+    },
+    [modalStates],
+  );
 
-  const clearModalState = (modalType: string) => {
+  const clearModalState = useCallback((modalType: string) => {
     setModalStates((prev) => {
       const newStates = { ...prev };
       delete newStates[modalType];
       return newStates;
     });
-  };
+  }, []);
 
-  const clearAllModalStates = () => {
+  const clearAllModalStates = useCallback(() => {
     setModalStates({});
-  };
+  }, []);
 
   return (
     <ModalContext.Provider

apps/web/src/providers/workspace.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { createContext, useContext, useEffect, useState } from "react";
 
 import { api } from "~/utils/api";
@@ -46,13 +46,19 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   );
   const [hasLoaded, setHasLoaded] = useState(false);
 
+  const workspacePublicId = useSearchParams().get("workspacePublicId");
+
   const { data, isLoading } = api.workspace.all.useQuery();
+  const utils = api.useUtils();
 
   const switchWorkspace = (_workspace: Workspace) => {
     localStorage.setItem("workspacePublicId", _workspace.publicId);
 
     setWorkspace(_workspace);
 
+    // Refetch workspace data to ensure availableWorkspaces is up to date
+    void utils.workspace.all.refetch();
+
     router.push(`/boards`);
   };
 
@@ -63,24 +69,18 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
     }
 
     const storedWorkspaceId: string | null =
-      localStorage.getItem("workspacePublicId");
+      workspacePublicId ?? localStorage.getItem("workspacePublicId");
 
     if (data.length) {
-      const workspaces = data
-        .map(({ workspace, role }) => {
-          if (!workspace) return;
-
-          return {
-            role,
-            publicId: workspace.publicId,
-            name: workspace.name,
-            slug: workspace.slug,
-            description: workspace.description,
-            plan: workspace.plan,
-            hasLoaded: true,
-          };
-        })
-        .filter((workspace) => workspace !== null) as Workspace[];
+      const workspaces = data.map(({ workspace, role }) => ({
+        role,
+        publicId: workspace.publicId,
+        name: workspace.name,
+        slug: workspace.slug,
+        description: workspace.description,
+        plan: workspace.plan,
+        hasLoaded: true,
+      })) as Workspace[];
 
       if (workspaces.length) setAvailableWorkspaces(workspaces);
     }
@@ -101,6 +101,11 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         description: selectedWorkspace.workspace.description,
         role: selectedWorkspace.role,
       });
+
+      if (workspacePublicId) {
+        router.push(`/boards`);
+        localStorage.setItem("workspacePublicId", workspacePublicId);
+      }
     } else {
       const primaryWorkspace = data[0]?.workspace;
       const primaryWorkspaceRole = data[0]?.role;
@@ -116,7 +121,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         role: primaryWorkspaceRole,
       });
     }
-  }, [data]);
+  }, [data, isLoading, workspacePublicId, router]);
 
   return (
     <WorkspaceContext.Provider

apps/web/src/styles/globals.css

@@ -25,3 +25,17 @@
   width: 200%;
   height: 200%;
 }
+
+@layer utilities {
+  @supports not (overflow-wrap: anywhere) {
+    .break-anywhere {
+      word-break: break-word;
+    }
+  }
+
+  @supports (overflow-wrap: anywhere) {
+    .break-anywhere {
+      overflow-wrap: anywhere;
+    }
+  }
+}

apps/web/src/utils/i18n.ts

@@ -18,6 +18,10 @@ const loadMessages = async (locale: Locale) => {
       return (await import("~/locales/it/messages")).messages;
     case "nl":
       return (await import("~/locales/nl/messages")).messages;
+    case "ru":
+      return (await import("~/locales/ru/messages")).messages;
+    case "pl":
+      return (await import("~/locales/pl/messages")).messages;
     default:
       return enMessages;
   }

apps/web/src/views/auth/login/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { env } from "next-runtime-env";
@@ -17,6 +17,8 @@ export default function LoginPage() {
   const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
   const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
 
+  const redirect = useSearchParams().get("next");
+
   const handleMagicLinkSent = (value: boolean, recipient: string) => {
     setIsMagicLinkSent(value);
     setMagicLinkRecipient(recipient);
@@ -61,7 +63,11 @@ export default function LoginPage() {
                 <Trans>
                   Don't have an account?{" "}
                   <span className="underline">
-                    <Link href="/signup">Sign up</Link>
+                    <Link
+                      href={redirect ? `/signup?next=${redirect}` : "/signup"}
+                    >
+                      Sign up
+                    </Link>
                   </span>
                 </Trans>
               </p>

apps/web/src/views/auth/signup/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { env } from "next-runtime-env";
@@ -17,6 +17,8 @@ export default function SignUpPage() {
   const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
   const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
 
+  const redirect = useSearchParams().get("next");
+
   const { data } = authClient.useSession();
 
   if (data?.user.id) router.push("/boards");
@@ -86,7 +88,9 @@ export default function SignUpPage() {
               <Trans>
                 Already have an account?{" "}
                 <span className="underline">
-                  <Link href="/login">Sign in</Link>
+                  <Link href={redirect ? `/login?next=${redirect}` : "/login"}>
+                    Sign in
+                  </Link>
                 </span>
               </Trans>
             </p>

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

@@ -1,23 +1,51 @@
 import { t } from "@lingui/core/macro";
-import { HiEllipsisHorizontal, HiLink, HiOutlineTrash } from "react-icons/hi2";
+import {
+  HiEllipsisHorizontal,
+  HiLink,
+  HiOutlineDocumentDuplicate,
+  HiOutlineTrash,
+} from "react-icons/hi2";
 
 import Dropdown from "~/components/Dropdown";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
 
-export default function BoardDropdown({ isLoading }: { isLoading: boolean }) {
+export default function BoardDropdown({
+  isTemplate,
+  isLoading,
+  boardPublicId,
+  workspacePublicId,
+}: {
+  isTemplate: boolean;
+  isLoading: boolean;
+  boardPublicId: string;
+  workspacePublicId: string;
+}) {
   const { openModal } = useModal();
-
   return (
     <Dropdown
       disabled={isLoading}
       items={[
+        ...(isTemplate
+          ? []
+          : [
+              {
+                label: t`Make template`,
+                action: () => openModal("CREATE_TEMPLATE"),
+                icon: (
+                  <HiOutlineDocumentDuplicate className="h-[16px] w-[16px] text-dark-900" />
+                ),
+              },
+              {
+                label: t`Edit board URL`,
+                action: () => openModal("UPDATE_BOARD_SLUG"),
+                icon: <HiLink className="h-[16px] w-[16px] text-dark-900" />,
+              },
+            ]),
+
         {
-          label: t`Edit board URL`,
-          action: () => openModal("UPDATE_BOARD_SLUG"),
-          icon: <HiLink className="h-[16px] w-[16px] text-dark-900" />,
-        },
-        {
-          label: t`Delete board`,
+          label: isTemplate ? t`Delete template` : t`Delete board`,
           action: () => openModal("DELETE_BOARD"),
           icon: <HiOutlineTrash className="h-[16px] w-[16px] text-dark-900" />,
         },

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

@@ -1,4 +1,5 @@
 import { useRouter } from "next/navigation";
+import { t } from "@lingui/core/macro";
 
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
@@ -6,8 +7,10 @@ import { api } from "~/utils/api";
 
 export function DeleteBoardConfirmation({
   boardPublicId,
+  isTemplate,
 }: {
   boardPublicId: string;
+  isTemplate: boolean;
 }) {
   const router = useRouter();
   const { closeModal } = useModal();
@@ -15,7 +18,7 @@ export function DeleteBoardConfirmation({
   const deleteBoard = api.board.delete.useMutation({
     onSuccess: () => {
       closeModal();
-      router.push(`/boards`);
+      router.push(isTemplate ? `/templates` : `/boards`);
     },
   });
 
@@ -30,18 +33,18 @@ export function DeleteBoardConfirmation({
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
         <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          Are you sure you want to delete this board?
+          {t`Are you sure you want to delete this ${isTemplate ? "template" : "board"}?`}
         </h2>
         <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {"This action can't be undone."}
+          {t`This action can't be undone.`}
         </p>
       </div>
       <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
         <Button onClick={() => closeModal()} variant="secondary">
-          Cancel
+          {t`Cancel`}
         </Button>
         <Button onClick={handleDeleteBoard} isLoading={deleteBoard.isPending}>
-          Delete
+          {t`Delete`}
         </Button>
       </div>
     </div>

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

@@ -11,10 +11,11 @@ import {
 import type { NewCardInput } from "@kan/api/types";
 import { generateUID } from "@kan/shared/utils";
 
+import type { WorkspaceMember } from "~/components/Editor";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
-import Editor, { WorkspaceMember } from "~/components/Editor";
+import Editor from "~/components/Editor";
 import Input from "~/components/Input";
 import LabelIcon from "~/components/LabelIcon";
 import Toggle from "~/components/Toggle";
@@ -35,12 +36,14 @@ interface QueryParams {
 }
 
 interface NewCardFormProps {
+  isTemplate: boolean;
   boardPublicId: string;
   listPublicId: string;
   queryParams: QueryParams;
 }
 
 export function NewCardForm({
+  isTemplate,
   boardPublicId,
   listPublicId,
   queryParams,
@@ -85,14 +88,13 @@ export function NewCardForm({
     return () => subscription.unsubscribe();
   }, [watch, saveFormState]);
 
-  
   const { data: boardData } = api.board.byId.useQuery(queryParams, {
     enabled: !!boardPublicId,
   });
 
   // this adds the new created label to selected labels
   useEffect(() => {
-    const newLabelId = modalStates["NEW_LABEL_CREATED"];
+    const newLabelId = modalStates.NEW_LABEL_CREATED;
     if (newLabelId !== undefined && !labelPublicIds.includes(newLabelId)) {
       setValue("labelPublicIds", [...labelPublicIds, newLabelId]);
     }
@@ -101,23 +103,23 @@ export function NewCardForm({
   // this removes the deleted label from selected labels if it is selected
   useEffect(() => {
     if (boardData?.labels) {
-      const availableLabelIds = boardData.labels.map(label => label.publicId);
-      const newLabelId = modalStates["NEW_LABEL_CREATED"];
-    
+      const availableLabelIds = boardData.labels.map((label) => label.publicId);
+      const newLabelId = modalStates.NEW_LABEL_CREATED;
+
       if (newLabelId && availableLabelIds.includes(newLabelId)) {
         clearModalState("NEW_LABEL_CREATED");
       }
-      
-      const validLabelIds = labelPublicIds.filter(id => 
-        availableLabelIds.includes(id) || id === newLabelId
+
+      const validLabelIds = labelPublicIds.filter(
+        (id) => availableLabelIds.includes(id) || id === newLabelId,
       );
-      
+
       if (validLabelIds.length !== labelPublicIds.length) {
         setValue("labelPublicIds", validLabelIds);
       }
     }
-  }, [boardData?.labels, labelPublicIds, modalStates["NEW_LABEL_CREATED"]]);
-  
+  }, [boardData?.labels, labelPublicIds, modalStates.NEW_LABEL_CREATED]);
+
   const createCard = api.card.create.useMutation({
     onMutate: async (args) => {
       await utils.board.byId.cancel();
@@ -323,15 +325,19 @@ export function NewCardForm({
                 saveFormState({ ...formState, description: value });
               }}
               workspaceMembers={
-                boardData?.workspace.members?.map((member): WorkspaceMember => ({
-                  publicId: member.publicId,
-                  email: member.email,
-                  user: member.user ? {
-                    id: member.publicId,
-                    name: member.user.name,
-                    image: member.user.image ?? null,
-                  } : null,
-                })) ?? []
+                boardData?.workspace.members?.map(
+                  (member): WorkspaceMember => ({
+                    publicId: member.publicId,
+                    email: member.email,
+                    user: member.user
+                      ? {
+                          id: member.publicId,
+                          name: member.user.name,
+                          image: member.user.image ?? null,
+                        }
+                      : null,
+                  }),
+                ) ?? []
               }
             />
           </div>
@@ -347,42 +353,46 @@ export function NewCardForm({
               </div>
             </CheckboxDropdown>
           </div>
-          <div className="w-fit">
-            <CheckboxDropdown
-              items={formattedMembers}
-              handleSelect={(_groupKey, item) => handleSelectMembers(item.key)}
-            >
-              <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
-                {!memberPublicIds.length ? (
-                  t`Members`
-                ) : (
-                  <div className="flex -space-x-1 overflow-hidden">
-                    {memberPublicIds.map((memberPublicId) => {
-                      const member = formattedMembers.find(
-                        (member) => member.key === memberPublicId,
-                      );
+          {!isTemplate && (
+            <div className="w-fit">
+              <CheckboxDropdown
+                items={formattedMembers}
+                handleSelect={(_groupKey, item) =>
+                  handleSelectMembers(item.key)
+                }
+              >
+                <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
+                  {!memberPublicIds.length ? (
+                    t`Members`
+                  ) : (
+                    <div className="flex -space-x-1 overflow-hidden">
+                      {memberPublicIds.map((memberPublicId) => {
+                        const member = formattedMembers.find(
+                          (member) => member.key === memberPublicId,
+                        );
 
-                      return (
-                        <span
-                          key={member?.key}
-                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500"
-                        >
-                          <span className="text-[8px] font-medium leading-none text-white">
-                            {member?.value
-                              .split(" ")
-                              .map((namePart) =>
-                                namePart.charAt(0).toUpperCase(),
-                              )
-                              .join("")}
+                        return (
+                          <span
+                            key={member?.key}
+                            className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500"
+                          >
+                            <span className="text-[8px] font-medium leading-none text-white">
+                              {member?.value
+                                .split(" ")
+                                .map((namePart) =>
+                                  namePart.charAt(0).toUpperCase(),
+                                )
+                                .join("")}
+                            </span>
                           </span>
-                        </span>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            </CheckboxDropdown>
-          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </CheckboxDropdown>
+            </div>
+          )}
           <div className="w-fit">
             <CheckboxDropdown
               items={formattedLabels}

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

@@ -0,0 +1,138 @@
+import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { HiXMark } from "react-icons/hi2";
+import { z } from "zod";
+
+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 schema = z.object({
+  name: z
+    .string()
+    .min(1, { message: t`Template name is required` })
+    .max(100, { message: t`Template name cannot exceed 100 characters` }),
+  workspacePublicId: z.string(),
+  sourceBoardPublicId: z.string(),
+});
+
+interface NewBoardInputWithTemplate {
+  name: string;
+  workspacePublicId: string;
+  sourceBoardPublicId: string;
+}
+
+export function NewTemplateForm({
+  sourceBoardPublicId,
+  workspacePublicId,
+  sourceBoardName,
+}: {
+  sourceBoardPublicId: string;
+  workspacePublicId: string;
+  sourceBoardName: string;
+}) {
+  const router = useRouter();
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<NewBoardInputWithTemplate>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: sourceBoardName,
+      workspacePublicId,
+      sourceBoardPublicId,
+    },
+  });
+
+  const createBoard = api.board.create.useMutation({
+    onSuccess: (newTemplate) => {
+      if (!newTemplate) {
+        showPopup({
+          header: t`Unable to create template`,
+          message: t`Please try again later, or contact customer support.`,
+          icon: "error",
+        });
+      } else {
+        router.push(`/templates/${newTemplate.publicId}`);
+        showPopup({
+          header: t`Template created`,
+          message: t`Template created successfully`,
+          icon: "success",
+        });
+      }
+      closeModal();
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to create template`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const onSubmit = (data: NewBoardInputWithTemplate) => {
+    createBoard.mutate({
+      name: data.name,
+      workspacePublicId: data.workspacePublicId,
+      sourceBoardPublicId: data.sourceBoardPublicId,
+      lists: [],
+      labels: [],
+      type: "template",
+    });
+  };
+
+  useEffect(() => {
+    const titleElement: HTMLElement | null =
+      document.querySelector<HTMLElement>("#name");
+    if (titleElement) titleElement.focus();
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
+          <h2 className="text-sm font-bold">{t`New template`}</h2>
+          <button
+            type="button"
+            className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
+          </button>
+        </div>
+        <Input
+          id="name"
+          placeholder={t`Name`}
+          {...register("name", { required: true })}
+          errorMessage={errors.name?.message}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
+      </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>
+          <Button type="submit" isLoading={createBoard.isPending}>
+            {t`Create template`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -155,7 +155,7 @@ export function UpdateBoardSlugForm({
         <div className="flex items-center gap-2">
           <Button
             variant="secondary"
-            href="/settings?edit=workspace_url"
+            href="/settings?tab=workspace"
             onClick={closeModal}
           >
             {t`Edit workspace URL`}

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

@@ -7,7 +7,11 @@ import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
-import { HiOutlinePlusSmall, HiOutlineSquare3Stack3D } from "react-icons/hi2";
+import {
+  HiOutlinePlusSmall,
+  HiOutlineRectangleStack,
+  HiOutlineSquare3Stack3D,
+} from "react-icons/hi2";
 
 import type { UpdateBoardInput } from "@kan/api/types";
 
@@ -32,14 +36,15 @@ import Filters from "./components/Filters";
 import List from "./components/List";
 import { NewCardForm } from "./components/NewCardForm";
 import { NewListForm } from "./components/NewListForm";
+import { NewTemplateForm } from "./components/NewTemplateForm";
 import UpdateBoardSlugButton from "./components/UpdateBoardSlugButton";
 import { UpdateBoardSlugForm } from "./components/UpdateBoardSlugForm";
 import VisibilityButton from "./components/VisibilityButton";
 
 type PublicListId = string;
 
-export default function BoardPage() {
-  const params = useParams() as { boardId: string[] } | null;
+export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
+  const params = useParams() as { boardId: string | string[] } | null;
   const router = useRouter();
   const utils = api.useUtils();
   const { showPopup } = usePopup();
@@ -49,7 +54,11 @@ export default function BoardPage() {
     useState<PublicListId>("");
   const [isInitialLoading, setIsInitialLoading] = useState(true);
 
-  const boardId = params?.boardId.length ? params.boardId[0] : null;
+  const boardId = params?.boardId
+    ? Array.isArray(params.boardId)
+      ? params.boardId[0]
+      : params.boardId
+    : null;
 
   const updateBoard = api.board.update.useMutation();
 
@@ -67,10 +76,16 @@ export default function BoardPage() {
     });
   };
 
-  const queryParams = {
+  const queryParams: {
+    boardPublicId: string;
+    members: string[];
+    labels: string[];
+    type: "regular" | "template";
+  } = {
     boardPublicId: boardId ?? "",
     members: formatToArray(router.query.members),
     labels: formatToArray(router.query.labels),
+    type: isTemplate ? "template" : "regular",
   };
 
   const {
@@ -208,7 +223,7 @@ export default function BoardPage() {
   };
 
   const onDragEnd = ({
-    source,
+    source: _source,
     destination,
     draggableId,
     type,
@@ -241,7 +256,10 @@ export default function BoardPage() {
           modalSize="sm"
           isVisible={isOpen && modalContentType === "DELETE_BOARD"}
         >
-          <DeleteBoardConfirmation boardPublicId={boardId ?? ""} />
+          <DeleteBoardConfirmation
+            isTemplate={!!isTemplate}
+            boardPublicId={boardId ?? ""}
+          />
         </Modal>
 
         <Modal
@@ -259,6 +277,7 @@ export default function BoardPage() {
           isVisible={isOpen && modalContentType === "NEW_CARD"}
         >
           <NewCardForm
+            isTemplate={!!isTemplate}
             boardPublicId={boardId ?? ""}
             listPublicId={selectedPublicListId}
             queryParams={queryParams}
@@ -321,6 +340,17 @@ export default function BoardPage() {
             queryParams={queryParams}
           />
         </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CREATE_TEMPLATE"}
+        >
+          <NewTemplateForm
+            workspacePublicId={workspace.publicId ?? ""}
+            sourceBoardPublicId={boardId ?? ""}
+            sourceBoardName={boardData?.name ?? ""}
+          />
+        </Modal>
       </>
     );
   };
@@ -328,7 +358,7 @@ export default function BoardPage() {
   return (
     <>
       <PageHead
-        title={`${boardData?.name ?? t`Board`} | ${workspace.name ?? t`Workspace`}`}
+        title={`${(boardData?.name ?? isTemplate) ? t`Board` : t`Template`} | ${workspace.name}`}
       />
       <div className="relative flex h-full flex-col">
         <PatternedBackground />
@@ -354,31 +384,46 @@ export default function BoardPage() {
           )}
           {!boardData && !isLoading && (
             <p className="order-2 block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem] md:order-1">
-              {t`Board not found`}
+              {t`${isTemplate ? "Template" : "Board"} not found`}
             </p>
           )}
-
           <div className="order-1 mb-4 flex items-center justify-end space-x-2 md:order-2 md:mb-0">
-            <UpdateBoardSlugButton
-              handleOnClick={() => openModal("UPDATE_BOARD_SLUG")}
-              isLoading={isLoading}
-              workspaceSlug={workspace.slug ?? ""}
-              boardSlug={boardData?.slug ?? ""}
-            />
-            <VisibilityButton
-              visibility={boardData?.visibility ?? "private"}
-              boardPublicId={boardId ?? ""}
-              boardSlug={boardData?.slug ?? ""}
-              queryParams={queryParams}
-              isLoading={!boardData}
-              isAdmin={workspace.role === "admin"}
-            />
-            <Filters
-              labels={boardData?.labels ?? []}
-              members={boardData?.workspace.members?.filter(member => member.user !== null) ?? []}
-              position="left"
-              isLoading={!boardData}
-            />
+            {isTemplate && (
+              <div className="inline-flex cursor-default items-center justify-center whitespace-nowrap rounded-md border-[1px] border-light-300 bg-light-50 px-3 py-2 text-sm font-semibold text-light-950 shadow-sm dark:border-dark-300 dark:bg-dark-50 dark:text-dark-950">
+                <span className="mr-2">
+                  <HiOutlineRectangleStack />
+                </span>
+                {t`Template`}
+              </div>
+            )}
+            {!isTemplate && (
+              <>
+                <UpdateBoardSlugButton
+                  handleOnClick={() => openModal("UPDATE_BOARD_SLUG")}
+                  isLoading={isLoading}
+                  workspaceSlug={workspace.slug ?? ""}
+                  boardSlug={boardData?.slug ?? ""}
+                />
+                <VisibilityButton
+                  visibility={boardData?.visibility ?? "private"}
+                  boardPublicId={boardId ?? ""}
+                  boardSlug={boardData?.slug ?? ""}
+                  queryParams={queryParams}
+                  isLoading={!boardData}
+                  isAdmin={workspace.role === "admin"}
+                />
+                {boardData && (
+                  <Filters
+                    labels={boardData.labels}
+                    members={boardData.workspace.members.filter(
+                      (member) => member.user !== null,
+                    )}
+                    position="left"
+                    isLoading={!boardData}
+                  />
+                )}
+              </>
+            )}
             <Button
               iconLeft={
                 <HiOutlinePlusSmall
@@ -393,7 +438,12 @@ export default function BoardPage() {
             >
               {t`New list`}
             </Button>
-            <BoardDropdown isLoading={!boardData} />
+            <BoardDropdown
+              isTemplate={!!isTemplate}
+              isLoading={!boardData}
+              boardPublicId={boardId ?? ""}
+              workspacePublicId={workspace.publicId}
+            />
           </div>
         </div>
 
@@ -475,7 +525,11 @@ export default function BoardPage() {
                                               e.preventDefault();
                                           }}
                                           key={card.publicId}
-                                          href={`/cards/${card.publicId}`}
+                                          href={
+                                            isTemplate
+                                              ? `/templates/${boardId}/cards/${card.publicId}`
+                                              : `/cards/${card.publicId}`
+                                          }
                                           className={`mb-2 flex !cursor-pointer flex-col ${
                                             card.publicId.startsWith(
                                               "PLACEHOLDER",

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

@@ -8,18 +8,21 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 
-export function BoardsList() {
+export function BoardsList({ isTemplate }: { isTemplate?: boolean }) {
   const { workspace } = useWorkspace();
   const { openModal } = useModal();
 
   const { data, isLoading } = api.board.all.useQuery(
-    { workspacePublicId: workspace.publicId },
+    {
+      workspacePublicId: workspace.publicId,
+      type: isTemplate ? "template" : "regular",
+    },
     { enabled: workspace.publicId ? true : false },
   );
 
   if (isLoading)
     return (
-      <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
+      <div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -32,22 +35,25 @@ export function BoardsList() {
         <div className="flex flex-col items-center">
           <HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
           <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
-            {t`No boards`}
+            {t`No ${isTemplate ? "templates" : "boards"}`}
           </p>
           <p className="text-[14px] text-light-900 dark:text-dark-900">
-            {t`Get started by creating a new board`}
+            {t`Get started by creating a new ${isTemplate ? "template" : "board"}`}
           </p>
         </div>
         <Button onClick={() => openModal("NEW_BOARD")}>
-          {t`Create new board`}
+          {t`Create new ${isTemplate ? "template" : "board"}`}
         </Button>
       </div>
     );
 
   return (
-    <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
+    <div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
       {data?.map((board) => (
-        <Link key={board.publicId} href={`boards/${board.publicId}`}>
+        <Link
+          key={board.publicId}
+          href={`${isTemplate ? "templates" : "boards"}/${board.publicId}`}
+        >
           <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">
             <PatternedBackground />
             <p className="px-4 text-[14px] font-bold text-neutral-700 dark:text-dark-1000">

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

@@ -1,3 +1,4 @@
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
 import { useEffect, useState } from "react";
@@ -10,9 +11,10 @@ import Button from "~/components/Button";
 import Input from "~/components/Input";
 import Toggle from "~/components/Toggle";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
-import TemplateBoards, { getTemplates } from "./TemplateBoards";
+import TemplateBoards from "./TemplateBoards";
 
 const schema = z.object({
   name: z
@@ -29,13 +31,25 @@ interface NewBoardInputWithTemplate {
   template: Template | null;
 }
 
-export function NewBoardForm() {
+export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
   const utils = api.useUtils();
   const { closeModal } = useModal();
+  const router = useRouter();
+  const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
   const [showTemplates, setShowTemplates] = useState(false);
+  const { data: templates } = api.board.all.useQuery(
+    { workspacePublicId: workspace.publicId ?? "", type: "template" },
+    { enabled: !!workspace.publicId },
+  );
 
-  const templates = getTemplates();
+  const formattedTemplates = templates?.map((template) => ({
+    id: template.publicId,
+    sourceBoardPublicId: template.publicId,
+    name: template.name,
+    lists: template.lists.map((list) => list.name),
+    labels: template.labels.map((label) => label.name),
+  }));
 
   const {
     register,
@@ -57,18 +71,39 @@ export function NewBoardForm() {
   const refetchBoards = () => utils.board.all.refetch();
 
   const createBoard = api.board.create.useMutation({
-    onSuccess: async () => {
+    onSuccess: async (board) => {
+      if (!board) {
+        showPopup({
+          header: t`Error`,
+          message: t`Failed to create board`,
+          icon: "error",
+        });
+      } else {
+        router.push(
+          `${isTemplate ? "/templates" : "/boards"}/${board.publicId}`,
+        );
+      }
       closeModal();
+
       await refetchBoards();
     },
+    onError: () => {
+      showPopup({
+        header: t`Error`,
+        message: t`Failed to create board`,
+        icon: "error",
+      });
+    },
   });
 
   const onSubmit = (data: NewBoardInputWithTemplate) => {
     createBoard.mutate({
       name: data.name,
       workspacePublicId: data.workspacePublicId,
+      sourceBoardPublicId: data.template?.sourceBoardPublicId ?? undefined,
       lists: data.template?.lists ?? [],
       labels: data.template?.labels ?? [],
+      type: isTemplate ? "template" : "regular",
     });
   };
 
@@ -82,7 +117,7 @@ export function NewBoardForm() {
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
         <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
-          <h2 className="text-sm font-bold">{t`New board`}</h2>
+          <h2 className="text-sm font-bold">{t`New ${isTemplate ? "template" : "board"}`}</h2>
           <button
             type="button"
             className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
@@ -111,21 +146,24 @@ export function NewBoardForm() {
         currentBoard={currentTemplate}
         setCurrentBoard={(t) => setValue("template", t)}
         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">
-        <Toggle
-          label={t`Use template`}
-          isChecked={showTemplates}
-          onChange={() => {
-            setShowTemplates(!showTemplates);
-            if (!showTemplates && !currentTemplate) {
-              setValue("template", templates[0] ?? null);
-            }
-          }}
-        />
+        {!isTemplate && (
+          <Toggle
+            label={t`Use template`}
+            isChecked={showTemplates}
+            onChange={() => {
+              setShowTemplates(!showTemplates);
+              if (!showTemplates && !currentTemplate) {
+                setValue("template", (templates?.[0] as any) ?? null);
+              }
+            }}
+          />
+        )}
         <div>
           <Button type="submit" isLoading={createBoard.isPending}>
-            {t`Create board`}
+            {t`Create ${isTemplate ? "template" : "board"}`}
           </Button>
         </div>
       </div>

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

@@ -4,6 +4,7 @@ import { HiCheckCircle } from "react-icons/hi2";
 
 export interface Template {
   id: string;
+  sourceBoardPublicId?: string;
   name: string;
   lists: string[];
   labels: string[];
@@ -88,16 +89,18 @@ export default function TemplateBoards({
   currentBoard,
   setCurrentBoard,
   showTemplates,
+  customTemplates,
 }: {
   currentBoard: Template | null;
   setCurrentBoard: (board: Template | null) => void;
   showTemplates: boolean;
+  customTemplates: Template[] | null;
 }) {
   const [showFade, setShowFade] = useState(false);
   const [showTopFade, setShowTopFade] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const templates = getTemplates();
+  const templates = [...(customTemplates ?? []), ...getTemplates()];
 
   const handleScroll = () => {
     if (!scrollRef.current) return;

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

@@ -1,4 +1,5 @@
 import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
 import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
 
 import Button from "~/components/Button";
@@ -12,31 +13,39 @@ import { BoardsList } from "./components/BoardsList";
 import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";
 
-export default function BoardsPage() {
+export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
   const { openModal, modalContentType, isOpen } = useModal();
-  const { workspace, hasLoaded } = useWorkspace();
+  const { availableWorkspaces, workspace, hasLoaded } = useWorkspace();
 
-  if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE");
+  useEffect(() => {
+    if (hasLoaded && availableWorkspaces.length === 0) {
+      openModal("NEW_WORKSPACE");
+    }
+  }, [hasLoaded, availableWorkspaces.length, openModal]);
 
   return (
     <>
-      <PageHead title={t`Boards | ${workspace.name ?? "Workspace"}`} />
+      <PageHead
+        title={t`${isTemplate ? "Templates" : "Boards"} | ${workspace.name ?? "Workspace"}`}
+      />
       <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
         <div className="relative z-10 mb-8 flex w-full items-center justify-between">
           <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-            {t`Boards`}
+            {t`${isTemplate ? "Templates" : "Boards"}`}
           </h1>
           <div className="flex gap-2">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => openModal("IMPORT_BOARDS")}
-              iconLeft={
-                <HiArrowDownTray aria-hidden="true" className="h-4 w-4" />
-              }
-            >
-              {t`Import`}
-            </Button>
+            {!isTemplate && (
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => openModal("IMPORT_BOARDS")}
+                iconLeft={
+                  <HiArrowDownTray aria-hidden="true" className="h-4 w-4" />
+                }
+              >
+                {t`Import`}
+              </Button>
+            )}
             <Button
               type="button"
               variant="primary"
@@ -62,7 +71,7 @@ export default function BoardsPage() {
             modalSize="sm"
             isVisible={isOpen && modalContentType === "NEW_BOARD"}
           >
-            <NewBoardForm />
+            <NewBoardForm isTemplate={!!isTemplate} />
           </Modal>
 
           <Modal
@@ -81,7 +90,7 @@ export default function BoardsPage() {
         </>
 
         <div className="flex h-full flex-row">
-          <BoardsList />
+          <BoardsList isTemplate={!!isTemplate} />
         </div>
       </div>
     </>

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

@@ -138,7 +138,7 @@ const Comment = ({
         <ContentEditable
           html={comment ?? ""}
           disabled={true}
-          className="mt-2 text-sm"
+          className="break-anywhere mt-2 text-sm"
         />
       ) : (
         <form onSubmit={handleSubmit(onSubmit)}>

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

@@ -1,4 +1,3 @@
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { HiMiniPlus } from "react-icons/hi2";
 
@@ -101,22 +100,19 @@ export default function LabelSelector({
           {selectedLabels.length ? (
             <div className="flex flex-wrap gap-x-0.5">
               {selectedLabels.map((label) => (
-                <Menu.Button key={label.key}>
-                  <Badge value={label.value} iconLeft={label.leftIcon} />
-                </Menu.Button>
-              ))}
-              <Menu.Button>
                 <Badge
-                  value={t`Add label`}
-                  iconLeft={<HiMiniPlus size={14} />}
+                  key={label.key}
+                  value={label.value}
+                  iconLeft={label.leftIcon}
                 />
-              </Menu.Button>
+              ))}
+              <Badge value={t`Add label`} iconLeft={<HiMiniPlus size={14} />} />
             </div>
           ) : (
-            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+            <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
               <HiMiniPlus size={22} className="pr-2" />
               {t`Add label`}
-            </Menu.Button>
+            </div>
           )}
         </CheckboxDropdown>
       )}

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

@@ -1,4 +1,3 @@
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 
 import CheckboxDropdown from "~/components/CheckboxDropdown";
@@ -79,9 +78,9 @@ export default function ListSelector({
           }}
           asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
             {selectedList?.value}
-          </Menu.Button>
+          </div>
         </CheckboxDropdown>
       )}
     </>

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

@@ -1,5 +1,4 @@
 import { useRouter } from "next/router";
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { HiMiniPlus } from "react-icons/hi2";
 
@@ -112,11 +111,12 @@ export default function MemberSelector({
           createNewItemLabel={t`Invite member`}
           asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
             {selectedMembers.length ? (
               <div className="isolate flex justify-end -space-x-1 overflow-hidden">
                 {selectedMembers.map(({ value, imageUrl }) => (
                   <Avatar
+                    key={value}
                     size="sm"
                     name={value}
                     imageUrl={imageUrl}
@@ -130,7 +130,7 @@ export default function MemberSelector({
                 {t`Add member`}
               </>
             )}
-          </Menu.Button>
+          </div>
         </CheckboxDropdown>
       )}
     </>

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

@@ -37,7 +37,7 @@ interface FormValues {
   description: string;
 }
 
-export function CardRightPanel() {
+export function CardRightPanel({ isTemplate }: { isTemplate?: boolean }) {
   const router = useRouter();
   const cardId = Array.isArray(router.query.cardId)
     ? router.query.cardId[0]
@@ -121,19 +121,21 @@ export function CardRightPanel() {
           isLoading={!card}
         />
       </div>
-      <div className="flex w-full flex-row">
-        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`Members`}</p>
-        <MemberSelector
-          cardPublicId={cardId ?? ""}
-          members={formattedMembers}
-          isLoading={!card}
-        />
-      </div>
+      {!isTemplate && (
+        <div className="flex w-full flex-row">
+          <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`Members`}</p>
+          <MemberSelector
+            cardPublicId={cardId ?? ""}
+            members={formattedMembers}
+            isLoading={!card}
+          />
+        </div>
+      )}
     </div>
   );
 }
 
-export default function CardPage() {
+export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
   const router = useRouter();
   const utils = api.useUtils();
   const {
@@ -228,7 +230,7 @@ export default function CardPage() {
                   <>
                     <Link
                       className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
-                      href={`/boards/${board?.publicId}`}
+                      href={`${isTemplate ? "/templates" : "/boards"}/${board?.publicId}`}
                     >
                       {board?.name}
                     </Link>
@@ -296,9 +298,11 @@ export default function CardPage() {
                         isAdmin={workspace.role === "admin"}
                       />
                     </div>
-                    <div className="mt-6">
-                      <NewCommentForm cardPublicId={cardId} />
-                    </div>
+                    {!isTemplate && (
+                      <div className="mt-6">
+                        <NewCommentForm cardPublicId={cardId} />
+                      </div>
+                    )}
                   </div>
                 </>
               )}

apps/web/src/views/home/components/Cta.tsx

@@ -53,7 +53,7 @@ const Cta = ({ theme }: { theme: string }) => {
           <h2 className="text-balance text-4xl font-bold tracking-tight text-light-1000 dark:text-dark-1000 sm:text-4xl">
             {t`Get started for free today`}
           </h2>
-          <p className="text-md/8 mx-auto mt-6 max-w-[375px] text-pretty text-light-900 dark:text-dark-900">
+          <p className="text-md/8 mx-auto mt-6 max-w-[375px] text-pretty text-light-950 dark:text-dark-900">
             {t`Unlimited boards, unlimited lists, unlimited cards. No credit card required.`}
           </p>
           <Link href="/signup">

apps/web/src/views/home/components/Faqs.tsx

@@ -146,7 +146,7 @@ const Faqs = () => {
         <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
           {t`Questions?`}
         </p>
-        <p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
+        <p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-light-950 dark:text-dark-900">
           <Trans>
             Find answers to common questions about the project. Can't find what
             you're looking for? Feel free to{" "}

apps/web/src/views/home/components/Features.tsx

@@ -28,6 +28,7 @@ const FeatureItem = ({
     description: string;
     icon: Record<string, unknown>;
     comingSoon?: boolean;
+    new?: boolean;
   };
 }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -66,6 +67,12 @@ const FeatureItem = ({
           {t`Coming soon`}
         </div>
       )}
+
+      {feature.new && (
+        <div className="absolute right-4 top-4 rounded-full border border-light-300 px-2 py-1 text-[10px] text-light-1000 dark:border-dark-600 dark:bg-dark-50 dark:text-dark-900">
+          {t`New`}
+        </div>
+      )}
     </div>
   );
 };
@@ -108,7 +115,7 @@ const Features = ({ theme }: { theme: "light" | "dark" }) => {
       title: t`Templates`,
       description: t`Save time with reusable board templates.`,
       icon: isDark ? templatesIconDark : templatesIconLight,
-      comingSoon: true,
+      new: true,
     },
     {
       title: t`Integrations`,
@@ -128,7 +135,7 @@ const Features = ({ theme }: { theme: "light" | "dark" }) => {
         <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
           {t`Kanban reimagined`}
         </p>
-        <p className="text-md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
+        <p className="text-md lg:text-md mt-3 max-w-[500px] text-center text-light-950 dark:text-dark-900">
           {t`Simple, visual task management that just works. Drag and drop cards, collaborate with your team, and get more done.`}
         </p>
         <div className="mx-auto mt-16 w-full max-w-7xl">

apps/web/src/views/home/components/Header.tsx

@@ -6,55 +6,83 @@ import { twMerge } from "tailwind-merge";
 import Button from "~/components/Button";
 
 const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const menuItems = [
-    { label: t`Roadmap`, href: "/kan/roadmap", openInNewTab: true },
-    { label: t`Features`, href: "#features" },
-    { label: t`Pricing`, href: "#pricing" },
-    { label: t`Docs`, href: "https://docs.kan.bn", openInNewTab: true },
+  const desktopMenuItems = [
+    {
+      label: t`Roadmap`,
+      href: "/kan/roadmap",
+      openInNewTab: true,
+    },
+    { label: t`Features`, href: "/#features" },
+    { label: t`Pricing`, href: "/pricing" },
+    {
+      label: t`Docs`,
+      href: "https://docs.kan.bn",
+      openInNewTab: true,
+    },
   ];
 
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 0);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+  const mobileMenuItems = [
+    {
+      label: t`Roadmap`,
+      href: "/kan/roadmap",
+      openInNewTab: true,
+      group: "Product",
+    },
+    { label: t`Features`, href: "/#features", group: "Product" },
+    { label: t`Pricing`, href: "/pricing", group: "Product" },
+    {
+      label: t`Documentation`,
+      href: "https://docs.kan.bn",
+      openInNewTab: true,
+      group: "Resources",
+    },
+    { label: t`FAQ`, href: "/#faq", group: "Resources" },
+    { label: t`Contact`, href: "mailto:support@kan.bn", group: "Resources" },
+  ];
+
+  // Group mobile menu items by their group property
+  const groupedMenuItems = mobileMenuItems.reduce(
+    (acc, item) => {
+      (acc[item.group] ??= []).push(item);
+      return acc;
+    },
+    {} as Record<string, typeof mobileMenuItems>,
+  );
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
-    document.body.style.overflow = !isMenuOpen ? "hidden" : "";
   };
 
+  useEffect(() => {
+    document.documentElement.classList.toggle("overflow-hidden", isMenuOpen);
+    document.body.classList.toggle("overflow-hidden", isMenuOpen);
+    return () => {
+      document.documentElement.classList.remove("overflow-hidden");
+      document.body.classList.remove("overflow-hidden");
+    };
+  }, [isMenuOpen]);
+
   return (
     <>
       <div
         className={twMerge(
-          "fixed z-50 m-auto flex w-full transition-all duration-500 lg:max-w-[1100px] lg:px-4 lg:pt-4",
+          "fixed z-50 flex w-full transition-all duration-500",
         )}
       >
-        <div
-          className={twMerge(
-            "m-auto flex h-[4rem] min-h-[4rem] w-full px-5 py-2 align-middle transition-all duration-500 lg:rounded-3xl lg:border lg:border-transparent",
-            isScrolled &&
-              "border-b border-light-300 bg-light-50/80 opacity-100 shadow-sm backdrop-blur-[10px] dark:border-dark-300 dark:bg-dark-50/90 lg:rounded-2xl lg:border",
-            !isScrolled && "bg-transparent opacity-90",
-          )}
-        >
-          <div className="flex w-full items-center justify-between lg:px-4">
+        <div className="flex h-[4rem] min-h-[4rem] w-full border-b border-light-300 bg-light-50/80 px-5 py-2 align-middle opacity-100 shadow-sm backdrop-blur-[10px] transition-all duration-500 dark:border-dark-300 dark:bg-dark-50/90">
+          <div className="mx-auto flex w-full max-w-[1100px] items-center justify-between lg:px-4">
             <div className="my-auto flex items-center justify-between">
               <Link href="/">
-                <h1 className="w-[200px] text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                <h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000 lg:w-[200px]">
                   kan.bn
                 </h1>
               </Link>
             </div>
             {/* Desktop Menu */}
             <div className="hidden justify-center gap-10 dark:text-dark-1000 lg:flex">
-              {menuItems.map((item) => (
+              {desktopMenuItems.map((item) => (
                 <Link
                   key={item.label}
                   href={item.href}
@@ -66,42 +94,38 @@ const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
                 </Link>
               ))}
             </div>
-            {/* Hamburger Menu Button */}
-            <button
-              onClick={toggleMenu}
-              className="z-50 p-2 lg:hidden"
-              aria-label={t`Toggle menu`}
-            >
-              <div
-                className={twMerge(
-                  "my-[5px] h-[2px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
-                  isMenuOpen ? "translate-y-[7px] rotate-45" : "",
+            <div className="flex items-center justify-end gap-4 lg:w-[200px]">
+              <div className="justify-end gap-2">
+                {isLoggedIn ? (
+                  <Button href="/boards">{t`Go to app`}</Button>
+                ) : (
+                  <div className="flex items-center justify-end gap-2">
+                    <Button href="/login" variant="ghost">
+                      {t`Sign in`}
+                    </Button>
+                    <Button href="/signup">{t`Get started`}</Button>
+                  </div>
                 )}
-              />
-              <div
-                className={twMerge(
-                  "my-[5px] ml-[4px] h-[2px] w-3 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
-                  isMenuOpen ? "opacity-0" : "",
-                )}
-              />
-              <div
-                className={twMerge(
-                  "my-[5px] h-[2px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
-                  isMenuOpen ? "-translate-y-[7px] -rotate-45" : "",
-                )}
-              />
-            </button>
-            <div className="hidden w-[200px] justify-end gap-2 lg:flex">
-              {isLoggedIn ? (
-                <Button href="/boards">{t`Go to app`}</Button>
-              ) : (
-                <>
-                  <Button href="/login" variant="ghost">
-                    {t`Sign in`}
-                  </Button>
-                  <Button href="/signup">{t`Get started`}</Button>
-                </>
-              )}
+              </div>
+              {/* Hamburger Menu Button */}
+              <button
+                onClick={toggleMenu}
+                className="relative z-50 p-2 lg:hidden"
+                aria-label={t`Toggle menu`}
+              >
+                <div
+                  className={twMerge(
+                    "absolute left-1/2 top-1/2 h-[1px] w-4 -translate-x-1/2 -translate-y-[4px] bg-current bg-light-1000 transition-all duration-300 ease-in-out dark:bg-dark-1000",
+                    isMenuOpen ? "translate-y-0 rotate-45" : "",
+                  )}
+                />
+                <div
+                  className={twMerge(
+                    "absolute left-1/2 top-1/2 h-[1px] w-4 -translate-x-1/2 translate-y-[4px] bg-current bg-light-1000 transition-all duration-300 ease-in-out dark:bg-dark-1000",
+                    isMenuOpen ? "translate-y-0 -rotate-45" : "",
+                  )}
+                />
+              </button>
             </div>
           </div>
         </div>
@@ -114,35 +138,27 @@ const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
             : "pointer-events-none translate-x-0 opacity-0"
         }`}
       >
-        <div className="absolute inset-0 bg-white dark:bg-dark-100">
-          <div className="flex h-full flex-col items-center justify-center space-y-8">
-            {menuItems.map((item) => (
-              <Link
-                key={item.label}
-                href={item.href}
-                target={item.openInNewTab ? "_blank" : undefined}
-                rel={item.openInNewTab ? "noopener noreferrer" : undefined}
-                className="transform text-xl font-bold text-light-1000 transition-all duration-300 hover:scale-105 dark:text-dark-1000"
-              >
-                {item.label}
-              </Link>
+        <div className="absolute inset-0 bg-light-50/80 bg-white backdrop-blur-[15px] dark:bg-dark-50 dark:bg-dark-50/90">
+          <div className="mt-[6rem] flex h-full flex-col space-y-8 px-5">
+            {Object.entries(groupedMenuItems).map(([group, items]) => (
+              <div key={group} className="flex flex-col space-y-4">
+                <div className="text-sm font-bold text-light-900 dark:text-dark-900">
+                  {group}
+                </div>
+                {items.map((item) => (
+                  <Link
+                    key={item.label}
+                    href={item.href}
+                    target={item.openInNewTab ? "_blank" : undefined}
+                    rel={item.openInNewTab ? "noopener noreferrer" : undefined}
+                    className="transform text-lg font-bold text-light-1000 dark:text-dark-1000"
+                    onClick={() => setIsMenuOpen(false)}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
             ))}
-            <div className="mt-8 flex flex-col gap-4">
-              {isLoggedIn ? (
-                <Button href="/boards" onClick={toggleMenu}>
-                  {t`Go to app`}
-                </Button>
-              ) : (
-                <>
-                  <Button href="/login" variant="ghost" onClick={toggleMenu}>
-                    {t`Sign in`}
-                  </Button>
-                  <Button href="/signup" onClick={toggleMenu}>
-                    {t`Get started`}
-                  </Button>
-                </>
-              )}
-            </div>
           </div>
         </div>
       </div>

apps/web/src/views/home/components/Layout.tsx

@@ -1,8 +1,10 @@
-import PatternedBackground from "~/components/PatternedBackground";
 import { useTheme } from "next-themes";
+
+import { authClient } from "@kan/auth/client";
+
+import PatternedBackground from "~/components/PatternedBackground";
 import Footer from "./Footer";
 import Header from "./Header";
-import { authClient } from "@kan/auth/client";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { theme } = useTheme();
@@ -18,13 +20,14 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <style jsx global>{`
         html {
           scroll-behavior: smooth;
+          overflow: auto;
           background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
         }
       `}</style>
       <div className="mx-auto flex h-full min-h-screen min-w-[375px] flex-col items-center bg-light-100 dark:bg-dark-50">
         <PatternedBackground />
+        <Header isLoggedIn={isLoggedIn} />
         <div className="z-10 mx-auto h-full w-full max-w-[1100px]">
-          <Header isLoggedIn={isLoggedIn} />
           {children}
         </div>
         <Footer />

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

@@ -2,22 +2,19 @@ import Image from "next/image";
 import Link from "next/link";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { IoLogoGithub, IoLogoHackernews } from "react-icons/io";
+import { useTheme } from "next-themes";
+import { IoLogoGithub } from "react-icons/io";
 
 import Button from "~/components/Button";
 import { PageHead } from "~/components/PageHead";
-import { useTheme } from "next-themes";
 import Cta from "./components/Cta";
 import FAQs from "./components/Faqs";
 import Features from "./components/Features";
 import Layout from "./components/Layout";
-import Pricing from "./components/Pricing";
 
 export default function HomeView() {
   const { resolvedTheme } = useTheme();
 
-  const isDarkMode = resolvedTheme === "dark";
-
   return (
     <Layout>
       <PageHead title="Kan.bn | The open source alternative to Trello" />
@@ -68,7 +65,7 @@ export default function HomeView() {
               </Trans>
             </p>
 
-            <p className="text-md mt-3 max-w-[450px] text-center text-dark-900 lg:max-w-[600px] lg:text-lg">
+            <p className="text-md mt-3 max-w-[450px] text-center text-light-950 dark:text-dark-900 lg:max-w-[600px] lg:text-lg">
               {t`A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place.`}
             </p>
 
@@ -82,7 +79,7 @@ export default function HomeView() {
                 {t`Self host with Github`}
               </Button>
             </div>
-            <p className="mt-4 text-center text-sm text-dark-900">
+            <p className="mt-4 text-center text-sm text-light-950 dark:text-dark-900">
               {t`No credit card required`}
             </p>
           </div>
@@ -111,10 +108,6 @@ export default function HomeView() {
           <div id="features" className="absolute -top-20" />
           <Features theme={resolvedTheme === "dark" ? "dark" : "light"} />
         </div>
-        <div className="relative pt-10">
-          <div id="pricing" className="absolute -top-20" />
-          <Pricing />
-        </div>
         <div className="relative pt-10">
           <div id="faq" className="absolute -top-20" />
           <FAQs />

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

@@ -0,0 +1,171 @@
+import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import LoadingSpinner from "~/components/LoadingSpinner";
+import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
+import { api } from "~/utils/api";
+
+export default function InvitePage() {
+  const router = useRouter();
+  const { code } = router.query;
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { data: session, isPending: isSessionLoading } =
+    authClient.useSession();
+
+  const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
+
+  const inviteCode = Array.isArray(code) ? code[0] : code;
+
+  const acceptInviteMutation = api.member.acceptInviteLink.useMutation({
+    onSuccess: (result) => {
+      if (result.success) {
+        return router.push(
+          `/boards?workspacePublicId=${result.workspacePublicId}`,
+        );
+      }
+    },
+    onError: (error) => {
+      if (error.data?.code === "CONFLICT") {
+        return router.push(`/boards`);
+      }
+
+      setError(
+        error.message ||
+          t`Failed to accept invitation. Please try again later, or contact customer support.`,
+      );
+      setIsProcessing(false);
+    },
+  });
+
+  const {
+    data: inviteInfo,
+    isLoading: isInviteInfoLoading,
+    isError: isInviteInfoError,
+  } = api.member.getInviteByCode.useQuery(
+    { inviteCode: inviteCode ?? "" },
+    {
+      enabled: !!inviteCode,
+      retry: false,
+    },
+  );
+
+  // Auto accept invite if user is logged in
+  useEffect(() => {
+    if (session?.user.id && inviteCode && inviteInfo && !error) {
+      setIsProcessing(true);
+      setError(null);
+
+      acceptInviteMutation.mutate({
+        inviteCode,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session?.user.id, inviteCode, inviteInfo, error]);
+
+  if (
+    !isInviteInfoError &&
+    !error &&
+    (session?.user.id || isInviteInfoLoading || isSessionLoading)
+  ) {
+    return (
+      <>
+        <PageHead title={t`Join workspace`} />
+        <PatternedBackground />
+        <div className="flex min-h-screen items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      </>
+    );
+  }
+
+  const PageWrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <>
+        <PageHead title={t`Join workspace | kan.bn`} />
+        {children}
+      </>
+    );
+  };
+
+  if (isInviteInfoError || (!isInviteInfoLoading && !inviteInfo)) {
+    return (
+      <PageWrapper>
+        <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+          <PatternedBackground />
+          <div className="z-10 w-full max-w-md space-y-8">
+            <div>
+              <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+                {t`Invalid invitation`}
+              </h2>
+              <p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
+                {t`This invitation link is invalid or has expired.`}
+              </p>
+            </div>
+            <div className="text-center">
+              <Button href="/" variant="primary">
+                {t`Go Home`}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PageWrapper>
+    );
+  }
+
+  return (
+    <PageWrapper>
+      <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+        <PatternedBackground />
+        <div className="z-10 w-full max-w-[400px] space-y-8">
+          <div>
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              {t`Join workspace`}
+            </h2>
+            {!error ? (
+              <p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
+                {isCloudEnv
+                  ? t`You've been invited to join a workspace on kan.bn.`
+                  : t`You've been invited to join a workspace.`}
+              </p>
+            ) : (
+              <p className="mt-4 text-center text-sm text-red-500">{error}</p>
+            )}
+          </div>
+          <div className="flex justify-center gap-2">
+            {session?.user.id ? (
+              <Button href={`/boards`} variant="primary" size="md">
+                {t`Go to app`}
+              </Button>
+            ) : (
+              <>
+                <Button
+                  href={`/login?next=/invite/${inviteCode}`}
+                  disabled={isProcessing}
+                  variant="primary"
+                  size="md"
+                >
+                  {t`Sign In`}
+                </Button>
+                <Button
+                  href={`/signup?next=/invite/${inviteCode}`}
+                  disabled={isProcessing}
+                  variant="primary"
+                  size="md"
+                >
+                  {t`Sign Up`}
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </PageWrapper>
+  );
+}

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

@@ -3,7 +3,12 @@ import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { HiXMark } from "react-icons/hi2";
+import {
+  HiInformationCircle,
+  HiMiniCheck,
+  HiOutlineDocumentDuplicate,
+  HiXMark,
+} from "react-icons/hi2";
 import { z } from "zod";
 
 import type { InviteMemberInput } from "@kan/api/types";
@@ -31,11 +36,17 @@ export function InviteMemberForm({
   userId: string | undefined;
 }) {
   const utils = api.useUtils();
-  const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
+  const [isShareInviteLinkEnabled, setIsShareInviteLinkEnabled] =
+    useState(false);
+  const [inviteLink, setInviteLink] = useState<string>("");
+  const [_isLoadingInviteLink, setIsLoadingInviteLink] = useState(false);
+  const [copied, setCopied] = useState(false);
   const { closeModal } = useModal();
   const { workspace } = useWorkspace();
   const { showPopup } = usePopup();
 
+  const isEmailEnabled = env("NEXT_PUBLIC_DISABLE_EMAIL") !== "true";
+
   const InviteMemberSchema = z.object({
     email: z.string().email({ message: t`Invalid email address` }),
     workspacePublicId: z.string(),
@@ -56,6 +67,21 @@ export function InviteMemberForm({
 
   const refetchBoards = () => utils.board.all.refetch();
 
+  // Fetch active invite link on component mount
+  const { data: activeInviteLink, refetch: _refetchInviteLink } =
+    api.member.getActiveInviteLink.useQuery(
+      { workspacePublicId: workspace.publicId || "" },
+      { enabled: !!workspace.publicId },
+    );
+
+  // Set initial state based on active invite link
+  useEffect(() => {
+    if (activeInviteLink) {
+      setIsShareInviteLinkEnabled(activeInviteLink.isActive);
+      setInviteLink(activeInviteLink.inviteLink ?? "");
+    }
+  }, [activeInviteLink]);
+
   const inviteMember = api.member.invite.useMutation({
     onSuccess: async () => {
       closeModal();
@@ -64,7 +90,7 @@ export function InviteMemberForm({
     },
     onError: (error) => {
       reset();
-      if (!isCreateAnotherEnabled) closeModal();
+      if (!isShareInviteLinkEnabled) closeModal();
 
       if (error.data?.code === "CONFLICT") {
         showPopup({
@@ -82,6 +108,46 @@ export function InviteMemberForm({
     },
   });
 
+  const createInviteLink = api.member.createInviteLink.useMutation({
+    onSuccess: (data) => {
+      setInviteLink(data.inviteLink);
+      setIsLoadingInviteLink(false);
+    },
+    onError: (error) => {
+      setIsLoadingInviteLink(false);
+      setIsShareInviteLinkEnabled(false);
+
+      if (error.data?.code === "FORBIDDEN") {
+        showPopup({
+          header: t`Subscription Required`,
+          message: t`Invite links require a Team or Pro subscription. Please upgrade your workspace.`,
+          icon: "error",
+        });
+      } else {
+        showPopup({
+          header: t`Error creating invite link`,
+          message: t`Please try again later.`,
+          icon: "error",
+        });
+      }
+    },
+  });
+
+  const deactivateInviteLink = api.member.deactivateInviteLink.useMutation({
+    onSuccess: () => {
+      setInviteLink("");
+      setIsLoadingInviteLink(false);
+    },
+    onError: () => {
+      setIsLoadingInviteLink(false);
+      showPopup({
+        header: t`Error deactivating invite link`,
+        message: t`Please try again later.`,
+        icon: "error",
+      });
+    },
+  });
+
   const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
   const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
 
@@ -92,7 +158,7 @@ export function InviteMemberForm({
   let price = t`$10/month`;
   let billingType = t`monthly billing`;
 
-  if (teamSubscription?.periodStart && teamSubscription?.periodEnd) {
+  if (teamSubscription?.periodStart && teamSubscription.periodEnd) {
     const periodStartDate = new Date(teamSubscription.periodStart);
     const periodEndDate = new Date(teamSubscription.periodEnd);
     const diffInDays = Math.round(
@@ -109,6 +175,43 @@ export function InviteMemberForm({
     inviteMember.mutate(member);
   };
 
+  const handleInviteLinkToggle = async () => {
+    setIsLoadingInviteLink(true);
+
+    if (isShareInviteLinkEnabled && workspace.publicId) {
+      // Deactivate invite link
+      await deactivateInviteLink.mutateAsync({
+        workspacePublicId: workspace.publicId,
+      });
+      setIsShareInviteLinkEnabled(false);
+    } else {
+      // Create new invite link
+      await createInviteLink.mutateAsync({
+        workspacePublicId: workspace.publicId,
+      });
+      setIsShareInviteLinkEnabled(true);
+    }
+  };
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(inviteLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+      showPopup({
+        header: t`Invite link copied`,
+        message: t`Invite link copied to clipboard`,
+        icon: "success",
+      });
+    } catch {
+      showPopup({
+        header: t`Error`,
+        message: t`Failed to copy invite link`,
+        icon: "error",
+      });
+    }
+  };
+
   const handleUpgrade = async () => {
     const { data, error } = await authClient.subscription.upgrade({
       plan: "team",
@@ -156,23 +259,53 @@ export function InviteMemberForm({
             <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
           </button>
         </div>
-        <Input
-          id="email"
-          placeholder={t`Email`}
-          disabled={
-            env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-            !hasTeamSubscription &&
-            !hasProSubscription
-          }
-          {...register("email", { required: true })}
-          onKeyDown={async (e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              await handleSubmit(onSubmit)();
+        {isEmailEnabled && (
+          <Input
+            id="email"
+            placeholder={t`Email`}
+            disabled={
+              env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+              !hasTeamSubscription &&
+              !hasProSubscription
             }
-          }}
-          errorMessage={errors.email?.message}
-        />
+            {...register("email", { required: true })}
+            onKeyDown={async (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                await handleSubmit(onSubmit)();
+              }
+            }}
+            errorMessage={errors.email?.message}
+          />
+        )}
+        {(!isEmailEnabled || (isShareInviteLinkEnabled && inviteLink)) && (
+          <div className="my-4">
+            <div className="relative">
+              <Input
+                value={inviteLink}
+                className="pr-10 text-sm text-light-900 dark:text-dark-900"
+                readOnly
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 flex items-center pr-3 text-light-900 hover:text-light-950 dark:text-dark-900 dark:hover:text-dark-950"
+                onClick={copyToClipboard}
+              >
+                {copied ? (
+                  <HiMiniCheck className="h-5 w-5 text-green-600" />
+                ) : (
+                  <HiOutlineDocumentDuplicate className="h-5 w-5" />
+                )}
+              </button>
+            </div>
+            <div className="mt-2 flex items-start gap-1">
+              <HiInformationCircle className="mt-0.5 h-4 w-4 text-dark-900" />
+              <p className="text-xs text-gray-500 dark:text-dark-900">
+                {t`Anyone with this link can join your workspace`}
+              </p>
+            </div>
+          </div>
+        )}
 
         {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
           <div className="mt-3 rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
@@ -202,33 +335,32 @@ 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">
-        {(hasTeamSubscription || hasProSubscription) &&
-          env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
-            <Toggle
-              label={t`Invite another`}
-              isChecked={isCreateAnotherEnabled}
-              onChange={() =>
-                setIsCreateAnotherEnabled(!isCreateAnotherEnabled)
-              }
-            />
-          )}
+        <Toggle
+          label={
+            isShareInviteLinkEnabled
+              ? t`Deactivate invite link`
+              : t`Create invite link`
+          }
+          isChecked={isShareInviteLinkEnabled}
+          disabled={
+            env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+            !hasTeamSubscription &&
+            !hasProSubscription
+          }
+          onChange={handleInviteLinkToggle}
+        />
         <div>
           {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
           !hasTeamSubscription &&
           !hasProSubscription ? (
-            <Button
-              type="button"
-              onClick={handleUpgrade}
-              className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-            >
+            <Button type="button" onClick={handleUpgrade}>
               {t`Upgrade to Team Plan`}
             </Button>
           ) : (
             <Button
               type="submit"
-              disabled={inviteMember.isPending}
+              disabled={inviteMember.isPending || !isEmailEnabled}
               isLoading={inviteMember.isPending}
-              className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
             >
               {t`Invite member`}
             </Button>

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

@@ -1,6 +1,12 @@
+import Link from "next/link";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
+import { useEffect, useState } from "react";
+import {
+  HiBolt,
+  HiEllipsisHorizontal,
+  HiOutlinePlusSmall,
+} from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 import type { Subscription } from "@kan/shared/utils";
@@ -124,9 +130,9 @@ export default function MembersPage() {
                 {memberRole &&
                   memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
               </span>
-              {memberStatus === "invited" && (
+              {(memberStatus === "invited" || memberStatus === "paused") && (
                 <span className="mt-1 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20 sm:ml-2 sm:mt-0 sm:text-[11px]">
-                  {t`Pending`}
+                  {memberStatus === "invited" ? t`Pending` : t`Paused`}
                 </span>
               )}
             </div>
@@ -168,30 +174,45 @@ export default function MembersPage() {
       <PageHead title={t`Members | ${workspace.name ?? "Workspace"}`} />
       <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
         <div className="mb-8 flex w-full justify-between">
-          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-            {t`Members`}
-          </h1>
+          <div className="flex items-center gap-3">
+            <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+              {t`Members`}
+            </h1>
+          </div>
           <div className="flex items-center gap-3">
             {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
-              <div
-                className={twMerge(
-                  "flex items-center rounded-full border px-3 py-1 text-center text-xs",
-                  teamSubscription || proSubscription
-                    ? "border-emerald-300 bg-emerald-50 text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
-                    : "border-light-300 bg-light-50 text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900",
+              <>
+                {!proSubscription && (
+                  <Link
+                    href="/settings/workspace?upgrade=pro"
+                    className="hidden items-center rounded-full border border-emerald-300 bg-emerald-50 px-3 py-1 text-center text-xs text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 lg:flex"
+                  >
+                    <HiBolt />
+                    <span className="ml-1 font-medium">
+                      {t`Launch offer: Get unlimited members with Pro`}
+                    </span>
+                  </Link>
                 )}
-              >
-                <span className="font-medium">
-                  {proSubscription
-                    ? t`Pro Plan`
-                    : teamSubscription
-                      ? t`Team Plan`
-                      : t`Free Plan`}
-                  {proSubscription && unlimitedSeats && (
-                    <span className="ml-1 text-xs">∞</span>
+                <div
+                  className={twMerge(
+                    "flex items-center rounded-full border px-3 py-1 text-center text-xs",
+                    teamSubscription || proSubscription
+                      ? "border-emerald-300 bg-emerald-50 text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
+                      : "border-light-300 bg-light-50 text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900",
                   )}
-                </span>
-              </div>
+                >
+                  <span className="font-medium">
+                    {proSubscription
+                      ? t`Pro Plan`
+                      : teamSubscription
+                        ? t`Team Plan`
+                        : t`Free Plan`}
+                    {proSubscription && unlimitedSeats && (
+                      <span className="ml-1 text-xs">∞</span>
+                    )}
+                  </span>
+                </div>
+              </>
             )}
             <Button
               onClick={() => openModal("INVITE_MEMBER")}

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

@@ -0,0 +1,297 @@
+import { t } from "@lingui/core/macro";
+import { HiCheckCircle, HiXCircle } from "react-icons/hi2";
+
+interface Feature {
+  key: string;
+  label: string;
+  kan: boolean | string;
+  trello: boolean | string;
+}
+
+interface Section {
+  name: string;
+  features: Feature[];
+}
+
+type FrequencyValue = "monthly" | "annually";
+
+const CellValue = ({ value }: { value: boolean | string }) => {
+  if (typeof value === "string") {
+    return (
+      <span className="text-sm text-dark-900 dark:text-dark-900">{value}</span>
+    );
+  }
+  return value ? (
+    <HiCheckCircle className="h-5 w-5 text-light-950 dark:text-dark-1000" />
+  ) : (
+    <HiXCircle className="h-5 w-5 text-light-700 dark:text-dark-600" />
+  );
+};
+
+const FeatureComparisonTable = ({
+  frequencyValue,
+}: {
+  frequencyValue: FrequencyValue;
+}) => {
+  const sections: Section[] = [
+    {
+      name: t`Core features`,
+      features: [
+        {
+          key: "ulimited-workspaces",
+          label: t`Unlimited workspaces`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "unlimited-boards",
+          label: t`Unlimited boards`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "unlimited-lists",
+          label: t`Unlimited lists`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "unlimited-cards",
+          label: t`Unlimited cards`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "activity-log",
+          label: t`Activity log`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "templates",
+          label: t`Custom templates`,
+          kan: true,
+          trello: false,
+        },
+        { key: "labels", label: t`Labels & filters`, kan: true, trello: true },
+        { key: "checklists", label: t`Checklists`, kan: true, trello: true },
+        {
+          key: "import",
+          label: t`Import from Trello`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "visibility",
+          label: t`Board visibility`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "search",
+          label: t`Intelligent search`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "workspace-url",
+          label: t`Custom workspace link`,
+          kan: true,
+          trello: false,
+        },
+      ],
+    },
+    {
+      name: t`Teams`,
+      features: [
+        {
+          key: "pricing",
+          label: t`Price per user/month`,
+          kan: frequencyValue === "monthly" ? `$10.00` : `$8.00`,
+          trello: frequencyValue === "monthly" ? `$12.00` : `$10.00`,
+        },
+        {
+          key: "comments",
+          label: t`Comments & mentions`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "assignments",
+          label: t`Assignees`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "sharing",
+          label: t`Board sharing & invites`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "invite-links",
+          label: t`Invite links`,
+          kan: true,
+          trello: true,
+        },
+      ],
+    },
+    {
+      name: t`Platform`,
+      features: [
+        {
+          key: "api",
+          label: t`REST API`,
+          kan: true,
+          trello: true,
+        },
+        {
+          key: "open-source",
+          label: t`Open source`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "self-hostable",
+          label: t`Self-hostable`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "white-label",
+          label: t`White label`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "performance",
+          label: t`Fast & lightweight`,
+          kan: true,
+          trello: false,
+        },
+        {
+          key: "this-is-a-joke",
+          label: t`Owned by Atlassian`,
+          kan: false,
+          trello: true,
+        },
+      ],
+    },
+  ];
+
+  const products = [
+    {
+      id: "kan",
+      name: t`Kan`,
+      featured: true,
+    },
+    {
+      id: "trello",
+      name: t`Trello`,
+      featured: false,
+    },
+  ];
+
+  return (
+    <section aria-labelledby="comparison-heading" className="w-full px-4">
+      <div className="mx-auto max-w-6xl py-8 lg:py-10">
+        <div className="grid grid-cols-3 gap-x-8 border-t border-light-500 before:block dark:border-dark-300">
+          {products.map((product) => (
+            <div key={product.id} aria-hidden="true" className="-mt-px">
+              <div
+                className={`${product.featured ? "border-dark-200 dark:border-dark-800" : "border-transparent"} border-t-2 pt-8`}
+              >
+                <p
+                  className={`${product.featured ? "text-dark-50 dark:text-dark-1000" : "text-light-1000 dark:text-dark-1000"} text-center text-sm font-semibold`}
+                >
+                  {product.name}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="-mt-6 space-y-12">
+          {sections.map((section) => (
+            <div key={section.name}>
+              <h4 className="text-sm font-semibold text-light-1000 dark:text-dark-1000">
+                {section.name}
+              </h4>
+              <div className="relative -mx-8 mt-8">
+                <div
+                  aria-hidden="true"
+                  className="absolute inset-x-8 inset-y-0 grid grid-cols-3 gap-x-8 before:block"
+                >
+                  {products.map((product) => (
+                    <div
+                      key={product.id}
+                      className={`size-full rounded-lg ${product.featured ? "bg-white shadow-sm dark:bg-dark-50 dark:shadow-none" : ""}`}
+                    />
+                  ))}
+                </div>
+
+                <table className="relative w-full border-separate border-spacing-x-8">
+                  <thead>
+                    <tr className="text-left">
+                      <th scope="col">
+                        <span className="sr-only">{t`Feature`}</span>
+                      </th>
+                      {products.map((p) => (
+                        <th key={p.id} scope="col">
+                          <span className="sr-only">{p.name}</span>
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {section.features.map((feature, featureIdx) => (
+                      <tr key={feature.key}>
+                        <th
+                          scope="row"
+                          className="w-1/3 py-3 pr-4 text-left text-sm font-normal text-light-1000 dark:text-dark-1000"
+                        >
+                          {feature.label}
+                          {featureIdx !== section.features.length - 1 ? (
+                            <div className="absolute inset-x-8 mt-3 h-px bg-light-500 dark:bg-dark-300" />
+                          ) : null}
+                        </th>
+                        {products.map((p) => (
+                          <td
+                            key={p.id}
+                            className="relative w-1/3 px-4 py-0 text-center"
+                          >
+                            <span className="relative inline-flex w-full items-center justify-center py-3">
+                              <CellValue
+                                value={
+                                  p.id === "kan" ? feature.kan : feature.trello
+                                }
+                              />
+                            </span>
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+
+                <div
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-x-8 inset-y-0 grid grid-cols-3 gap-x-8 before:block"
+                >
+                  {products.map((product) => (
+                    <div
+                      key={product.id}
+                      className={`${product.featured ? "ring-1 ring-light-500 dark:ring-dark-800" : "ring-0"} rounded-2xl`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureComparisonTable;

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

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { Radio, RadioGroup } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { useState } from "react";
-import { HiCheckCircle } from "react-icons/hi2";
+import { HiBolt, HiCheckCircle } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 type Frequency = "monthly" | "annually";
@@ -85,14 +85,18 @@ const Pricing = () => {
           <p>{t`Pricing`}</p>
         </div>
 
-        <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
+        <p className="mt-4 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-5xl">
           {t`Simple pricing`}
         </p>
-        <p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
+        <p className="text:md lg:text-md mt-6 max-w-[500px] text-center text-dark-900">
           {t`Get started for free, with no usage limits. For collaboration, upgrade to a plan that fits the size of your team.`}
         </p>
 
-        <div className="mt-16 flex justify-center">
+        <div className="mt-14 flex flex-col items-center justify-center">
+          <div className="mb-8 flex items-center gap-2 rounded-full border bg-white px-4 py-1.5 text-center text-xs font-bold text-gray-800 dark:border-dark-300 dark:bg-dark-1000 dark:text-gray-800 lg:text-sm">
+            <HiBolt />
+            <p>{t`Launch offer: unlimited seats for just $29/month with Pro`}</p>
+          </div>
           <fieldset aria-label={t`Payment frequency`}>
             <RadioGroup
               value={frequency}
@@ -158,14 +162,14 @@ const Pricing = () => {
             <p className="mt-6 flex items-baseline gap-x-1">
               <span
                 className={twMerge(
-                  "text-4xl font-semibold tracking-tight text-light-100",
+                  "text-3xl font-semibold tracking-tight text-light-100",
                   tier.highlighted
                     ? "text-light-50 dark:text-dark-1000"
                     : "text-gray-900 dark:text-dark-1000",
                   !tier.showPrice && "opacity-0",
                 )}
               >
-                {tier.price[frequency?.value || "monthly"]}
+                {tier.price[frequency?.value ?? "monthly"]}
               </span>
               {tier.showPriceSuffix && (
                 <span className="text-sm/6 font-semibold text-light-50 dark:text-dark-900">

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

@@ -0,0 +1,211 @@
+import Link from "next/link";
+import { Radio, RadioGroup } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { HiBolt, HiCheckCircle } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+type FrequencyValue = "monthly" | "annually";
+
+interface Frequency {
+  value: FrequencyValue;
+  label: string;
+  priceSuffix: string;
+}
+
+const Pricing = ({
+  frequency,
+  frequencies,
+  setFrequency,
+}: {
+  frequency: Frequency | undefined;
+  frequencies: Frequency[];
+  setFrequency: (frequency: Frequency) => void;
+}) => {
+  const tiers = [
+    {
+      name: t`Individuals`,
+      id: "tier-individuals",
+      href: "signup",
+      buttonText: t`Get Started`,
+      price: { monthly: t`Free`, annually: t`Free` },
+      description: t`Everything you need, free forever. Unlimited boards, unlimited lists, unlimited cards. Upgrade any time.`,
+      featureHeader: t`Free, forever`,
+      features: [
+        t`1 user`,
+        t`Unlimited boards`,
+        t`Unlimited cards`,
+        t`Custom board templates`,
+        t`Checklists`,
+      ],
+      showPrice: true,
+    },
+    {
+      name: t`Teams`,
+      id: "tier-teams",
+      href: "signup",
+      buttonText: t`Get Started`,
+      price: { monthly: "$10.00", annually: "$8.00" },
+      description: t`Kan is better with a team. Perfect for small and growing teams looking to collaborate.`,
+      featureHeader: t`Everything in the free plan, plus:`,
+      features: [
+        t`Workspace members`,
+        t`Admin roles`,
+        t`Priority email support`,
+        t`Support the development of the project`,
+      ],
+      highlighted: true,
+      showPrice: true,
+      showPriceSuffix: true,
+    },
+    {
+      name: t`Self Host`,
+      id: "tier-self-host",
+      href: "https://github.com/kanbn/kan",
+      buttonText: t`View docs`,
+      price: { monthly: "-", annually: "-" },
+      description: t`Host Kan on your own infrastructure. Ideal for organisations that need complete control over their data.`,
+      featureHeader: t`Complete control and ownership:`,
+      features: [
+        t`Run on your own infrastructure`,
+        t`Own your data`,
+        t`Custom domain`,
+      ],
+      mostPopular: false,
+      showPrice: false,
+    },
+  ];
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center px-4 pb-10">
+        <div className="mt-14 flex flex-col items-center justify-center">
+          <div className="mb-8 flex items-center gap-2 rounded-full border bg-white px-4 py-1.5 text-center text-xs font-bold text-gray-800 dark:border-dark-300 dark:bg-dark-1000 dark:text-gray-800 lg:text-sm">
+            <HiBolt />
+            <p>{t`Launch offer: unlimited seats for just $29/month with Pro`}</p>
+          </div>
+          <fieldset aria-label={t`Payment frequency`}>
+            <RadioGroup
+              value={frequency}
+              onChange={(value) => setFrequency(value)}
+              className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs/5 font-semibold ring-1 ring-inset ring-light-600 dark:ring-dark-600"
+            >
+              {frequencies.map((option) => (
+                <Radio
+                  key={option.value}
+                  value={option}
+                  className={twMerge(
+                    "cursor-pointer rounded-full px-2.5 py-1 text-xs transition-colors lg:text-sm",
+                    frequency?.value === option.value
+                      ? "bg-dark-50 text-white dark:bg-light-50 dark:text-dark-50"
+                      : "text-light-900 hover:bg-light-100 dark:hover:bg-dark-100",
+                  )}
+                >
+                  {option.label}
+                </Radio>
+              ))}
+            </RadioGroup>
+          </fieldset>
+        </div>
+      </div>
+
+      <div className="isolate mx-auto mb-20 grid max-w-md grid-cols-1 gap-8 px-4 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+        {tiers.map((tier) => (
+          <div
+            key={tier.id}
+            className={twMerge(
+              tier.highlighted
+                ? "bg-dark-50 ring-1 ring-dark-50 dark:ring-dark-800"
+                : "bg-light-50 ring-1 ring-light-300 dark:bg-dark-50 dark:ring-dark-300",
+              "rounded-3xl p-8 xl:p-10",
+            )}
+          >
+            <div className="flex items-center justify-between gap-x-4">
+              <h3
+                id={tier.id}
+                className={twMerge(
+                  tier.highlighted
+                    ? "text-dark-1000 dark:text-dark-1000"
+                    : "text-dark-50 dark:text-dark-1000",
+                  "text-lg/8 font-semibold",
+                )}
+              >
+                {tier.name}
+              </h3>
+              {tier.highlighted && frequency?.value === "annually" ? (
+                <p className="rounded-full bg-light-50 px-2.5 py-1 text-[12px] font-semibold text-dark-500 dark:bg-dark-1000 dark:text-dark-50">
+                  -20%
+                </p>
+              ) : null}
+            </div>
+            <p
+              className={twMerge(
+                "mt-4 text-sm/6 text-dark-950 dark:text-dark-900",
+                tier.highlighted ? "text-light-100" : "text-dark-50",
+              )}
+            >
+              {tier.description}
+            </p>
+            <p className="mt-6 flex items-baseline gap-x-1">
+              <span
+                className={twMerge(
+                  "text-3xl font-semibold tracking-tight text-light-100",
+                  tier.highlighted
+                    ? "text-light-50 dark:text-dark-1000"
+                    : "text-gray-900 dark:text-dark-1000",
+                  !tier.showPrice && "opacity-0",
+                )}
+              >
+                {tier.price[frequency?.value ?? "monthly"]}
+              </span>
+              {tier.showPriceSuffix && (
+                <span className="text-sm/6 font-semibold text-light-50 dark:text-dark-900">
+                  {frequency?.priceSuffix}
+                </span>
+              )}
+            </p>
+            <Link
+              href={tier.href}
+              aria-describedby={tier.id}
+              className={twMerge(
+                tier.highlighted
+                  ? "bg-light-50 text-dark-50 shadow-sm dark:bg-dark-1000 dark:text-dark-50"
+                  : "bg-dark-50 text-light-50 dark:bg-dark-200 dark:text-dark-1000",
+                "mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+              )}
+            >
+              {tier.buttonText}
+            </Link>
+            <p
+              className={twMerge(
+                "mt-8 text-sm/6 font-bold",
+                tier.highlighted
+                  ? "text-light-100 dark:text-dark-1000"
+                  : "text-dark-50 dark:text-dark-1000",
+              )}
+            >
+              {tier.featureHeader}
+            </p>
+            <ul
+              role="list"
+              className={twMerge(
+                "mt-2 space-y-3 text-sm/6 text-light-600",
+                tier.highlighted
+                  ? "text-light-100 dark:text-dark-1000"
+                  : "text-dark-50 dark:text-dark-1000",
+              )}
+            >
+              {tier.features.map((feature) => (
+                <li key={feature} className="flex items-center gap-x-3">
+                  <HiCheckCircle className="h-5 w-5" />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Pricing;

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

@@ -0,0 +1,85 @@
+import { t } from "@lingui/core/macro";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+
+import Button from "~/components/Button";
+import { PageHead } from "~/components/PageHead";
+import Cta from "../home/components/Cta";
+import Layout from "../home/components/Layout";
+import FeatureComparisonTable from "./components/FeatureComparisonTable";
+import PricingTiers from "./components/PricingTiers";
+
+type FrequencyValue = "monthly" | "annually";
+
+export default function PricingView() {
+  const { resolvedTheme } = useTheme();
+  const frequencies = [
+    {
+      value: "monthly" as FrequencyValue,
+      label: t`Monthly`,
+      priceSuffix: t`per user/month`,
+    },
+    {
+      value: "annually" as FrequencyValue,
+      label: t`Yearly`,
+      priceSuffix: t`per user/month`,
+    },
+  ];
+
+  const [frequency, setFrequency] = useState(frequencies[1]);
+
+  return (
+    <Layout>
+      <PageHead title={`${t`Pricing`} | kan.bn`} />
+
+      <div className="flex h-full w-full flex-col lg:pt-[5rem]">
+        <div className="w-full pb-10 pt-32 lg:py-32">
+          <div className="flex flex-col items-center justify-center px-4 pb-10">
+            <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
+              <p>{t`Pricing`}</p>
+            </div>
+
+            <p className="mt-4 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-5xl">
+              {t`Simple pricing`}
+            </p>
+            <p className="text:md lg:text-md mt-6 max-w-[500px] text-center text-light-950 dark:text-dark-900">
+              {t`Get started for free, with no usage limits. For collaboration, upgrade to a plan that fits the size of your team.`}
+            </p>
+          </div>
+          <PricingTiers
+            frequency={frequency}
+            frequencies={frequencies}
+            setFrequency={setFrequency}
+          />
+        </div>
+
+        <div className="pb-22 flex flex-col items-center justify-center px-4">
+          <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
+            <p>{t`Features`}</p>
+          </div>
+
+          <p className="mt-4 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
+            {t`Feature breakdown`}
+          </p>
+          <p className="text-md lg:text-md my-4 max-w-[500px] text-center text-light-950 dark:text-dark-900">
+            {t`Compare our features to see why Kan is the best choice.`}
+          </p>
+          <div className="mt-2">
+            <Button variant="primary" href="/signup">
+              {t`Get started`}
+            </Button>
+          </div>
+
+          <div className="mt-10 w-full max-w-[900px]">
+            <FeatureComparisonTable
+              frequencyValue={frequency?.value ?? "annually"}
+            />
+          </div>
+        </div>
+        <div className="relative">
+          <Cta theme={resolvedTheme ?? "light"} />
+        </div>
+      </div>
+    </Layout>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import { LanguageSelector } from "~/components/LanguageSelector";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import Avatar from "./components/Avatar";
+import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
+import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
+import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
+
+export default function AccountSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const isCredentialsEnabled =
+    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+  const { data } = api.user.getUser.useQuery();
+
+  return (
+    <>
+      <PageHead title={t`Settings | Account`} />
+
+      <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`Profile picture`}
+        </h2>
+        <Avatar userId={data?.id} userImage={data?.image} />
+
+        <div className="mb-4">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Display name`}
+          </h2>
+          <UpdateDisplayNameForm displayName={data?.name ?? ""} />
+        </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`Language`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Change your language preferences.`}
+          </p>
+          <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`Delete account`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Once you delete your account, there is no going back. This action cannot be undone.`}
+          </p>
+          <div className="mt-4">
+            <Button
+              variant="secondary"
+              onClick={() => openModal("DELETE_ACCOUNT")}
+            >
+              {t`Delete account`}
+            </Button>
+          </div>
+        </div>
+
+        {isCredentialsEnabled && (
+          <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`Change Password`}
+            </h2>
+            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+              {t`You are about to change your password.`}
+            </p>
+            <div className="mt-4">
+              <Button
+                variant="secondary"
+                onClick={() => openModal("CHANGE_PASSWORD")}
+              >
+                {t`Change Password`}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Account-specific modals */}
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
+      >
+        <DeleteAccountConfirmation />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
+      >
+        <ChangePasswordFormConfirmation />
+      </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/ApiSettings.tsx

@@ -0,0 +1,66 @@
+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 ApiKeyList from "./components/ApiKeyList";
+import NewApiKeyModal from "./components/NewApiKeyModal";
+import { RevokeApiKeyConfirmation } from "./components/RevokeApiKeyConfirmation";
+
+export default function ApiSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+
+  return (
+    <>
+      <PageHead title={t`Settings | API`} />
+
+      <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`API keys`}
+        </h2>
+        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+          {t`View and manage your API keys.`}
+        </p>
+
+        <div className="mb-4 flex items-center justify-between">
+          <Button variant="primary" onClick={() => openModal("NEW_API_KEY")}>
+            {t`Create new key`}
+          </Button>
+        </div>
+
+        <ApiKeyList />
+      </div>
+
+      {/* API-specific modals */}
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "NEW_API_KEY"}
+      >
+        <NewApiKeyModal />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "REVOKE_API_KEY"}
+      >
+        <RevokeApiKeyConfirmation />
+      </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/BillingSettings.tsx

@@ -0,0 +1,68 @@
+import { t } from "@lingui/core/macro";
+import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
+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";
+
+export default function BillingSettings() {
+  const { modalContentType, isOpen } = useModal();
+
+  const handleOpenBillingPortal = async () => {
+    try {
+      const response = await fetch("/api/stripe/create_billing_session", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const { url } = (await response.json()) as { url: string };
+
+      if (url) {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Error creating billing session:", error);
+    }
+  };
+
+  return (
+    <>
+      <PageHead title={t`Settings | Billing`} />
+
+      <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`Billing`}
+        </h2>
+        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+          {t`View and manage your billing and subscription.`}
+        </p>
+        <Button
+          variant="primary"
+          iconRight={<HiMiniArrowTopRightOnSquare />}
+          onClick={handleOpenBillingPortal}
+        >
+          {t`Billing portal`}
+        </Button>
+      </div>
+
+      {/* 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/IntegrationsSettings.tsx

@@ -0,0 +1,130 @@
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
+import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
+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 { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+export default function IntegrationsSettings() {
+  const { modalContentType, isOpen } = useModal();
+  const { showPopup } = usePopup();
+
+  const {
+    data: integrations,
+    refetch: refetchIntegrations,
+    isLoading: integrationsLoading,
+  } = api.integration.providers.useQuery();
+
+  const { data: trelloUrl, refetch: refetchTrelloUrl } =
+    api.integration.getAuthorizationUrl.useQuery(
+      { provider: "trello" },
+      {
+        enabled:
+          !integrationsLoading &&
+          !integrations?.some(
+            (integration) => integration.provider === "trello",
+          ),
+        refetchOnWindowFocus: true,
+      },
+    );
+
+  useEffect(() => {
+    const handleFocus = () => {
+      refetchIntegrations();
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [refetchIntegrations]);
+
+  const { mutateAsync: disconnectTrello } =
+    api.integration.disconnect.useMutation({
+      onSuccess: () => {
+        refetchIntegrations();
+        refetchTrelloUrl();
+        showPopup({
+          header: t`Trello disconnected`,
+          message: t`Your Trello account has been disconnected.`,
+          icon: "success",
+        });
+      },
+      onError: () => {
+        showPopup({
+          header: t`Error disconnecting Trello`,
+          message: t`An error occurred while disconnecting your Trello account.`,
+          icon: "error",
+        });
+      },
+    });
+
+  return (
+    <>
+      <PageHead title={t`Settings | Integrations`} />
+
+      <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`Trello`}
+        </h2>
+        {!integrations?.some(
+          (integration) => integration.provider === "trello",
+        ) && trelloUrl ? (
+          <>
+            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+              {t`Connect your Trello account to import boards.`}
+            </p>
+            <Button
+              variant="primary"
+              iconRight={<HiMiniArrowTopRightOnSquare />}
+              onClick={() =>
+                window.open(
+                  trelloUrl.url,
+                  "trello_auth",
+                  "height=800,width=600",
+                )
+              }
+            >
+              {t`Connect Trello`}
+            </Button>
+          </>
+        ) : (
+          integrations?.some(
+            (integration) => integration.provider === "trello",
+          ) && (
+            <>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`Your Trello account is connected.`}
+              </p>
+              <Button
+                variant="secondary"
+                onClick={() => disconnectTrello({ provider: "trello" })}
+              >
+                {t`Disconnect Trello`}
+              </Button>
+            </>
+          )
+        )}
+      </div>
+
+      {/* 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

@@ -0,0 +1,145 @@
+import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
+import { HiBolt } from "react-icons/hi2";
+
+import type { Subscription } from "@kan/shared/utils";
+import { hasActiveSubscription } from "@kan/shared/utils";
+
+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 { api } from "~/utils/api";
+import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
+import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
+import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
+import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
+import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
+
+export default function WorkspaceSettings() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const { workspace } = useWorkspace();
+  const router = useRouter();
+  const { data } = api.user.getUser.useQuery();
+  const [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
+
+  const { data: workspaceData } = api.workspace.byId.useQuery({
+    workspacePublicId: workspace.publicId,
+  });
+
+  const subscriptions = workspaceData?.subscriptions as
+    | Subscription[]
+    | undefined;
+
+  // Open upgrade modal if upgrade=pro is in URL params
+  useEffect(() => {
+    if (
+      router.query.upgrade === "pro" &&
+      env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+      !hasActiveSubscription(subscriptions, "pro") &&
+      !hasOpenedUpgradeModal
+    ) {
+      openModal("UPGRADE_TO_PRO");
+      setHasOpenedUpgradeModal(true);
+    }
+  }, [router.query.upgrade, subscriptions, openModal, hasOpenedUpgradeModal]);
+
+  return (
+    <>
+      <PageHead title={t`Settings | Workspace`} />
+
+      <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`Workspace name`}
+        </h2>
+        <UpdateWorkspaceNameForm
+          workspacePublicId={workspace.publicId}
+          workspaceName={workspace.name}
+        />
+
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Workspace URL`}
+        </h2>
+        <UpdateWorkspaceUrlForm
+          workspacePublicId={workspace.publicId}
+          workspaceUrl={workspace.slug ?? ""}
+          workspacePlan={workspace.plan ?? "free"}
+        />
+
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Workspace description`}
+        </h2>
+        <UpdateWorkspaceDescriptionForm
+          workspacePublicId={workspace.publicId}
+          workspaceDescription={workspace.description ?? ""}
+        />
+
+        {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+          !hasActiveSubscription(subscriptions, "pro") && (
+            <div className="my-8">
+              <Button
+                onClick={() => openModal("UPGRADE_TO_PRO")}
+                iconRight={<HiBolt />}
+              >
+                {t`Upgrade to Pro`}
+              </Button>
+            </div>
+          )}
+
+        <div className="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 workspace`}
+          </h2>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+            {t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
+          </p>
+          <div className="mt-4">
+            <Button
+              variant="secondary"
+              onClick={() => openModal("DELETE_WORKSPACE")}
+              disabled={workspace.role !== "admin"}
+            >
+              {t`Delete workspace`}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Workspace-specific modals */}
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
+      >
+        <DeleteWorkspaceConfirmation />
+      </Modal>
+      <Modal
+        modalSize="sm"
+        isVisible={isOpen && modalContentType === "UPGRADE_TO_PRO"}
+      >
+        <UpgradeToProConfirmation
+          userId={data?.id ?? ""}
+          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/components/ApiKeyList.tsx

@@ -0,0 +1,202 @@
+import { useQuery } from "@tanstack/react-query";
+import { HiEllipsisHorizontal } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+import { authClient } from "@kan/auth/client";
+
+import Dropdown from "~/components/Dropdown";
+import { useModal } from "~/providers/modal";
+
+export default function ApiKeyList() {
+  const { openModal } = useModal();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["apiKeys"],
+    queryFn: () => authClient.apiKey.list(),
+  });
+
+  const TableRow = ({
+    keyId,
+    keyName,
+    keyStart,
+    createdAt,
+    lastRequest,
+    isLastRow,
+    showSkeleton,
+  }: {
+    keyId?: string;
+    keyName?: string | null | undefined;
+    keyStart?: string | null | undefined;
+    createdAt?: Date | null;
+    lastRequest?: Date | null;
+    isLastRow?: boolean | undefined;
+    showSkeleton?: boolean | undefined;
+  }) => {
+    const formatDate = (date?: Date | string | null) => {
+      if (!date) return "Never";
+      const dateObj = date instanceof Date ? date : new Date(date);
+      return dateObj.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    };
+
+    return (
+      <tr className="rounded-b-lg">
+        <td className={twMerge("w-[30%]", isLastRow ? "rounded-bl-lg" : "")}>
+          <div className="flex items-center p-4">
+            <div className="ml-2 min-w-0 flex-1">
+              <div>
+                <div className="flex items-center">
+                  <p
+                    className={twMerge(
+                      "mr-2 text-sm font-medium text-light-900 dark:text-dark-900",
+                      showSkeleton &&
+                        "md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+                    )}
+                  >
+                    {keyName}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        <td className="w-[20%] px-3 py-4">
+          <p
+            className={twMerge(
+              "text-sm text-light-900 dark:text-dark-900",
+              showSkeleton &&
+                "h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+            )}
+          >
+            {formatDate(createdAt)}
+          </p>
+        </td>
+        <td className="w-[20%] px-3 py-4">
+          <p
+            className={twMerge(
+              "text-sm text-light-900 dark:text-dark-900",
+              showSkeleton &&
+                "h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+            )}
+          >
+            {formatDate(lastRequest)}
+          </p>
+        </td>
+        <td className="w-[25%] px-3 py-4">
+          <div>
+            <span
+              className={twMerge(
+                "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20",
+                showSkeleton &&
+                  "h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
+              )}
+            >
+              {keyStart}...
+            </span>
+          </div>
+        </td>
+        <td
+          className={twMerge(
+            "w-[5%] min-w-[50px]",
+            isLastRow && "rounded-br-lg",
+          )}
+        >
+          <div className="flex w-full items-center justify-center px-3">
+            <div className="relative z-50">
+              <Dropdown
+                items={[
+                  {
+                    label: "Revoke",
+                    action: () =>
+                      openModal("REVOKE_API_KEY", keyId, keyName ?? ""),
+                  },
+                ]}
+              >
+                <HiEllipsisHorizontal
+                  size={25}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              </Dropdown>
+            </div>
+          </div>
+        </td>
+      </tr>
+    );
+  };
+
+  if (!isLoading && (!data?.data || data.data.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="mt-8 flow-root">
+      <div className="overflow-x-auto overflow-y-visible">
+        <div className="inline-block min-w-full py-2 pb-12 align-middle">
+          <div className="relative h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+            <table className="min-w-[600px] divide-y divide-light-600 dark:divide-dark-600">
+              <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
+                <tr>
+                  <th
+                    scope="col"
+                    className="w-[30%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
+                  >
+                    Name
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    Created
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    Last Used
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[25%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    Key
+                  </th>
+                  <th
+                    scope="col"
+                    className="w-[5%] rounded-tr-lg px-3 py-3.5 text-center text-sm font-semibold text-light-900 dark:text-dark-900"
+                  >
+                    {/* Actions column */}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
+                {!isLoading &&
+                  data?.data?.map((apiKey, index) => (
+                    <TableRow
+                      key={apiKey.id}
+                      keyId={apiKey.id}
+                      keyName={apiKey.name}
+                      keyStart={apiKey.start}
+                      createdAt={apiKey.createdAt}
+                      lastRequest={apiKey.lastRequest}
+                      isLastRow={index === data.data.length - 1}
+                    />
+                  ))}
+
+                {isLoading && (
+                  <>
+                    <TableRow showSkeleton />
+                    <TableRow showSkeleton />
+                    <TableRow showSkeleton isLastRow />
+                  </>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,14 +1,45 @@
 import Image from "next/image";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import ReactCrop from "react-image-crop";
+
+import "react-image-crop/dist/ReactCrop.css";
 
 import { generateUID } from "@kan/shared/utils";
 
+import Button from "~/components/Button";
+import Modal from "~/components/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { getAvatarUrl } from "~/utils/helpers";
 
+interface PercentCrop {
+  unit: "%";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface LocalPixelCrop {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface ReactCropProps {
+  crop: PercentCrop | undefined;
+  onChange: (crop: LocalPixelCrop, percentCrop: PercentCrop) => void;
+  aspect?: number;
+  className?: string;
+  circularCrop?: boolean;
+  children: React.ReactNode;
+}
+
+const AnyReactCrop = ReactCrop as unknown as React.FC<ReactCropProps>;
+
 export default function Avatar({
   userId,
   userImage,
@@ -19,6 +50,13 @@ export default function Avatar({
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const [uploading, setUploading] = useState(false);
+  const [cropDialogOpen, setCropDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [selectedPreviewUrl, setSelectedPreviewUrl] = useState<string | null>(
+    null,
+  );
+  const [crop, setCrop] = useState<PercentCrop>();
+  const imgRef = useRef<HTMLImageElement | null>(null);
 
   const updateUser = api.user.update.useMutation({
     onSuccess: async () => {
@@ -45,24 +83,109 @@ export default function Avatar({
 
   const avatarUrl = userImage ? getAvatarUrl(userImage) : undefined;
 
-  const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    try {
-      event.preventDefault();
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const file = event.target.files?.[0] ?? null;
+    if (!file || !userId) {
+      return showPopup({
+        header: t`Error uploading profile image`,
+        message: t`Please select a file to upload.`,
+        icon: "error",
+      });
+    }
+    // Open crop dialog with preview
+    setSelectedFile(file);
+    const objUrl = URL.createObjectURL(file);
+    setSelectedPreviewUrl(objUrl);
+    setCropDialogOpen(true);
+  };
 
-      const file = event.target.files?.[0];
-
-      if (!file || !userId) {
-        return showPopup({
-          header: t`Error uploading profile image`,
-          message: t`Please select a file to upload.`,
-          icon: "error",
-        });
+  const onImageLoad = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement>) => {
+      const { naturalWidth, naturalHeight } = e.currentTarget;
+      // Create a centered square crop at ~90% of the smaller dimension
+      // Compute width% so that the square fits within the image
+      let widthPercent: number;
+      let heightPercent: number;
+      if (naturalWidth >= naturalHeight) {
+        // landscape: height is limiting
+        heightPercent = 90;
+        widthPercent = (naturalHeight / naturalWidth) * heightPercent;
+      } else {
+        // portrait: width is limiting
+        widthPercent = 90;
+        heightPercent = (naturalWidth / naturalHeight) * widthPercent;
       }
+      const x = (100 - widthPercent) / 2;
+      const y = (100 - heightPercent) / 2;
+      setCrop({ unit: "%", x, y, width: widthPercent, height: heightPercent });
+    },
+    [],
+  );
 
-      const fileExt = file.name.split(".").pop();
-      const fileName = `${userId}/avatar-${generateUID()}.${fileExt}`;
+  const getCroppedBlob = useCallback(async (): Promise<Blob> => {
+    if (!imgRef.current || !crop) throw new Error("No crop to save");
+    const image = imgRef.current;
 
+    const canvas = document.createElement("canvas");
+    const cropXpx = (crop.x / 100) * image.naturalWidth;
+    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));
+    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,
+      cropYpx,
+      cropWpx,
+      cropHpx,
+      0,
+      0,
+      canvas.width / pixelRatio,
+      canvas.height / pixelRatio,
+    );
+
+    const mime = selectedFile?.type ?? "image/jpeg";
+    const blob: Blob = await new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (b) => (b ? resolve(b) : reject(new Error("toBlob failed"))),
+        mime,
+      );
+    });
+    return blob;
+  }, [crop, selectedFile]);
+
+  const resetCropState = useCallback(() => {
+    setCrop(undefined);
+    setSelectedFile(null);
+    if (selectedPreviewUrl) URL.revokeObjectURL(selectedPreviewUrl);
+    setSelectedPreviewUrl(null);
+  }, [selectedPreviewUrl]);
+
+  const handleCancelCrop = useCallback(() => {
+    setCropDialogOpen(false);
+    resetCropState();
+  }, [resetCropState]);
+
+  const handleSaveCrop = useCallback(async () => {
+    try {
+      if (!userId || !selectedFile) return;
       setUploading(true);
+      const blob = await getCroppedBlob();
+
+      const originalExt = selectedFile.name.split(".").pop() ?? "jpg";
+      const fileName = `${userId}/avatar-${generateUID()}.${originalExt}`;
 
       const response = await fetch(
         env("NEXT_PUBLIC_BASE_URL") + "/api/upload/image",
@@ -71,26 +194,24 @@ export default function Avatar({
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ filename: fileName, contentType: file.type }),
+          body: JSON.stringify({ filename: fileName, contentType: blob.type }),
         },
       );
 
       if (!response.ok) throw new Error("Failed to get pre-signed URL");
 
-      const { url } = (await response.json()) as {
-        url: string;
-      };
+      const { url } = (await response.json()) as { url: string };
 
       const uploadResponse = await fetch(url, {
         method: "PUT",
-        body: file,
+        body: blob,
       });
 
       if (!uploadResponse.ok) throw new Error("Failed to upload profile image");
 
-      updateUser.mutate({
-        image: fileName,
-      });
+      updateUser.mutate({ image: fileName });
+      setCropDialogOpen(false);
+      resetCropState();
     } catch (error) {
       console.error(error);
       showPopup({
@@ -101,7 +222,14 @@ export default function Avatar({
     } finally {
       setUploading(false);
     }
-  };
+  }, [
+    getCroppedBlob,
+    resetCropState,
+    selectedFile,
+    showPopup,
+    updateUser,
+    userId,
+  ]);
 
   return (
     <div>
@@ -111,7 +239,7 @@ export default function Avatar({
           type="file"
           id="single"
           accept="image/*"
-          onChange={uploadAvatar}
+          onChange={onFileChange}
           disabled={uploading}
         />
         {avatarUrl ? (
@@ -134,6 +262,56 @@ export default function Avatar({
           </span>
         )}
       </div>
+
+      {/* Crop Dialog */}
+      {cropDialogOpen && (
+        <Modal modalSize="md" positionFromTop="sm" isVisible>
+          <div className="p-4 sm:p-6">
+            <div className="mb-4">
+              <h3 className="text-base font-semibold text-light-1000 dark:text-dark-1000">
+                {t`Crop your avatar`}
+              </h3>
+              <p className="mt-1 text-sm text-light-800 dark:text-dark-800">
+                {t`Adjust the square crop to fit your avatar.`}
+              </p>
+            </div>
+            <div className="max-h-[80vh]">
+              <div className="rounded-md border border-light-600 p-2 dark:border-dark-600">
+                <AnyReactCrop
+                  crop={crop}
+                  onChange={(_crop: LocalPixelCrop, percentCrop: PercentCrop) =>
+                    setCrop(percentCrop)
+                  }
+                  aspect={1}
+                  circularCrop
+                  className="w-full"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    ref={imgRef}
+                    src={selectedPreviewUrl ?? undefined}
+                    alt="Avatar to crop"
+                    onLoad={onImageLoad}
+                    className="h-auto max-h-[50vh] w-full object-contain"
+                  />
+                </AnyReactCrop>
+              </div>
+            </div>
+            <div className="mt-6 flex items-center justify-end gap-2">
+              <Button
+                variant="ghost"
+                onClick={handleCancelCrop}
+                disabled={uploading}
+              >
+                {t`Cancel`}
+              </Button>
+              <Button onClick={handleSaveCrop} isLoading={uploading}>
+                {t`Save`}
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 }

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

@@ -1,60 +0,0 @@
-import { t } from "@lingui/core/macro";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-
-const CreateAPIKeyForm = ({
-  apiKey,
-  refetchUser,
-}: {
-  apiKey:
-    | {
-        id: number;
-        prefix: string | null;
-        key: string;
-      }
-    | null
-    | undefined;
-  refetchUser: () => void;
-}) => {
-  const handleCreateAPIKey = async () => {
-    await authClient.apiKey.create({
-      name: "Kan API Key",
-      prefix: "kan_",
-    });
-
-    refetchUser();
-  };
-
-  const handleRevokeAPIKey = async () => {
-    if (!apiKey) return;
-    await authClient.apiKey.delete({
-      keyId: apiKey.id.toString(),
-    });
-
-    refetchUser();
-  };
-
-  return (
-    <div>
-      {apiKey ? (
-        <div className="flex gap-2">
-          <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
-            <Input value={apiKey.key} readOnly type="password" />
-          </div>
-          <div>
-            <Button variant="danger" onClick={handleRevokeAPIKey}>
-              {t`Revoke`}
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <Button onClick={handleCreateAPIKey}>{t`Create new key`}</Button>
-      )}
-    </div>
-  );
-};
-
-export default CreateAPIKeyForm;

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

@@ -0,0 +1,69 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+
+const newApiKeySchema = z.object({
+  name: z.string().min(1),
+});
+
+export default function NewApiKeyForm() {
+  const { openModal } = useModal();
+  const form = useForm({
+    resolver: zodResolver(newApiKeySchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const qc = useQueryClient();
+
+  const createApiKeyMutation = useMutation({
+    mutationFn: ({ name }: { name: string }) =>
+      authClient.apiKey.create({ name, prefix: "kan_" }),
+    onSuccess: ({ data: apiKey }) => {
+      qc.invalidateQueries({
+        queryKey: ["apiKeys"],
+      });
+      openModal("API_KEY_CREATED", apiKey?.key, apiKey?.name ?? "");
+    },
+    onError: () => {
+      form.setError("name", {
+        type: "manual",
+        message: "Failed to create API key",
+      });
+    },
+  });
+
+  const handleSubmit = (data: z.infer<typeof newApiKeySchema>) => {
+    createApiKeyMutation.mutate({ name: data.name });
+  };
+
+  return (
+    <div className="px-2 py-2">
+      <form
+        onSubmit={form.handleSubmit(handleSubmit)}
+        className="flex flex-col gap-2"
+      >
+        <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+          New API key
+        </h2>
+        <Input
+          {...form.register("name")}
+          placeholder="Name"
+          className="w-full"
+          errorMessage={form.formState.errors.name?.message}
+        />
+        <Button type="submit" isLoading={createApiKeyMutation.isPending}>
+          Create
+        </Button>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,181 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  HiInformationCircle,
+  HiMiniCheck,
+  HiOutlineDocumentDuplicate,
+  HiXMark,
+} from "react-icons/hi2";
+import { z } from "zod";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useClipboard } from "~/hooks/useClipboard";
+import { useModal } from "~/providers/modal";
+
+const newApiKeySchema = z.object({
+  name: z
+    .string()
+    .min(1, { message: t`API key name is required` })
+    .max(30, { message: t`API key name cannot exceed 30 characters` }),
+});
+
+export default function NewApiKeyModal() {
+  const { closeModal } = useModal();
+  const { copied, copy } = useClipboard({ timeout: 2000 });
+  const [createdApiKey, setCreatedApiKey] = useState<{
+    key: string;
+    name: string;
+  } | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<z.infer<typeof newApiKeySchema>>({
+    resolver: zodResolver(newApiKeySchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const qc = useQueryClient();
+
+  const createApiKeyMutation = useMutation({
+    mutationFn: ({ name }: { name: string }) =>
+      authClient.apiKey.create({ name, prefix: "kan_" }),
+    onSuccess: ({ data: apiKey }) => {
+      void qc.invalidateQueries({
+        queryKey: ["apiKeys"],
+      });
+      if (apiKey && apiKey.key && apiKey.name) {
+        setCreatedApiKey({
+          key: apiKey.key,
+          name: apiKey.name,
+        });
+      }
+    },
+    onError: () => {
+      // Handle error if needed
+    },
+  });
+
+  const onSubmit = (data: z.infer<typeof newApiKeySchema>) => {
+    createApiKeyMutation.mutate({ name: data.name });
+  };
+
+  useEffect(() => {
+    // Reset state and form when modal opens
+    setCreatedApiKey(null);
+    reset();
+  }, [reset]);
+
+  useEffect(() => {
+    if (!createdApiKey) {
+      const nameElement = document.querySelector<HTMLElement>("#name");
+      if (nameElement) nameElement.focus();
+    }
+  }, [createdApiKey]);
+
+  if (createdApiKey) {
+    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`API key created`}</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="mb-4">
+            <div className="relative">
+              <Input
+                value={createdApiKey.key}
+                className="pr-10 text-sm text-light-900 dark:text-dark-900"
+                readOnly
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 flex items-center pr-3 text-light-900 hover:text-light-950 dark:text-dark-900 dark:hover:text-dark-950"
+                onClick={() => copy(createdApiKey.key)}
+              >
+                {copied ? (
+                  <HiMiniCheck className="h-5 w-5 text-green-600" />
+                ) : (
+                  <HiOutlineDocumentDuplicate className="h-5 w-5" />
+                )}
+              </button>
+            </div>
+            <div className="mt-2 flex items-start gap-1">
+              <HiInformationCircle className="mt-0.5 h-4 w-4 text-dark-900" />
+              <p className="text-xs text-gray-500 dark:text-dark-900">
+                {t`This API key will only be shown once. Please save it in a secure location.`}
+              </p>
+            </div>
+          </div>
+        </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>
+            <Button onClick={() => closeModal()}>{t`Close`}</Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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">{t`New API key`}</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>
+        <Input
+          id="name"
+          placeholder={t`API key name`}
+          {...register("name", { required: true })}
+          errorMessage={errors.name?.message}
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+          }}
+        />
+      </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>
+          <Button type="submit" isLoading={createApiKeyMutation.isPending}>
+            {t`Create API key`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,96 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+
+export function RevokeApiKeyConfirmation() {
+  const { closeModal, entityId, entityLabel } = useModal();
+  const { showPopup } = usePopup();
+  const qc = useQueryClient();
+
+  const [isAcknowledgmentChecked, setIsAcknowledgmentChecked] = useState(false);
+
+  const deleteApiKeyMutation = useMutation({
+    mutationFn: () => authClient.apiKey.delete({ keyId: entityId }),
+    onSuccess: async () => {
+      closeModal();
+      showPopup({
+        header: "API key revoked",
+        message: `Your API key: ${entityLabel} has been revoked.`,
+        icon: "success",
+      });
+      qc.invalidateQueries({
+        queryKey: ["apiKeys"],
+      });
+    },
+    onError: () => {
+      closeModal();
+      showPopup({
+        header: "Error revoking API key",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
+  });
+
+  const handleRevokeApiKey = () => {
+    deleteApiKeyMutation.mutate();
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
+          {`Are you sure you want to revoke this API key: ${entityLabel}?`}
+        </h2>
+        <p className="mb-4 text-sm text-light-900 dark:text-dark-900">
+          Keep in mind that this action is irreversible.
+        </p>
+        <p className="text-sm text-light-900 dark:text-dark-900">
+          This will result in the permanent revocation of this API key.
+        </p>
+      </div>
+      <div className="relative flex items-start">
+        <div className="flex h-6 items-center">
+          <input
+            id="acknowledgment"
+            name="acknowledgment"
+            type="checkbox"
+            aria-describedby="acknowledgment-description"
+            className="mt-2 h-[14px] w-[14px] rounded border-gray-300 bg-transparent text-indigo-600 focus:shadow-none focus:ring-0 focus:ring-offset-0"
+            checked={isAcknowledgmentChecked}
+            onChange={() =>
+              setIsAcknowledgmentChecked(!isAcknowledgmentChecked)
+            }
+          />
+        </div>
+        <div className="ml-3 text-sm leading-6">
+          <p
+            id="comments-description"
+            className="text-light-900 dark:text-dark-1000"
+          >
+            I acknowledge that this API key will be permanently revoked and want
+            to proceed.
+          </p>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button variant="secondary" onClick={() => closeModal()}>
+          Cancel
+        </Button>
+        <Button
+          variant="danger"
+          onClick={handleRevokeApiKey}
+          disabled={!isAcknowledgmentChecked}
+          isLoading={deleteApiKeyMutation.isPending}
+        >
+          Revoke API key
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -69,16 +69,18 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={!isDirty || updateDisplayName.isPending}
-          isLoading={updateDisplayName.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={updateDisplayName.isPending}
+            isLoading={updateDisplayName.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -80,16 +80,18 @@ const UpdateWorkspaceDescriptionForm = ({
           errorMessage={errors.description?.message}
         />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={!isDirty || updateWorkspaceDescription.isPending}
-          isLoading={updateWorkspaceDescription.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={updateWorkspaceDescription.isPending}
+            isLoading={updateWorkspaceDescription.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -72,16 +72,18 @@ const UpdateWorkspaceNameForm = ({
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={!isDirty || updateWorkspaceName.isPending}
-          isLoading={updateWorkspaceName.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={updateWorkspaceName.isPending}
+            isLoading={updateWorkspaceName.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -138,22 +138,23 @@ const UpdateWorkspaceUrlForm = ({
           }
         />
       </div>
-      <div>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          variant="primary"
-          disabled={
-            !isDirty ||
-            updateWorkspaceSlug.isPending ||
-            checkWorkspaceSlugAvailability.isPending ||
-            isWorkspaceSlugAvailable?.isAvailable === false ||
-            isTyping
-          }
-          isLoading={updateWorkspaceSlug.isPending}
-        >
-          {t`Update`}
-        </Button>
-      </div>
+      {isDirty && (
+        <div>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            disabled={
+              updateWorkspaceSlug.isPending ||
+              checkWorkspaceSlugAvailability.isPending ||
+              isWorkspaceSlugAvailable?.isAvailable === false ||
+              isTyping
+            }
+            isLoading={updateWorkspaceSlug.isPending}
+          >
+            {t`Update`}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -22,7 +22,7 @@ export function UpgradeToProConfirmation({
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          ...(entityId && { workspaceSlug: entityId }),
+          ...(entityId && { slug: entityId }),
           workspacePublicId: workspacePublicId,
           cancelUrl: "/settings",
           successUrl: "/settings",
@@ -76,9 +76,14 @@ export function UpgradeToProConfirmation({
             </div>
             <div className="flex items-center space-x-3">
               <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
-              <span className="text-sm text-neutral-900 dark:text-dark-1000">
-                {t`Board analytics (coming soon)`}
-              </span>
+              <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 className="flex items-center space-x-3">
               <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
@@ -90,7 +95,12 @@ export function UpgradeToProConfirmation({
         </div>
       </div>
       <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <Button onClick={() => closeModal()} variant="secondary">
+        <Button
+          onClick={() => {
+            closeModal();
+          }}
+          variant="secondary"
+        >
           {t`Cancel`}
         </Button>
         <Button