fix: update modal z-index to ensure proper layering (#177 )

fix: show correct active workspace and truncate name (#175 )
fix: prevent card side menu selectors from closing unexpectedly (#174 )
2025-09-12 20:14:41 +01:00 · 2025-09-11 23:02:48 +01:00 · 2025-09-11 22:48:53 +01:00 · 2025-09-11 22:29:48 +01:00 · 2025-09-11 20:32:02 +01:00 · 2025-09-09 13:42:43 +01:00
217 changed files with 51961 additions and 5022 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,24 +1,43 @@
-POSTGRES_URL=
+# https://github.com/kanbn/kan?tab=readme-ov-file#environment-variables-)

-EMAIL_FROM=
+# 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)
+
+# Fill if you want to use an external database
+POSTGRES_URL= # e.g. postgresql://kan:your_password@your_host:5432/kan
+
+# Only required if deploying from compose
+POSTGRES_PASSWORD=
+
+# SMTP (optional)
 SMTP_HOST=
-SMTP_PORT=
+SMTP_PORT=465
 SMTP_USER=
 SMTP_PASSWORD=
+EMAIL_FROM= # e.g. "Kan <hello@mail.kan.bn>"
+SMTP_SECURE= # set to "false" to use port 587

-NEXT_PUBLIC_BASE_URL=
-NEXT_PUBLIC_STORAGE_URL=
-NEXT_PUBLIC_AVATAR_BUCKET_NAME=
-
+# S3 storage (optional)
 S3_REGION=
 S3_ENDPOINT=
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
+S3_FORCE_PATH_STYLE=
+NEXT_PUBLIC_STORAGE_URL=
+NEXT_PUBLIC_AVATAR_BUCKET_NAME=
+NEXT_PUBLIC_STORAGE_DOMAIN=

-BETTER_AUTH_SECRET=
-BETTER_AUTH_URL=
+# Auth config (optional)
+NEXT_PUBLIC_ALLOW_CREDENTIALS=
+NEXT_PUBLIC_DISABLE_SIGN_UP=
+
+# Integration providers (optional)
+TRELLO_APP_API_KEY=
+TRELLO_APP_SECRET=
+
+# OAuth providers (optional)
 BETTER_AUTH_TRUSTED_ORIGINS=
-
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 DISCORD_CLIENT_ID=
--- a/.gitignore
+++ b/.gitignore
@@ -46,3 +46,10 @@ dist/

 # docker
 docker-compose.override.yml
+
+# runtime env
+__ENV.js
+i18n.cache
+
+# pgdata
+/apps/web/pgdata
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -6,7 +6,7 @@
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm dev",
-      "cwd": "${workspaceFolder}/apps/nextjs",
+      "cwd": "${workspaceFolder}/apps/web",
      "skipFiles": ["<node_internals>/**"],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
@@ -14,4 +14,4 @@
      }
    }
  ]
-}
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,121 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased](https://github.com/kanbn/kan/compare/v0.2.4...HEAD)
+
+## [0.2.4](https://github.com/kanbn/kan/compare/v0.2.3...v0.2.4) - 2025-01-14
+
+### Added
+
+- Button to view and update board public URL directly from board page
+- Redirect from root to login page for self-hosted instances
+
+### Changed
+
+- Updated all label router endpoints to return consistent structure
+- Added verbose error logging to magic link invitation process
+
+### Fixed
+
+- Updated tRPC dependencies and added OpenAPI meta to providers endpoint
+
+## [0.2.3](https://github.com/kanbn/kan/compare/v0.2.2...v0.2.3) - 2025-07-07
+
+### Added
+
+- Mobile support with responsive navigation and layout
+- Template selection when creating new boards with predefined lists and labels
+- S3_FORCE_PATH_STYLE configuration for MinIO compatibility
+
+### Changed
+
+- Improved mobile UI styling and layout containers
+- Enhanced iOS mobile support with viewport fixes and zoom prevention
+- Improved card view layout for mobile devices
+
+### Fixed
+
+- Mobile dashboard min-width issues
+- Dynamic viewport height on mobile devices
+- Scroll functionality on card pages
+
+## [0.2.2](https://github.com/kanbn/kan/compare/v0.2.1...v0.2.2) - 2025-06-28
+
+### Added
+
+- Localization and multi-language support
+- URLs are now rendered as clickable links in card descriptions
+
+### Changed
+
+- Improved email configuration with optional SMTP authentication
+
+## [0.2.1](https://github.com/kanbn/kan/compare/v0.2.0...v0.2.1) - 2025-06-19
+
+### Added
+
+- PostHog analytics integration
+- Debug logging for email functionality
+- Standalone mode support for Next.js
+- Environment variable for configuring web port
+- Docker Compose setup with PostgreSQL
+
+### Changed
+
+- SMTP authentication is now optional
+- Added `SMTP_SECURE` configuration option
+- Improved Docker build process with better context handling
+
+### Fixed
+
+- Default output mode for Next.js builds
+- Container environment variable configuration
+- Docker Compose volume naming
+- Build context and static file copying in Docker
+- Comment rendering inside contenteditable elements
+
+## [0.2.0](https://github.com/kanbn/kan/compare/v0.1.0...v0.2.0) - 2025-06-10
+
+### Added
+
+- Trello integration with OAuth authentication and user field mapping
+- Board visibility controls with dropdown menu and success notifications
+- Markdown editor for card descriptions
+- Email/password authentication for self-hosters
+- Account deletion functionality with cascade delete for workspaces
+- Enhanced scrollbar styles for dark mode
+
+### Changed
+
+- Simplified auth configuration to use `NEXT_PUBLIC_BASE_URL` instead of `BETTER_AUTH_URL`
+- Updated self-hosting documentation
+- Improved database schema with relation names
+
+### Fixed
+
+- List buttons stacking issue
+- Editor onChange prop is now optional
+- Renamed markdown prop to content in Editor component
+- Router navigation for disabled signup redirects
+
+## [0.1.0](https://github.com/kanbn/kan/releases/tag/v0.1.0) - 2025-06-02
+
+### Added
+
+- Initial release of Kan
+- Core project management features
+- Board, list, and card management
+- User authentication system
+- Workspace collaboration
+- Comment system
+- Activity logging
+- Docker deployment support
+- Self-hosting capabilities
+
+### Changed
+
+- Updated license link in footer
--- a/README.md
+++ b/README.md
@@ -47,34 +47,67 @@ See our [roadmap](https://kan.bn/kan/roadmap) for upcoming features.

 ## Self Hosting 🐳

-### PostgreSQL Database Setup
+The easiest way to self-host Kan is with Docker Compose. This will set up everything for you including your postgres database.

-Kan requires a PostgreSQL database. You can run one using the official PostgreSQL Docker image:
+1. Create a new file called `docker-compose.yml` and paste the following configuration:

-```bash
-# Run PostgreSQL in a container using the official postgres image
-docker run -d \
-  --name kan-db \
-  -e POSTGRES_DB=kan \
-  -e POSTGRES_USER=kan_user \
-  -e POSTGRES_PASSWORD=your_secure_password \
-  -p 5432:5432 \
-  -v kan_postgres_data:/var/lib/postgresql/data \
-  postgres:15
+```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

-# Your POSTGRES_URL should be:
-# postgres://kan_user:your_secure_password@your_host:5432/kan
+  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:
 ```

-### Kan Application Deployment
-
-Deploy Kan with Docker using our pre-built image:
+2. Start the containers in detached mode:

 ```bash
-docker pull ghcr.io/kanbn/kan:latest && docker run -it -p 3000:3000 --env-file .env ghcr.io/kanbn/kan:latest
+docker compose up -d
 ```

-Make sure to create a `.env` file with the required environment variables (see the Environment Variables section below).
+3. Access Kan at http://localhost:3000
+
+The application will be running in the background. You can manage the containers using these commands:
+
+- To stop the containers: `docker compose down`
+- To view logs: `docker compose logs -f`
+- To restart the containers: `docker compose restart`
+
+For the complete Docker Compose configuration, see [docker-compose.yml](./docker-compose.yml) in the repository.
+
+> **Note**: The Docker Compose configuration shown above is a minimal example. For a complete setup with all features (email, OAuth, file uploads, etc.), you'll need to create a `.env` file with the required environment variables. See the Environment Variables section below for the full list of available options.

 ## Local Development 🧑‍💻

@@ -105,31 +138,40 @@ pnpm dev

 ## Environment Variables 🔐

-| Variable                         | Description                   | Required          | Example                                       |
-| -------------------------------- | ----------------------------- | ----------------- | --------------------------------------------- |
-| `POSTGRES_URL`                   | PostgreSQL connection URL     | Yes               | `postgres://user:pass@localhost:5432/db`      |
-| `EMAIL_FROM`                     | Sender email address          | Yes               | `"Kan <hello@mail.kan.bn>"`                   |
-| `SMTP_HOST`                      | SMTP server hostname          | Yes               | `smtp.resend.com`                             |
-| `SMTP_PORT`                      | SMTP server port              | Yes               | `465`                                         |
-| `SMTP_USER`                      | SMTP username/email           | Yes               | `resend`                                      |
-| `SMTP_PASSWORD`                  | SMTP password/token           | Yes               | `re_xxxx`                                     |
-| `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_URL`                | Auth callback URL             | Yes               | Same as `NEXT_PUBLIC_BASE_URL`                |
-| `BETTER_AUTH_TRUSTED_ORIGINS`    | Allowed callback origins      | Yes               | `http://localhost:3000,http://localhost:3001` |
-| `GOOGLE_CLIENT_ID`               | Google OAuth client ID        | For Google login  | `xxx.apps.googleusercontent.com`              |
-| `GOOGLE_CLIENT_SECRET`           | Google OAuth client secret    | For Google login  | `xxx`                                         |
-| `DISCORD_CLIENT_ID`              | Discord OAuth client ID       | For Discord login | `xxx`                                         |
-| `DISCORD_CLIENT_SECRET`          | Discord OAuth client secret   | For Discord login | `xxx`                                         |
-| `GITHUB_CLIENT_ID`               | GitHub OAuth client ID        | For GitHub login  | `xxx`                                         |
-| `GITHUB_CLIENT_SECRET`           | GitHub OAuth client secret    | For GitHub login  | `xxx`                                         |
-| `S3_REGION`                      | S3 storage region             | For file uploads  | `WEUR`                                        |
-| `S3_ENDPOINT`                    | S3 endpoint URL               | For file uploads  | `https://xxx.r2.cloudflarestorage.com`        |
-| `S3_ACCESS_KEY_ID`               | S3 access key                 | For file uploads  | `xxx`                                         |
-| `S3_SECRET_ACCESS_KEY`           | S3 secret key                 | For file uploads  | `xxx`                                         |
-| `NEXT_PUBLIC_STORAGE_URL`        | Storage service URL           | For file uploads  | `https://storage.kanbn.com`                   |
-| `NEXT_PUBLIC_STORAGE_DOMAIN`     | Storage domain name           | For file uploads  | `kanbn.com`                                   |
-| `NEXT_PUBLIC_AVATAR_BUCKET_NAME` | S3 bucket name for avatars    | For file uploads  | `avatars`                                     |
+| Variable                                  | Description                                              | Required                 | Example                                                     |
+| ----------------------------------------- | -------------------------------------------------------- | ------------------------ | ----------------------------------------------------------- |
+| `POSTGRES_URL`                            | PostgreSQL connection URL                                | To use external database | `postgres://user:pass@localhost:5432/db`                    |
+| `EMAIL_FROM`                              | Sender email address                                     | For Email                | `"Kan <hello@mail.kan.bn>"`                                 |
+| `SMTP_HOST`                               | SMTP server hostname                                     | For Email                | `smtp.resend.com`                                           |
+| `SMTP_PORT`                               | SMTP server port                                         | For Email                | `465`                                                       |
+| `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_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`               |
+| `GOOGLE_CLIENT_ID`                        | Google OAuth client ID                                   | For Google login         | `xxx.apps.googleusercontent.com`                            |
+| `GOOGLE_CLIENT_SECRET`                    | Google OAuth client secret                               | For Google login         | `xxx`                                                       |
+| `DISCORD_CLIENT_ID`                       | Discord OAuth client ID                                  | For Discord login        | `xxx`                                                       |
+| `DISCORD_CLIENT_SECRET`                   | Discord OAuth client secret                              | For Discord login        | `xxx`                                                       |
+| `GITHUB_CLIENT_ID`                        | GitHub OAuth client ID                                   | For GitHub login         | `xxx`                                                       |
+| `GITHUB_CLIENT_SECRET`                    | GitHub OAuth client secret                               | For GitHub login         | `xxx`                                                       |
+| `OIDC_CLIENT_ID`                          | Generic OIDC client ID                                   | For OIDC login           | `xxx`                                                       |
+| `OIDC_CLIENT_SECRET`                      | Generic OIDC client secret                               | For OIDC login           | `xxx`                                                       |
+| `OIDC_DISCOVERY_URL`                      | OIDC discovery URL                                       | For OIDC login           | `https://auth.example.com/.well-known/openid-configuration` |
+| `TRELLO_APP_API_KEY`                      | Trello app API key                                       | For Trello import        | `xxx`                                                       |
+| `TRELLO_APP_API_SECRET`                   | Trello app API secret                                    | For Trello import        | `xxx`                                                       |
+| `S3_REGION`                               | S3 storage region                                        | For file uploads         | `WEUR`                                                      |
+| `S3_ENDPOINT`                             | S3 endpoint URL                                          | For file uploads         | `https://xxx.r2.cloudflarestorage.com`                      |
+| `S3_ACCESS_KEY_ID`                        | S3 access key                                            | For file uploads         | `xxx`                                                       |
+| `S3_SECRET_ACCESS_KEY`                    | S3 secret key                                            | For file uploads         | `xxx`                                                       |
+| `S3_FORCE_PATH_STYLE`                     | Use path-style URLs for S3                               | For file uploads         | `true`                                                      |
+| `NEXT_PUBLIC_STORAGE_URL`                 | Storage service URL                                      | For file uploads         | `https://storage.kanbn.com`                                 |
+| `NEXT_PUBLIC_STORAGE_DOMAIN`              | Storage domain name                                      | For file uploads         | `kanbn.com`                                                 |
+| `NEXT_PUBLIC_AVATAR_BUCKET_NAME`          | S3 bucket name for avatars                               | For file uploads         | `avatars`                                                   |
+| `NEXT_PUBLIC_ALLOW_CREDENTIALS`           | Allow email & password login                             | For authentication       | `true`                                                      |
+| `NEXT_PUBLIC_DISABLE_SIGN_UP`             | Disable sign up                                          | For authentication       | `false`                                                     |
+| `NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY` | Hide “Powered by kan.bn” on public boards (self-host)    | For white labelling      | `true`                                                      |

 See `.env.example` for a complete list of supported environment variables.

--- a/apps/docs/README.md
+++ b/apps/docs/README.md
@@ -24,9 +24,11 @@ mintlify dev

 ### Publishing Changes

-Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard. 
+Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard.

 #### Troubleshooting

 - Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
 - Page loads as a 404 - Make sure you are running in a folder with `mint.json`
+
+#BUMP
--- a/apps/docs/images/hero-dark.png
+++ b/apps/docs/images/hero-dark.png
--- a/apps/docs/images/hero-light.png
+++ b/apps/docs/images/hero-light.png
--- a/apps/docs/imports/trello.mdx
+++ b/apps/docs/imports/trello.mdx
@@ -3,31 +3,25 @@ title: Trello
 description: "Import your Trello boards to Kan."
 ---

-## Getting your Trello API key and token
+## Authorizing Kan.bn for Trello

-Before you can import your Trello boards, you need to get your Trello API key and token. Follow these steps (only takes a couple of minutes):
+Before you can import your Trello boards, you need to authorize Kan.bn for Trello. Follow these steps (only takes a couple of minutes):

-1. **Sign in to your Trello account**  
-   Go to [https://trello.com](https://trello.com) and log in with your Trello account.
+1. **Authorize Kan.bn for Trello**
+   Go to [https://kan.bn/settings](https://kan.bn/settings) and click **Connect Trello**.

-2. **Create a new integration**  
-   Visit [https://trello.com/power-ups/admin](https://trello.com/power-ups/admin). Click **Create new** and fill in the following details:
+2. **Log in to your Trello account**
+   You will be redirected to Trello to log in to your Trello account.

-   - **Name**: Choose a name for your integration (e.g. "Kan Import")
-   - **Workspace**: Select the workspace containing the boards you want to import
-   - **Email**: Enter your email address
-   - **Support email**: Enter your email address
-   - **Author**: Add your name
+3. **Authorize Kan.bn for Trello**
+   Approve the permissions and you will be redirected back to Kan.bn.

-3. **Get a Trello API Key**  
-   Now click **Generate a new API key** to create an API key.
-
-4. **Generate a Trello Token**  
-   On the same page (to the right of the API key), click the link to **generate a Token**. Approve the permissions and copy your token (make sure to save it somewhere secure like a password manager).
+4. **Verify the connection**
+   You should see a **Disconnect Trello** button.

 ## Importing your Trello boards

-Once you have your API key and token, importing your Trello boards is easy. Follow these steps:
+Once you have authorized Kan.bn for Trello, importing your Trello boards is easy. Follow these steps:

 1. **Create a new import in Kan**  
   Navigate to **[https://kan.bn/boards](https://kan.dev/boards)** and click **Import**.
@@ -35,8 +29,5 @@ Once you have your API key and token, importing your Trello boards is easy. Foll
 2. **Select Trello as the Import Source**  
   Choose **Trello** from the list of import options and click **Select source**.

-3. **Enter Your Trello API Key and Token**  
-   Paste your API key and token into the provided fields and click **Fetch boards** (don't worry, we don't store your key or token).
-
-4. **Start the Import**  
+3. **Start the Import**  
   Select the board you want to import and click **Import boards**. Once the import is complete, you'll see your boards in Kan.
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -53,8 +53,14 @@ RUN --mount=type=cache,id=pnpm,target=~/.pnpm-store pnpm install --frozen-lockfi
 # Copy source code of isolated subworkspace
 COPY --from=pruner /app/out/full/ .

+
 RUN pnpm build --filter=${PROJECT}

+# # Copy static files to standalone directory
+# RUN mkdir -p apps/web/.next/standalone/.next && \
+# mv apps/web/public apps/web/.next/standalone/ && \
+# mv apps/web/.next/static apps/web/.next/standalone/.next/
+
 # 4. Final image - runner stage to run the application
 FROM base AS runner
 ARG APP_DIRNAME
@@ -75,6 +81,4 @@ ARG PORT=3000
 ENV PORT=${PORT}
 EXPOSE ${PORT}

-# Run migration on start for now (until we have a better way to handle this)
-CMD ["sh", "-c", "cd /app && pnpm db:migrate && cd /app/apps/web && pnpm start"]
-
+CMD ["sh", "-c", "if [ -n \"$POSTGRES_URL\" ]; then cd /app && pnpm db:migrate && cd /app/apps/web; fi && pnpm start"]
--- a/apps/web/entrypoint.sh
+++ b/apps/web/entrypoint.sh
@@ -0,0 +1,23 @@
+#!/bin/sh
+
+# Run migrations from the Turborepo root context
+echo "Running database migrations..."
+# Navigate to the Turborepo root to run the db:migrate command
+pnpm --prefix /app db:migrate
+
+# Check if migration was successful
+if [ $? -ne 0 ]; then
+  echo "\nDatabase migration failed! Exiting."
+  exit 1
+fi
+
+echo "\nStarting Next.js application..."
+
+# Check if we should use standalone mode
+if [ "$NEXT_PUBLIC_USE_STANDALONE_OUTPUT" = "true" ]; then
+  echo "Starting in standalone mode..."
+  exec node .next/standalone/apps/web/server.js
+else
+  echo "Starting in standard mode..."
+  exec pnpm start
+fi
--- a/apps/web/i18n.json
+++ b/apps/web/i18n.json
@@ -0,0 +1,13 @@
+{
+  "version": 0,
+  "locale": {
+    "source": "en",
+    "targets": ["fr", "de", "es", "it", "nl"]
+  },
+  "buckets": {
+    "po": {
+      "include": ["src/locales/[locale]/messages.po"]
+    }
+  },
+  "$schema": "https://lingo.dev/schema/i18n.json"
+}
--- a/apps/web/i18n.lock
+++ b/apps/web/i18n.lock
@@ -0,0 +1,481 @@
+version: 1
+checksums:
+  8033ed03a24d7c4898c90a5365297c20:
+    "%20(edited)/singular": 666ee7e6d86957a87c23fa12b21b773f
+    "%2C%20or%20see%20our/singular": e8a8f2a078fcaea03481710dcaccce5d
+    "%7B0%7D%20%7C%20%7B1%7D/singular": 4628f9c6ec13c2dc2984a6ab80e19f8b
+    "%7B0%7D%20labels/singular": 785f92bedf786ff3e285adfc07c69d18
+    "%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%20deleted/singular: a25da96a1579c4491be0a95669ef18a4
+    Activity/singular: 1948763de8e531483a798b68195e297e
+    Activity%20logs/singular: 8b1f0bb96a905646ecfad1cfdfa42168
+    Add%20a%20card/singular: 9d80becc4fe65a74e0004e4fd290735d
+    Add%20a%20comment.../singular: c28cfccc0cc69a2a2487e37eb9988028
+    Add%20an%20item.../singular: f8e7993980420698700b07f56b3a38af
+    Add%20checklist/singular: 05d73200b56cfea75fb3a0f94c9bfb74
+    Add%20description...%20(type%20'%2F'%20to%20open%20commands%20or%20'%40'%20to%20mention)/singular: c6eb35a796dd7ac0e3dbc66244b71248
+    Add%20details.../singular: 2f42547fd5d199f173aa7a88c8a9b19a
+    Add%20label/singular: 0be732d46df263265935fda342097a08
+    Add%20member/singular: 11979625770516ca287e929381778e02
+    added%20a%20checklist/singular: 44304f4a5ef3a46378eea243b5d2df79
+    added%20a%20checklist%20item/singular: 20bc0330dba5a9ec978e04bec174365a
+    added%20a%20label%20to%20the%20card/singular: 04c5e4ee9b7b7e77ef089d2ac473d235
+    added%20a%20member%20to%20the%20card/singular: 95495e770062e2fd590333d56e6308d2
+    added%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: fb6a852c50c1629f47c6f155fc93fdee
+    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
+    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
+    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%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
+    Awaiting%20Customer/singular: 122c108794f321c10e05a08f09b11457
+    Backlog/singular: 35919fd5b10ad212839a75e72829fe4e
+    Basic%20Kanban/singular: e46ebc406749486f3907436970d4d6c7
+    billed%20annually/singular: c782a8085ffee456bfc56c34ccc5e71c
+    billed%20monthly/singular: 793f2728acf06e9f06d6cdc26dfcf0cd
+    Billing/singular: b01dbdd049ebbd4a349fa64d6ce65a3b
+    Billing%20portal/singular: dc3afa14ffe19f5920992a0c9d49d525
+    Blog%20Post/singular: 38e027f212be445dc530e427fc642a20
+    Board/singular: 101ff39aab674c033c15ab978d0d8bac
+    Board%20analytics/singular: 336a8c70a91adc49c15266167ee84cc0
+    Board%20name%20cannot%20exceed%20100%20characters/singular: 985c0177744ec56d8dac84f66ec284ca
+    Board%20name%20is%20required/singular: dbd0c6cc945ab19e702fc27f970a023b
+    Board%20not%20found/singular: 5af9844595fa8aed5985066620435515
+    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
+    Board%20URL%20must%20be%20at%20least%203%20characters%20long/singular: 105f5b4f3b606baf7b5302117022bd68
+    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
+    Cancel/singular: 2e2a849c2223911717de8caa2c71bade
+    Card%20not%20found/singular: 91509e2f92b0b3b11330b6983139fdbf
+    Card%20title/singular: 7c34f59f4005e6cb3a6ff546ea0b96e3
+    Change%20Password/singular: a552fc5c4189ebc3e2e6018edda7d18f
+    Change%20the%20language%20of%20the%20app./singular: fb20db145e28ed44aba89c146ded7bfc
+    Check%20your%20inbox/singular: e9a430fcd298def74212238df0f680d6
+    Checklist%20name/singular: 5eb5de823f7ca5a4d97bb41e6a3f675a
+    Clear%20filters/singular: 8f40ab5af527e4b190da94e7b6221379
+    Click%20on%20the%20link%20we've%20sent%20to%20%7BmagicLinkRecipient%7D%20to%20sign%20in./singular: 210b6ff8727f976182ec3f29ea3c7667
+    Code%20Review/singular: a2da6c2339301e7c3ddf068c4ff9f7e8
+    Collaborate%20seamlessly%20with%20your%20team./singular: c5f10e431aaf8b51519bc009a4a4080c
+    Coming%20soon/singular: ee2b0671e00972773210c5be5a9ccb89
+    Comments/singular: 502237cd1044491c48494aa60967a985
+    Company/singular: 9e36d11fa82d1bd4563eef2abc4fcfba
+    Complete/singular: d3e36d723de0cfdea51c5b4171d30b4d
+    Complete%20control%20and%20ownership%3A/singular: 0d8b682ba873272217425ccfc96aa9cd
+    completed%20a%20checklist%20item/singular: 757b04c6c80cc927e1c597c0ad4fda33
+    completed%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 71ec18acf051fc909a48a07ca3578673
+    Confirm%20your%20new%20password/singular: a0d2935d7b63f8dd19d7c0de47524416
+    Connect%20Trello/singular: 4440a0b9e387ef7136e3958e7a089213
+    Connect%20your%20favorite%20tools%20to%20streamline%20your%20workflow./singular: 033c5dcdb059ccb634aef7fe63f2f45d
+    Connect%20your%20Trello%20account%20to%20import%20boards./singular: 84a510a7485f43e43f2191bd161171d7
+    Contact/singular: 9afa39bc47019ee6dec6c74b6273967c
+    Contact%20us/singular: 694a45bc5c96f6f3a27873c1cf5a7707
+    Content%20Creation/singular: 4e6be22ade0188f408471325fe363575
+    Continue%20with%20/singular: 8ed03cf7c5e60a6edf3470a4558ff058
+    Continue%20with%20%7B0%7D/singular: 2eaf6e1da91e208f7c5fb6bf862fe8a6
+    Control%20who%20can%20view%20and%20edit%20your%20boards./singular: 2a7e0bec29bac26280de707e2fe8bce5
+    Create%20another/singular: 2de8a82a416eb78c0462aa36278edc9a
+    Create%20board/singular: 155b62818bfab0e34f0089e1b34a32f3
+    Create%20card/singular: 32792935dd5837a9433909b04021c22b
+    Create%20checklist/singular: 5cbca15a7004558c4e6d381f83a34da2
+    Create%20label/singular: c64e8180fa956f005edc1fd9b8e65abb
+    Create%20list/singular: 858c3d514aa95765ec82114393199144
+    Create%20new%20board/singular: cbb87b1f4cc46b336ad9510c9f19407c
+    Create%20new%20key/singular: 236bdf75e42b42ec7fb25639bdc035af
+    Create%20new%20label/singular: 6be30980847b577847baa01bb5f29711
+    Create%20new%20list/singular: ce61ca8be7b3f6c26c32b684a42a2c26
+    Create%20workspace/singular: 2e6718e79964ea5ce22d76c2189c77ca
+    created%20the%20card/singular: 605475f5aaeb4dbccbf7c4eb9107b43d
+    Critical/singular: eb327cd411b50aee954f8d1d215d003a
+    Current%20password%20is%20required/singular: 72536bca9598680027f2be8ce80ac280
+    Custom%20domain/singular: b09e7a9c187b7163b4a6cfc78042fe42
+    Custom%20URLs%20require%20upgrading%20to%20a%20Pro%20plan/singular: f7275e3b473b8f7b39dab6b37eb26fea
+    Custom%20workspace%20URL/singular: 7ba841d0946eb04fa3d17d74365be37b
+    Customer%20Support/singular: 50e3c77e22e41061ca85ea2f02625a2e
+    Dark/singular: 73e6e208ba628b26e90fcf6dce15e1b2
+    Delete/singular: 8bcf303dd10a645b5baacb02b47d72c9
+    Delete%20account/singular: a9d11113f1a1d7e20582bdcc9633bcef
+    Delete%20board/singular: e915cd160651ad4b61a67e8da0737c23
+    Delete%20card/singular: 18811ccf76fbb7a2772d648f7c5f0ea7
+    Delete%20comment/singular: a3dae0c9ddbc73677aad9812e3dffd69
+    Delete%20list/singular: b694f58e4c973d8797a78e746b550b1f
+    Delete%20workspace/singular: 9017c821209528d9b20d40a488854cdf
+    deleted%20a%20checklist/singular: c54f922dc6c238c9141c700cb3180baf
+    deleted%20a%20checklist%20item/singular: 2b7a861600102ac5c271dd25c1df261a
+    deleted%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 60f9107197e756487d3f95a1083846b5
+    deleted%20checklist%20item%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 8b7e270f612f9e91bda7f5cfb853d843
+    Design/singular: 991b75727b6784c1a063a7462b76186d
+    Disconnect%20Trello/singular: a2dd737d133887d34504728c7e7f05e3
+    Discuss%20and%20collaborate%20on%20cards./singular: f2e87816709f602130831ead50bba457
+    Display%20name/singular: 725f331065e9d594d720d07b1ae51a90
+    Display%20name%20cannot%20exceed%20280%20characters/singular: 426ddbcc87590e9d028bdca4e585c549
+    Display%20name%20must%20be%20at%20least%203%20characters%20long/singular: 84178b79845a70937af5e26020403052
+    Display%20name%20updated/singular: 4e27503ca24ef5f009713951ca9e5b97
+    Do%20you%20offer%20a%20free%20plan%3F/singular: 3ef16b0994f0d9ae17067782ca9bed1b
+    docs/singular: 307bff5678ada918da1f1ec3edc76cac
+    Docs/singular: 55fea190a0c0fb32acd3dc986cd3cc91
+    Documentation/singular: 1563fcb5ddb5037b0709ccd3dd384a92
+    Don't%20have%20an%20account%3F%20%3C0%3E%3C1%3ESign%20up%3C%2F1%3E%3C%2F0%3E/singular: 6ae8282ab8b4a01b4ce87b119e13714b
+    Done/singular: ffd408fa29d5bc9039ef8ea1b9b699bb
+    Edit%20board%20URL/singular: d8276dfc0189f371ec7d80a2047c07aa
+    Edit%20comment/singular: 7e4b46525fcb6b47b71798e31c46e374
+    Edit%20label/singular: 0309e0be1512b1e0b0ceb87c69a53d03
+    Edit%20workspace%20URL/singular: bbae5f2f8a442947d33099979bbbe899
+    Editing/singular: 3449a7988cd69207b7c6929af1f4abf1
+    email/singular: f31eb214738e037d58e26149797739df
+    Email/singular: e7f34943a0c2fb849db1839ff6ef5cb5
+    Enhancement/singular: 785fe23c0eef0a5b60b5b2a88151de31
+    Enter%20your%20current%20password/singular: bfceabde4c0b6f2cb439015b76549651
+    Enter%20your%20current%20password%20and%20choose%20a%20new%20secure%20password./singular: 9bb88155b18e98ea799c0e939d16af64
+    Enter%20your%20email%20address/singular: 9bc008365ebe3e404e241c8ca876f56e
+    Enter%20your%20name/singular: cd95fbdd0533f2c2e8edf9d9bd9aa8df
+    Enter%20your%20new%20password/singular: c67251e3002b68bc20a7cf5de23e43ac
+    Enter%20your%20password/singular: ea4fdd034522dead21bae0c0abb52eae
+    Error%20Changing%20Password/singular: ebecb5c1b72ba4b063117241f5ba4f2d
+    Error%20deleting%20account/singular: d42965a9bc9e5ec4ed57890268924643
+    Error%20deleting%20label/singular: 94387e3a45ec768ae7715701ae00136e
+    Error%20deleting%20workspace/singular: 0aec9bd8170bc84f5ea5c9a47c52ed26
+    Error%20disconnecting%20Trello/singular: a8766853864eddc480113778a708871b
+    Error%20inviting%20member/singular: 91553b606a6ebed3534cd2e5635ce004
+    Error%20updating%20display%20name/singular: 0d7979a25d290123ed8b8906bf468f1a
+    Error%20updating%20profile%20image/singular: 462a56a6e574abc9e13cb48f1266adad
+    Error%20updating%20workspace%20description/singular: 7a9fd7c69b90ab848ee1f1d4a4995381
+    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%20login%20with%20%7B0%7D.%20Please%20try%20again./singular: 669a4b4247a73f53fb9b8b16e42d166f
+    FAQs/singular: dc36d7992372ccd419b39ef51cf5b16c
+    Feature/singular: 58f5f3f37862b6312a2f20ec1a1fd0e8
+    Feature%20Request/singular: c9de91b9a7020213381977f7d147064f
+    Features/singular: 341ff316a339b106a178f0b8d362951b
+    Feedback/singular: 6fac88806e0c269a30777b283988c61c
+    Feedback%20sent/singular: 38a490c7ad5f1aa6013dfa879d2c7818
+    Filter/singular: 626325a05e4c8800f7ede7012b0cadaf
+    Find%20answers%20to%20common%20questions%20about%20the%20project.%20Can't%20find%20what%20you're%20looking%20for%3F%20Feel%20free%20to%20%3C0%3Econtact%20us%3C%2F0%3E./singular: 4d99230dad703bf2d71ba670c2f79d3d
+    For%20long-term%20sustainability%2C%20we%20recognise%20all%20good%20open%20source%20projects%20need%20a%20source%20of%20revenue.%20Ours%20comes%20from%20the%20paid%20cloud%20offering%20for%20workspaces%20with%20multiple%20users%20(free%20during%20the%20beta)%20and%20for%20custom%20workspace%20slugs.%20There's%20no%20obligation%20to%20use%20it%2C%20and%20you%20can%20self-host%20the%20software%20on%20your%20own%20infrastructure%20free%20of%20charge./singular: 4eedacd4311ff69bf0fd87083c90a268
+    Free/singular: 0326365539c004f6088656f692602078
+    Free%20Plan/singular: c995acccc1e3cba379786892a5b4d4e5
+    Free%2C%20forever/singular: ae4f2f81e88a50b5f250ef8e8e77e74b
+    Full-time/singular: fe6e201f6676ae354111435cf6c76910
+    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%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%20to%20app/singular: 896d0441384dcd2bfb3b23d61ff1944d
+    High%20Priority/singular: 5d231ff8254aabc875f194c4b4f49c97
+    Hired/singular: e5a9b1bd409b007141fe3d7890022f9a
+    Host%20Kan%20on%20your%20own%20infrastructure.%20Ideal%20for%20organisations%20that%20need%20complete%20control%20over%20their%20data./singular: 8e7ae0783d60ef4624d3caf9bfc3747f
+    How%20do%20I%20get%20a%20custom%20URL%3F/singular: 5b28fb95969c0dd19e1b9c9ab8a5fb29
+    How%20do%20I%20import%20my%20Trello%20boards%3F/singular: 44b30a727150cb93364af0a10346012a
+    How%20do%20I%20invite%20team%20members%3F/singular: e620622060a06288e86ccda35395db87
+    How%20do%20I%20self-host%3F/singular: ec0b6afc8ad2f581b512c0fd82926b75
+    How%20is%20the%20project%20funded%3F/singular: ba7e936f7b1b5faa47df59a0ef990092
+    I%20acknowledge%20that%20all%20of%20my%20account%20data%20will%20be%20permanently%20deleted%20and%20want%20to%20proceed./singular: 2ffc824d0b1f9e883c2e87ed4b8b40b6
+    I%20acknowledge%20that%20all%20of%20the%20workspace%20data%20will%20be%20permanently%20deleted%20and%20want%20to%20proceed./singular: fe1183a7439299210d8ab7379b8f4d01
+    Ideas/singular: 27c24b56895defecd10b0171b39bc93f
+    Ideas%20to%20improve%20this%20page.../singular: 285decc2cc28403fae043d9b4de97a00
+    Import/singular: 348b8ab981de5b7f1fca6d7302263bbd
+    Import%20complete/singular: 7e749df6f068b9cdf1055ea38c9a80af
+    Import%20failed/singular: bcec1f271c82ddffc91ebc22021b03cb
+    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%20Progress/singular: 3de9afebcb9d4ce8ac42e14995f79ffd
+    Individuals/singular: 83bfc81f20e60556c44ec80c7d0603ec
+    Integrations/singular: 0ccce343287704cd90150c32e2fcad36
+    Interviewing/singular: 4ccdcdc784547e925077c3297bddee95
+    Invalid%20email%20address/singular: b2d9f25626f2d15c7c63e0281bccc247
+    Invite/singular: 181884cea804cbde665f160811ee7ad0
+    Invite%20another/singular: acb543563dab7edbcf46060a53ade3a3
+    Invite%20member/singular: ade922db1be6b26bc979565ce5de2bc7
+    Inviting%20members%20requires%20a%20Team%20Plan.%20You'll%20be%20redirected%20to%20upgrade%20your%20workspace./singular: 03eeed2d715e770259f722ba48a61ab3
+    Junior/singular: ed1bd2c59a824fdcdd56fc8a0660fe9f
+    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: 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
+    Light/singular: bb78ea2c6edd8662676c81a8a13ecb93
+    Link%20copied/singular: 4a4805700b31ec65bcb3ca962bccfd1b
+    List/singular: 94f13e7ef909a4de9db7abaa1f9f0b61
+    List%20name/singular: e925e2e6ccaf0eb4064a888aaea8d3c2
+    Login%20%7C%20kan.bn/singular: 42a6c8dcd73e0d46e652646dc86871eb
+    Logout/singular: 07948fdf20705e04a7bf68ab197512bf
+    Long-term/singular: 51cb6f0b112250c5a091ca5f0866904b
+    Low%20Priority/singular: 509b5cb7c1e8a185e0aa6d38c64c90e8
+    magic%20link/singular: db9d17a5bd98bba8aa0d8068c68579f3
+    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
+    Members/singular: 0932e80cba1e3e0a7f52bb67ff31da32
+    Members%20%7C%20%7B0%7D/singular: a29e3e9f1076acd178c417d047584e88
+    Monthly/singular: 818f1192e32bb855597f930d3e78806e
+    monthly%20billing/singular: e228107df80015377112d41f4f155cb3
+    moved%20the%20card%20from%20%3C0%3E%7B0%7D%3C%2F0%3E%20to%3C1%3E%7B1%7D%3C%2F1%3E/singular: 11edf0427766c26db541d46379dc3c16
+    moved%20the%20card%20to%20another%20list/singular: 2e8c41bfafb42fa299ce56e4300205ff
+    Name/singular: 9368b5a047572b6051f334af5aa76819
+    Need%20help%3F/singular: 04e7322f2d3ffb2d73ff2f64b71637c8
+    New/singular: 126d036fae5fb6b629728ecb97e6195b
+    New%20board/singular: 63f4e979e29a7fc2f5c09ff91fa75966
+    New%20card/singular: a33f6219a756127f91c2523cfe845a19
+    New%20checklist/singular: 58252b71e9693ae0f4d2d0b72108a569
+    New%20import/singular: e8fddfe15dd170277df919e5d37efd47
+    New%20label/singular: 890040da52a88c16c249a4ac78980f81
+    New%20list/singular: 146c2e642b11056a0b07ed65733e4178
+    New%20password%20is%20required/singular: f88427a4cca058631199a4384cb5622e
+    New%20password%20must%20be%20different%20from%20current%20password/singular: db33013fcc6c40995cf8a37deb3d5667
+    New%20Ticket/singular: 665ff16ec736cba20e8a1b3beb3baa09
+    New%20workspace/singular: 8eecf05b4ce29aa880adfed2e11476af
+    Newsletter/singular: dcfb9666301924431ac8ae88e5b6f9d7
+    Next%20Steps/singular: 12392fe73ae60b6e5a9d851256b8477e
+    No%20boards/singular: e4397619e69b105e4317dda4560ff4a6
+    No%20boards%20found/singular: e044088d2c51b6bdf660fafa86ee1e17
+    No%20credit%20card%20required/singular: 2090aa4171dc0b60735069f89b592883
+    No%20lists/singular: cedf633d99c77ff4356e089f2d98c0a6
+    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
+    or/singular: 7b133c38bec0d5ee23cc6bcf9a8de50b
+    Organize%20and%20find%20cards%20quickly%20with%20powerful%20filtering%20tools./singular: 1b9898c4b21e9dff413b4f76dc59db56
+    Own%20your%20data/singular: cc2178dac4bdf6b07f030cfc2a7510e6
+    Part-time/singular: 213d63da450f35dabb3ab0e35e29feed
+    Password%20Changed/singular: 1fcebe9ddb46f722a57f195efddc695d
+    Password%20must%20be%20at%20least%208%20characters/singular: 4c30501d085eaccea47af34212bb26a7
+    Passwords%20do%20not%20match/singular: 37ca1f4e0afc9a0b8e9617f767103c92
+    Payment%20frequency/singular: 63ded0e4ffb462ca8bd33d38e4691d86
+    Pending/singular: 030a6f3395d5d4efddd3cc67d6009039
+    per%20user%2Fmonth/singular: 72af182c1ba6df6732640f4d8a78d360
+    Personal%20Project/singular: d7820b1bf4efecc61ed89234567aaa9c
+    Planning/singular: 353f58c75248275fe091740607501610
+    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
+    Pricing/singular: ce27f1aeacccc542a174c4b2bce022b0
+    Priority%20email%20support/singular: 678538c912a770b1e1416ecdb8e299b1
+    Privacy%20policy/singular: 462c6a536b52873e4498785c66dd48c8
+    Private/singular: d740d0660e68c61db1853489356030ae
+    Pro%20Plan/singular: 76a09fd843b496610f8cf1dced417b62
+    Pro%20Plan%20%E2%88%9E/singular: a898be9e4610706b9b8146a209e8ba16
+    Profile%20image%20updated/singular: 1ba6609b50bc217a36ab659563e78dae
+    Profile%20picture/singular: d9b5e595877ffe2557486a987dd28274
+    Public/singular: c834f11dab0881632aded3f01d4f8fa9
+    Publishing/singular: d9c8862c0180d9b7bd1272d5dc0d3ac3
+    Question/singular: 0576462ce60d4263d7c482463fcc9547
+    Questions%3F/singular: c7c3a47f8b230ce7a43f3c090f21d683
+    Quick%20Win/singular: a03ff4c0896f14b87455510bab203511
+    Recruitment/singular: 78084ee4954aa22efe9ad7463d2a0c72
+    Remote/singular: dc3e4280dfe5c455b38ba6c8884999cf
+    Remove/singular: dba2fe5fe9f83f8078c687f28cba4b52
+    Remove%20member/singular: 1d77c2ca3768e486fd1fb5df30cb60d9
+    removed%20a%20label%20from%20the%20card/singular: f83ec18850a2a8a3f8242a740a04df06
+    removed%20a%20member%20from%20the%20card/singular: 0bd7561bb79358fde3d595c3e60a315a
+    removed%20label%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 7e0936b15831e65754588b8512f62fcb
+    renamed%20a%20checklist/singular: 4d208de1857740e63469007c5b8b491a
+    renamed%20checklist%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: e95d119ef65b0af6c0a96bef182be671
+    renamed%20checklist%20item%20to%20%3C0%3E%7B0%7D%3C%2F0%3E/singular: 50f55f71f9245890afee434d7adc2140
+    Research/singular: 3368e9638d1619babd6df9fad592274f
+    Resolution/singular: 6d8bd9e1bd7dae5ae38c93061d32990e
+    Resources/singular: ec7fb05ed963bb6781a35782b3475502
+    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
+    Select%20all/singular: eedc7cdb02de467c15dc418a066a77f2
+    Select%20source/singular: c7b0ec447415ff62856803a4d7838bd6
+    Self%20Host/singular: 43fbce2027548b712002e489a20a621a
+    Self%20host%20with%20Github/singular: 972155419bcc9f8f9bad9f5ad3538774
+    self-assigned%20the%20card/singular: 24a8d97bcd747643772ebe883be69698
+    Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
+    Senior/singular: 3fff865dc00435f82896fc302ea45630
+    Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
+    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
+    Sign%20in/singular: cb8757c7450e17de1e226e82fb0fa4a2
+    Sign%20up%20%7C%20kan.bn/singular: f3de2a110c90358e6eac07d0b2f663a6
+    Sign%20up%20disabled/singular: 9581b1f75b404ac0ecb7e603e0d4189c
+    Sign%20up%20is%20currently%20disabled.%20Please%20try%20again%20later./singular: c6cb7c455ec053b351a27029158ff166
+    Sign%20up%20with%20/singular: 103e5d75506e6835b471695d799ff580
+    Simple%20pricing/singular: 5aa2bece93a71947b268498a58062937
+    Simple%2C%20visual%20task%20management%20that%20just%20works.%20Drag%20and%20drop%20cards%2C%20collaborate%20with%20your%20team%2C%20and%20get%20more%20done./singular: f4f138f83017d43dab2882cc08e07bdb
+    Social%20Media/singular: 2227508afb0d38a027e323207e47d4a2
+    Software%20Development/singular: 67659097ef6bcb194839858b2c4f3a3c
+    Star%20on%20Github/singular: e5cb0428f1ac6485688f120d78742875
+    Success/singular: c43827becada6750f7a25890905f38b9
+    Supercharge%20your%20workspace%20for%20just%20%2429%2Fmonth.%20Here's%20what%20you'll%20get%3A/singular: 21af8119141afcce5f12da489f34db6a
+    Support/singular: 55aab5fd0f31a9cb055a2edeeedfaf63
+    Support%20the%20development%20of%20the%20project/singular: c63bab228ab2b1be4370c668a99cd278
+    System/singular: 803281c327a02a2feba182f4a2b38311
+    Team%20Plan/singular: 3f0ae9c914f16ceb9a0d7db868f4aa20
+    Teams/singular: b63448c05270497973ac4407047dae02
+    Templates/singular: 8ed62f56c81fa96c0f3182acb331bf63
+    Terms%20of%20service/singular: 0b8a8b23aff021a6cde79613fdb39c28
+    Thank%20you%20for%20your%20feedback!/singular: 07edd8c50685a52c0969d711df26d768
+    The%20current%20password%20you%20entered%20is%20incorrect./singular: 67a76bf346ab4b48563269e9d941a64a
+    The%20main%20difference%20between%20Kan%20and%20Trello%20is%20that%20Kan%20is%20open%20source%2C%20allowing%20anyone%20to%20view%2C%20modify%2C%20and%20contribute%20to%20our%20code.%20Our%20cloud%20offering%20also%20offers%20no%20restrictions%20on%20features%20for%20individual%20use%2C%20whereas%20Trello%20locks%20basic%20features%20such%20as%20the%20number%20of%20boards%20you%20can%20create%20behind%20a%20paywall./singular: db6e22cc955c5fbe547feedeb48f8719
+    The%20open%20source%20%3C0%2F%3E%20alternative%20to%20Trello/singular: 692cb2e8a8e610953c996826beed45a2
+    The%20visibility%20of%20your%20board%20has%20been%20set%20to%20%7B0%7D./singular: 970e17a115f7374e60e0a8ded425db8f
+    Theme/singular: 21fe00b7a518089576fb83c08631107a
+    They%20won't%20be%20able%20to%20access%20this%20workspace./singular: 93b740350fe3430319fbca85349e41d9
+    This%20action%20can't%20be%20undone./singular: cb222ff89715d8c971e8c25d121e1dbd
+    This%20board%20is%20private%20or%20does%20not%20exist/singular: a217ff3f04463b4df8c86adb6f83c6bc
+    This%20board%20URL%20has%20already%20been%20taken/singular: 1d8b40332a031b5b77a3658e48dd51ca
+    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%20disconnected/singular: 54b24a3e6c9a7eedd8c8d1060ab1175d
+    Trello%20imports/singular: 6827eca403faa8f89891d17827e72af9
+    Triaging/singular: 1d40799fcae53a8a27688fdae2a48dee
+    Unable%20to%20add%20checklist%20item/singular: 4c4c3eaaf10b348b39ae97eb5dc455df
+    Unable%20to%20add%20comment/singular: 49bb435880817434698f31a6069564d6
+    Unable%20to%20create%20card/singular: 90112ea12ec6fa42097a6e022ae048a4
+    Unable%20to%20create%20checklist/singular: 94eed122e42e0951cd08b9ec62f5eeb6
+    Unable%20to%20create%20list/singular: 7fbbf8314f8d08a4123c7daef09fed05
+    Unable%20to%20create%20workspace/singular: c1c949477e121d73ed6683eddf9cd874
+    Unable%20to%20delete%20card/singular: 50ff06aa1265fe464f776aba33f1bef9
+    Unable%20to%20delete%20checklist/singular: d7067e2c009f4919f0cca77df3c228ee
+    Unable%20to%20delete%20checklist%20item/singular: a74144593b625e4d8d7ecf734462c60d
+    Unable%20to%20delete%20comment/singular: 550198b2c87f06726a843c79c1026ed9
+    Unable%20to%20remove%20member/singular: 39025a0c53818438829603d213baef06
+    Unable%20to%20send%20feedback/singular: 656c93265d7e2bef1245b17d85f85ae5
+    Unable%20to%20update%20board%20URL/singular: 080746884059142358b58d9a44ff7d93
+    Unable%20to%20update%20board%20visibility/singular: a76a21d561b8943e9276e027a1e3f70d
+    Unable%20to%20update%20card/singular: eca6002e57af8ec97324eae64e3b5731
+    Unable%20to%20update%20checklist/singular: 44c10f49f448909ceca481ed9b4b07e7
+    Unable%20to%20update%20checklist%20item/singular: 5c86b3523531c30d58856e3ecde0cb55
+    Unable%20to%20update%20comment/singular: 05e798ed6b0f3fee41f3e8832eb699ea
+    Unable%20to%20update%20labels/singular: dca2bdc3dcf74bc9d95e05156039a291
+    Unable%20to%20update%20list/singular: 14aa802f91b9b4c05236c8c75afb33da
+    Unable%20to%20update%20members/singular: 9a851a6b0c75ee16d25cf2ff4b67b255
+    unassigned%20%3C0%3E%7B0%7D%3C%2F0%3E%20from%20the%20card/singular: b683cc07092348c1e75dba40b1262b85
+    unassigned%20themselves%20from%20the%20card/singular: 27c6f293c562af6a44348d7f00036d30
+    Unlimited%20activity%20log/singular: 8c993de94cda0deac19ba14ecafce6a5
+    Unlimited%20boards/singular: cb4fd858137ce825c2f1904d142d8042
+    Unlimited%20boards%2C%20unlimited%20lists%2C%20unlimited%20cards.%20No%20credit%20card%20required./singular: 8d9733137deb26664d76b55ad561c42c
+    Unlimited%20cards/singular: f44c1050c4d6aa39c8cdf5f4a7d12577
+    Unlimited%20comments/singular: 31dbcf487c49a9997142e96bb3ab0040
+    Unlimited%20lists/singular: 5c418701b27b9acbc5dd199719007362
+    Unlimited%20members/singular: f2949ca2dc18b0063af92e60779abb65
+    Update/singular: 079fc039262fd31b10532929685c2d1b
+    Update%20label/singular: 97880b503dfe956941c5f23025a1c102
+    updated%20a%20checklist%20item/singular: 198e1d1d503f4b69b752dd84d0cc0e9d
+    updated%20the%20description/singular: 70fd604b6dc957a75be90ea77572d76d
+    updated%20the%20title/singular: 98cf8f12923ec1a58e767e3a40863b21
+    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
+    URL%20cannot%20exceed%2024%20characters/singular: 395c25732b84ac1f5b63ee310da08e93
+    URL%20must%20be%20at%20least%203%20characters%20long/singular: 1b74ac9ec61fd34b16530ed599009ed1
+    Use%20template/singular: 33f0ca0aa8f4b0de99aad267a61a094d
+    User/singular: 61073457a5c3901084b557d065f876be
+    User%20is%20already%20a%20member%20of%20this%20workspace/singular: bc246386f0975f750f2133222bb4735e
+    Video/singular: 8050c90e4289b105a0780f0fdda6ff66
+    View%20and%20manage%20your%20API%20keys./singular: 88e23ee79056846dd9ce63ceee690549
+    View%20and%20manage%20your%20billing%20and%20subscription./singular: 7469502543aac6f02149813546d1cb38
+    View%20docs/singular: 43ce54f27bb1e3f1880b56e03ab38871
+    View%20only/singular: 21f5f7ba3b49050c4f406113479d6a7a
+    View%20our%20roadmap./singular: 1dd7ec80e1635951b1c90d592d1d07dc
+    View%20workspace/singular: c9e4b789330b08c18ca8db7044409e5f
+    Visibility/singular: 1ff412f8fcde0f460acbf11153649646
+    We%20are%20using%20the%20%3C0%3EAGPL-3.0%20license%3C%2F0%3E./singular: 08c5ddd938a2a70f61d684e41e18697a
+    We're%20just%20getting%20started.%20/singular: 2dfa121e0ff1914e08068308a81973c0
+    Welcome%20back/singular: 4928884739ba559e6e4b960e80fe1452
+    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
+    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
+    Workspace%20description%20must%20be%20at%20least%203%20characters%20long/singular: 5ebac407715e6569adc381ebbb4f32d4
+    Workspace%20description%20updated/singular: 19ddb6ee9ead26982a90dee426f3ee1f
+    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
+    You%20are%20about%20to%20change%20your%20password./singular: df4783d593505766d78c5bc08d3d48ac
+    You%20can%20get%20a%20custom%20workspace%20URL%2C%20like%20%3C0%3Ekan.bn%2Fkan%3C%2F0%3E%2C%20by%20going%20into%20your%20%3C1%3Eworkspace%20settings%3C%2F1%3E%20and%20purchasing%20a%20pro%20workspace%20subscription.%20All%20subscriptions%20help%20fund%20the%20development%20of%20the%20project!/singular: 41dd145ef56f539e12dc064a9807c660
+    You%20can%20invite%20team%20members%20by%20clicking%20the%20%22Invite%22%20button%20in%20the%20top%20right%20corner%20of%20the%20%3C0%3Emembers%20page%3C%2F0%3E%20and%20entering%20their%20email%20address.%20They%20will%20receive%20an%20email%20with%20a%20link%20to%20join%20the%20workspace./singular: 47e125eb9b4c11cab5a2f4b3ab08e883
+    You%20can%20self-host%20by%20following%20the%20instructions%20in%20our%20%3C0%3Erepo%3C%2F0%3E./singular: a6152a41b2d8f64d5a657e5b8bc808a9
+    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
+    Your%20account%20has%20been%20deleted./singular: 8c8d944e07388c5877effdb2c2803dcf
+    Your%20boards%20have%20been%20imported./singular: 403972e7a25afc2415762c1c2b1ec868
+    Your%20display%20name%20has%20been%20updated./singular: 15e5fff36c554c16ec5214427fae1bf4
+    Your%20password%20has%20been%20changed./singular: 8f730f68d52b7efa727aa0784282ebcb
+    Your%20profile%20image%20has%20been%20updated./singular: 099e1780348cd7bf617721344371a430
+    Your%20Trello%20account%20has%20been%20disconnected./singular: 126aeeb73f7e4cad338056e4c933f39b
+    Your%20Trello%20account%20is%20connected./singular: 0499d193001fce2fbec445ae034ce512
+    Your%20workspace%20description%20has%20been%20updated./singular: 98de6f65c567c6654cc0adce3c9d5656
+    Your%20workspace%20has%20been%20deleted./singular: e7a3efcfc7dd18cb3e917acb67498292
+    Your%20workspace%20name%20has%20been%20updated./singular: a87ea3b0d71e6dc5dd525d77114a9322
+    Your%20workspace%20slug%20has%20been%20updated./singular: c808949b9b2b4a9aba2472f5d1050167
--- a/apps/web/lingui.config.ts
+++ b/apps/web/lingui.config.ts
@@ -0,0 +1,15 @@
+import type { LinguiConfig } from "@lingui/conf";
+
+const config: LinguiConfig = {
+  locales: ["en", "fr", "de", "es", "it", "nl"],
+  sourceLocale: "en",
+  catalogs: [
+    {
+      path: "src/locales/{locale}/messages",
+      include: ["src"],
+      exclude: ["**/node_modules/**"],
+    },
+  ],
+};
+
+export default config;
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -10,6 +10,10 @@ configureRuntimeEnv();

 /** @type {import("next").NextConfig} */
 const config = {
+  output:
+    env("NEXT_PUBLIC_USE_STANDALONE_OUTPUT") === "true"
+      ? "standalone"
+      : undefined,
  reactStrictMode: true,

  /** Enables hot reloading for local packages without a build step */
@@ -29,7 +33,10 @@ const config = {
    remotePatterns: [
      {
        protocol: "https",
-        hostname: `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
+        hostname:
+          env("S3_FORCE_PATH_STYLE") === "true"
+            ? `${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`
+            : `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
      },
      {
        protocol: "http",
@@ -42,8 +49,21 @@ const config = {
    ],
  },
  experimental: {
-    instrumentationHook: true,
+    // instrumentationHook: true,
+    swcPlugins: [["@lingui/swc-plugin", {}]],
  },
 };

+// Only allow external images when OIDC is configured (for OIDC provider avatars)
+if (
+  env("OIDC_CLIENT_ID") &&
+  env("OIDC_CLIENT_SECRET") &&
+  env("OIDC_DISCOVERY_URL")
+) {
+  config.images?.remotePatterns?.push({
+    protocol: "https",
+    hostname: "**",
+  });
+}
+
 export default config;
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -4,14 +4,17 @@
  "private": true,
  "type": "module",
  "scripts": {
-    "build": "pnpm next build",
+    "build": "pnpm with-env next build",
    "clean": "git clean -xdf .cache .next .turbo node_modules",
-    "dev": "pnpm with-env next dev | pino-pretty",
+    "dev": "pnpm with-env next dev",
    "format": "prettier --check . --ignore-path ../../.gitignore",
    "lint": "eslint",
    "start": "pnpm with-env next start",
    "typecheck": "tsc --noEmit",
-    "with-env": "dotenv -e ../../.env --"
+    "with-env": "dotenv -e ../../.env --",
+    "lingui:extract": "lingui extract",
+    "lingui:compile": "lingui compile --typescript",
+    "lingui:extract:watch": "lingui extract --watch"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.802.0",
@@ -22,8 +25,20 @@
    "@kan/auth": "workspace:*",
    "@kan/db": "workspace:^",
    "@kan/shared": "workspace:^",
+    "@lingui/babel-preset-react": "^2.9.2",
+    "@lingui/conf": "^5.3.2",
+    "@lingui/macro": "^5.3.2",
+    "@lingui/react": "^5.3.2",
    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tailwindcss/typography": "^0.5.16",
    "@tanstack/react-query": "catalog:",
+    "@tiptap/extension-link": "^2.22.2",
+    "@tiptap/extension-mention": "^3.0.9",
+    "@tiptap/extension-placeholder": "^2.14.0",
+    "@tiptap/pm": "^2.14.0",
+    "@tiptap/react": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
+    "@tiptap/suggestion": "^2.14.0",
    "@trpc/client": "catalog:",
    "@trpc/next": "^11.0.0-rc.660",
    "@trpc/react-query": "catalog:",
@@ -31,20 +46,24 @@
    "aws-sdk": "^2.1692.0",
    "date-fns": "^4.1.0",
    "geist": "^1.3.1",
-    "next": "^14.2.15",
+    "next": "^15.3.4",
    "next-logger": "^5.0.1",
    "next-runtime-env": "^1.7.2",
+    "next-themes": "^0.4.6",
    "nextjs-cors": "^2.2.0",
    "pino": "^9.6.0",
+    "posthog-js": "^1.254.0",
    "react": "catalog:react18",
    "react-beautiful-dnd": "^13.1.1",
    "react-contenteditable": "^3.3.7",
    "react-dom": "catalog:react18",
    "react-hook-form": "^7.51.1",
-    "react-icons": "^4.12.0",
+    "react-icons": "^5.5.0",
    "react-lottie-player": "^1.5.5",
+    "react-markdown": "^10.1.0",
    "superjson": "2.2.1",
    "tailwind-merge": "^2.5.2",
+    "tippy.js": "^6.3.7",
    "zod": "catalog:"
  },
  "devDependencies": {
@@ -53,6 +72,9 @@
    "@kan/stripe": "workspace:*",
    "@kan/tailwind-config": "workspace:*",
    "@kan/tsconfig": "workspace:*",
+    "@lingui/cli": "^5.3.2",
+    "@lingui/loader": "^5.3.2",
+    "@lingui/swc-plugin": "^5.5.2",
    "@types/node": "^20.17.7",
    "@types/react": "catalog:react18",
    "@types/react-beautiful-dnd": "^13.1.7",
--- a/apps/web/public/__ENV.js
+++ b/apps/web/public/__ENV.js
@@ -1 +0,0 @@
-window.__ENV = {"NEXT_PUBLIC_UMAMI_ID":"aaed1f55-25e2-4223-b918-e429c390be35","NEXT_PUBLIC_KAN_ENV":"cloud","NEXT_PUBLIC_BASE_URL":"http://localhost:3000","NEXT_PUBLIC_AVATAR_BUCKET_NAME":"avatars","NEXT_PUBLIC_STORAGE_DOMAIN":"kanbn.com","NEXT_PUBLIC_STORAGE_URL":"https://storage.kanbn.com"};
--- a/apps/web/public/hero-dark.png
+++ b/apps/web/public/hero-dark.png
--- a/apps/web/public/hero-light.png
+++ b/apps/web/public/hero-light.png
--- a/apps/web/src/components/AuthForm.tsx
+++ b/apps/web/src/components/AuthForm.tsx
@@ -1,27 +1,57 @@
+import type { SocialProvider } from "better-auth/social-providers";
 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 { useState } from "react";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { FaDiscord, FaGithub, FaGoogle, FaApple, FaMicrosoft, FaFacebook, FaSpotify, FaTwitch, FaTwitter, FaDropbox, FaLinkedin, FaGitlab, FaTiktok, FaReddit, FaVk } from "react-icons/fa";
+import {
+  FaApple,
+  FaDiscord,
+  FaDropbox,
+  FaFacebook,
+  FaGithub,
+  FaGitlab,
+  FaGoogle,
+  FaLinkedin,
+  FaMicrosoft,
+  FaOpenid,
+  FaReddit,
+  FaSpotify,
+  FaTiktok,
+  FaTwitch,
+  FaTwitter,
+  FaVk,
+} from "react-icons/fa";
 import { SiRoblox, SiZoom } from "react-icons/si";
 import { TbBrandKick } from "react-icons/tb";
 import { z } from "zod";
-import type { SocialProvider } from "better-auth/social-providers";

 import { authClient } from "@kan/auth/client";

 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import { usePopup } from "~/providers/popup";
+
+type AuthProvider = SocialProvider | "oidc";

 interface FormValues {
+  name?: string;
  email: string;
+  password?: string;
 }

 interface AuthProps {
  setIsMagicLinkSent: (value: boolean, recipient: string) => void;
+  isSignUp?: boolean;
 }

-const EmailSchema = z.object({ email: z.string().email() });
+const EmailSchema = z.object({
+  name: z.string().optional(),
+  email: z.string().email(),
+  password: z.string().optional(),
+});

 const availableSocialProviders = {
  google: {
@@ -114,19 +144,34 @@ const availableSocialProviders = {
    name: "Zoom",
    icon: SiZoom,
  },
-}
+  oidc: {
+    id: "oidc",
+    name: "OIDC",
+    icon: FaOpenid,
+  },
+};

-export function Auth({ setIsMagicLinkSent }: AuthProps) {
-  const [isLoginWithProviderPending, setIsLoginWithProviderPending] = useState<
-    null | SocialProvider
-  >(null);
+export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
+  const [isLoginWithProviderPending, setIsLoginWithProviderPending] =
+    useState<null | AuthProvider>(null);
+  const [isCredentialsEnabled, setIsCredentialsEnabled] = useState(false);
  const [isLoginWithEmailPending, setIsLoginWithEmailPending] = useState(false);
  const [loginError, setLoginError] = useState<string | null>(null);
+  const { showPopup } = usePopup();
+  const oidcProviderName = "OIDC";
+
+  // Safely get environment variables on client side to avoid hydration mismatch
+  useEffect(() => {
+    const credentialsAllowed =
+      env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+    setIsCredentialsEnabled(credentialsAllowed);
+  }, []);

  const {
    register,
    handleSubmit,
    formState: { errors },
+    watch,
  } = useForm<FormValues>({
    resolver: zodResolver(EmailSchema),
  });
@@ -136,47 +181,102 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
    queryFn: () => authClient.getSocialProviders(),
  });

-  const handleLoginWithEmail = async (email: string) => {
+  const handleLoginWithEmail = async (
+    email: string,
+    password?: string,
+    name?: string,
+  ) => {
    setIsLoginWithEmailPending(true);
    setLoginError(null);
-    const { error } = await authClient.signIn.magicLink({
-      email,
-      callbackURL: "/boards",
-    });
+    if (password) {
+      if (isSignUp && name) {
+        await authClient.signUp.email(
+          {
+            name,
+            email,
+            password,
+            callbackURL: "/boards",
+          },
+          {
+            onSuccess: () =>
+              showPopup({
+                header: t`Success`,
+                message: t`You have been signed up successfully.`,
+                icon: "success",
+              }),
+            onError: ({ error }) => setLoginError(error.message),
+          },
+        );
+      } else {
+        await authClient.signIn.email(
+          {
+            email,
+            password,
+            callbackURL: "/boards",
+          },
+          {
+            onSuccess: () =>
+              showPopup({
+                header: t`Success`,
+                message: t`You have been logged in successfully.`,
+                icon: "success",
+              }),
+            onError: ({ error }) => setLoginError(error.message),
+          },
+        );
+      }
+    } else {
+      await authClient.signIn.magicLink(
+        {
+          email,
+          callbackURL: "/boards",
+        },
+        {
+          onSuccess: () => setIsMagicLinkSent(true, email),
+          onError: ({ error }) => setLoginError(error.message),
+        },
+      );
+    }

    setIsLoginWithEmailPending(false);
-
-    if (error) {
-      setLoginError(
-        "Something went wrong, please try again later or contact customer support.",
-      );
-    } else {
-      setIsMagicLinkSent(true, email);
-    }
  };

-  const handleLoginWithProvider = async (
-    provider: SocialProvider) => {
+  const handleLoginWithProvider = async (provider: AuthProvider) => {
    setIsLoginWithProviderPending(provider);
    setLoginError(null);
-    const { error } = await authClient.signIn.social({
-      provider,
-      callbackURL: "/boards",
-    });
+
+    let error;
+    if (provider === "oidc") {
+      // Use oauth2 signin for OIDC provider
+      const result = await authClient.signIn.oauth2({
+        providerId: "oidc",
+        callbackURL: "/boards",
+      });
+      error = result.error;
+    } else {
+      // Use social signin for traditional social providers
+      const result = await authClient.signIn.social({
+        provider,
+        callbackURL: "/boards",
+      });
+      error = result.error;
+    }

    setIsLoginWithProviderPending(null);

    if (error) {
      setLoginError(
-        `Failed to login with ${provider.at(0)?.toUpperCase() + provider.slice(1)}. Please try again.`,
+        t`Failed to login with ${provider.at(0)?.toUpperCase() + provider.slice(1)}. Please try again.`,
      );
    }
  };

  const onSubmit = async (values: FormValues) => {
-    await handleLoginWithEmail(values.email);
+    await handleLoginWithEmail(values.email, values.password, values.name);
  };

+  const password = watch("password");
+
  return (
    <div className="space-y-6">
      {socialProviders?.length !== 0 && (
@@ -186,16 +286,21 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
              return null;
            }
            return (
-            <Button
-              onClick={() => handleLoginWithProvider(key as SocialProvider)}
-              isLoading={isLoginWithProviderPending === key}
-              iconLeft={<provider.icon />}
-              fullWidth
-              size="lg"
-            >
-              Continue with {provider.name}
-            </Button>
-          )})}
+              <Button
+                key={key}
+                onClick={() => handleLoginWithProvider(key as AuthProvider)}
+                isLoading={isLoginWithProviderPending === key}
+                iconLeft={<provider.icon />}
+                fullWidth
+                size="lg"
+              >
+                <Trans>
+                  Continue with{" "}
+                  {key === "oidc" ? oidcProviderName : provider.name}
+                </Trans>
+              </Button>
+            );
+          })}
        </div>
      )}
      <form onSubmit={handleSubmit(onSubmit)}>
@@ -203,31 +308,65 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
          <div className="mb-[1.5rem] flex w-full items-center gap-4">
            <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
            <span className="text-sm text-light-900 dark:text-dark-900">
-              or
+              {t`or`}
            </span>
            <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
          </div>
        )}
-        <Input
-          {...register("email", { required: true })}
-          placeholder="Enter your email address"
-        />
-        {errors.email && (
-          <p className="mt-2 text-xs text-red-400">
-            Please enter a valid email address
-          </p>
-        )}
-        {loginError && (
-          <p className="mt-2 text-xs text-red-400">{loginError}</p>
-        )}
-        <div className="mt-[1.5rem]">
+        <div className="space-y-2">
+          {isSignUp && isCredentialsEnabled && (
+            <div>
+              <Input
+                {...register("name", { required: true })}
+                placeholder={t`Enter your name`}
+              />
+              {errors.name && (
+                <p className="mt-2 text-xs text-red-400">
+                  {t`Please enter a valid name`}
+                </p>
+              )}
+            </div>
+          )}
+          <div>
+            <Input
+              {...register("email", { required: true })}
+              placeholder={t`Enter your email address`}
+            />
+            {errors.email && (
+              <p className="mt-2 text-xs text-red-400">
+                {t`Please enter a valid email address`}
+              </p>
+            )}
+          </div>
+          {isCredentialsEnabled && (
+            <div>
+              <Input
+                type="password"
+                {...register("password", { required: true })}
+                placeholder={t`Enter your password`}
+              />
+              {errors.password && (
+                <p className="mt-2 text-xs text-red-400">
+                  {t`Please enter a valid password`}
+                </p>
+              )}
+            </div>
+          )}
+          {loginError && (
+            <p className="mt-2 text-xs text-red-400">{loginError}</p>
+          )}
+        </div>
+        <div className="mt-[1.5rem] flex items-center gap-4">
          <Button
            isLoading={isLoginWithEmailPending}
            fullWidth
            size="lg"
            variant="secondary"
          >
-            Continue with email
+            {isSignUp ? t`Sign up with ` : t`Continue with `}
+            {!isCredentialsEnabled || (password && password.length !== 0)
+              ? t`email`
+              : t`magic link`}
          </Button>
        </div>
      </form>
--- a/apps/web/src/components/Button.tsx
+++ b/apps/web/src/components/Button.tsx
@@ -5,7 +5,7 @@ import LoadingSpinner from "./LoadingSpinner";

 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "danger" | "ghost";
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
  isLoading?: boolean;
  iconLeft?: React.ReactNode;
  iconRight?: React.ReactNode;
@@ -28,6 +28,7 @@ const Button = ({
 }: ButtonProps) => {
  const classes = twMerge(
    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none",
+    size === "xs" && "text-xs px-2 py-1",
    size === "sm" && "text-xs",
    size === "lg" && "py-[0.65rem]",
    fullWidth && "w-full",
--- a/apps/web/src/components/CheckboxDropdown.tsx
+++ b/apps/web/src/components/CheckboxDropdown.tsx
@@ -55,53 +55,67 @@ export default function CheckboxDropdown({

  const renderMenuItems = (items: Item[], groupKey: string | null) => (
    <>
-      {items.map((item) => (
-        <Menu.Item key={item.key}>
-          <div
-            className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-            onClick={(e) => {
-              e.preventDefault();
-              handleSelect(groupKey, { key: item.key, value: item.value });
-            }}
-          >
-            <input
-              id={item.key}
-              name={item.key}
-              type="checkbox"
-              className="h-[14px] w-[14px] rounded bg-transparent"
-              onClick={(event) => event.stopPropagation()}
-              onChange={() =>
-                handleSelect(groupKey, { key: item.key, value: item.value })
-              }
-              checked={item.selected}
-            />
-            {item.leftIcon && (
-              <span className="ml-3 flex items-center">{item.leftIcon}</span>
-            )}
-            <label
-              htmlFor={item.key}
-              className="ml-3 text-[12px] text-dark-900"
+      {items.length > 0 ? (
+        items.map((item) => (
+          <Menu.Item key={item.key}>
+            <div
+              className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+              onClick={(e) => {
+                e.preventDefault();
+                handleSelect(groupKey, { key: item.key, value: item.value });
+              }}
            >
-              {item.value}
-            </label>
-            {handleEdit && (
-              <button
-                className="invisible ml-auto group-hover:visible"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  handleEdit(item.key);
-                }}
+              <input
+                id={item.key}
+                name={item.key}
+                type="checkbox"
+                className="h-[14px] w-[14px] rounded bg-transparent"
+                onClick={(event) => event.stopPropagation()}
+                onChange={() =>
+                  handleSelect(groupKey, { key: item.key, value: item.value })
+                }
+                checked={item.selected}
+              />
+              {item.leftIcon && (
+                <span className="ml-3 flex items-center">{item.leftIcon}</span>
+              )}
+              <label
+                htmlFor={item.key}
+                className="ml-3 text-[12px] text-dark-900"
              >
-                <HiEllipsisHorizontal size={20} className="text-dark-900" />
-              </button>
-            )}
+                {item.value}
+              </label>
+              {handleEdit && (
+                <button
+                  type="button"
+                  className="invisible ml-auto group-hover:visible"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleEdit(item.key);
+                  }}
+                >
+                  <HiEllipsisHorizontal size={20} className="text-dark-900" />
+                </button>
+              )}
+            </div>
+          </Menu.Item>
+        ))
+      ) : (
+        !handleCreate && (
+          <div className="flex items-center p-2 text-[12px] text-dark-900">
+            No items
          </div>
-        </Menu.Item>
-      ))}
+        )
+      )}
      {handleCreate && (
        <button
+          type="button"
          className="flex w-full items-center rounded-[5px] p-2 px-2 text-[12px] text-dark-900 hover:bg-light-200 dark:hover:bg-dark-300"
-          onClick={() => handleCreate()}
+          onClick={(e) => {
+            e.preventDefault();
+            handleCreate();
+          }}
        >
          <HiMiniPlus size={20} className="pr-1.5" />
          {createNewItemLabel}
--- a/apps/web/src/components/CircularProgress.tsx
+++ b/apps/web/src/components/CircularProgress.tsx
@@ -0,0 +1,58 @@
+import { twMerge } from "tailwind-merge";
+
+interface CircularProgressProps {
+  progress: number; // 0-100
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const CircularProgress = ({
+  progress,
+  size = "md",
+  className,
+}: CircularProgressProps) => {
+  const radius = 40;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+  return (
+    <div className={twMerge("relative", className)}>
+      <svg
+        className={twMerge(
+          "-rotate-90 transform",
+          size === "sm" && "h-4 w-4",
+          size === "md" && "h-5 w-5",
+          size === "lg" && "h-8 w-8",
+        )}
+        viewBox="0 0 100 100"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="14"
+          className="text-light-300 dark:text-dark-400"
+        />
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="14"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          className={twMerge(
+            "transition-all duration-300 ease-in-out",
+            progress === 100 ? "text-green-500" : "text-blue-500",
+          )}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default CircularProgress;
--- a/apps/web/src/components/Dashboard.tsx
+++ b/apps/web/src/components/Dashboard.tsx
@@ -1,11 +1,96 @@
-import Link from "next/link";
+import { useRef, useState } from "react";
+import {
+  TbLayoutSidebarLeftCollapse,
+  TbLayoutSidebarLeftExpand,
+  TbLayoutSidebarRightCollapse,
+  TbLayoutSidebarRightExpand,
+} from "react-icons/tb";

-import { api } from "~/utils/api";
-import FeedbackButton from "./FeedbackButton";
+import { authClient } from "@kan/auth/client";
+
+import { useClickOutside } from "~/hooks/useClickOutside";
+import { useModal } from "~/providers/modal";
+import { useTheme } from "next-themes";
+import { WorkspaceProvider } from "~/providers/workspace";
+import FeedbackModal from "./FeedbackModal";
+import Modal from "./modal";
 import SideNavigation from "./SideNavigation";

-export default function Dashboard(props: { children: React.ReactNode }) {
-  const { data, isLoading } = api.user.getUser.useQuery();
+interface DashboardProps {
+  children: React.ReactNode;
+  rightPanel?: React.ReactNode;
+  hasRightPanel?: boolean;
+}
+
+export function getDashboardLayout(
+  page: React.ReactElement,
+  rightPanel?: React.ReactNode,
+  hasRightPanel = false,
+) {
+  return (
+    <WorkspaceProvider>
+      <Dashboard rightPanel={rightPanel} hasRightPanel={hasRightPanel}>
+        {page}
+      </Dashboard>
+    </WorkspaceProvider>
+  );
+}
+
+export default function Dashboard({
+  children,
+  rightPanel,
+  hasRightPanel = false,
+}: DashboardProps) {
+  const { theme } = useTheme();
+  const { modalContentType } = useModal();
+
+  const { data: session, isPending: sessionLoading } = authClient.useSession();
+
+  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
+
+  const sideNavRef = useRef<HTMLDivElement>(null);
+  const rightPanelRef = useRef<HTMLDivElement>(null);
+  const sideNavButtonRef = useRef<HTMLButtonElement>(null);
+  const rightPanelButtonRef = useRef<HTMLButtonElement>(null);
+
+  const toggleSideNav = () => {
+    setIsSideNavOpen(!isSideNavOpen);
+    if (!isSideNavOpen) {
+      setIsRightPanelOpen(false);
+    }
+  };
+
+  const closeSideNav = () => {
+    setIsSideNavOpen(false);
+  };
+
+  const toggleRightPanel = () => {
+    setIsRightPanelOpen(!isRightPanelOpen);
+    if (!isRightPanelOpen) {
+      setIsSideNavOpen(false);
+    }
+  };
+
+  useClickOutside(sideNavRef, (event) => {
+    if (sideNavButtonRef.current?.contains(event.target as Node)) {
+      return;
+    }
+    if (isSideNavOpen) {
+      setIsSideNavOpen(false);
+    }
+  });
+
+  useClickOutside(rightPanelRef, (event) => {
+    if (rightPanelButtonRef.current?.contains(event.target as Node)) {
+      return;
+    }
+    if (isRightPanelOpen) {
+      setIsRightPanelOpen(false);
+    }
+  });
+
+  const isDarkMode = theme === "dark";

  return (
    <>
@@ -13,26 +98,86 @@ export default function Dashboard(props: { children: React.ReactNode }) {
        html {
          height: 100vh;
          overflow: hidden;
+          min-width: 320px;
+          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#1c1c1c"};
        }
      `}</style>
-      <div className="flex h-screen min-w-[800px] flex-col items-center bg-light-100 dark:bg-dark-50">
-        <div className="m-auto flex h-16 min-h-16 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400">
-          <div className="my-auto flex w-full items-center justify-between">
-            <Link href="/">
-              <h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
-                kan.bn
-              </h1>
-            </Link>
-            <FeedbackButton />
-          </div>
+      <div className="relative flex h-screen flex-col bg-light-50 dark:bg-dark-50 md:bg-light-100 md:p-3 md:dark:bg-dark-100">
+        {/* Mobile Header */}
+        <div className="flex h-12 items-center justify-between border-b border-light-300 bg-light-50 px-3 dark:border-dark-300 dark:bg-dark-50 md:hidden">
+          <button
+            ref={sideNavButtonRef}
+            onClick={toggleSideNav}
+            className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+          >
+            {isSideNavOpen ? (
+              <TbLayoutSidebarLeftCollapse
+                size={20}
+                className="text-light-900 dark:text-dark-900"
+              />
+            ) : (
+              <TbLayoutSidebarLeftExpand
+                size={20}
+                className="text-light-900 dark:text-dark-900"
+              />
+            )}
+          </button>
+
+          {hasRightPanel && (
+            <button
+              ref={rightPanelButtonRef}
+              onClick={toggleRightPanel}
+              className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+            >
+              {isRightPanelOpen ? (
+                <TbLayoutSidebarRightCollapse
+                  size={20}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              ) : (
+                <TbLayoutSidebarRightExpand
+                  size={20}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              )}
+            </button>
+          )}
        </div>

-        <div className="flex h-full w-full">
-          <SideNavigation
-            user={{ email: data?.email, image: data?.image }}
-            isLoading={isLoading}
-          />
-          <div className="w-full overflow-hidden">{props.children}</div>
+        <div className="flex h-[calc(100dvh-4.5rem)] min-h-0 w-full md:h-[calc(100dvh-1.5rem)]">
+          <div
+            ref={sideNavRef}
+            className={`fixed top-12 z-40 h-[calc(100dvh-3rem)] w-[calc(100vw-1.5rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:w-auto md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
+          >
+            <SideNavigation
+              user={{ email: session?.user.email, image: session?.user.image }}
+              isLoading={sessionLoading}
+              onCloseSideNav={closeSideNav}
+            />
+          </div>
+
+          <div className="relative h-full min-h-0 w-full overflow-hidden md:rounded-lg md:border md:border-light-300 md:bg-light-50 md:dark:border-dark-300 md:dark:bg-dark-50">
+            <div className="relative flex h-full min-h-0 w-full overflow-hidden">
+              <div className="h-full w-full overflow-y-auto">{children}</div>
+
+              {/* Mobile Right Panel */}
+              {hasRightPanel && rightPanel && (
+                <div
+                  ref={rightPanelRef}
+                  className={`fixed right-0 top-12 z-40 h-[calc(100dvh-3rem)] w-80 transform border-l border-light-300 bg-light-200 transition-transform duration-300 ease-in-out dark:border-dark-300 dark:bg-dark-100 md:hidden ${
+                    isRightPanelOpen ? "translate-x-0" : "translate-x-full"
+                  }`}
+                >
+                  <div className="h-full">{rightPanel}</div>
+                </div>
+              )}
+
+              {/* Desktop Right Panel */}
+              {hasRightPanel && rightPanel && (
+                <div className="hidden md:block">{rightPanel}</div>
+              )}
+            </div>
+          </div>
        </div>
      </div>
    </>
--- a/apps/web/src/components/DeleteLabelConfirmation.tsx
+++ b/apps/web/src/components/DeleteLabelConfirmation.tsx
@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -10,21 +12,23 @@ export function DeleteLabelConfirmation({
  labelPublicId: string;
  refetch: () => void;
 }) {
-  const { closeModal } = useModal();
+  const { closeModal, closeModals } = useModal();
  const { showPopup } = usePopup();

  const deleteLabelMutation = api.label.delete.useMutation({
-    onSuccess: () => refetch(),
+    onSuccess: () => {
+      refetch();
+      closeModals(2);
+    },
    onError: () =>
      showPopup({
-        header: "Error deleting label",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error deleting label`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      }),
  });

  const handleDeleteLabel = () => {
-    closeModal();
    deleteLabelMutation.mutate({
      labelPublicId,
    });
@@ -34,17 +38,17 @@ export function DeleteLabelConfirmation({
    <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 label?
+          {t`Are you sure you want to delete this label?`}
        </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 variant="secondary" onClick={() => closeModal()}>
-          Cancel
+          {t`Cancel`}
        </Button>
-        <Button onClick={handleDeleteLabel}>Delete</Button>
+        <Button onClick={handleDeleteLabel}>{t`Delete`}</Button>
      </div>
    </div>
  );
--- a/apps/web/src/components/Editor.tsx
+++ b/apps/web/src/components/Editor.tsx
@@ -0,0 +1,620 @@
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type {
+  SuggestionKeyDownProps,
+  SuggestionOptions,
+} from "@tiptap/suggestion";
+import type { Instance as TippyInstance } from "tippy.js";
+import { Button } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import {
+  BubbleMenu,
+  EditorContent,
+  Extension,
+  ReactRenderer,
+  useEditor,
+} from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Suggestion from "@tiptap/suggestion";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import {
+  HiH1,
+  HiH2,
+  HiH3,
+  HiOutlineBold,
+  HiOutlineChatBubbleLeftEllipsis,
+  HiOutlineCodeBracket,
+  HiOutlineCodeBracketSquare,
+  HiOutlineItalic,
+  HiOutlineListBullet,
+  HiOutlineNumberedList,
+  HiOutlineStrikethrough,
+} from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+import tippy from "tippy.js";
+import Mention from "@tiptap/extension-mention";
+import Avatar from "./Avatar";
+import { getAvatarUrl } from "~/utils/helpers";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    slashSuggestion: {
+      setSlashSuggestion: () => ReturnType;
+    };
+  }
+}
+
+export interface SlashCommandItem {
+  title: string;
+  icon?: React.ReactNode;
+  command?: (props: { editor: TiptapEditor; range: Range }) => void;
+  disabled?: boolean;
+}
+
+export interface SlashCommandsOptions {
+  suggestion?: Partial<SuggestionOptions>;
+  commandItems?: SlashCommandItem[];
+  options?: any;
+}
+
+function filterSlashCommandItems(items: SlashCommandItem[], query: string) {
+  return items.filter((item) =>
+    item.title.toLowerCase().includes(query.toLowerCase()),
+  );
+}
+
+export interface RenderSuggestionsProps {
+  editor: TiptapEditor;
+  clientRect: () => DOMRect;
+  items: SlashCommandItem[];
+  command: (item: SlashCommandItem) => void;
+}
+
+export type WorkspaceMember = {
+  publicId: string;
+  user: {
+    id: string;
+    name: string | null;
+    image: string | null;
+  } | null;
+  email: string;
+};
+
+const CommandsList = forwardRef<
+  { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
+  {
+    items: SlashCommandItem[];
+    command: (item: SlashCommandItem) => void;
+  }
+>(({ items, command }, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((selectedIndex + 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        const item = items[selectedIndex];
+        if (item) {
+          command(item);
+        }
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className="w-56 rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+      <div className="max-h-[350px] overflow-y-auto p-1">
+        {items.map((item, index) => (
+          <button
+            key={item.title}
+            onClick={() => command(item)}
+            className={twMerge(
+              "group flex w-full items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300",
+              index === selectedIndex && "bg-light-200 dark:bg-dark-300",
+            )}
+          >
+            <span className="text-dark-700 dark:text-dark-800">
+              {item.icon}
+            </span>
+            <span className="ml-3 text-[12px] font-medium text-dark-900 dark:text-dark-1000">
+              {item.title}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+CommandsList.displayName = "CommandsList";
+
+const RenderSuggestions = () => {
+  let reactRenderer: ReactRenderer;
+  let popup: TippyInstance[];
+
+  return {
+    onStart: (props: RenderSuggestionsProps) => {
+      reactRenderer = new ReactRenderer(CommandsList, {
+        props,
+        editor: props.editor,
+      });
+
+      if (!props.clientRect) return;
+
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.body,
+        content: reactRenderer.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate(props: RenderSuggestionsProps) {
+      reactRenderer.updateProps(props);
+
+      if (!props.clientRect) return;
+
+      popup[0]?.setProps({
+        getReferenceClientRect: props.clientRect,
+      });
+    },
+    onKeyDown(props: SuggestionKeyDownProps): boolean {
+      if (props.event.key === "Escape") {
+        popup[0]?.hide();
+        return true;
+      }
+
+      return (
+        (
+          reactRenderer.ref as {
+            onKeyDown?: (props: SuggestionKeyDownProps) => boolean;
+          }
+        ).onKeyDown?.(props) ?? false
+      );
+    },
+    onExit() {
+      popup[0]?.destroy();
+      reactRenderer.destroy();
+    },
+  };
+};
+
+type MentionItem = { id: string; label: string; image: string | null };
+
+const MentionList = forwardRef<
+  { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
+  {
+    items: MentionItem[];
+    command: (item: MentionItem) => void;
+  }
+>(({ items, command }, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((selectedIndex + 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        const item = items[selectedIndex];
+        if (item) {
+          command(item);
+        }
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className="w-56 rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+      <div className="max-h-[350px] overflow-y-auto p-1 scrollbar-thin scrollbar-thumb-light-200 dark:scrollbar-thumb-dark-300">
+        {items.length > 0 ? items.map((item, index) => (
+          <button
+            key={item.id}
+            onClick={() => command(item)}
+            className={twMerge(
+              "group flex w-full items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300",
+              index === selectedIndex && "bg-light-200 dark:bg-dark-300",
+            )}
+          >
+            <Avatar
+              size="xs"
+              name={item.label}
+              imageUrl={
+                item.image ? getAvatarUrl(item.image) : undefined
+              }
+              email={item.label}
+            />
+            <span className="ml-3 text-[12px] font-medium text-dark-900 dark:text-dark-1000">
+              {item.label}
+            </span>
+          </button>
+        )) : (
+          <div className="flex items-center justify-start p-2">
+            <span className="text-dark-900 text-[12px] dark:text-dark-1000">No results</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+MentionList.displayName = "MentionList";
+
+const renderMentionSuggestions = () => {
+  let reactRenderer: ReactRenderer;
+  let popup: TippyInstance[];
+
+  return {
+    onStart: (props: any) => {
+      reactRenderer = new ReactRenderer(MentionList, {
+        props,
+        editor: props.editor,
+      });
+
+      if (!props.clientRect) return;
+
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.body,
+        content: reactRenderer.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate(props: any) {
+      reactRenderer.updateProps(props);
+      if (!props.clientRect) return;
+      popup[0]?.setProps({ getReferenceClientRect: props.clientRect });
+    },
+    onKeyDown(props: SuggestionKeyDownProps) {
+      if (props.event.key === "Escape") {
+        popup[0]?.hide();
+        return true;
+      }
+      return (
+        (
+          reactRenderer.ref as {
+            onKeyDown?: (props: SuggestionKeyDownProps) => boolean;
+          }
+        ).onKeyDown?.(props) ?? false
+      );
+    },
+    onExit() {
+      popup[0]?.destroy();
+      reactRenderer.destroy();
+    },
+  };
+};
+
+const SlashCommands = Extension.create<SlashCommandsOptions>({
+  name: "slash-commands",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({ editor, range, props }) => {
+          editor.chain().focus().deleteRange(range).run();
+          props.command({ editor, range });
+        },
+        items: ({ query }: { query: string }) => {
+          return filterSlashCommandItems(
+            this.parent().commandItems ?? [],
+            query,
+          );
+        },
+        render: () => {
+          let component: ReturnType<typeof RenderSuggestions>;
+          return {
+            onStart: (props: any) => {
+              component = RenderSuggestions();
+              component.onStart(props);
+            },
+            onUpdate(props: any) {
+              component.onUpdate(props);
+            },
+            onKeyDown(props: any) {
+              if (props.event.key === "Escape") {
+                return true;
+              }
+              return component.onKeyDown(props) ?? false;
+            },
+            onExit: () => {
+              component.onExit();
+            },
+          };
+        },
+      },
+      commandItems: [] as SlashCommandItem[],
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+        render: RenderSuggestions,
+      } as SuggestionOptions),
+    ];
+  },
+});
+
+export interface SlashNodeAttrs {
+  id: string | null;
+  label?: string | null;
+}
+
+const CommandItems: SlashCommandItem[] = [
+  {
+    title: "Heading 1",
+    icon: <HiH1 />,
+    command: ({ editor }) =>
+      editor.chain().focus().setHeading({ level: 1 }).run(),
+  },
+  {
+    title: "Heading 2",
+    icon: <HiH2 />,
+    command: ({ editor }) =>
+      editor.chain().focus().setHeading({ level: 2 }).run(),
+  },
+  {
+    title: "Heading 3",
+    icon: <HiH3 />,
+    command: ({ editor }) =>
+      editor.chain().focus().setHeading({ level: 3 }).run(),
+  },
+  {
+    title: "Bullet List",
+    icon: <HiOutlineListBullet />,
+    command: ({ editor }) => editor.chain().focus().toggleBulletList().run(),
+  },
+  {
+    title: "Ordered List",
+    icon: <HiOutlineNumberedList />,
+    command: ({ editor }) => editor.chain().focus().toggleOrderedList().run(),
+  },
+  {
+    title: "Blockquote",
+    icon: <HiOutlineChatBubbleLeftEllipsis />,
+    command: ({ editor }) => editor.chain().focus().toggleBlockquote().run(),
+  },
+  {
+    title: "Code Block",
+    icon: <HiOutlineCodeBracketSquare />,
+    command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run(),
+  },
+];
+
+export default function Editor({
+  content,
+  onChange,
+  onBlur,
+  readOnly = false,
+  workspaceMembers,
+}: {
+  content: string | null;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  readOnly?: boolean;
+  workspaceMembers: WorkspaceMember[];
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const editor = useEditor(
+    {
+      extensions: [
+        StarterKit,
+        Placeholder.configure({
+          placeholder: readOnly
+            ? ""
+            : t`Add description... (type '/' to open commands or '@' to mention)`,
+        }),
+        Link.configure({
+          openOnClick: true,
+          HTMLAttributes: {
+            class: "text-blue-600 hover:text-blue-800 underline cursor-pointer",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          validate: (href) => /^https?:\/\//.test(href),
+          autolink: true,
+        }),
+        SlashCommands.configure({
+          commandItems: CommandItems,
+          suggestion: {
+            items: ({ query }: { query: string }) =>
+              filterSlashCommandItems(CommandItems, query),
+            startOfLine: true,
+            char: "/",
+          },
+        }),
+        Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
+          suggestion: {
+            char: "@",
+            items: ({ query }: { query: string }) => {
+              const all: MentionItem[] = workspaceMembers.map((member: WorkspaceMember) => ({
+                id: member.publicId,
+                label: member?.user?.name ?? member.email,
+                image: member?.user?.image ?? null,
+              }));
+              const q = query.toLowerCase();
+              return all.filter((u) => u.label.toLowerCase().includes(q));
+            },
+            command: ({ editor, range, props }: any) => {
+               const mentionHTML = `<span data-type="mention" data-id="${props.id}" data-label="${props.label}">@${props.label}</span>&nbsp;`;
+               
+               editor
+               .chain()
+               .focus()
+               .deleteRange(range)
+               .insertContent(mentionHTML)
+               .focus()
+               .run();
+              },
+              render: renderMentionSuggestions,
+            },
+            renderText({ options, node }) {
+              return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+            },
+        }),
+      ],
+      content,
+      onUpdate: ({ editor }) => onChange?.(editor.getHTML()),
+      onBlur: ({ event }) => {
+        if (
+          document
+            .querySelector(".tippy-box")
+            ?.contains(event.relatedTarget as Node)
+        )
+          return;
+        // Only trigger onBlur if the click was outside both the editor and menu
+        if (!containerRef.current?.contains(event.relatedTarget as Node)) {
+          onBlur?.();
+        }
+      },
+      editorProps: {
+        attributes: {
+          class: "outline-none focus:outline-none focus-visible:ring-0",
+        },
+      },
+      editable: !readOnly,
+      injectCSS: false,
+    },
+    [], // creating the editor only once
+  );
+
+  // this will sync external content changes without re-creating the editor instance
+  useEffect(() => {
+    if (!editor) return;
+    const currentHTML = editor.getHTML();
+    const safeContent = content ?? "";
+    if (safeContent !== currentHTML) {
+      editor.commands.setContent(safeContent, false);
+    }
+  }, [content, editor]);
+
+  return (
+    <div ref={containerRef}>
+      <style jsx global>{`
+        .tiptap p.is-empty::before {
+          content: attr(data-placeholder);
+          float: left;
+          height: 0;
+          pointer-events: none;
+        }
+        .tiptap p {
+          margin: 0 0 1rem 0 !important;
+        }
+        .tiptap .mention {
+          background-color: rgba(59, 130, 246, 0.1);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.25rem;
+          color: rgb(59, 130, 246);
+          text-decoration: none;
+          font-weight: 500;
+        }
+      `}</style>
+      {!readOnly && editor && <EditorBubbleMenu editor={editor} />}
+      <EditorContent
+        editor={editor}
+        className="prose dark:prose-invert prose-sm max-w-none overflow-y-auto [&_blockquote]:!text-xs [&_h1]:!text-lg [&_h2]:!text-base [&_h3]:!text-sm [&_ol]:!text-xs [&_p.is-empty::before]:text-light-900 [&_p.is-empty::before]:dark:text-dark-800 [&_p]:!text-sm [&_p]:text-light-950 [&_p]:dark:text-dark-950 [&_ul]:!text-xs"
+      />
+    </div>
+  );
+}
+
+function EditorBubbleMenu({ editor }: { editor: TiptapEditor | null }) {
+  const isMac = navigator.platform.includes("Mac");
+
+  const bubbleMenuItems = [
+    {
+      title: "Bold",
+      icon: <HiOutlineBold />,
+      keys: ["meta", "b"],
+      onClick: () => editor?.chain().focus().toggleBold().run(),
+      active: editor?.isActive("bold"),
+    },
+    {
+      title: "Italic",
+      icon: <HiOutlineItalic />,
+      keys: ["meta", "i"],
+      onClick: () => editor?.chain().focus().toggleItalic().run(),
+      active: editor?.isActive("italic"),
+    },
+    {
+      title: "Strikethrough",
+      icon: <HiOutlineStrikethrough />,
+      keys: ["meta", "shift", "s"],
+      onClick: () => editor?.chain().focus().toggleStrike().run(),
+      active: editor?.isActive("strike"),
+    },
+    {
+      title: "Code",
+      icon: <HiOutlineCodeBracket />,
+      keys: ["meta", "e"],
+      onClick: () => editor?.chain().focus().toggleCode().run(),
+      active: editor?.isActive("code"),
+    },
+  ];
+  return (
+    <BubbleMenu editor={editor}>
+      <div className="flex items-center gap-2 rounded-md border border-light-600 bg-light-50 p-1 dark:border-dark-600 dark:bg-dark-50">
+        {bubbleMenuItems.map((item) => (
+          <Button
+            key={item.title}
+            className={twMerge(
+              "rounded p-1 text-light-900 focus:ring-2 focus:ring-light-600 dark:text-dark-900 dark:focus:ring-dark-600",
+              item.active && "bg-light-100 dark:bg-dark-400",
+            )}
+            title={`${item.title} [${item.keys.join(" + ").replace("meta", isMac ? "⌘" : "ctrl")}]`}
+            onClick={item.onClick}
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                item.onClick();
+              }
+            }}
+          >
+            {item.icon}
+          </Button>
+        ))}
+      </div>
+    </BubbleMenu>
+  );
+}
--- a/apps/web/src/components/FeedbackButton.tsx
+++ b/apps/web/src/components/FeedbackButton.tsx
@@ -1,148 +0,0 @@
-import Link from "next/link";
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-
-import chatIconDark from "~/assets/chat-dark.json";
-import chatIconLight from "~/assets/chat-light.json";
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-import LottieIcon from "~/components/LottieIcon";
-import { usePopup } from "~/providers/popup";
-import { useTheme } from "~/providers/theme";
-import { api } from "~/utils/api";
-
-interface NewFeedbackFormInput {
-  feedback: string;
-}
-
-const FeedbackButton: React.FC = () => {
-  const outsideRef = useRef<HTMLDivElement>(null);
-  const { activeTheme } = useTheme();
-  const { showPopup } = usePopup();
-  const [isHovered, setIsHovered] = useState(false);
-  const [index, setIndex] = useState(0);
-
-  const { handleSubmit, setValue, watch, reset } =
-    useForm<NewFeedbackFormInput>({
-      defaultValues: {
-        feedback: "",
-      },
-    });
-
-  const createFeedback = api.feedback.create.useMutation({
-    onSuccess: async () => {
-      reset();
-      showPopup({
-        header: "Feedback sent",
-        message: "Thank you for your feedback!",
-        icon: "success",
-      });
-    },
-    onError: async () => {
-      showPopup({
-        header: "Unable to send feedback",
-        message: "Please try again later, or contact customer support.",
-        icon: "error",
-      });
-    },
-  });
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-    setIndex((index) => index + 1);
-  };
-
-  const onSubmit = (values: NewFeedbackFormInput) => {
-    createFeedback.mutate({
-      feedback: values.feedback,
-      url: window.location.href,
-    });
-  };
-
-  return (
-    <>
-      <div ref={outsideRef} />
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button
-            onMouseEnter={handleMouseEnter}
-            className="flex items-center rounded-md border-[1px] border-light-600 bg-light-50 px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-400 dark:bg-dark-50 dark:text-dark-1000"
-          >
-            <LottieIcon
-              index={index}
-              json={activeTheme === "dark" ? chatIconDark : chatIconLight}
-              isPlaying={isHovered}
-            />
-            <span className="ml-1">Feedback</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
-            as="div"
-            static
-            className="absolute right-0 z-30 mt-2 w-[350px] 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"
-          >
-            <form onSubmit={handleSubmit(onSubmit)} className="p-1">
-              <Input
-                placeholder="Ideas to improve this page..."
-                onChange={(e) => {
-                  setValue("feedback", e.target.value);
-                }}
-                value={watch("feedback")}
-                contentEditable
-                className="max-h-[300px] min-h-[100px]"
-                onKeyDown={async (e) => {
-                  e.stopPropagation();
-                  if (e.key === "Enter" && e.shiftKey) {
-                    e.preventDefault();
-                    await handleSubmit(onSubmit)();
-                  }
-                }}
-              />
-              <div className="flex flex-row items-center justify-between pt-2">
-                <div>
-                  <p className="ml-2 text-xs text-neutral-900 dark:text-dark-1000">
-                    Need help?{" "}
-                    <Link
-                      href="mailto:support@kan.bn"
-                      className="text-blue-600 underline dark:text-blue-300"
-                    >
-                      Contact us
-                    </Link>
-                    , or see our{" "}
-                    <Link
-                      href="https://docs.kan.bn"
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-600 underline dark:text-blue-300"
-                    >
-                      docs
-                    </Link>
-                    .
-                  </p>
-                </div>
-                <div className="justify-end">
-                  <Button size="sm" isLoading={createFeedback.isPending}>
-                    Send
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-    </>
-  );
-};
-
-export default FeedbackButton;
--- a/apps/web/src/components/FeedbackModal.tsx
+++ b/apps/web/src/components/FeedbackModal.tsx
@@ -0,0 +1,122 @@
+import Link from "next/link";
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { HiXMark } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface NewFeedbackFormInput {
+  feedback: string;
+}
+
+export default function FeedbackModal() {
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+
+  const { handleSubmit, setValue, watch, reset } =
+    useForm<NewFeedbackFormInput>({
+      defaultValues: {
+        feedback: "",
+      },
+    });
+
+  const createFeedback = api.feedback.create.useMutation({
+    onSuccess: async () => {
+      reset();
+      closeModal();
+      showPopup({
+        header: t`Feedback sent`,
+        message: t`Thank you for your feedback!`,
+        icon: "success",
+      });
+    },
+    onError: async () => {
+      showPopup({
+        header: t`Unable to send feedback`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const onSubmit = (values: NewFeedbackFormInput) => {
+    createFeedback.mutate({
+      feedback: values.feedback,
+      url: window.location.href,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4">
+          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Feedback`}
+          </h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-200 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="feedback"
+          placeholder={t`Ideas to improve this page...`}
+          onChange={(e) => setValue("feedback", e.target.value)}
+          contentEditable
+          value={watch("feedback")}
+          className="min-h-[120px]"
+          onKeyDown={async (e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && e.shiftKey) {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+            if (e.key === "Escape") {
+              closeModal();
+            }
+          }}
+        />
+      </div>
+      <div className="mt-6 flex items-center justify-between border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <div className="text-xs text-neutral-600 dark:text-dark-800">
+          <p>
+            {t`Need help?`}{" "}
+            <Link
+              href="mailto:support@kan.bn"
+              className="text-blue-600 underline dark:text-blue-300"
+            >
+              {t`Contact us`}
+            </Link>
+            {t`, or see our`}{" "}
+            <Link
+              href="https://docs.kan.bn"
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-600 underline dark:text-blue-300"
+            >
+              {t`docs`}
+            </Link>
+            .
+          </p>
+        </div>
+        <div>
+          <Button type="submit" isLoading={createFeedback.isPending}>
+            {t`Send feedback`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
--- a/apps/web/src/components/Input.tsx
+++ b/apps/web/src/components/Input.tsx
@@ -55,7 +55,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      <div className="flex w-full flex-col gap-1">
        <div className="relative flex">
          {prefix && (
-            <div className="flex shrink-0 items-center rounded-l-md border border-r-0 border-light-600 px-3 text-base dark:border-dark-700 dark:text-dark-1000 sm:text-sm/6">
+            <div className="flex shrink-0 items-center rounded-l-md border border-r-0 border-light-600 px-3 text-sm dark:border-dark-700 dark:text-dark-1000 sm:text-sm/6">
              {prefix}
            </div>
          )}
@@ -67,6 +67,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
            className={twMerge(
              "block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6",
              prefix && "rounded-l-none",
+              type === "password" && "pr-8",
              className && className,
            )}
            onKeyDown={onKeyDown}
@@ -75,7 +76,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          {type === "password" && (
            <button
              type="button"
-              className="absolute right-3 top-1/2 -translate-y-1/2 bg-light-50 pl-1 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-light-900 dark:text-dark-900"
              tabIndex={-1}
              onClick={() => setShowPassword((v) => !v)}
            >
--- a/apps/web/src/components/LabelForm.tsx
+++ b/apps/web/src/components/LabelForm.tsx
@@ -1,4 +1,5 @@
 import { Listbox, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
 import { Fragment, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
@@ -31,7 +32,7 @@ export function LabelForm({
  refetch: () => void;
  isEdit?: boolean;
 }) {
-  const { closeModal, entityId, openModal } = useModal();
+  const { closeModal, entityId, openModal, setModalState } = useModal();

  const label = api.label.byPublicId.useQuery(
    {
@@ -56,18 +57,23 @@ export function LabelForm({
  const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");

  const createLabel = api.label.create.useMutation({
-    onSuccess: () => {
+    onSuccess: (newLabel) => {
      const currentColourIndex = colours.findIndex(
        (c) => c.code === watch("colour").code,
      );
      try {
        refetch();
-        if (!isCreateAnotherEnabled) closeModal();
-        reset({
-          name: "",
-          colour: colours[(currentColourIndex + 1) % colours.length],
-          isCreateAnotherEnabled,
-        });
+        setModalState("NEW_LABEL_CREATED", newLabel.publicId);
+        if (!isCreateAnotherEnabled) {
+          closeModal();
+        } else {
+          const newFormState = {
+            name: "",
+            colour: colours[(currentColourIndex + 1) % colours.length],
+            isCreateAnotherEnabled,
+          };
+          reset(newFormState);
+        }
      } catch (e) {
        console.log(e);
      }
@@ -78,10 +84,6 @@ export function LabelForm({
    onSuccess: () => {
      refetch();
      closeModal();
-      reset({
-        name: "",
-        colour: colours[0],
-      });
    },
  });

@@ -114,7 +116,7 @@ export function LabelForm({
      <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-medium">
-            {isEdit ? "Edit label" : "New label"}
+            {isEdit ? t`Edit label` : t`New label`}
          </h2>
          <button
            type="button"
@@ -130,7 +132,7 @@ export function LabelForm({

        <Input
          id="label-name"
-          placeholder="Name"
+          placeholder={t`Name`}
          {...register("name")}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
@@ -208,7 +210,7 @@ export function LabelForm({
      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
        {!isEdit && (
          <Toggle
-            label="Create another"
+            label={t`Create another`}
            isChecked={!!isCreateAnotherEnabled}
            onChange={() =>
              setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
@@ -219,17 +221,21 @@ export function LabelForm({
        <div className="space-x-2">
          {isEdit && (
            <Button
+              type="button"
              variant="secondary"
              onClick={() => openModal("DELETE_LABEL", entityId)}
            >
-              Delete
+              {t`Delete`}
            </Button>
          )}
          <Button
            type="submit"
            isLoading={updateLabel.isPending || createLabel.isPending}
+            disabled={
+              !watch("name")
+            }
          >
-            {isEdit ? "Update label" : "Create label"}
+            {isEdit ? t`Update label` : t`Create label`}
          </Button>
        </div>
      </div>
--- a/apps/web/src/components/LanguageSelector.tsx
+++ b/apps/web/src/components/LanguageSelector.tsx
@@ -0,0 +1,26 @@
+import { HiLanguage } from "react-icons/hi2";
+
+import { useLocalisation } from "~/hooks/useLocalisation";
+import { localeNames } from "~/locales";
+
+export function LanguageSelector() {
+  const { locale, setLocale, availableLocales } = useLocalisation();
+
+  return (
+    <div className="relative">
+      <HiLanguage className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+      <select
+        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"
+      >
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {localeNames[loc]}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
--- a/apps/web/src/components/LottieIcon.tsx
+++ b/apps/web/src/components/LottieIcon.tsx
@@ -2,11 +2,11 @@ import dynamic from "next/dynamic";

 const Lottie = dynamic(() => import("react-lottie-player"), { ssr: false });

-type IconProps = {
+interface IconProps {
  isPlaying: boolean;
  index: number;
  json: object;
-};
+}

 const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
  return (
@@ -15,7 +15,7 @@ const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
      animationData={json}
      play={isPlaying}
      loop={false}
-      style={{ width: 20, height: 20, fill: "white" }}
+      style={{ width: 18, height: 18, fill: "white" }}
      rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
    />
  );
--- a/apps/web/src/components/NewWorkspaceForm.tsx
+++ b/apps/web/src/components/NewWorkspaceForm.tsx
@@ -1,41 +1,158 @@
-import { useEffect } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+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 {
+  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) {
+        void utils.workspace.all.invalidate();
        switchWorkspace({
          publicId: values.publicId,
          name: values.name,
          description: values.description,
          slug: values.slug,
          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?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();
      }
    },
    onError: () => {
      showPopup({
-        header: "Unable to create workspace",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to create workspace`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -47,22 +164,87 @@ 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">
        <div className="flex w-full items-center justify-between pb-4">
          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
-            New workspace
+            {t`New workspace`}
          </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();
@@ -74,8 +256,9 @@ export function NewWorkspaceForm() {

        <Input
          id="workspace-name"
-          placeholder="Workspace name"
+          placeholder={t`Workspace name`}
          {...register("name")}
+          errorMessage={errors.name?.message}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
              e.preventDefault();
@@ -83,11 +266,122 @@ 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}>
-            Create workspace
+          <Button
+            type="submit"
+            isLoading={createWorkspace.isPending}
+            disabled={
+              createWorkspace.isPending ||
+              (!!slug &&
+                (checkWorkspaceSlugAvailability.isPending ||
+                  isWorkspaceSlugAvailable?.isAvailable === false ||
+                  isTyping))
+            }
+          >
+            {t`Create workspace`}
          </Button>
        </div>
      </div>
--- a/apps/web/src/components/PageHead.tsx
+++ b/apps/web/src/components/PageHead.tsx
@@ -4,6 +4,10 @@ export const PageHead = ({ title }: { title: string }) => {
  return (
    <Head>
      <title>{title}</title>
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1"
+      />
    </Head>
  );
 };
--- a/apps/web/src/components/PatternedBackground.tsx
+++ b/apps/web/src/components/PatternedBackground.tsx
@@ -3,8 +3,8 @@ const PatternedBackground = () => (
    <svg className="h-full w-full">
      <pattern
        id="pattern"
-        x="0.034759358288862785"
-        y="3.335370511841166"
+        x="10"
+        y="10"
        width="14.423223834988539"
        height="14.423223834988539"
        patternUnits="userSpaceOnUse"
--- a/apps/web/src/components/ReactiveButton.tsx
+++ b/apps/web/src/components/ReactiveButton.tsx
@@ -1,37 +1,51 @@
 import Link from "next/link";
 import { useState } from "react";
+import { twMerge } from "tailwind-merge";

 import LottieIcon from "~/components/LottieIcon";
-
-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
-}
+import { useIsMobile } from "~/hooks/useMediaQuery";

 const Button: React.FC<{
  href: string;
  current: boolean;
  name: string;
  json: object;
-}> = ({ href, current, name, json }) => {
+  isCollapsed?: boolean;
+  onCloseSideNav?: () => void;
+}> = ({ href, current, name, json, isCollapsed = false, onCloseSideNav }) => {
  const [isHovered, setIsHovered] = useState(false);
  const [index, setIndex] = useState(0);
+  const isMobile = useIsMobile();

  const handleMouseEnter = () => {
    setIsHovered(true);
    setIndex((index) => index + 1);
  };

+  const handleClick = () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+  };
+
  return (
    <Link
      href={href}
      onMouseEnter={handleMouseEnter}
-      className={classNames(
-        current ? "bg-light-200 dark:bg-dark-200" : "dark:bg-dark-50",
-        "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-200",
+      onClick={handleClick}
+      className={twMerge(
+        "group flex h-[34px] items-center rounded-md p-1.5 text-sm font-normal leading-6 hover:bg-light-200 hover:text-light-1000 dark:hover:bg-dark-200 dark:hover:text-dark-1000",
+        current
+          ? "bg-light-200 text-light-1000 dark:bg-dark-200 dark:text-dark-1000"
+          : "text-neutral-600 dark:bg-dark-100 dark:text-dark-900",
+        isCollapsed
+          ? "justify-start gap-x-3 md:justify-center md:gap-x-0"
+          : "gap-x-3",
      )}
+      title={isCollapsed ? name : undefined}
    >
      <LottieIcon index={index} json={json} isPlaying={isHovered} />
-      {name}
+      <span className={twMerge(isCollapsed && "md:hidden")}>{name}</span>
    </Link>
  );
 };
--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -1,4 +1,13 @@
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { Button } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
+import {
+  TbLayoutSidebarLeftCollapse,
+  TbLayoutSidebarLeftExpand,
+} from "react-icons/tb";
+import { twMerge } from "tailwind-merge";

 import boardsIconDark from "~/assets/boards-dark.json";
 import boardsIconLight from "~/assets/boards-light.json";
@@ -9,11 +18,12 @@ import settingsIconLight from "~/assets/settings-light.json";
 import ReactiveButton from "~/components/ReactiveButton";
 import UserMenu from "~/components/UserMenu";
 import WorkspaceMenu from "~/components/WorkspaceMenu";
-import { useTheme } from "~/providers/theme";
+import { useTheme } from "next-themes";

 interface SideNavigationProps {
  user: UserType;
  isLoading: boolean;
+  onCloseSideNav?: () => void;
 }

 interface UserType {
@@ -24,38 +34,97 @@ interface UserType {
 export default function SideNavigation({
  user,
  isLoading,
+  onCloseSideNav,
 }: SideNavigationProps) {
  const router = useRouter();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isInitialised, setIsInitialised] = useState(false);
+
+  useEffect(() => {
+    const savedState = localStorage.getItem("kan_sidebar-collapsed");
+    if (savedState !== null) {
+      setIsCollapsed(JSON.parse(savedState));
+    }
+    setIsInitialised(true);
+  }, []);
+
+  useEffect(() => {
+    if (isInitialised) {
+      localStorage.setItem(
+        "kan_sidebar-collapsed",
+        JSON.stringify(isCollapsed),
+      );
+    }
+  }, [isCollapsed, isInitialised]);

  const { pathname } = router;

-  const { activeTheme } = useTheme();
+  const { theme, resolvedTheme } = useTheme();

-  const isDarkMode = activeTheme === "dark";
+  const isDarkMode = resolvedTheme === "dark";

  const navigation = [
    {
-      name: "Boards",
+      name: t`Boards`,
      href: "/boards",
      icon: isDarkMode ? boardsIconDark : boardsIconLight,
    },
    {
-      name: "Members",
+      name: t`Members`,
      href: "/members",
      icon: isDarkMode ? membersIconDark : membersIconLight,
    },
    {
-      name: "Settings",
+      name: t`Settings`,
      href: "/settings",
      icon: isDarkMode ? settingsIconDark : settingsIconLight,
    },
  ];

+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
  return (
    <>
-      <nav className="flex w-72 flex-col justify-between border-r border-light-600 px-3 pb-3 pt-5 dark:border-dark-400">
+      <nav
+        className={twMerge(
+          "flex h-full w-64 flex-col justify-between border-r border-light-300 bg-light-100 p-3 dark:border-dark-300 dark:bg-dark-100 md:border-r-0 md:py-0 md:pl-0",
+          isCollapsed && "md:w-auto",
+        )}
+      >
        <div>
-          <WorkspaceMenu />
+          <div className="hidden h-14 items-center justify-between pb-[18px] pt-1.5 md:flex">
+            {!isCollapsed && (
+              <Link href="/" className="block">
+                <h1 className="pl-2 text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                  kan.bn
+                </h1>
+              </Link>
+            )}
+            <Button
+              onClick={toggleCollapse}
+              className={twMerge(
+                "flex h-8 items-center justify-center rounded-md hover:bg-light-200 dark:hover:bg-dark-200",
+                isCollapsed ? "w-full" : "w-8",
+              )}
+            >
+              {isCollapsed ? (
+                <TbLayoutSidebarLeftExpand
+                  size={18}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              ) : (
+                <TbLayoutSidebarLeftCollapse
+                  size={18}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              )}
+            </Button>
+          </div>
+          <div className="mx-1 mb-4 hidden w-auto border-b border-light-300 dark:border-dark-400 md:block" />
+
+          <WorkspaceMenu isCollapsed={isCollapsed} />
          <ul role="list" className="space-y-1">
            {navigation.map((item) => (
              <li key={item.name}>
@@ -64,16 +133,23 @@ export default function SideNavigation({
                  current={pathname.includes(item.href)}
                  name={item.name}
                  json={item.icon}
+                  isCollapsed={isCollapsed}
+                  onCloseSideNav={onCloseSideNav}
                />
              </li>
            ))}
          </ul>
        </div>
-        <UserMenu
-          email={user.email ?? ""}
-          imageUrl={user.image ?? undefined}
-          isLoading={isLoading}
-        />
+
+        <div className="space-y-3">
+          <UserMenu
+            email={user.email ?? ""}
+            imageUrl={user.image ?? undefined}
+            isLoading={isLoading}
+            isCollapsed={isCollapsed}
+            onCloseSideNav={onCloseSideNav}
+          />
+        </div>
      </nav>
    </>
  );
--- a/apps/web/src/components/ThemeToggle.tsx
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -1,23 +1,22 @@
 import { CgDarkMode } from "react-icons/cg";
-
-import { useTheme } from "~/providers/theme";
+import { useTheme } from "next-themes";

 const ThemeToggle = () => {
-  const { themePreference, switchTheme } = useTheme();
+  const { theme, setTheme } = useTheme();

  const toggleTheme = () => {
-    switchTheme(themePreference === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <button
      onClick={toggleTheme}
      className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
-      aria-label={`Switch to ${themePreference === "light" ? "dark" : "light"} theme`}
+      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} theme`}
    >
      <CgDarkMode
        className={`h-4 w-4 text-light-900 transition-transform duration-200 dark:text-dark-900 ${
-          themePreference === "dark" ? "rotate-180" : "rotate-0"
+          theme === "dark" ? "rotate-180" : "rotate-0"
        }`}
      />
    </button>
--- a/apps/web/src/components/UserMenu.tsx
+++ b/apps/web/src/components/UserMenu.tsx
@@ -1,49 +1,79 @@
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Menu, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
 import { Fragment } from "react";
+import { twMerge } from "tailwind-merge";

 import { authClient } from "@kan/auth/client";

-import { useTheme } from "~/providers/theme";
+import { useIsMobile } from "~/hooks/useMediaQuery";
+import { useModal } from "~/providers/modal";
+import { useTheme } from "next-themes";
 import { getAvatarUrl } from "~/utils/helpers";

 interface UserMenuProps {
  imageUrl: string | undefined;
  email: string;
  isLoading: boolean;
-}
-
-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
+  isCollapsed?: boolean;
+  onCloseSideNav?: () => void;
 }

 export default function UserMenu({
  imageUrl,
  email,
  isLoading,
+  isCollapsed = false,
+  onCloseSideNav,
 }: UserMenuProps) {
  const router = useRouter();
-  const { themePreference, switchTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
+  const { openModal } = useModal();
+  const isMobile = useIsMobile();

  const handleLogout = async () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
    await authClient.signOut();
-
    router.push("/login");
  };

+  const handleLinkClick = () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+  };
+
+  const handleModalOpen = (modalType: string) => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+    openModal(modalType);
+  };
+
  const avatarUrl = imageUrl ? getAvatarUrl(imageUrl) : null;

  return (
    <Menu as="div" className="relative inline-block w-full text-left">
      <div>
        {isLoading ? (
-          <div className="flex">
+          <div className={twMerge(!isCollapsed && "flex")}>
            <div className="h-[30px] w-[30px] animate-pulse rounded-full bg-light-200 dark:bg-dark-200" />
-            <div className="mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+            <div
+              className={twMerge(
+                "mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
+                isCollapsed && "md:hidden",
+              )}
+            />
          </div>
        ) : (
-          <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
+          <Menu.Button
+            className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000"
+            title={isCollapsed ? email : undefined}
+          >
            {avatarUrl ? (
              <Image
                src={avatarUrl}
@@ -63,7 +93,14 @@ export default function UserMenu({
                </svg>
              </span>
            )}
-            <span className="mx-2 truncate text-sm">{email}</span>
+            <span
+              className={twMerge(
+                "mx-2 truncate text-sm",
+                isCollapsed && "md:hidden",
+              )}
+            >
+              {email}
+            </span>
          </Menu.Button>
        )}
      </div>
@@ -77,52 +114,89 @@ export default function UserMenu({
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full 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">
+        <Menu.Items
+          className={twMerge(
+            "absolute bottom-[40px] z-10 mt-2 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 ? "left-0 w-48" : "left-0 w-full",
+          )}
+        >
          <div className="flex flex-col text-neutral-900 dark:text-dark-1000">
            <div className="p-1">
              <div className="flex w-full items-center px-3 py-2 text-left text-xs">
-                <span>Theme</span>
+                <span>{t`Theme`}</span>
              </div>
              <Menu.Item>
                <button
-                  onClick={() => switchTheme("system")}
+                  onClick={() => setTheme("system")}
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
                  <span
-                    className={classNames(
-                      themePreference === "system" ? "visible" : "invisible",
+                    className={twMerge(
+                      theme === "system" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
                  />
-                  System
+                  {t`System`}
                </button>
              </Menu.Item>
              <Menu.Item>
                <button
-                  onClick={() => switchTheme("dark")}
+                  onClick={() => setTheme("dark")}
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
                  <span
-                    className={classNames(
-                      themePreference === "dark" ? "visible" : "invisible",
+                    className={twMerge(
+                      theme === "dark" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
                  />
-                  Dark
+                  {t`Dark`}
                </button>
              </Menu.Item>
              <Menu.Item>
                <button
-                  onClick={() => switchTheme("light")}
+                  onClick={() => setTheme("light")}
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
                  <span
-                    className={classNames(
-                      themePreference === "light" ? "visible" : "invisible",
+                    className={twMerge(
+                      theme === "light" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
                  />
-                  Light
+                  {t`Light`}
+                </button>
+              </Menu.Item>
+            </div>
+            <div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
+              <Menu.Item>
+                <Link
+                  href="mailto:support@kan.bn"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={handleLinkClick}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
+                >
+                  {t`Support`}
+                </Link>
+              </Menu.Item>
+              <Menu.Item>
+                <Link
+                  href="https://docs.kan.bn"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={handleLinkClick}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
+                >
+                  {t`Documentation`}
+                </Link>
+              </Menu.Item>
+              <Menu.Item>
+                <button
+                  onClick={() => handleModalOpen("NEW_FEEDBACK")}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
+                >
+                  {t`Feedback`}
                </button>
              </Menu.Item>
            </div>
@@ -132,7 +206,7 @@ export default function UserMenu({
                  onClick={handleLogout}
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
-                  Logout
+                  {t`Logout`}
                </button>
              </Menu.Item>
            </div>
--- a/apps/web/src/components/WorkspaceMenu.tsx
+++ b/apps/web/src/components/WorkspaceMenu.tsx
@@ -1,11 +1,17 @@
 import { Menu, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
 import { Fragment } from "react";
 import { HiCheck } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";

 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";

-export default function WorkspaceMenu() {
+export default function WorkspaceMenu({
+  isCollapsed = false,
+}: {
+  isCollapsed?: boolean;
+}) {
  const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
    useWorkspace();
  const { openModal } = useModal();
@@ -14,22 +20,43 @@ export default function WorkspaceMenu() {
    <Menu as="div" className="relative inline-block w-full pb-3 text-left">
      <div>
        {isLoading ? (
-          <div className="mb-1 flex p-1.5">
-            <div className="h-6 w-6 animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
-            <div className="ml-2 h-6 w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
+          <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 h-6 w-[150px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
+                isCollapsed && "md:hidden",
+              )}
+            />
          </div>
        ) : (
-          <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
-            <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
+          <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="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
+            <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="ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700">
+              <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",
+                )}
+              >
                Pro
              </span>
            )}
@@ -46,7 +73,12 @@ export default function WorkspaceMenu() {
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <Menu.Items className="absolute left-0 z-10 w-full 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">
+        <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">
@@ -55,17 +87,17 @@ export default function WorkspaceMenu() {
                    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">
+                    <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 text-xs font-medium">
+                      <span className="ml-2 truncate text-xs font-medium">
                        {availableWorkspace.name}
                      </span>
                    </div>
-                    {workspace.name === availableWorkspace.name && (
+                    {workspace.publicId === availableWorkspace.publicId && (
                      <span>
                        <HiCheck className="h-4 w-4" aria-hidden="true" />
                      </span>
@@ -81,7 +113,7 @@ export default function WorkspaceMenu() {
                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"
              >
-                Create workspace
+                {t`Create workspace`}
              </button>
            </Menu.Item>
          </div>
--- a/apps/web/src/components/modal.tsx
+++ b/apps/web/src/components/modal.tsx
@@ -7,15 +7,19 @@ interface Props {
  children: React.ReactNode;
  modalSize?: "sm" | "md" | "lg";
  positionFromTop?: "sm" | "md" | "lg";
+  isVisible?: boolean;
 }

 const Modal: React.FC<Props> = ({
  children,
  modalSize = "sm",
  positionFromTop = "md",
+  isVisible,
 }) => {
  const { isOpen, closeModal } = useModal();

+  const shouldShow = isVisible !== undefined ? isVisible : isOpen;
+
  const modalSizeMap = {
    sm: "max-w-[400px]",
    md: "max-w-[550px]",
@@ -29,8 +33,8 @@ const Modal: React.FC<Props> = ({
  };

  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+    <Transition.Root show={shouldShow} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={closeModal}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
@@ -43,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}
--- a/apps/web/src/env.ts
+++ b/apps/web/src/env.ts
@@ -15,9 +15,18 @@ export const env = createEnv({
   */
  server: {
    BETTER_AUTH_SECRET: z.string(),
-    BETTER_AUTH_URL: z.string(),
-    BETTER_AUTH_TRUSTED_ORIGINS: z.string(),
-    POSTGRES_URL: z.string().url(),
+    BETTER_AUTH_TRUSTED_ORIGINS: z
+      .string()
+      .transform((s) => (s === "" ? undefined : s))
+      .refine(
+        (s) =>
+          !s ||
+          s.split(",").every((l) => z.string().url().safeParse(l).success),
+      )
+      .optional(),
+    POSTGRES_URL: z.string().url().optional().or(z.literal("")),
+    TRELLO_APP_API_KEY: z.string().optional(),
+    TRELLO_APP_SECRET: z.string().optional(),
    STRIPE_SECRET_KEY: z.string().optional(),
    GOOGLE_CLIENT_ID: z.string().optional(),
    GOOGLE_CLIENT_SECRET: z.string().optional(),
@@ -42,6 +51,10 @@ export const env = createEnv({
    VK_CLIENT_SECRET: z.string().optional(),
    LINKEDIN_CLIENT_ID: z.string().optional(),
    LINKEDIN_CLIENT_SECRET: z.string().optional(),
+    // Generic OIDC Provider
+    OIDC_CLIENT_ID: z.string().optional(),
+    OIDC_CLIENT_SECRET: z.string().optional(),
+    OIDC_DISCOVERY_URL: z.string().optional(),
    REDDIT_CLIENT_ID: z.string().optional(),
    REDDIT_CLIENT_SECRET: z.string().optional(),
    ROBLOX_CLIENT_ID: z.string().optional(),
@@ -60,7 +73,8 @@ export const env = createEnv({
    S3_SECRET_ACCESS_KEY: z.string().optional(),
    S3_REGION: z.string().optional(),
    S3_ENDPOINT: z.string().optional(),
-    EMAIL_FROM: z.string(),
+    S3_FORCE_PATH_STYLE: z.string().optional(),
+    EMAIL_FROM: z.string().optional(),
  },

  /**
@@ -70,10 +84,34 @@ export const env = createEnv({
  client: {
    NEXT_PUBLIC_KAN_ENV: z.string().optional(),
    NEXT_PUBLIC_UMAMI_ID: z.string().optional(),
-    NEXT_PUBLIC_BASE_URL: z.string(),
-    NEXT_PUBLIC_STORAGE_URL: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_HOST: z.string().optional(),
+    NEXT_PUBLIC_USE_STANDALONE_OUTPUT: z.string().optional(),
+    NEXT_PUBLIC_BASE_URL: z.string().url(),
+    NEXT_PUBLIC_STORAGE_URL: z.string().url().optional(),
    NEXT_PUBLIC_AVATAR_BUCKET_NAME: z.string().optional(),
    NEXT_PUBLIC_STORAGE_DOMAIN: z.string().optional(),
+    NEXT_PUBLIC_ALLOW_CREDENTIALS: z
+      .string()
+      .transform((s) => (s === "" ? undefined : s))
+      .refine(
+        (s) => !s || s.toLowerCase() === "true" || s.toLowerCase() === "false",
+      )
+      .optional(),
+    NEXT_PUBLIC_DISABLE_SIGN_UP: z
+      .string()
+      .transform((s) => (s === "" ? undefined : s))
+      .refine(
+        (s) => !s || s.toLowerCase() === "true" || s.toLowerCase() === "false",
+      )
+      .optional(),
+    NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY: z
+      .string()
+      .transform((s) => (s === "" ? undefined : s))
+      .refine(
+        (s) => !s || s.toLowerCase() === "true" || s.toLowerCase() === "false",
+      )
+      .optional(),
  },
  /**
   * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
@@ -82,10 +120,18 @@ export const env = createEnv({
    NEXT_PUBLIC_KAN_ENV: process.env.NEXT_PUBLIC_KAN_ENV,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_UMAMI_ID: process.env.NEXT_PUBLIC_UMAMI_ID,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
    NEXT_PUBLIC_STORAGE_URL: process.env.NEXT_PUBLIC_STORAGE_URL,
    NEXT_PUBLIC_AVATAR_BUCKET_NAME: process.env.NEXT_PUBLIC_AVATAR_BUCKET_NAME,
    NEXT_PUBLIC_STORAGE_DOMAIN: process.env.NEXT_PUBLIC_STORAGE_DOMAIN,
+    NEXT_PUBLIC_ALLOW_CREDENTIALS: process.env.NEXT_PUBLIC_ALLOW_CREDENTIALS,
+    NEXT_PUBLIC_DISABLE_SIGN_UP: process.env.NEXT_PUBLIC_DISABLE_SIGN_UP,
+    NEXT_PUBLIC_USE_STANDALONE_OUTPUT:
+      process.env.NEXT_PUBLIC_USE_STANDALONE_OUTPUT,
+    NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY:
+      process.env.NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY,
  },
  skipValidation:
    !!process.env.CI || process.env.npm_lifecycle_event === "lint",
--- a/apps/web/src/hooks/useClickOutside.ts
+++ b/apps/web/src/hooks/useClickOutside.ts
@@ -0,0 +1,59 @@
+import type { RefObject } from "react";
+
+import { useEventListener } from "./useEventListener";
+
+/** Supported event types. */
+type EventType =
+  | "mousedown"
+  | "mouseup"
+  | "touchstart"
+  | "touchend"
+  | "focusin"
+  | "focusout";
+
+/**
+ * Custom hook that handles clicks outside a specified element.
+ * @template T - The type of the element's reference.
+ * @param {RefObject<T> | RefObject<T>[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
+ * @param {(event: MouseEvent | TouchEvent | FocusEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
+ * @param {EventType} [eventType] - The mouse event type to listen for (optional, default is 'mousedown').
+ * @param {?AddEventListenerOptions} [eventListenerOptions] - The options object to be passed to the `addEventListener` method (optional).
+ * @returns {void}
+ * @example
+ * ```tsx
+ * const containerRef = useRef(null);
+ * useClickOutside([containerRef], () => {
+ *   // Handle clicks outside the container.
+ * });
+ * ```
+ */
+export function useClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T> | RefObject<T>[],
+  handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
+  eventType: EventType = "mousedown",
+  eventListenerOptions: AddEventListenerOptions = {},
+): void {
+  useEventListener(
+    eventType,
+    (event) => {
+      const target = event.target as Node;
+
+      // Do nothing if the target is not connected element with document
+      if (!target.isConnected) {
+        return;
+      }
+
+      const isOutside = Array.isArray(ref)
+        ? ref
+            .filter((r) => Boolean(r.current))
+            .every((r) => r.current && !r.current.contains(target))
+        : ref.current && !ref.current.contains(target);
+
+      if (isOutside) {
+        handler(event);
+      }
+    },
+    undefined,
+    eventListenerOptions,
+  );
+}
--- a/apps/web/src/hooks/useEventListener.ts
+++ b/apps/web/src/hooks/useEventListener.ts
@@ -0,0 +1,120 @@
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
+
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+// MediaQueryList Event based useEventListener interface
+function useEventListener<K extends keyof MediaQueryListEventMap>(
+  eventName: K,
+  handler: (event: MediaQueryListEventMap[K]) => void,
+  element: RefObject<MediaQueryList>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Window Event based useEventListener interface
+function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void,
+  element?: undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Element Event based useEventListener interface
+function useEventListener<
+  K extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
+  T extends Element = K extends keyof HTMLElementEventMap
+    ? HTMLDivElement
+    : SVGElement,
+>(
+  eventName: K,
+  handler:
+    | ((event: HTMLElementEventMap[K]) => void)
+    | ((event: SVGElementEventMap[K]) => void),
+  element: RefObject<T>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Document Event based useEventListener interface
+function useEventListener<K extends keyof DocumentEventMap>(
+  eventName: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  element: RefObject<Document>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+/**
+ * Custom hook that attaches event listeners to DOM elements, the window, or media query lists.
+ * @template KW - The type of event for window events.
+ * @template KH - The type of event for HTML or SVG element events.
+ * @template KM - The type of event for media query list events.
+ * @template T - The type of the DOM element (default is `HTMLElement`).
+ * @param {KW | KH | KM} eventName - The name of the event to listen for.
+ * @param {(event: WindowEventMap[KW] | HTMLElementEventMap[KH] | SVGElementEventMap[KH] | MediaQueryListEventMap[KM] | Event) => void} handler - The event handler function.
+ * @param {RefObject<T>} [element] - The DOM element or media query list to attach the event listener to (optional).
+ * @param {boolean | AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener (optional).
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-event-listener)
+ * @example
+ * ```tsx
+ * // Example 1: Attach a window event listener
+ * useEventListener('resize', handleResize);
+ * ```
+ * @example
+ * ```tsx
+ * // Example 2: Attach a document event listener with options
+ * const elementRef = useRef(document);
+ * useEventListener('click', handleClick, elementRef, { capture: true });
+ * ```
+ * @example
+ * ```tsx
+ * // Example 3: Attach an element event listener
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * useEventListener('click', handleButtonClick, buttonRef);
+ * ```
+ */
+function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
+  KM extends keyof MediaQueryListEventMap,
+  T extends HTMLElement | SVGAElement | MediaQueryList = HTMLElement,
+>(
+  eventName: KW | KH | KM,
+  handler: (
+    event:
+      | WindowEventMap[KW]
+      | HTMLElementEventMap[KH]
+      | SVGElementEventMap[KH]
+      | MediaQueryListEventMap[KM]
+      | Event,
+  ) => void,
+  element?: RefObject<T>,
+  options?: boolean | AddEventListenerOptions,
+) {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler);
+
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current ?? window;
+
+    if (!(targetElement && targetElement.addEventListener)) return;
+
+    // Create event listener that calls handler function stored in ref
+    const listener: typeof handler = (event) => {
+      savedHandler.current(event);
+    };
+
+    targetElement.addEventListener(eventName, listener, options);
+
+    // Remove event listener on cleanup
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+export { useEventListener };
--- a/apps/web/src/hooks/useIsomorphicLayoutEffect.ts
+++ b/apps/web/src/hooks/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,15 @@
+import { useEffect, useLayoutEffect } from "react";
+
+/**
+ * Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
+ * @param {Function} effect - The effect function to be executed.
+ * @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
+ * @example
+ * ```tsx
+ * useIsomorphicLayoutEffect(() => {
+ *   // Code to be executed during the layout phase on the client side
+ * }, [dependency1, dependency2]);
+ * ```
+ */
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
--- a/apps/web/src/hooks/useLocalisation.ts
+++ b/apps/web/src/hooks/useLocalisation.ts
@@ -0,0 +1,23 @@
+import { useLingui } from "@lingui/react";
+
+import type { Locale } from "~/locales";
+import { useLinguiContext } from "~/providers/lingui";
+import { activateLocale } from "~/utils/i18n";
+
+export function useLocalisation() {
+  const { i18n } = useLingui();
+  const { locale, setLocale, availableLocales } = useLinguiContext();
+
+  const handleSetLocale = async (newLocale: Locale) => {
+    await activateLocale(newLocale);
+    setLocale(newLocale);
+  };
+
+  return {
+    locale,
+    setLocale: handleSetLocale,
+    availableLocales,
+    formatDate: i18n.date,
+    formatNumber: i18n.number,
+  };
+}
--- a/apps/web/src/hooks/useMediaQuery.ts
+++ b/apps/web/src/hooks/useMediaQuery.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}
+
+export function useIsMobile(): boolean {
+  return useMediaQuery("(max-width: 767px)");
+}
--- a/apps/web/src/hooks/useModalFormState.ts
+++ b/apps/web/src/hooks/useModalFormState.ts
@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { useModal } from "~/providers/modal";
+
+interface UseModalFormStateOptions<T> {
+  modalType: string;
+  initialValues: T;
+  resetOnClose?: boolean;
+}
+
+export function useModalFormState<T extends Record<string, any>>({
+  modalType,
+  initialValues,
+  resetOnClose = false,
+}: UseModalFormStateOptions<T>) {
+  const { modalContentType, isOpen, getModalState, setModalState, clearModalState } = useModal();
+  
+  const isCurrentModal = modalContentType === modalType;
+  const savedState = getModalState(modalType) as T | undefined;
+  
+  // get current form state (using the saved values if available, otherwise the initial values)
+  const formState = savedState || initialValues;
+
+  const saveFormState = (state: Partial<T>) => {
+    if (!isCurrentModal) return;
+    
+    const currentState = getModalState(modalType) || initialValues;
+    const newState = { ...currentState, ...state };
+    setModalState(modalType, newState);
+  };
+
+  const clearFormState = () => {
+    clearModalState(modalType);
+  };
+
+  useEffect(() => {
+    if (resetOnClose && !isOpen && savedState) {
+      clearModalState(modalType);
+    }
+  }, [isOpen, resetOnClose, savedState, modalType, clearModalState]);
+
+  return {
+    formState,
+    saveFormState,
+    clearFormState,
+    isCurrentModal,
+    hasSavedState: !!savedState,
+  };
+} 
--- a/apps/web/src/locales/de/messages.po
+++ b/apps/web/src/locales/de/messages.po
--- a/apps/web/src/locales/de/messages.ts
+++ b/apps/web/src/locales/de/messages.ts
--- a/apps/web/src/locales/en/messages.po
+++ b/apps/web/src/locales/en/messages.po
--- a/apps/web/src/locales/en/messages.ts
+++ b/apps/web/src/locales/en/messages.ts
--- a/apps/web/src/locales/es/messages.po
+++ b/apps/web/src/locales/es/messages.po
--- a/apps/web/src/locales/es/messages.ts
+++ b/apps/web/src/locales/es/messages.ts
--- a/apps/web/src/locales/fr/messages.po
+++ b/apps/web/src/locales/fr/messages.po
--- a/apps/web/src/locales/fr/messages.ts
+++ b/apps/web/src/locales/fr/messages.ts
--- a/apps/web/src/locales/index.ts
+++ b/apps/web/src/locales/index.ts
@@ -0,0 +1,14 @@
+export const locales = ["en", "fr", "de", "es", "it", "nl"] as const;
+
+export type Locale = (typeof locales)[number];
+
+export const defaultLocale: Locale = "en";
+
+export const localeNames: Record<Locale, string> = {
+  en: "English",
+  fr: "Français",
+  de: "Deutsch",
+  es: "Español",
+  it: "Italiano",
+  nl: "Nederlands",
+};
--- a/apps/web/src/locales/it/messages.po
+++ b/apps/web/src/locales/it/messages.po
--- a/apps/web/src/locales/it/messages.ts
+++ b/apps/web/src/locales/it/messages.ts
--- a/apps/web/src/locales/nl/messages.po
+++ b/apps/web/src/locales/nl/messages.po
--- a/apps/web/src/locales/nl/messages.ts
+++ b/apps/web/src/locales/nl/messages.ts
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -0,0 +1,18 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { env } from "next-runtime-env";
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname === "/") {
+    if (env("NEXT_PUBLIC_KAN_ENV") !== "cloud") {
+      const loginUrl = new URL("/login", request.url);
+      return NextResponse.redirect(loginUrl);
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/"],
+};
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -1,12 +1,20 @@
 import "~/styles/globals.css";
+import "~/utils/i18n";

-import type { AppType } from "next/app";
+import type { NextPage, Viewport } from "next";
+import type { AppProps, AppType } from "next/app";
+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 posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";

+import { LinguiProviderWrapper } from "~/providers/lingui";
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
-import { ThemeProvider } from "~/providers/theme";
+import { ThemeProvider } from "next-themes";
 import { api } from "~/utils/api";

 const jakarta = Plus_Jakarta_Sans({
@@ -20,7 +28,39 @@ export const metadata = {
  icons: [{ rel: "icon", url: "/favicon.ico" }],
 };

-const MyApp: AppType = ({ Component, pageProps }) => {
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
+  const posthogKey = env("NEXT_PUBLIC_POSTHOG_KEY");
+
+  useEffect(() => {
+    if (posthogKey) {
+      posthog.init(posthogKey, {
+        api_host: env("NEXT_PUBLIC_POSTHOG_HOST"),
+        person_profiles: "identified_only",
+        defaults: "2025-05-24",
+        loaded: (posthog) => {
+          if (process.env.NODE_ENV === "development") posthog.debug();
+        },
+      });
+    }
+  }, [posthogKey]);
+
+  const getLayout = Component.getLayout ?? ((page) => page);
+
  return (
    <>
      <style jsx global>{`
@@ -32,7 +72,7 @@ const MyApp: AppType = ({ Component, pageProps }) => {
        }
      `}</style>
      {env("NEXT_PUBLIC_UMAMI_ID") && (
-        <script
+        <Script
          defer
          src="https://cloud.umami.is/script.js"
          data-website-id={env("NEXT_PUBLIC_UMAMI_ID")}
@@ -40,13 +80,21 @@ const MyApp: AppType = ({ Component, pageProps }) => {
      )}
      <script src="/__ENV.js" />
      <main className="font-sans">
-        <ThemeProvider>
-          <ModalProvider>
-            <PopupProvider>
-              <Component {...pageProps} />
-            </PopupProvider>
-          </ModalProvider>
-        </ThemeProvider>
+        <LinguiProviderWrapper>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              <ModalProvider>
+                <PopupProvider>
+                {posthogKey ? (
+                  <PostHogProvider client={posthog}>
+                    {getLayout(<Component {...pageProps} />)}
+                  </PostHogProvider>
+                ) : (
+                  getLayout(<Component {...pageProps} />)
+                )}
+                </PopupProvider>
+              </ModalProvider>
+          </ThemeProvider>
+        </LinguiProviderWrapper>
      </main>
    </>
  );
--- a/apps/web/src/pages/api/auth/[...all].ts
+++ b/apps/web/src/pages/api/auth/[...all].ts
@@ -5,6 +5,6 @@ import { createDrizzleClient } from "@kan/db/client";

 export const config = { api: { bodyParser: false } };

-const auth = initAuth(createDrizzleClient());
+export const auth = initAuth(createDrizzleClient());

 export default toNodeHandler(auth.handler);
--- a/apps/web/src/pages/api/stripe/create_checkout_session.ts
+++ b/apps/web/src/pages/api/stripe/create_checkout_session.ts
@@ -3,6 +3,7 @@ import { env } from "next-runtime-env";
 import { z } from "zod";

 import { createNextApiContext } from "@kan/api/trpc";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
 import { createStripeClient } from "@kan/stripe";

@@ -40,17 +41,22 @@ export default async function handler(
    const body = req.body as CheckoutSessionRequest;
    const { successUrl, cancelUrl, slug, workspacePublicId } = body;

-    if (!successUrl || !cancelUrl || !slug || !workspacePublicId) {
+    if (!successUrl || !cancelUrl || !workspacePublicId) {
      return res.status(400).json({ error: "Missing required fields" });
    }

-    const slugResult = workspaceSlugSchema.safeParse(slug);
+    if (slug) {
+      const slugResult = workspaceSlugSchema.safeParse(slug);

-    if (!slugResult.success) {
-      return new Response(JSON.stringify({ error: "Invalid workspace slug" }), {
-        status: 400,
-        headers: { "Content-Type": "application/json" },
-      });
+      if (!slugResult.success) {
+        return new Response(
+          JSON.stringify({ error: "Invalid workspace slug" }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
    }

    const workspace = await workspaceRepo.getAllByUserId(db, user.id);
@@ -66,20 +72,37 @@ export default async function handler(
      });
    }

+    const subscription = await subscriptionRepo.create(db, {
+      plan: "pro",
+      referenceId: workspacePublicId,
+      userId: user.id,
+      stripeCustomerId: user.stripeCustomerId ?? "",
+      status: "incomplete",
+    });
+
+    const subscriptionId = subscription?.id;
+
+    if (!subscriptionId) {
+      return res.status(500).json({ error: "Error creating subscription" });
+    }
+
    const session = await stripe.checkout.sessions.create({
      mode: "subscription",
      line_items: [
        {
-          price: process.env.STRIPE_PRO_PLAN_PRICE_ID,
+          price: process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID,
          quantity: 1,
        },
      ],
      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}`,
      cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
+      client_reference_id: workspacePublicId,
      customer: user.stripeCustomerId ?? undefined,
      metadata: {
-        workspaceSlug: slug,
+        ...(slug && { workspaceSlug: slug }),
        workspacePublicId,
+        userId: user.id,
+        subscriptionId,
      },
    });

--- a/apps/web/src/pages/api/stripe/webhook.ts
+++ b/apps/web/src/pages/api/stripe/webhook.ts
@@ -36,7 +36,7 @@ export default async function handler(
    const event = stripe.webhooks.constructEvent(
      rawBody,
      sig,
-      process.env.STRIPE_WEBHOOK_SECRET!,
+      process.env.STRIPE_WEBHOOK_SECRET_LEGACY!,
    );

    const { db } = await createNextApiContext(req);
@@ -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",
          });
        }
--- a/apps/web/src/pages/api/trello/authenticate.ts
+++ b/apps/web/src/pages/api/trello/authenticate.ts
@@ -0,0 +1,51 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { createNextApiContext } from "@kan/api/trpc";
+import { integrations } from "@kan/db/schema";
+import { addYears } from "date-fns";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  const { user } = await createNextApiContext(req);
+
+  if (!user)
+    return res.status(401).json({ message: "User not authenticated" });
+
+  const apiKey = process.env.TRELLO_APP_API_KEY;
+
+  if (!apiKey)
+    return res.status(500).json({ message: "Trello API key not set in Environment Variables" });
+
+  const token = req.body.token;
+
+  if (!token)
+    return res.status(400).json({ message: "No token found" });
+
+  try {
+    const { db } = await createNextApiContext(req);
+
+    await db.insert(integrations).values({
+      provider: "trello",
+      userId: user.id,
+      accessToken: token,
+      expiresAt: addYears(new Date(), 1),
+    }).onConflictDoUpdate({
+      set: {
+        accessToken: token,
+        expiresAt: addYears(new Date(), 1),
+      },
+      target: [integrations.userId, integrations.provider],
+    });
+
+    return res.status(200).json({ message: "Trello authentication successful" });
+  } catch (err) {
+    console.error("Trello authentication error:", err);
+    return res.status(400).json({ message: "Trello authentication failed" });
+  }
+}
--- a/apps/web/src/pages/api/upload/image.ts
+++ b/apps/web/src/pages/api/upload/image.ts
@@ -46,6 +46,7 @@ export default async function handler(
    const client = new S3Client({
      region: env.S3_REGION ?? "",
      endpoint: env.S3_ENDPOINT ?? "",
+      forcePathStyle: env.S3_FORCE_PATH_STYLE === "true",
      credentials: {
        accessKeyId: env.S3_ACCESS_KEY_ID ?? "",
        secretAccessKey: env.S3_SECRET_ACCESS_KEY ?? "",
@@ -58,6 +59,7 @@ export default async function handler(
      new PutObjectCommand({
        Bucket: nextRuntimeEnv("NEXT_PUBLIC_AVATAR_BUCKET_NAME") ?? "",
        Key: filename,
+        ACL: "public-read",
      }),
    );

--- a/apps/web/src/pages/api/v1/openapi.json.ts
+++ b/apps/web/src/pages/api/v1/openapi.json.ts
@@ -1,4 +1,4 @@
-import { type NextApiRequest, type NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";

 import { openApiDocument } from "@kan/api/openapi";

--- a/apps/web/src/pages/boards/[...boardId]/index.tsx
+++ b/apps/web/src/pages/boards/[...boardId]/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import BoardView from "~/views/board";

-export default function BoardPage() {
+const BoardPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <BoardView />
-      </Dashboard>
+    <>
+      <BoardView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+BoardPage.getLayout = (page) => getDashboardLayout(page);
+
+export default BoardPage;
--- a/apps/web/src/pages/boards/index.tsx
+++ b/apps/web/src/pages/boards/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "../_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import BoardsView from "~/views/boards";

-export default function BoardsPage() {
+const BoardsPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <BoardsView />
-      </Dashboard>
+    <>
+      <BoardsView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+BoardsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default BoardsPage;
--- a/apps/web/src/pages/cards/[cardId]/index.tsx
+++ b/apps/web/src/pages/cards/[cardId]/index.tsx
@@ -1,15 +1,18 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
-import CardView from "~/views/card";
+import CardView, { CardRightPanel } from "~/views/card";

-export default function CardPage() {
+const CardPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <CardView />
-      </Dashboard>
+    <>
+      <CardView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+CardPage.getLayout = (page) =>
+  getDashboardLayout(page, <CardRightPanel />, true);
+
+export default CardPage;
--- a/apps/web/src/pages/members/index.tsx
+++ b/apps/web/src/pages/members/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import MembersView from "~/views/members";

-export default function MembersPage() {
+const MembersPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <MembersView />
-      </Dashboard>
+    <>
+      <MembersView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+MembersPage.getLayout = (page) => getDashboardLayout(page);
+
+export default MembersPage;
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
-import SettingsView from "~/views/settings";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
+import SettingsView from "~/views/settings";

-export default function SettingsPage() {
+const SettingsPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <SettingsView />
-      </Dashboard>
+    <>
+      <SettingsView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+SettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default SettingsPage;
--- a/apps/web/src/pages/settings/trello/authorize.tsx
+++ b/apps/web/src/pages/settings/trello/authorize.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+export default function TrelloAuthorize() {
+    useEffect(() => {
+        const hash = window.location.hash;
+        const token = hash.split("=")[1];
+        if (token) {
+            console.log("Posting token to /api/trello/authenticate", token);
+            fetch("/api/trello/authenticate", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ token }),
+            }).then(() => {
+                window.close();
+            });
+        }
+    }, []);
+
+    return <div className="flex h-[200px] items-center justify-center">
+        <p className="text-center">Connecting to Trello...</p>
+    </div>;
+}
--- a/apps/web/src/providers/lingui.tsx
+++ b/apps/web/src/providers/lingui.tsx
@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+import { I18nProvider } from "@lingui/react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+import type { Locale } from "~/locales";
+import { defaultLocale, locales } from "~/locales";
+import { activateLocale, i18n, initializeI18n } from "~/utils/i18n";
+
+interface LinguiContextType {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  availableLocales: Locale[];
+}
+
+const LinguiContext = createContext<LinguiContextType | undefined>(undefined);
+
+export function useLinguiContext() {
+  const context = useContext(LinguiContext);
+  if (!context) {
+    throw new Error("useLinguiContext must be used within a LinguiProvider");
+  }
+  return context;
+}
+
+interface LinguiProviderProps {
+  children: ReactNode;
+  initialLocale?: Locale;
+}
+
+function detectBrowserLocale(availableLocales: readonly string[]): Locale {
+  if (typeof navigator === "undefined") {
+    return defaultLocale;
+  }
+
+  const browserLanguages = navigator.languages || [navigator.language];
+
+  for (const browserLang of browserLanguages) {
+    const langCode = browserLang.split("-")[0];
+
+    if (langCode && availableLocales.includes(langCode.toLowerCase())) {
+      return langCode.toLowerCase() as Locale;
+    }
+  }
+
+  return defaultLocale;
+}
+
+export function LinguiProviderWrapper({
+  children,
+  initialLocale = defaultLocale,
+}: LinguiProviderProps) {
+  const [locale, setLocale] = useState<Locale>(defaultLocale);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  initializeI18n();
+
+  useEffect(() => {
+    const savedLocale = localStorage.getItem("locale") as Locale;
+
+    if (savedLocale && locales.includes(savedLocale)) {
+      setLocale(savedLocale);
+    } else {
+      const detectedLocale = detectBrowserLocale(locales);
+      setLocale(detectedLocale);
+    }
+    setIsHydrated(true);
+  }, [initialLocale]);
+
+  useEffect(() => {
+    if (isHydrated && locale !== defaultLocale) {
+      activateLocale(locale).then(() => {
+        localStorage.setItem("locale", locale);
+      });
+    } else if (isHydrated) {
+      localStorage.setItem("locale", locale);
+    }
+  }, [locale, isHydrated]);
+
+  return (
+    <LinguiContext.Provider
+      value={{ locale, setLocale, availableLocales: [...locales] }}
+    >
+      <I18nProvider i18n={i18n} key={locale}>
+        {children}
+      </I18nProvider>
+    </LinguiContext.Provider>
+  );
+}
--- a/apps/web/src/providers/modal.tsx
+++ b/apps/web/src/providers/modal.tsx
@@ -1,6 +1,16 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";

-type ModalContextType = {
+interface ModalState {
+  contentType: string;
+  entityId?: string;
+  entityLabel?: string;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
+interface ModalContextType {
  isOpen: boolean;
  openModal: (
    contentType: string,
@@ -8,37 +18,83 @@ type ModalContextType = {
    entityLabel?: string,
  ) => void;
  closeModal: () => void;
+  closeModals: (count: number) => void;
+  clearAllModals: () => void;
  modalContentType: string;
  entityId: string;
  entityLabel: string;
-};
-
-interface Props {
-  children: React.ReactNode;
+  modalStates: Record<string, any>;
+  setModalState: (modalType: string, state: any) => void;
+  getModalState: (modalType: string) => any;
+  clearModalState: (modalType: string) => void;
+  clearAllModalStates: () => void;
 }

 const ModalContext = createContext<ModalContextType | undefined>(undefined);

 export const ModalProvider: React.FC<Props> = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [entityId, setEntityId] = useState("");
-  const [entityLabel, setEntityLabel] = useState("");
-  const [modalContentType, setModalContentType] = useState("");
+  const [modalStack, setModalStack] = useState<ModalState[]>([]);
+  const [modalStates, setModalStates] = useState<Record<string, any>>({});

-  const openModal = (
-    contentType: string,
-    entityId?: string,
-    entityLabel?: string,
-  ) => {
-    setIsOpen(true);
-    setModalContentType(contentType);
-    if (entityId) setEntityId(entityId);
-    if (entityLabel) setEntityLabel(entityLabel);
-  };
+  const isOpen = modalStack.length > 0;
+  const currentModal = modalStack[modalStack.length - 1];
+  const modalContentType = currentModal?.contentType || "";
+  const entityId = currentModal?.entityId || "";
+  const entityLabel = currentModal?.entityLabel || "";

-  const closeModal = () => {
-    setIsOpen(false);
-  };
+  const openModal = useCallback(
+    (contentType: string, entityId?: string, entityLabel?: string) => {
+      const newModal: ModalState = { contentType, entityId, entityLabel };
+      setModalStack((prev) => [...prev, newModal]);
+    },
+    [],
+  );
+
+  const closeModal = useCallback(() => {
+    setModalStack((prev) => {
+      if (prev.length <= 1) {
+        return [];
+      }
+      return prev.slice(0, -1);
+    });
+  }, []);
+
+  const closeModals = useCallback((count: number) => {
+    setModalStack((prev) => {
+      const newLength = Math.max(0, prev.length - count);
+      return prev.slice(0, newLength);
+    });
+  }, []);
+
+  const clearAllModals = useCallback(() => {
+    setModalStack([]);
+  }, []);
+
+  const setModalState = useCallback((modalType: string, state: any) => {
+    setModalStates((prev) => ({
+      ...prev,
+      [modalType]: state,
+    }));
+  }, []);
+
+  const getModalState = useCallback(
+    (modalType: string) => {
+      return modalStates[modalType];
+    },
+    [modalStates],
+  );
+
+  const clearModalState = useCallback((modalType: string) => {
+    setModalStates((prev) => {
+      const newStates = { ...prev };
+      delete newStates[modalType];
+      return newStates;
+    });
+  }, []);
+
+  const clearAllModalStates = useCallback(() => {
+    setModalStates({});
+  }, []);

  return (
    <ModalContext.Provider
@@ -46,9 +102,16 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
        isOpen,
        openModal,
        closeModal,
+        closeModals,
+        clearAllModals,
        modalContentType,
        entityId,
        entityLabel,
+        modalStates,
+        setModalState,
+        getModalState,
+        clearModalState,
+        clearAllModalStates,
      }}
    >
      {children}
--- a/apps/web/src/providers/workspace.tsx
+++ b/apps/web/src/providers/workspace.tsx
@@ -47,12 +47,16 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
  const [hasLoaded, setHasLoaded] = useState(false);

  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`);
  };

@@ -66,21 +70,15 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
      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);
    }
@@ -116,7 +114,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
        role: primaryWorkspaceRole,
      });
    }
-  }, [data]);
+  }, [data, isLoading]);

  return (
    <WorkspaceContext.Provider
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -2,10 +2,11 @@
@tailwind components;
@tailwind utilities;

-[contenteditable=true]:empty:before {
+[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #707070;
+  font-size: 0.8rem;
 }

 .gradient-border::before {
@@ -18,7 +19,7 @@
    transparent 110deg,
    transparent 360deg
  );
-  content: '';
+  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
--- a/apps/web/src/utils/helpers.ts
+++ b/apps/web/src/utils/helpers.ts
@@ -45,10 +45,12 @@ export const formatMemberDisplayName = (
  return localPart.replace(/[_-]/g, ".");
 };

-export const getAvatarUrl = (imageOrKey: string) => {
+export const getAvatarUrl = (imageOrKey: string | null) => {
+  if (!imageOrKey) return "";
+
  if (imageOrKey.startsWith("http://") || imageOrKey.startsWith("https://")) {
    return imageOrKey;
  }
-  
+
  return `${env("NEXT_PUBLIC_STORAGE_URL")}/${env("NEXT_PUBLIC_AVATAR_BUCKET_NAME")}/${imageOrKey}`;
 };
--- a/apps/web/src/utils/i18n.ts
+++ b/apps/web/src/utils/i18n.ts
@@ -0,0 +1,53 @@
+import { i18n } from "@lingui/core";
+
+import type { Locale } from "~/locales";
+import { defaultLocale } from "~/locales";
+import { messages as enMessages } from "~/locales/en/messages";
+
+const loadMessages = async (locale: Locale) => {
+  switch (locale) {
+    case "en":
+      return enMessages;
+    case "fr":
+      return (await import("~/locales/fr/messages")).messages;
+    case "de":
+      return (await import("~/locales/de/messages")).messages;
+    case "es":
+      return (await import("~/locales/es/messages")).messages;
+    case "it":
+      return (await import("~/locales/it/messages")).messages;
+    case "nl":
+      return (await import("~/locales/nl/messages")).messages;
+    default:
+      return enMessages;
+  }
+};
+
+let isInitialized = false;
+const loadedLocales = new Set<string>();
+
+export function initializeI18n(locale: Locale = defaultLocale) {
+  if (!isInitialized) {
+    i18n.load(defaultLocale, enMessages);
+    i18n.activate(defaultLocale);
+    loadedLocales.add(defaultLocale);
+    isInitialized = true;
+  }
+
+  return i18n;
+}
+
+export async function activateLocale(locale: Locale) {
+  if (!loadedLocales.has(locale)) {
+    const messages = await loadMessages(locale);
+    i18n.load(locale, messages);
+    loadedLocales.add(locale);
+  }
+
+  i18n.activate(locale);
+  return i18n;
+}
+
+initializeI18n();
+
+export { i18n };
--- a/apps/web/src/views/auth/login/index.tsx
+++ b/apps/web/src/views/auth/login/index.tsx
@@ -1,14 +1,19 @@
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { env } from "next-runtime-env";
 import { useState } from "react";

-import { useRouter } from "next/navigation";
+import { authClient } from "@kan/auth/client";
+
 import { Auth } from "~/components/AuthForm";
 import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";
-import { authClient } from "@kan/auth/client";

 export default function LoginPage() {
  const router = useRouter();
+  const isSignUpDisabled = env("NEXT_PUBLIC_DISABLE_SIGN_UP") === "true";
  const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
  const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");

@@ -23,7 +28,7 @@ export default function LoginPage() {

  return (
    <>
-      <PageHead title="Login | kan.bn" />
+      <PageHead title={t`Login | kan.bn`} />
      <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
        <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
          <div className="z-10 flex w-full flex-col items-center">
@@ -33,12 +38,15 @@ export default function LoginPage() {
              </h1>
            </Link>
            <p className="mb-10 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
-              {isMagicLinkSent ? "Check your inbox" : "Welcome back"}
+              {isMagicLinkSent ? t`Check your inbox` : t`Welcome back`}
            </p>
            {isMagicLinkSent ? (
              <div className="sm:mx-auto sm:w-full sm:max-w-sm">
                <p className="text-md mt-2 text-center text-light-1000 dark:text-dark-1000">
-                  {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
+                  <Trans>
+                    Click on the link we've sent to {magicLinkRecipient} to sign
+                    in.
+                  </Trans>
                </p>
              </div>
            ) : (
@@ -48,12 +56,16 @@ export default function LoginPage() {
                </div>
              </div>
            )}
-            <p className="mt-4 text-sm text-light-1000 dark:text-dark-1000">
-              Don't have an account?{" "}
-              <span className="underline">
-                <Link href="/signup">Sign up</Link>
-              </span>
-            </p>
+            {!isSignUpDisabled && (
+              <p className="mt-4 text-sm text-light-1000 dark:text-dark-1000">
+                <Trans>
+                  Don't have an account?{" "}
+                  <span className="underline">
+                    <Link href="/signup">Sign up</Link>
+                  </span>
+                </Trans>
+              </p>
+            )}
          </div>
          <PatternedBackground />
        </div>
--- a/apps/web/src/views/auth/signup/index.tsx
+++ b/apps/web/src/views/auth/signup/index.tsx
@@ -1,36 +1,60 @@
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { env } from "next-runtime-env";
 import { useState } from "react";

-// import { useRouter } from "next/navigation";
+import { authClient } from "@kan/auth/client";
+
 import { Auth } from "~/components/AuthForm";
 import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";

-// import { api } from "~/utils/api";
-
-export default function SignupPage() {
-  // const router = useRouter();
+export default function SignUpPage() {
+  const router = useRouter();
+  const isSignUpDisabled = env("NEXT_PUBLIC_DISABLE_SIGN_UP") === "true";
  const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
  const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");

+  const { data } = authClient.useSession();
+
+  if (data?.user.id) router.push("/boards");
+
  const handleMagicLinkSent = (value: boolean, recipient: string) => {
    setIsMagicLinkSent(value);
    setMagicLinkRecipient(recipient);
  };

-  // const authCookieExists = document.cookie
-  //   .split("; ")
-  //   .some((cookie) => cookie.includes("auth-token"));
-
-  // const { data } = api.user.getUser.useQuery(undefined, {
-  //   enabled: authCookieExists ? true : false,
-  // });
-
-  // if (data?.id) router.push("/boards");
+  if (isSignUpDisabled) {
+    return (
+      <>
+        <PageHead title={t`Sign up | kan.bn`} />
+        <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
+          <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
+            <div className="z-10 flex w-full flex-col items-center">
+              <Link href="/">
+                <h1 className="mb-6 text-lg font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+                  kan.bn
+                </h1>
+              </Link>
+              <p className="mb-10 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+                {t`Sign up disabled`}
+              </p>
+              <p className="text-md text-center text-light-1000 dark:text-dark-1000">
+                {t`Sign up is currently disabled. Please try again later.`}
+              </p>
+            </div>
+            <PatternedBackground />
+          </div>
+        </main>
+      </>
+    );
+  }

  return (
    <>
-      <PageHead title="Sign up | kan.bn" />
+      <PageHead title={t`Sign up | kan.bn`} />
      <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
        <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
          <div className="z-10 flex w-full flex-col items-center">
@@ -40,26 +64,31 @@ export default function SignupPage() {
              </h1>
            </Link>
            <p className="mb-10 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
-              {isMagicLinkSent ? "Check your inbox" : "Create your account"}
+              {isMagicLinkSent ? t`Check your inbox` : t`Get started`}
            </p>
            {isMagicLinkSent ? (
              <div className="sm:mx-auto sm:w-full sm:max-w-sm">
                <p className="text-md mt-2 text-center text-light-1000 dark:text-dark-1000">
-                  {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
+                  <Trans>
+                    Click on the link we've sent to {magicLinkRecipient} to sign
+                    in.
+                  </Trans>
                </p>
              </div>
            ) : (
              <div className="w-full rounded-lg border border-light-500 bg-light-300 px-4 py-10 dark:border-dark-400 dark:bg-dark-200 sm:max-w-md lg:px-10">
                <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-                  <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+                  <Auth setIsMagicLinkSent={handleMagicLinkSent} isSignUp />
                </div>
              </div>
            )}
            <p className="mt-4 text-sm text-light-1000 dark:text-dark-1000">
-              Already have an account?{" "}
-              <span className="underline">
-                <Link href="/login">Sign in</Link>
-              </span>
+              <Trans>
+                Already have an account?{" "}
+                <span className="underline">
+                  <Link href="/login">Sign in</Link>
+                </span>
+              </Trans>
            </p>
          </div>
          <PatternedBackground />
--- a/apps/web/src/views/board/components/BoardDropdown.tsx
+++ b/apps/web/src/views/board/components/BoardDropdown.tsx
@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { HiEllipsisHorizontal, HiLink, HiOutlineTrash } from "react-icons/hi2";

 import Dropdown from "~/components/Dropdown";
@@ -11,12 +12,12 @@ export default function BoardDropdown({ isLoading }: { isLoading: boolean }) {
      disabled={isLoading}
      items={[
        {
-          label: "Edit board URL",
+          label: t`Edit board URL`,
          action: () => openModal("UPDATE_BOARD_SLUG"),
          icon: <HiLink className="h-[16px] w-[16px] text-dark-900" />,
        },
        {
-          label: "Delete board",
+          label: t`Delete board`,
          action: () => openModal("DELETE_BOARD"),
          icon: <HiOutlineTrash className="h-[16px] w-[16px] text-dark-900" />,
        },
--- a/apps/web/src/views/board/components/Card.tsx
+++ b/apps/web/src/views/board/components/Card.tsx
@@ -1,5 +1,6 @@
 import Avatar from "~/components/Avatar";
 import Badge from "~/components/Badge";
+import CircularProgress from "~/components/CircularProgress";
 import LabelIcon from "~/components/LabelIcon";
 import { getAvatarUrl } from "~/utils/helpers";

@@ -7,6 +8,7 @@ const Card = ({
  title,
  labels,
  members,
+  checklists,
 }: {
  title: string;
  labels: { name: string; colourCode: string | null }[];
@@ -15,11 +17,32 @@ const Card = ({
    email: string;
    user: { name: string | null; email: string; image: string | null } | null;
  }[];
+  checklists: {
+    publicId: string;
+    name: string;
+    items: {
+      publicId: string;
+      title: string;
+      completed: boolean;
+      index: number;
+    }[];
+  }[];
 }) => {
+  const completedItems = checklists.reduce((acc, checklist) => {
+    return acc + checklist.items.filter((item) => item.completed).length;
+  }, 0);
+
+  const totalItems = checklists.reduce((acc, checklist) => {
+    return acc + checklist.items.length;
+  }, 0);
+
+  const progress =
+    totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
+
  return (
    <div className="flex flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300">
      <span>{title}</span>
-      {labels.length || members.length ? (
+      {labels.length || members.length || checklists.length > 0 ? (
        <div className="mt-2 flex flex-col justify-end">
          <div className="space-x-0.5">
            {labels.map((label) => (
@@ -29,21 +52,37 @@ const Card = ({
              />
            ))}
          </div>
-          <div className="isolate flex justify-end -space-x-1 overflow-hidden">
-            {members.map(({ user, email }) => {
-              const avatarUrl = user?.image
-                ? getAvatarUrl(user.image)
-                : undefined;
-
-              return (
-                <Avatar
-                  name={user?.name ?? ""}
-                  email={user?.email ?? email}
-                  imageUrl={avatarUrl}
+          <div className="flex items-center justify-end gap-1">
+            {checklists.length > 0 && (
+              <div className="flex items-center gap-1 rounded-full border-[1px] border-light-300 px-2 py-1 dark:border-dark-600">
+                <CircularProgress
+                  progress={progress || 2}
                  size="sm"
+                  className="flex-shrink-0"
                />
-              );
-            })}
+                <span className="text-[10px] text-light-900 dark:text-dark-950">
+                  {completedItems}/{totalItems}
+                </span>
+              </div>
+            )}
+            {members.length > 0 && (
+              <div className="isolate flex justify-end -space-x-1 overflow-hidden">
+                {members.map(({ user, email }) => {
+                  const avatarUrl = user?.image
+                    ? getAvatarUrl(user.image)
+                    : undefined;
+
+                  return (
+                    <Avatar
+                      name={user?.name ?? ""}
+                      email={user?.email ?? email}
+                      imageUrl={avatarUrl}
+                      size="sm"
+                    />
+                  );
+                })}
+              </div>
+            )}
          </div>
        </div>
      ) : null}
--- a/apps/web/src/views/board/components/Filters.tsx
+++ b/apps/web/src/views/board/components/Filters.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
 import {
  HiMiniXMark,
  HiOutlineTag,
@@ -89,7 +90,7 @@ const Filters = ({
      ? [
          {
            key: "members",
-            label: "Members",
+            label: t`Members`,
            icon: <HiOutlineUserCircle size={16} />,
            items: formattedMembers,
          },
@@ -97,7 +98,7 @@ const Filters = ({
      : []),
    {
      key: "labels",
-      label: "Labels",
+      label: t`Labels`,
      icon: <HiOutlineTag size={16} />,
      items: formattedLabels,
    },
@@ -145,13 +146,13 @@ const Filters = ({
          disabled={isLoading}
          iconLeft={<IoFilterOutline />}
        >
-          Filter
+          {t`Filter`}
        </Button>
        {numOfFilters > 0 && (
          <button
            type="button"
            onClick={clearFilters}
-            aria-label="Clear filters"
+            aria-label={t`Clear filters`}
            className="group absolute -right-[8px] -top-[8px] flex h-5 w-5 items-center justify-center rounded-full border-2 border-light-100 bg-light-1000 text-[8px] font-[700] text-light-600 dark:border-dark-50 dark:bg-dark-1000 dark:text-dark-600"
          >
            <span className="group-hover:hidden">{numOfFilters}</span>
--- a/apps/web/src/views/board/components/List.tsx
+++ b/apps/web/src/views/board/components/List.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { t } from "@lingui/core/macro";
 import { Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
 import {
@@ -106,14 +107,14 @@ export default function List({
                <Dropdown
                  items={[
                    {
-                      label: "Add a card",
+                      label: t`Add a card`,
                      action: () => openNewCardForm(list.publicId),
                      icon: (
                        <HiOutlineSquaresPlus className="h-[18px] w-[18px] text-dark-900" />
                      ),
                    },
                    {
-                      label: "Delete list",
+                      label: t`Delete list`,
                      action: handleOpenDeleteListConfirmation,
                      icon: (
                        <HiOutlineTrash className="h-[18px] w-[18px] text-dark-900" />
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import {
@@ -12,9 +14,11 @@ import { generateUID } from "@kan/shared/utils";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
+import Editor, { WorkspaceMember } from "~/components/Editor";
 import Input from "~/components/Input";
 import LabelIcon from "~/components/LabelIcon";
 import Toggle from "~/components/Toggle";
+import { useModalFormState } from "~/hooks/useModalFormState";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
@@ -42,21 +46,28 @@ export function NewCardForm({
  queryParams,
 }: NewCardFormProps) {
  const { showPopup } = usePopup();
-  const { closeModal, openModal } = useModal();
+  const { closeModal, openModal, modalStates, clearModalState } = useModal();

  const utils = api.useUtils();

+  // persists the form values
+  const { formState, saveFormState } = useModalFormState<NewCardFormInput>({
+    modalType: "NEW_CARD",
+    initialValues: {
+      title: "",
+      description: "",
+      listPublicId,
+      labelPublicIds: [],
+      memberPublicIds: [],
+      isCreateAnotherEnabled: false,
+      position: "start",
+    },
+    resetOnClose: true,
+  });
+
  const { register, handleSubmit, reset, setValue, watch } =
    useForm<NewCardFormInput>({
-      defaultValues: {
-        title: "",
-        description: "",
-        listPublicId,
-        labelPublicIds: [],
-        memberPublicIds: [],
-        isCreateAnotherEnabled: false,
-        position: "start",
-      },
+      values: formState,
    });

  const labelPublicIds = watch("labelPublicIds") || [];
@@ -64,11 +75,49 @@ export function NewCardForm({
  const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
  const position = watch("position");
  const title = watch("title");
+  const description = watch("description");

+  // saving form state whenever form values change
+  useEffect(() => {
+    const subscription = watch((data) => {
+      saveFormState(data as NewCardFormInput);
+    });
+    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"];
+    if (newLabelId !== undefined && !labelPublicIds.includes(newLabelId)) {
+      setValue("labelPublicIds", [...labelPublicIds, newLabelId]);
+    }
+  }, [modalStates, labelPublicIds]);
+
+  // 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"];
+    
+      if (newLabelId && availableLabelIds.includes(newLabelId)) {
+        clearModalState("NEW_LABEL_CREATED");
+      }
+      
+      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"]]);
+  
  const createCard = api.card.create.useMutation({
    onMutate: async (args) => {
      await utils.board.byId.cancel();
@@ -89,9 +138,14 @@ export function NewCardForm({
                args.labelPublicIds.includes(label.publicId),
              ),
              members:
-                oldBoard.workspace.members.filter((member) =>
-                  args.memberPublicIds.includes(member.publicId),
-                ) ?? [],
+                oldBoard.workspace.members
+                  .filter((member) =>
+                    args.memberPublicIds.includes(member.publicId),
+                  )
+                  .map((member) => ({
+                    ...member,
+                    deletedAt: null,
+                  })) ?? [],
              _filteredLabels: labelPublicIds.map((id) => ({ publicId: id })),
              _filteredMembers: memberPublicIds.map((id) => ({ publicId: id })),
              index: position === "start" ? 0 : list.cards.length,
@@ -114,26 +168,33 @@ export function NewCardForm({
    onError: (error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to create card",
-        message: error.data?.zodError?.fieldErrors.title?.[0] ?
-          `${error.data?.zodError?.fieldErrors.title?.[0].replace("String", "Title")}` :
-          "Please try again later, or contact customer support.",
+        header: t`Unable to create card`,
+        message: error.data?.zodError?.fieldErrors.title?.[0]
+          ? `${error.data.zodError.fieldErrors.title[0].replace("String", "Title")}`
+          : t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
    onSuccess: async () => {
      const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
-      if (!isCreateAnotherEnabled) closeModal();
+      if (!isCreateAnotherEnabled) {
+        // close modal (state will auto-clear due to resetOnClose: true)
+        closeModal();
+      } else {
+        // reset form for creating another card
+        const newFormState = {
+          title: "",
+          description: "",
+          listPublicId: watch("listPublicId"),
+          labelPublicIds: [],
+          memberPublicIds: [],
+          isCreateAnotherEnabled,
+          position,
+        };
+        reset(newFormState);
+        saveFormState(newFormState);
+      }
      await utils.board.byId.invalidate(queryParams);
-      reset({
-        title: "",
-        description: "",
-        listPublicId: watch("listPublicId"),
-        labelPublicIds: [],
-        memberPublicIds: [],
-        isCreateAnotherEnabled,
-        position,
-      });
    },
  });

@@ -165,6 +226,7 @@ export function NewCardForm({
        member.user?.name ?? null,
        member.user?.email ?? member.email,
      ),
+      selected: memberPublicIds.includes(member.publicId),
      leftIcon: (
        <Avatar
          size="xs"
@@ -225,7 +287,7 @@ export function NewCardForm({
      <div className="px-5 pt-5">
        <div className="flex w-full items-center justify-between pb-5">
          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
-            New card
+            {t`New card`}
          </h2>
          <button
            type="button"
@@ -242,7 +304,7 @@ export function NewCardForm({
        <div>
          <Input
            id="title"
-            placeholder="Card title"
+            placeholder={t`Card title`}
            {...register("title")}
            onKeyDown={async (e) => {
              if (e.key === "Enter") {
@@ -253,18 +315,26 @@ export function NewCardForm({
          />
        </div>
        <div className="mt-2">
-          <Input
-            placeholder="Add description..."
-            onChange={(e) => setValue("description", e.target.value)}
-            value={watch("description")}
-            contentEditable
-            onKeyDown={async (e) => {
-              if (e.key === "Enter" && e.shiftKey) {
-                e.preventDefault();
-                await handleSubmit(onSubmit)();
+          <div className="block max-h-48 min-h-24 w-full overflow-y-auto rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-2 text-sm shadow-sm ring-1 ring-inset ring-light-600 focus-within:ring-2 focus-within:ring-inset focus-within:ring-light-700 dark:ring-dark-700 dark:focus-within:ring-dark-700 sm:leading-6">
+            <Editor
+              content={description}
+              onChange={(value) => {
+                setValue("description", value);
+                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,
+                })) ?? []
              }
-            }}
-          />
+            />
+          </div>
        </div>
        <div className="mt-2 flex space-x-1">
          <div className="w-fit">
@@ -284,7 +354,7 @@ export function NewCardForm({
            >
              <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 ? (
-                  "Members"
+                  t`Members`
                ) : (
                  <div className="flex -space-x-1 overflow-hidden">
                    {memberPublicIds.map((memberPublicId) => {
@@ -321,11 +391,11 @@ export function NewCardForm({
                openModal("EDIT_LABEL", labelPublicId)
              }
              handleCreate={() => openModal("NEW_LABEL")}
-              createNewItemLabel="Create new label"
+              createNewItemLabel={t`Create new label`}
            >
              <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">
                {!labelPublicIds.length ? (
-                  "Labels"
+                  t`Labels`
                ) : (
                  <>
                    <div
@@ -358,7 +428,9 @@ export function NewCardForm({
                      })}
                    </div>
                    {labelPublicIds.length > 1 && (
-                      <div className="ml-1">{`${labelPublicIds.length} labels`}</div>
+                      <div className="ml-1">
+                        <Trans>{`${labelPublicIds.length} labels`}</Trans>
+                      </div>
                    )}
                  </>
                )}
@@ -383,13 +455,18 @@ export function NewCardForm({

      <div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
        <Toggle
-          label="Create another"
+          label={t`Create another`}
          isChecked={isCreateAnotherEnabled}
          onChange={handleToggleCreateAnother}
        />

        <div>
-          <Button type="submit" disabled={title.length === 0 || createCard.isPending}>Create card</Button>
+          <Button
+            type="submit"
+            disabled={title.length === 0 || createCard.isPending}
+          >
+            {t`Create card`}
+          </Button>
        </div>
      </div>
    </form>
--- a/apps/web/src/views/board/components/NewListForm.tsx
+++ b/apps/web/src/views/board/components/NewListForm.tsx
@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
@@ -73,8 +74,8 @@ export function NewListForm({
    onError: (_error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to create list",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to create list`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -108,7 +109,7 @@ export function NewListForm({
      <div className="px-5 pt-5">
        <div className="flex w-full items-center justify-between pb-4">
          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
-            New list
+            {t`New list`}
          </h2>
          <button
            type="button"
@@ -124,7 +125,7 @@ export function NewListForm({

        <Input
          id="list-name"
-          placeholder="List name"
+          placeholder={t`List name`}
          {...register("name")}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
@@ -136,7 +137,7 @@ export function NewListForm({
      </div>
      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
        <Toggle
-          label="Create another"
+          label={t`Create another`}
          isChecked={isCreateAnotherEnabled}
          onChange={() =>
            setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
@@ -144,7 +145,12 @@ export function NewListForm({
        />

        <div>
-          <Button type="submit">Create list</Button>
+          <Button
+            type="submit"
+            disabled={createList.isPending || !watch("name")}
+          >
+            {t`Create list`}
+          </Button>
        </div>
      </div>
    </form>
--- a/apps/web/src/views/board/components/UpdateBoardSlugButton.tsx
+++ b/apps/web/src/views/board/components/UpdateBoardSlugButton.tsx
@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { env } from "next-runtime-env";
+import { HiLink } from "react-icons/hi";
+
+const UpdateBoardSlugButton = ({
+  handleOnClick,
+  workspaceSlug,
+  boardSlug,
+  isLoading,
+}: {
+  handleOnClick: () => void;
+  workspaceSlug: string;
+  boardSlug: string;
+  isLoading: boolean;
+}) => {
+  if (!isLoading && (!workspaceSlug || !boardSlug)) return <></>;
+
+  if (isLoading) {
+    return (
+      <div className="hidden h-[36px] w-[225px] animate-pulse rounded-full bg-light-200 dark:bg-dark-100 xl:flex" />
+    );
+  }
+
+  return (
+    <button
+      onClick={handleOnClick}
+      className="hidden cursor-pointer items-center gap-2 rounded-full border-[1px] bg-light-50 p-1 pl-4 pr-1 text-sm text-light-950 hover:bg-light-100 dark:border-dark-600 dark:bg-dark-50 dark:text-dark-900 dark:hover:bg-dark-100 xl:flex"
+    >
+      <div className="flex items-center">
+        <span>
+          {env("NEXT_PUBLIC_KAN_ENV") === "cloud"
+            ? "kan.bn"
+            : env("NEXT_PUBLIC_BASE_URL")}
+        </span>
+        <div className="mx-1.5 h-4 w-px rotate-[20deg] bg-gray-300 dark:bg-dark-600"></div>
+        <span>{workspaceSlug}</span>
+        <div className="mx-1.5 h-4 w-px rotate-[20deg] bg-gray-300 dark:bg-dark-600"></div>
+        <span>{boardSlug}</span>
+      </div>
+      <Link
+        href={`${env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/${boardSlug}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+        className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-light-200 dark:hover:bg-dark-200"
+      >
+        <HiLink className="h-[13px] w-[13px]" />
+      </Link>
+    </button>
+  );
+};
+
+export default UpdateBoardSlugButton;
--- a/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
+++ b/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
@@ -12,20 +13,6 @@ import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";

-const schema = z.object({
-  slug: z
-    .string()
-    .min(3, {
-      message: "Board URL must be at least 3 characters long",
-    })
-    .max(60, { message: "Board URL cannot exceed 60 characters" })
-    .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
-      message: "Board URL can only contain letters, numbers, and hyphens",
-    }),
-});
-
-type FormValues = z.infer<typeof schema>;
-
 interface QueryParams {
  boardPublicId: string;
  members: string[];
@@ -47,6 +34,20 @@ export function UpdateBoardSlugForm({
  const { showPopup } = usePopup();
  const utils = api.useUtils();

+  const schema = z.object({
+    slug: z
+      .string()
+      .min(3, {
+        message: t`Board URL must be at least 3 characters long`,
+      })
+      .max(60, { message: t`Board URL cannot exceed 60 characters` })
+      .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
+        message: t`Board URL can only contain letters, numbers, and hyphens`,
+      }),
+  });
+
+  type FormValues = z.infer<typeof schema>;
+
  const {
    register,
    handleSubmit,
@@ -67,8 +68,8 @@ export function UpdateBoardSlugForm({
  const updateBoardSlug = api.board.update.useMutation({
    onError: () => {
      showPopup({
-        header: "Unable to update board URL",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update board URL`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -78,17 +79,15 @@ export function UpdateBoardSlugForm({
    },
  });

-  const checkBoardSlugAvailability =
-    api.board.checkSlugAvailability.useQuery(
-      {
-        boardSlug: debouncedSlug,
-        boardPublicId,
-      },
-      {
-        enabled:
-          !!debouncedSlug && debouncedSlug !== boardSlug && !errors.slug,
-      },
-    );
+  const checkBoardSlugAvailability = api.board.checkSlugAvailability.useQuery(
+    {
+      boardSlug: debouncedSlug,
+      boardPublicId,
+    },
+    {
+      enabled: !!debouncedSlug && debouncedSlug !== boardSlug && !errors.slug,
+    },
+  );

  const isBoardSlugAvailable = checkBoardSlugAvailability.data;

@@ -100,7 +99,7 @@ export function UpdateBoardSlugForm({

  const onSubmit = (data: FormValues) => {
    if (!isBoardSlugAvailable) return;
-    if (isBoardSlugAvailable?.isReserved) return;
+    if (isBoardSlugAvailable.isReserved) return;

    updateBoardSlug.mutate({
      slug: data.slug,
@@ -113,7 +112,7 @@ export function UpdateBoardSlugForm({
      <div className="px-5 pt-5">
        <div className="flex w-full items-center justify-between pb-4">
          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
-            Edit board URL
+            {t`Edit board URL`}
          </h2>
          <button
            type="button"
@@ -130,10 +129,13 @@ export function UpdateBoardSlugForm({
        <Input
          id="board-slug"
          {...register("slug")}
-          errorMessage={errors.slug?.message || (isBoardSlugAvailable?.isReserved
-            ? "This board URL has already been taken"
-            : undefined)}
-          prefix={`${env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
+          errorMessage={
+            errors.slug?.message ||
+            (isBoardSlugAvailable?.isReserved
+              ? t`This board URL has already been taken`
+              : undefined)
+          }
+          prefix={`${env("NEXT_PUBLIC_KAN_ENV") === "cloud" ? "kan.bn" : env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
              e.preventDefault();
@@ -150,7 +152,14 @@ export function UpdateBoardSlugForm({
        />
      </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>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="secondary"
+            href="/settings?edit=workspace_url"
+            onClick={closeModal}
+          >
+            {t`Edit workspace URL`}
+          </Button>
          <Button
            type="submit"
            isLoading={updateBoardSlug.isPending}
@@ -158,10 +167,11 @@ export function UpdateBoardSlugForm({
              !isDirty ||
              updateBoardSlug.isPending ||
              errors.slug?.message !== undefined ||
-              isBoardSlugAvailable?.isReserved
+              isBoardSlugAvailable?.isReserved ||
+              checkBoardSlugAvailability.isLoading
            }
          >
-            Update
+            {t`Update`}
          </Button>
        </div>
      </div>
--- a/apps/web/src/views/board/components/VisibilityButton.tsx
+++ b/apps/web/src/views/board/components/VisibilityButton.tsx
@@ -1,7 +1,9 @@
+import { t } from "@lingui/core/macro";
 import { useEffect, useState } from "react";
 import { HiOutlineEye, HiOutlineEyeSlash } from "react-icons/hi2";

 import Button from "~/components/Button";
+import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";

@@ -20,6 +22,7 @@ const VisibilityButton = ({
 }: {
  visibility: "public" | "private";
  boardPublicId: string;
+  boardSlug: string;
  queryParams: QueryParams;
  isLoading: boolean;
  isAdmin: boolean;
@@ -38,12 +41,16 @@ const VisibilityButton = ({

  const updateBoardVisibility = api.board.update.useMutation({
    onSuccess: () => {
-      setStateVisibility(isPublic ? "private" : "public");
+      showPopup({
+        header: t`Board visibility updated`,
+        message: t`The visibility of your board has been set to ${isPublic ? "public" : "private"}.`,
+        icon: "success",
+      });
    },
    onError: () => {
      showPopup({
-        header: "Unable to update board visibility",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update board visibility`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -52,23 +59,39 @@ const VisibilityButton = ({
    },
  });

-  const handleUpdateBoardVisibility = () => {
-    updateBoardVisibility.mutate({
-      visibility: isPublic ? "private" : "public",
-      boardPublicId,
-    });
-  };
-
  return (
-    <Button
-      variant="secondary"
-      onClick={handleUpdateBoardVisibility}
-      iconLeft={isPublic ? <HiOutlineEye /> : <HiOutlineEyeSlash />}
-      isLoading={updateBoardVisibility.isPending}
-      disabled={isLoading || !isAdmin}
-    >
-      {isPublic ? "Public" : "Private"}
-    </Button>
+    <div className="relative">
+      <CheckboxDropdown
+        items={[
+          {
+            key: "public",
+            value: t`Public`,
+            selected: isPublic,
+          },
+          {
+            key: "private",
+            value: t`Private`,
+            selected: !isPublic,
+          },
+        ]}
+        handleSelect={(_g, i) => {
+          setStateVisibility(isPublic ? "private" : "public");
+          updateBoardVisibility.mutate({
+            visibility: i.key as "public" | "private",
+            boardPublicId,
+          });
+        }}
+        menuSpacing="md"
+      >
+        <Button
+          variant="secondary"
+          iconLeft={isPublic ? <HiOutlineEye /> : <HiOutlineEyeSlash />}
+          disabled={isLoading || !isAdmin}
+        >
+          {t`Visibility`}
+        </Button>
+      </CheckboxDropdown>
+    </div>
  );
 };

--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -2,6 +2,7 @@ import type { DropResult } from "react-beautiful-dnd";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
@@ -31,6 +32,7 @@ import Filters from "./components/Filters";
 import List from "./components/List";
 import { NewCardForm } from "./components/NewCardForm";
 import { NewListForm } from "./components/NewListForm";
+import UpdateBoardSlugButton from "./components/UpdateBoardSlugButton";
 import { UpdateBoardSlugForm } from "./components/UpdateBoardSlugForm";
 import VisibilityButton from "./components/VisibilityButton";

@@ -42,7 +44,7 @@ export default function BoardPage() {
  const utils = api.useUtils();
  const { showPopup } = usePopup();
  const { workspace } = useWorkspace();
-  const { openModal, modalContentType, entityId } = useModal();
+  const { openModal, modalContentType, entityId, isOpen } = useModal();
  const [selectedPublicListId, setSelectedPublicListId] =
    useState<PublicListId>("");
  const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -128,8 +130,8 @@ export default function BoardPage() {
    onError: (_error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to update list",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update list`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -184,8 +186,8 @@ export default function BoardPage() {
    onError: (_error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to update card",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update card`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -232,14 +234,105 @@ export default function BoardPage() {
    }
  };

+  const renderModalContent = () => {
+    return (
+      <>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "DELETE_BOARD"}
+        >
+          <DeleteBoardConfirmation boardPublicId={boardId ?? ""} />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "DELETE_LIST"}
+        >
+          <DeleteListConfirmation
+            listPublicId={selectedPublicListId}
+            queryParams={queryParams}
+          />
+        </Modal>
+
+        <Modal
+          modalSize="md"
+          isVisible={isOpen && modalContentType === "NEW_CARD"}
+        >
+          <NewCardForm
+            boardPublicId={boardId ?? ""}
+            listPublicId={selectedPublicListId}
+            queryParams={queryParams}
+          />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "NEW_LIST"}
+        >
+          <NewListForm
+            boardPublicId={boardId ?? ""}
+            queryParams={queryParams}
+          />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+        >
+          <NewWorkspaceForm />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "NEW_LABEL"}
+        >
+          <LabelForm boardPublicId={boardId ?? ""} refetch={refetchBoard} />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "EDIT_LABEL"}
+        >
+          <LabelForm
+            boardPublicId={boardId ?? ""}
+            refetch={refetchBoard}
+            isEdit
+          />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "DELETE_LABEL"}
+        >
+          <DeleteLabelConfirmation
+            refetch={refetchBoard}
+            labelPublicId={entityId}
+          />
+        </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "UPDATE_BOARD_SLUG"}
+        >
+          <UpdateBoardSlugForm
+            boardPublicId={boardId ?? ""}
+            workspaceSlug={workspace.slug ?? ""}
+            boardSlug={boardData?.slug ?? ""}
+            queryParams={queryParams}
+          />
+        </Modal>
+      </>
+    );
+  };
+
  return (
    <>
      <PageHead
-        title={`${boardData?.name ?? "Board"} | ${workspace.name ?? "Workspace"}`}
+        title={`${boardData?.name ?? t`Board`} | ${workspace.name ?? t`Workspace`}`}
      />
      <div className="relative flex h-full flex-col">
        <PatternedBackground />
-        <div className="z-10 flex w-full justify-between p-8">
+        <div className="z-10 flex w-full flex-col justify-between p-6 md:flex-row md:p-8">
          {isLoading && !boardData && (
            <div className="flex space-x-2">
              <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
@@ -248,7 +341,7 @@ export default function BoardPage() {
          {boardData && (
            <form
              onSubmit={handleSubmit(onSubmit)}
-              className="focus-visible:outline-none"
+              className="order-2 focus-visible:outline-none md:order-1"
            >
              <input
                id="name"
@@ -260,20 +353,29 @@ export default function BoardPage() {
            </form>
          )}
          {!boardData && !isLoading && (
-            <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">Board not found</p>
+            <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`}
+            </p>
          )}

-          <div className="flex items-center space-x-2">
+          <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 ?? []}
+              members={boardData?.workspace.members?.filter(member => member.user !== null) ?? []}
              position="left"
              isLoading={!boardData}
            />
@@ -289,7 +391,7 @@ export default function BoardPage() {
              }}
              disabled={!boardData}
            >
-              New list
+              {t`New list`}
            </Button>
            <BoardDropdown isLoading={!boardData} />
          </div>
@@ -304,15 +406,15 @@ export default function BoardPage() {
            </div>
          ) : boardData ? (
            <>
-              {boardData?.lists.length === 0 ? (
+              {boardData.lists.length === 0 ? (
                <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
                  <div className="flex flex-col items-center">
                    <HiOutlineSquare3Stack3D 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">
-                      No lists
+                      {t`No lists`}
                    </p>
                    <p className="text-[14px] text-light-900 dark:text-dark-900">
-                      Get started by creating a new list
+                      {t`Get started by creating a new list`}
                    </p>
                  </div>
                  <Button
@@ -320,7 +422,7 @@ export default function BoardPage() {
                      if (boardId) openNewListForm(boardId);
                    }}
                  >
-                    Create new list
+                    {t`Create new list`}
                  </Button>
                </div>
              ) : (
@@ -337,7 +439,7 @@ export default function BoardPage() {
                        {...provided.droppableProps}
                      >
                        <div className="min-w-[2rem]" />
-                        {boardData?.lists.map((list, index) => (
+                        {boardData.lists.map((list, index) => (
                          <List
                            index={index}
                            key={index}
@@ -354,7 +456,7 @@ export default function BoardPage() {
                                <div
                                  ref={provided.innerRef}
                                  {...provided.droppableProps}
-                                  className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-265px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-600"
+                                  className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-225px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600"
                                >
                                  {list.cards.map((card, index) => (
                                    <Draggable
@@ -374,12 +476,13 @@ export default function BoardPage() {
                                          }}
                                          key={card.publicId}
                                          href={`/cards/${card.publicId}`}
-                                          className={`mb-2 flex !cursor-pointer flex-col ${card.publicId.startsWith(
-                                            "PLACEHOLDER",
-                                          )
-                                            ? "pointer-events-none"
-                                            : ""
-                                            }`}
+                                          className={`mb-2 flex !cursor-pointer flex-col ${
+                                            card.publicId.startsWith(
+                                              "PLACEHOLDER",
+                                            )
+                                              ? "pointer-events-none"
+                                              : ""
+                                          }`}
                                          ref={provided.innerRef}
                                          {...provided.draggableProps}
                                          {...provided.dragHandleProps}
@@ -388,6 +491,7 @@ export default function BoardPage() {
                                            title={card.title}
                                            labels={card.labels}
                                            members={card.members}
+                                            checklists={card.checklists ?? []}
                                          />
                                        </Link>
                                      )}
@@ -409,55 +513,7 @@ export default function BoardPage() {
            </>
          ) : null}
        </div>
-        <Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}>
-          {modalContentType === "DELETE_BOARD" && (
-            <DeleteBoardConfirmation boardPublicId={boardId ?? ""} />
-          )}
-          {modalContentType === "DELETE_LIST" && (
-            <DeleteListConfirmation
-              listPublicId={selectedPublicListId}
-              queryParams={queryParams}
-            />
-          )}
-          {modalContentType === "NEW_CARD" && (
-            <NewCardForm
-              boardPublicId={boardId ?? ""}
-              listPublicId={selectedPublicListId}
-              queryParams={queryParams}
-            />
-          )}
-          {modalContentType === "NEW_LIST" && (
-            <NewListForm
-              boardPublicId={boardId ?? ""}
-              queryParams={queryParams}
-            />
-          )}
-          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-          {modalContentType === "NEW_LABEL" && (
-            <LabelForm boardPublicId={boardId ?? ""} refetch={refetchBoard} />
-          )}
-          {modalContentType === "EDIT_LABEL" && (
-            <LabelForm
-              boardPublicId={boardId ?? ""}
-              refetch={refetchBoard}
-              isEdit
-            />
-          )}
-          {modalContentType === "DELETE_LABEL" && (
-            <DeleteLabelConfirmation
-              refetch={refetchBoard}
-              labelPublicId={entityId}
-            />
-          )}
-          {modalContentType === "UPDATE_BOARD_SLUG" && (
-            <UpdateBoardSlugForm
-              boardPublicId={boardId ?? ""}
-              workspaceSlug={workspace.slug ?? ""}
-              boardSlug={boardData?.slug ?? ""}
-              queryParams={queryParams}
-            />
-          )}
-        </Modal>
+        {renderModalContent()}
      </div>
    </>
  );
--- a/apps/web/src/views/boards/components/BoardsList.tsx
+++ b/apps/web/src/views/boards/components/BoardsList.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { t } from "@lingui/core/macro";
 import { HiOutlineRectangleStack } from "react-icons/hi2";

 import Button from "~/components/Button";
@@ -18,7 +19,7 @@ export function BoardsList() {

  if (isLoading)
    return (
-      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-7">
+      <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="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" />
@@ -31,23 +32,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">
-            No boards
+            {t`No boards`}
          </p>
          <p className="text-[14px] text-light-900 dark:text-dark-900">
-            Get started by creating a new board
+            {t`Get started by creating a new board`}
          </p>
        </div>
-        <Button onClick={() => openModal("NEW_BOARD")}>Create new board</Button>
+        <Button onClick={() => openModal("NEW_BOARD")}>
+          {t`Create new 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-4 2xl:grid-cols-7">
+    <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">
      {data?.map((board) => (
        <Link key={board.publicId} href={`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="text-md px-4 font-bold text-neutral-900 dark:text-dark-1000">
+            <p className="px-4 text-[14px] font-bold text-neutral-700 dark:text-dark-1000">
              {board.name}
            </p>
          </div>
--- a/apps/web/src/views/boards/components/ImportBoardsForm.tsx
+++ b/apps/web/src/views/boards/components/ImportBoardsForm.tsx
@@ -1,37 +1,70 @@
 import Link from "next/link";
 import { Listbox, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
+import { t } from "@lingui/core/macro";
+import { Plural, Trans } from "@lingui/react/macro";
+import { Fragment, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { FaTrello } from "react-icons/fa";
 import {
  HiChevronUpDown,
+  HiMiniArrowTopRightOnSquare,
  HiOutlineQuestionMarkCircle,
  HiXMark,
 } from "react-icons/hi2";

 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";

-interface TrelloFormValues {
-  apiKey: string;
-  token: string;
-}
-
-const sources = [{ source: "Trello" }];
+const integrationProviders: Record<
+  string,
+  { name: string; icon: JSX.Element }
+> = {
+  trello: {
+    name: "Trello",
+    icon: <FaTrello />,
+  },
+};

 const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
+  const { data: integrations, refetch: refetchIntegrations } =
+    api.integration.providers.useQuery();
  const { control, handleSubmit } = useForm({
    defaultValues: {
-      source: "Trello",
+      source: integrations?.[0]?.provider ?? "trello",
    },
  });

+  const { data: trelloUrl } = api.integration.getAuthorizationUrl.useQuery(
+    { provider: "trello" },
+    {
+      enabled: !integrations?.some(
+        (integration) => integration.provider === "trello",
+      ),
+    },
+  );
+
+  const hasIntegrations = integrations && integrations.length > 0;
+
+  useEffect(() => {
+    const handleFocus = () => {
+      refetchIntegrations();
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [refetchIntegrations]);
+
  const onSubmit = () => {
-    handleNextStep();
+    if (!hasIntegrations && trelloUrl) {
+      window.open(trelloUrl.url, "trello_auth", "height=800,width=600");
+    } else {
+      handleNextStep();
+    }
  };

  return (
@@ -47,9 +80,9 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                  <div className="relative">
                    <Listbox.Button className="focus-ring-light-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
                      <span className="flex items-center">
-                        <FaTrello />
-                        <span className="ml-2 block truncate">
-                          {field.value}
+                        {integrationProviders[field.value]?.icon}
+                        <span className="ml-2 block truncate text-sm">
+                          {integrationProviders[field.value]?.name}
                        </span>
                      </span>
                      <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -68,20 +101,41 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                      leaveTo="opacity-0"
                    >
                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-1 text-base text-neutral-900 shadow-lg ring-1 ring-light-600 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
-                        {sources.map(({ source }, index) => (
+                        {hasIntegrations ? (
+                          integrations.map((integration, index) => (
+                            <Listbox.Option
+                              key={`source_${index}`}
+                              className="relative cursor-default select-none px-1"
+                              value={integration.provider}
+                            >
+                              <div className="flex items-center rounded-[5px] p-1 hover:bg-light-200 dark:hover:bg-dark-400">
+                                {
+                                  integrationProviders[integration.provider]
+                                    ?.icon
+                                }
+                                <span className="ml-2 block truncate text-sm font-normal">
+                                  {
+                                    integrationProviders[integration.provider]
+                                      ?.name
+                                  }
+                                </span>
+                              </div>
+                            </Listbox.Option>
+                          ))
+                        ) : (
                          <Listbox.Option
-                            key={`source_${index}`}
-                            className="relative cursor-default select-none px-1"
-                            value={source}
+                            key="trello_placeholder"
+                            className="font-sm relative cursor-default select-none px-1"
+                            value="trello"
                          >
-                            <div className="flex items-center rounded-[5px] p-1 hover:bg-light-200 dark:hover:bg-dark-400">
-                              <FaTrello className="ml-1" />
-                              <span className="ml-2 block truncate font-normal">
-                                {source}
+                            <div className="flex items-center rounded-[5px] p-1 text-sm hover:bg-light-200 dark:hover:bg-dark-400">
+                              {integrationProviders.trello?.icon}
+                              <span className="ml-2 block truncate text-sm">
+                                {integrationProviders.trello?.name}
                              </span>
                            </div>
                          </Listbox.Option>
-                        ))}
+                        )}
                      </Listbox.Options>
                    </Transition>
                  </div>
@@ -94,7 +148,14 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {

      <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">Select source</Button>
+          <Button
+            type="submit"
+            iconRight={
+              !hasIntegrations ? <HiMiniArrowTopRightOnSquare /> : undefined
+            }
+          >
+            {hasIntegrations ? t`Select source` : t`Connect Trello`}
+          </Button>
        </div>
      </div>
    </form>
@@ -103,31 +164,32 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {

 const ImportTrello: React.FC = () => {
  const utils = api.useUtils();
-  const [apiKey, setApiKey] = useState("");
-  const [token, setToken] = useState("");
  const { closeModal } = useModal();
  const { workspace } = useWorkspace();
  const { showPopup } = usePopup();
+  const [isSelectAllEnabled, setIsSelectAllEnabled] = useState(false);

  const refetchBoards = () => utils.board.all.refetch();

-  const boards = api.import.trello.getBoards.useQuery(
-    { apiKey, token },
-    {
-      enabled: apiKey && token ? true : false,
-    },
-  );
+  const { data: boards, isLoading: boardsLoading } =
+    api.import.trello.getBoards.useQuery();

-  const handleSetAuthDetails = (apiKey: string, token: string) => {
-    setApiKey(apiKey);
-    setToken(token);
-  };
+  const {
+    register: registerBoards,
+    handleSubmit: handleSubmitBoards,
+    setValue,
+    watch,
+  } = useForm({
+    defaultValues: Object.fromEntries(
+      boards?.map((board) => [board.id, true]) ?? [],
+    ),
+  });

  const importBoards = api.import.trello.importBoards.useMutation({
    onSuccess: async () => {
      showPopup({
-        header: "Import complete",
-        message: "Your boards have been imported.",
+        header: t`Import complete`,
+        message: t`Your boards have been imported.`,
        icon: "success",
      });
      try {
@@ -139,90 +201,108 @@ const ImportTrello: React.FC = () => {
    },
    onError: () => {
      showPopup({
-        header: "Import failed",
-        message: "Please try again later, or contact customer support.",
+        header: t`Import failed`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
  });

-  const { register, handleSubmit } = useForm<TrelloFormValues>({
-    defaultValues: {
-      apiKey: "",
-      token: "",
-    },
-  });
+  const boardWatchers = boards?.map((board) => ({
+    id: board.id,
+    value: watch(board.id),
+  }));

-  const onSubmit = (values: TrelloFormValues) => {
-    handleSetAuthDetails(values.apiKey, values.token);
-  };
-
-  const { register: registerBoards, handleSubmit: handleSubmitBoards } =
-    useForm({
-      defaultValues: Object.fromEntries(
-        boards.data?.map((board) => [board.id, true]) ?? [],
-      ),
-    });
+  const boardCount = boardWatchers?.filter((w) => w.value === true).length || 0;

  const onSubmitBoards = (values: Record<string, boolean>) => {
    const boardIds = Object.keys(values).filter((key) => values[key] === true);

    importBoards.mutate({
      boardIds,
-      apiKey,
-      token,
      workspacePublicId: workspace.publicId,
    });
  };

-  if (boards.data?.length)
-    return (
-      <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
-        <div className="h-[105px] overflow-scroll px-5">
-          {boards.data.map((board) => (
-            <div key={board.id}>
-              <label
-                className="flex cursor-pointer items-center rounded-[5px] p-2 hover:bg-light-100 dark:hover:bg-dark-300"
-                htmlFor={board.id}
-              >
-                <input
-                  id={board.id}
-                  type="checkbox"
-                  className="h-[14px] w-[14px] rounded bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
-                  {...registerBoards(board.id)}
-                />
-                <span className="ml-3 text-sm text-neutral-900 dark:text-dark-1000">
-                  {board.name}
-                </span>
-              </label>
-            </div>
-          ))}
+  const renderContent = () => {
+    if (boardsLoading) {
+      return (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-1">
+          <div className="h-[30px] w-full animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-300" />
+          <div className="h-[30px] w-full animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-300" />
+          <div className="h-[30px] w-full animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-300" />
        </div>
+      );
+    }

-        <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={importBoards.isPending}>
-              Import boards
-            </Button>
-          </div>
+    if (!boards?.length) {
+      return (
+        <div className="flex h-full w-full items-center justify-center">
+          <p className="text-sm text-neutral-500 dark:text-dark-900">
+            {t`No boards found`}
+          </p>
        </div>
-      </form>
-    );
+      );
+    }
+
+    return boards.map((board) => (
+      <div key={board.id}>
+        <label
+          className="flex cursor-pointer items-center rounded-[5px] p-2 hover:bg-light-100 dark:hover:bg-dark-300"
+          htmlFor={board.id}
+        >
+          <input
+            id={board.id}
+            type="checkbox"
+            className="h-[14px] w-[14px] rounded bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
+            {...registerBoards(board.id)}
+          />
+          <span className="ml-3 text-sm text-neutral-900 dark:text-dark-1000">
+            {board.name}
+          </span>
+        </label>
+      </div>
+    ));
+  };

  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="text-neutral-900 dark:text-dark-1000"
-    >
-      <div className="space-y-4 px-5">
-        <Input id="apiKey" placeholder="API key" {...register("apiKey")} />
-        <Input id="token" placeholder="Token" {...register("token")} />
-      </div>
+    <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
+      <div className="h-[105px] overflow-scroll px-5">{renderContent()}</div>

      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        <div>
-          <Button type="submit" isLoading={boards.isLoading}>
-            Fetch boards
+        <Toggle
+          label={t`Select all`}
+          isChecked={!!isSelectAllEnabled}
+          onChange={() => {
+            const newState = !isSelectAllEnabled;
+            setIsSelectAllEnabled(newState);
+
+            for (const board of boards || []) {
+              setValue(board.id, newState);
+            }
+          }}
+        />
+        <div className="space-x-2">
+          <Button
+            type="submit"
+            isLoading={importBoards.isPending}
+            disabled={
+              importBoards.isPending ||
+              boardsLoading ||
+              !boards?.length ||
+              !boards.some(
+                (board) =>
+                  boardWatchers?.find((w) => w.id === board.id)?.value === true,
+              )
+            }
+          >
+            <Trans>
+              <Plural
+                value={boardCount}
+                one={`Import board (1)`}
+                other={`Import boards (${boardCount})`}
+              />
+            </Trans>
          </Button>
        </div>
      </div>
@@ -239,7 +319,7 @@ export function ImportBoardsForm() {
      <div className="flex w-full items-center justify-between px-5 pb-4 pt-5">
        <div className="flex items-center">
          <h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
-            New import
+            {t`New import`}
          </h2>
          <Link
            href="https://docs.kan.bn/imports/trello"
--- a/apps/web/src/views/boards/components/NewBoardForm.tsx
+++ b/apps/web/src/views/boards/components/NewBoardForm.tsx
@@ -1,27 +1,59 @@
-import { useEffect } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
+import { z } from "zod";

-import type { NewBoardInput } from "@kan/api/types";
-
+import type { Template } from "./TemplateBoards";
 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
+import TemplateBoards, { getTemplates } from "./TemplateBoards";
+
+const schema = z.object({
+  name: z
+    .string()
+    .min(1, { message: t`Board name is required` })
+    .max(100, { message: t`Board name cannot exceed 100 characters` }),
+  workspacePublicId: z.string(),
+  template: z.custom<Template | null>(),
+});
+
+interface NewBoardInputWithTemplate {
+  name: string;
+  workspacePublicId: string;
+  template: Template | null;
+}

 export function NewBoardForm() {
  const utils = api.useUtils();
  const { closeModal } = useModal();
  const { workspace } = useWorkspace();
+  const [showTemplates, setShowTemplates] = useState(false);

-  const { register, handleSubmit } = useForm<NewBoardInput>({
+  const templates = getTemplates();
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<NewBoardInputWithTemplate>({
+    resolver: zodResolver(schema),
    defaultValues: {
      name: "",
      workspacePublicId: workspace.publicId || "",
+      template: null,
    },
  });

+  const currentTemplate = watch("template");
+
  const refetchBoards = () => utils.board.all.refetch();

  const createBoard = api.board.create.useMutation({
@@ -31,8 +63,13 @@ export function NewBoardForm() {
    },
  });

-  const onSubmit = (data: NewBoardInput) => {
-    createBoard.mutate(data);
+  const onSubmit = (data: NewBoardInputWithTemplate) => {
+    createBoard.mutate({
+      name: data.name,
+      workspacePublicId: data.workspacePublicId,
+      lists: data.template?.lists ?? [],
+      labels: data.template?.labels ?? [],
+    });
  };

  useEffect(() => {
@@ -45,7 +82,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">New board</h2>
+          <h2 className="text-sm font-bold">{t`New board`}</h2>
          <button
            type="button"
            className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
@@ -59,8 +96,9 @@ export function NewBoardForm() {
        </div>
        <Input
          id="name"
-          placeholder="Name"
+          placeholder={t`Name`}
          {...register("name", { required: true })}
+          errorMessage={errors.name?.message}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
              e.preventDefault();
@@ -69,11 +107,25 @@ export function NewBoardForm() {
          }}
        />
      </div>
-
+      <TemplateBoards
+        currentBoard={currentTemplate}
+        setCurrentBoard={(t) => setValue("template", t)}
+        showTemplates={showTemplates}
+      />
      <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);
+            }
+          }}
+        />
        <div>
          <Button type="submit" isLoading={createBoard.isPending}>
-            Create board
+            {t`Create board`}
          </Button>
        </div>
      </div>
--- a/apps/web/src/views/boards/components/TemplateBoards.tsx
+++ b/apps/web/src/views/boards/components/TemplateBoards.tsx
@@ -0,0 +1,191 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useRef, useState } from "react";
+import { HiCheckCircle } from "react-icons/hi2";
+
+export interface Template {
+  id: string;
+  name: string;
+  lists: string[];
+  labels: string[];
+}
+
+export const getTemplates = (): Template[] => [
+  {
+    id: "basic",
+    name: t`Basic Kanban`,
+    lists: [t`To Do`, t`In Progress`, t`Done`],
+    labels: [t`High Priority`, t`Medium Priority`, t`Low Priority`],
+  },
+  {
+    id: "software-dev",
+    name: t`Software Development`,
+    lists: [t`Backlog`, t`To Do`, t`In Progress`, t`Code Review`, t`Done`],
+    labels: [t`Bug`, t`Feature`, t`Enhancement`, t`Critical`, t`Documentation`],
+  },
+  {
+    id: "content-creation",
+    name: t`Content Creation`,
+    lists: [
+      t`Brainstorming`,
+      t`Writing`,
+      t`Editing`,
+      t`Design`,
+      t`Approval`,
+      t`Publishing`,
+      t`Done`,
+    ],
+    labels: [t`Blog Post`, t`Social Media`, t`Video`, t`Newsletter`, t`Urgent`],
+  },
+  {
+    id: "customer-support",
+    name: t`Customer Support`,
+    lists: [
+      t`New Ticket`,
+      t`Triaging`,
+      t`In Progress`,
+      t`Awaiting Customer`,
+      t`Resolution`,
+      t`Done`,
+    ],
+    labels: [
+      t`Bug Report`,
+      t`Feature Request`,
+      t`Question`,
+      t`Urgent`,
+      t`Billing`,
+    ],
+  },
+  {
+    id: "recruitment",
+    name: t`Recruitment`,
+    lists: [
+      t`Applicants`,
+      t`Screening`,
+      t`Interviewing`,
+      t`Offer`,
+      t`Onboarding`,
+      t`Hired`,
+    ],
+    labels: [t`Remote`, t`Full-time`, t`Part-time`, t`Senior`, t`Junior`],
+  },
+  {
+    id: "personal-project",
+    name: t`Personal Project`,
+    lists: [
+      t`Ideas`,
+      t`Research`,
+      t`Planning`,
+      t`Execution`,
+      t`Review`,
+      t`Next Steps`,
+      t`Complete`,
+    ],
+    labels: [t`Important`, t`Quick Win`, t`Long-term`, t`Learning`, t`Fun`],
+  },
+];
+
+export default function TemplateBoards({
+  currentBoard,
+  setCurrentBoard,
+  showTemplates,
+}: {
+  currentBoard: Template | null;
+  setCurrentBoard: (board: Template | null) => void;
+  showTemplates: boolean;
+}) {
+  const [showFade, setShowFade] = useState(false);
+  const [showTopFade, setShowTopFade] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const templates = getTemplates();
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
+    const isAtTop = scrollTop <= 5;
+
+    setShowFade(!isAtBottom);
+    setShowTopFade(!isAtTop);
+  };
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+
+    handleScroll();
+
+    scrollElement.addEventListener("scroll", handleScroll);
+    return () => scrollElement.removeEventListener("scroll", handleScroll);
+  }, [showTemplates]);
+
+  useEffect(() => {
+    if (showTemplates && currentBoard && scrollRef.current) {
+      const selectedElement = scrollRef.current.querySelector(
+        `[data-template-id="${currentBoard.id}"]`,
+      );
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }
+  }, [showTemplates, currentBoard]);
+
+  const handleBoardSelect = (boardId: string) => {
+    if (currentBoard?.id === boardId) {
+      setCurrentBoard(null);
+    } else {
+      setCurrentBoard(
+        templates.find((template) => template.id === boardId) ?? null,
+      );
+    }
+  };
+
+  if (!showTemplates) {
+    return null;
+  }
+
+  return (
+    <div className="px-5 pt-4">
+      <div className="relative">
+        <div
+          ref={scrollRef}
+          className="scroll-container -mr-2 flex max-h-[200px] flex-col gap-3 overflow-y-auto pr-2 pt-0.5"
+        >
+          {templates.map((template) => (
+            <label
+              key={template.id}
+              data-template-id={template.id}
+              onClick={() => handleBoardSelect(template.id)}
+              className={`scroll-container relative flex cursor-pointer rounded-lg border p-3 transition-all hover:bg-light-100 dark:hover:bg-dark-200 ${
+                currentBoard?.id === template.id
+                  ? "border-light-700 bg-light-100 ring-1 ring-inset ring-light-700 dark:border-dark-700 dark:bg-dark-200 dark:ring-dark-700"
+                  : "border-light-600 dark:border-dark-600"
+              }`}
+            >
+              <div className="flex-1">
+                <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {template.name}
+                </h4>
+                <p className="text-xs text-light-950 dark:text-dark-900">
+                  {template.lists.join(", ")}
+                </p>
+              </div>
+              {currentBoard?.id === template.id && (
+                <div className="absolute right-3 top-3 text-light-1000 dark:text-dark-1000">
+                  <HiCheckCircle className="h-5 w-5" />
+                </div>
+              )}
+            </label>
+          ))}
+        </div>
+        {showTopFade && (
+          <div className="pointer-events-none absolute left-0 right-0 top-0 h-6 bg-gradient-to-b from-white/80 to-transparent dark:from-dark-100/80" />
+        )}
+        {showFade && (
+          <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-white/80 to-transparent dark:from-dark-100/80" />
+        )}
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -1,5 +1,9 @@
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
 import { HiArrowDownTray, HiOutlinePlusSmall } 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";
@@ -10,54 +14,76 @@ import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";

 export default function BoardsPage() {
-  const { openModal, modalContentType } = useModal();
-  const { workspace, hasLoaded } = useWorkspace();
+  const { openModal, modalContentType, isOpen } = useModal();
+  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={`Boards | ${workspace.name ?? "Workspace"}`} />
-      <div className="h-full p-8">
-        <div className="mb-8 flex w-full justify-between">
+      <PageHead title={t`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]">
-            Boards
+            {t`Boards`}
          </h1>
-          <div className="flex">
-            <button
+          <div className="flex gap-2">
+            <Button
              type="button"
-              className="bg-dark-3000 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] border-light-600 px-3 py-2 text-sm text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-dark-600 dark:text-dark-1000"
+              variant="secondary"
              onClick={() => openModal("IMPORT_BOARDS")}
+              iconLeft={
+                <HiArrowDownTray aria-hidden="true" className="h-4 w-4" />
+              }
            >
-              <div className="flex h-5 w-5 items-center">
-                <HiArrowDownTray
-                  className="-mr-0.5 h-4 w-4"
-                  aria-hidden="true"
-                />
-              </div>
-              Import
-            </button>
-            <button
+              {t`Import`}
+            </Button>
+            <Button
              type="button"
-              className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
+              variant="primary"
              onClick={() => openModal("NEW_BOARD")}
+              iconLeft={
+                <HiOutlinePlusSmall aria-hidden="true" className="h-4 w-4" />
+              }
            >
-              <div className="h-5 w-5 items-center">
-                <HiOutlinePlusSmall
-                  className="-mr-0.5 h-5 w-5"
-                  aria-hidden="true"
-                />
-              </div>
-              New
-            </button>
+              {t`New`}
+            </Button>
          </div>
        </div>

-        <Modal>
-          {modalContentType === "NEW_BOARD" && <NewBoardForm />}
-          {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
-          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-        </Modal>
+        <>
+          <Modal
+            modalSize="md"
+            isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+          >
+            <FeedbackModal />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_BOARD"}
+          >
+            <NewBoardForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "IMPORT_BOARDS"}
+          >
+            <ImportBoardsForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+          >
+            <NewWorkspaceForm />
+          </Modal>
+        </>

        <div className="flex h-full flex-row">
          <BoardsList />
--- a/apps/web/src/views/card/components/ActivityList.tsx
+++ b/apps/web/src/views/card/components/ActivityList.tsx
@@ -1,33 +1,43 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { formatDistanceToNow } from "date-fns";
+import { de, enGB, es, fr, it, nl } from "date-fns/locale";
 import {
  HiOutlineArrowLeft,
  HiOutlineArrowRight,
+  HiOutlineCheckCircle,
  HiOutlinePencil,
  HiOutlinePlus,
  HiOutlineTag,
+  HiOutlineTrash,
  HiOutlineUserMinus,
  HiOutlineUserPlus,
 } from "react-icons/hi2";
+
 import type { GetCardByIdOutput } from "@kan/api/types";
+import { authClient } from "@kan/auth/client";

 import Avatar from "~/components/Avatar";
+import { useLocalisation } from "~/hooks/useLocalisation";
 import Comment from "./Comment";
-import { authClient } from "@kan/auth/client";

 type ActivityType =
  NonNullable<GetCardByIdOutput>["activities"][number]["type"];

-const ACTIVITY_TYPE_MAP = {
-  "card.created": "created the card",
-  "card.updated.title": "updated the title",
-  "card.updated.description": "updated the description",
-  "card.updated.list": "moved the card to another list",
-  "card.updated.label.added": "added a label to the card",
-  "card.updated.label.removed": "removed a label from the card",
-  "card.updated.member.added": "added a member to the card",
-  "card.updated.member.removed": "removed a member from the card",
+const dateLocaleMap = {
+  en: enGB,
+  fr: fr,
+  de: de,
+  es: es,
+  it: it,
+  nl: nl,
 } as const;

+const truncate = (value: string | null, maxLength = 50) => {
+  if (!value) return value;
+  return value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value;
+};
+
 const getActivityText = ({
  type,
  toTitle,
@@ -36,6 +46,7 @@ const getActivityText = ({
  memberName,
  isSelf,
  label,
+  fromTitle,
 }: {
  type: ActivityType;
  toTitle: string | null;
@@ -44,7 +55,27 @@ const getActivityText = ({
  memberName: string | null;
  isSelf: boolean;
  label: string | null;
+  fromTitle?: string | null;
 }) => {
+  const ACTIVITY_TYPE_MAP = {
+    "card.created": t`created the card`,
+    "card.updated.title": t`updated the title`,
+    "card.updated.description": t`updated the description`,
+    "card.updated.list": t`moved the card to another list`,
+    "card.updated.label.added": t`added a label to the card`,
+    "card.updated.label.removed": t`removed a label from the card`,
+    "card.updated.member.added": t`added a member to the card`,
+    "card.updated.member.removed": t`removed a member from the card`,
+    "card.updated.checklist.added": t`added a checklist`,
+    "card.updated.checklist.renamed": t`renamed a checklist`,
+    "card.updated.checklist.deleted": t`deleted a checklist`,
+    "card.updated.checklist.item.added": t`added a checklist item`,
+    "card.updated.checklist.item.updated": t`updated a checklist item`,
+    "card.updated.checklist.item.completed": t`completed a checklist item`,
+    "card.updated.checklist.item.uncompleted": t`marked a checklist item as incomplete`,
+    "card.updated.checklist.item.deleted": t`deleted a checklist item`,
+  } as const;
+
  if (!(type in ACTIVITY_TYPE_MAP)) return null;
  const baseText = ACTIVITY_TYPE_MAP[type as keyof typeof ACTIVITY_TYPE_MAP];

@@ -56,54 +87,125 @@ const getActivityText = ({

  if (type === "card.updated.title" && toTitle) {
    return (
-      <>
-        updated the title to <TextHighlight>{toTitle}</TextHighlight>
-      </>
+      <Trans>
+        updated the title to <TextHighlight>{truncate(toTitle)}</TextHighlight>
+      </Trans>
    );
  }

  if (type === "card.updated.list" && fromList && toList) {
    return (
-      <>
-        moved the card from <TextHighlight>{fromList}</TextHighlight> to
-        <TextHighlight>{toList}</TextHighlight>
-      </>
+      <Trans>
+        moved the card from <TextHighlight>{truncate(fromList)}</TextHighlight>{" "}
+        to
+        <TextHighlight>{truncate(toList)}</TextHighlight>
+      </Trans>
    );
  }

  if (type === "card.updated.member.added" && memberName) {
-    if (isSelf) return <>self-assigned the card</>;
+    if (isSelf) return <Trans>self-assigned the card</Trans>;

    return (
-      <>
-        assigned <TextHighlight>{memberName}</TextHighlight> to the card
-      </>
+      <Trans>
+        assigned <TextHighlight>{truncate(memberName)}</TextHighlight> to the
+        card
+      </Trans>
    );
  }

  if (type === "card.updated.member.removed" && memberName) {
-    if (isSelf) return <>unassigned themselves from the card</>;
+    if (isSelf) return <Trans>unassigned themselves from the card</Trans>;

    return (
-      <>
-        unassigned <TextHighlight>{memberName}</TextHighlight> from the card
-      </>
+      <Trans>
+        unassigned <TextHighlight>{truncate(memberName)}</TextHighlight> from
+        the card
+      </Trans>
    );
  }

  if (type === "card.updated.label.added" && label) {
    return (
-      <>
-        added label <TextHighlight>{label}</TextHighlight>
-      </>
+      <Trans>
+        added label <TextHighlight>{truncate(label)}</TextHighlight>
+      </Trans>
    );
  }

  if (type === "card.updated.label.removed" && label) {
    return (
-      <>
-        removed label <TextHighlight>{label}</TextHighlight>
-      </>
+      <Trans>
+        removed label <TextHighlight>{truncate(label)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.added" && toTitle) {
+    return (
+      <Trans>
+        added checklist <TextHighlight>{truncate(toTitle)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.renamed" && toTitle) {
+    return (
+      <Trans>
+        renamed checklist <TextHighlight>{truncate(toTitle)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.deleted" && fromTitle) {
+    return (
+      <Trans>
+        deleted checklist <TextHighlight>{truncate(fromTitle)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.item.added" && toTitle) {
+    return (
+      <Trans>
+        added checklist item <TextHighlight>{truncate(toTitle)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.item.updated" && toTitle) {
+    return (
+      <Trans>
+        renamed checklist item to{" "}
+        <TextHighlight>{truncate(toTitle)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.item.completed" && toTitle) {
+    return (
+      <Trans>
+        completed checklist item{" "}
+        <TextHighlight>{truncate(toTitle)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.item.uncompleted" && toTitle) {
+    return (
+      <Trans>
+        marked checklist item <TextHighlight>{truncate(toTitle)}</TextHighlight>{" "}
+        as incomplete
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.checklist.item.deleted" && fromTitle) {
+    return (
+      <Trans>
+        deleted checklist item{" "}
+        <TextHighlight>{truncate(fromTitle)}</TextHighlight>
+      </Trans>
    );
  }

@@ -119,6 +221,14 @@ const ACTIVITY_ICON_MAP: Partial<Record<ActivityType, React.ReactNode | null>> =
    "card.updated.label.removed": <HiOutlineTag />,
    "card.updated.member.added": <HiOutlineUserPlus />,
    "card.updated.member.removed": <HiOutlineUserMinus />,
+    "card.updated.checklist.added": <HiOutlinePlus />,
+    "card.updated.checklist.renamed": <HiOutlinePencil />,
+    "card.updated.checklist.deleted": <HiOutlineTrash />,
+    "card.updated.checklist.item.added": <HiOutlinePlus />,
+    "card.updated.checklist.item.updated": <HiOutlinePencil />,
+    "card.updated.checklist.item.completed": <HiOutlineCheckCircle />,
+    "card.updated.checklist.item.uncompleted": <HiOutlineCheckCircle />,
+    "card.updated.checklist.item.deleted": <HiOutlineTrash />,
  } as const;

 const getActivityIcon = (
@@ -141,13 +251,18 @@ const ActivityList = ({
  cardPublicId,
  isLoading,
  isAdmin,
+  isViewOnly,
 }: {
  activities: NonNullable<GetCardByIdOutput>["activities"];
  cardPublicId: string;
  isLoading: boolean;
  isAdmin?: boolean;
+  isViewOnly?: boolean;
 }) => {
  const { data } = authClient.useSession();
+  const { locale } = useLocalisation();
+
+  const currentDateLocale = dateLocaleMap[locale] || enGB;

  return (
    <div className="flex flex-col space-y-4 pt-4">
@@ -158,8 +273,9 @@ const ActivityList = ({
          fromList: activity.fromList?.name ?? null,
          toList: activity.toList?.name ?? null,
          memberName: activity.member?.user?.name ?? null,
-          isSelf: activity.member?.user?.id === data?.user?.id,
+          isSelf: activity.member?.user?.id === data?.user.id,
          label: activity.label?.name ?? null,
+          fromTitle: activity.fromTitle ?? null,
        });

        if (activity.type === "card.updated.comment.added")
@@ -171,11 +287,12 @@ const ActivityList = ({
              name={activity.user?.name ?? ""}
              email={activity.user?.email ?? ""}
              isLoading={isLoading}
-              createdAt={activity.createdAt}
+              createdAt={activity.createdAt.toISOString()}
              comment={activity.comment?.comment}
              isEdited={!!activity.comment?.updatedAt}
-              isAuthor={activity.comment?.createdBy === data?.user?.id}
+              isAuthor={activity.comment?.createdBy === data?.user.id}
              isAdmin={isAdmin ?? false}
+              isViewOnly={!!isViewOnly}
            />
          );

@@ -213,6 +330,7 @@ const ActivityList = ({
              <span className="space-x-1 text-light-900 dark:text-dark-800">
                {formatDistanceToNow(new Date(activity.createdAt), {
                  addSuffix: true,
+                  locale: currentDateLocale,
                })}
              </span>
            </p>
--- a/apps/web/src/views/card/components/ChecklistItemRow.tsx
+++ b/apps/web/src/views/card/components/ChecklistItemRow.tsx
@@ -0,0 +1,197 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
+import ContentEditable from "react-contenteditable";
+import { HiXMark } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface ChecklistItemRowProps {
+  item: {
+    publicId: string;
+    title: string;
+    completed: boolean;
+  };
+  cardPublicId: string;
+  viewOnly?: boolean;
+}
+
+export default function ChecklistItemRow({
+  item,
+  cardPublicId,
+  viewOnly = false,
+}: ChecklistItemRowProps) {
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+
+  const [title, setTitle] = useState("");
+  const [completed, setCompleted] = useState(false);
+
+  const updateItem = api.checklist.updateItem.useMutation({
+    onMutate: async (vars) => {
+      await utils.card.byId.cancel({ cardPublicId });
+      const previous = utils.card.byId.getData({ cardPublicId });
+      utils.card.byId.setData({ cardPublicId }, (old) => {
+        if (!old) return old as any;
+        const updatedChecklists = old.checklists.map((cl) => ({
+          ...cl,
+          items: cl.items.map((ci) =>
+            ci.publicId === item.publicId
+              ? {
+                  ...ci,
+                  ...(vars.title !== undefined ? { title: vars.title } : {}),
+                  ...(vars.completed !== undefined
+                    ? { completed: vars.completed }
+                    : {}),
+                }
+              : ci,
+          ),
+        }));
+        return { ...old, checklists: updatedChecklists } as typeof old;
+      });
+      return { previous };
+    },
+    onError: (_err, _vars, ctx) => {
+      if (ctx?.previous)
+        utils.card.byId.setData({ cardPublicId }, ctx.previous);
+      showPopup({
+        header: t`Unable to update checklist item`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
+  });
+
+  const deleteItem = api.checklist.deleteItem.useMutation({
+    onMutate: async () => {
+      await utils.card.byId.cancel({ cardPublicId });
+      const previous = utils.card.byId.getData({ cardPublicId });
+      utils.card.byId.setData({ cardPublicId }, (old) => {
+        if (!old) return old as any;
+        const updatedChecklists = old.checklists.map((cl) => ({
+          ...cl,
+          items: cl.items.filter((ci) => ci.publicId !== item.publicId),
+        }));
+        return { ...old, checklists: updatedChecklists } as typeof old;
+      });
+      return { previous };
+    },
+    onError: (_err, _vars, ctx) => {
+      if (ctx?.previous)
+        utils.card.byId.setData({ cardPublicId }, ctx.previous);
+      showPopup({
+        header: t`Unable to delete checklist item`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
+  });
+
+  // Only resync from props when switching items to avoid clobbering edits
+  useEffect(() => {
+    setTitle(item.title);
+    setCompleted(item.completed);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item.publicId]);
+
+  const sanitizeHtmlToPlainText = (html: string): string =>
+    html
+      .replace(/<br\s*\/?>(\n)?/gi, "\n")
+      .replace(/<div><br\s*\/?><\/div>/gi, "")
+      .replace(/<[^>]*>/g, "")
+      .replace(/&nbsp;/g, " ")
+      .trim();
+
+  const handleToggleCompleted = () => {
+    if (viewOnly) return;
+    setCompleted((prev) => !prev);
+    updateItem.mutate({
+      checklistItemPublicId: item.publicId,
+      completed: !completed,
+    });
+  };
+
+  const commitTitle = (rawHtml: string) => {
+    if (viewOnly) return;
+    const plain = sanitizeHtmlToPlainText(rawHtml);
+    if (!plain || plain === item.title) {
+      setTitle(item.title);
+      return;
+    }
+    setTitle(plain);
+    updateItem.mutate({
+      checklistItemPublicId: item.publicId,
+      title: plain,
+    });
+  };
+
+  const handleDelete = () => {
+    if (viewOnly) return;
+    deleteItem.mutate({ checklistItemPublicId: item.publicId });
+  };
+
+  return (
+    <div className="group relative flex items-start gap-3 rounded-md py-2 pl-4 hover:bg-light-100 dark:hover:bg-dark-100">
+      <label
+        className={`relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center`}
+      >
+        <input
+          type="checkbox"
+          checked={completed}
+          onChange={(e) => {
+            if (viewOnly) {
+              e.preventDefault();
+              return;
+            }
+            handleToggleCompleted();
+          }}
+          className={twMerge(
+            "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+            viewOnly ? "cursor-default" : "cursor-pointer",
+          )}
+        />
+      </label>
+      <div className="flex-1 pr-7">
+        <ContentEditable
+          html={title}
+          disabled={viewOnly}
+          onChange={(e) => setTitle(e.target.value)}
+          // @ts-expect-error - valid event
+          onBlur={(e: Event) => commitTitle(e.target.innerHTML as string)}
+          className={twMerge(
+            "m-0 min-h-[20px] w-full p-0 text-sm leading-[20px] text-light-950 outline-none focus-visible:outline-none dark:text-dark-950",
+            viewOnly && "cursor-default",
+          )}
+          placeholder={t`Add details...`}
+          onKeyDown={(e) => {
+            if (viewOnly) return;
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitTitle(title);
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              setTitle(item.title);
+            }
+          }}
+        />
+      </div>
+      {!viewOnly && (
+        <button
+          type="button"
+          onClick={handleDelete}
+          className="absolute right-1 top-1/2 hidden -translate-y-1/2 rounded-md p-1 text-light-900 group-hover:block hover:bg-light-200 dark:text-dark-700 dark:hover:bg-dark-200"
+        >
+          <HiXMark size={16} />
+        </button>
+      )}
+    </div>
+  );
+}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`window.__ENV = {"NEXT_PUBLIC_UMAMI_ID":"aaed1f55-25e2-4223-b918-e429c390be35","NEXT_PUBLIC_KAN_ENV":"cloud","NEXT_PUBLIC_BASE_URL":"http://localhost:3000","NEXT_PUBLIC_AVATAR_BUCKET_NAME":"avatars","NEXT_PUBLIC_STORAGE_DOMAIN":"kanbn.com","NEXT_PUBLIC_STORAGE_URL":"https://storage.kanbn.com"};`