fix: update trpc dependencies and add openapi meta to providers endpoint

2025-07-07 21:55:08 +01:00
123 changed files with 2259 additions and 12156 deletions
--- a/.env.example
+++ b/.env.example
@@ -3,8 +3,6 @@
 # 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
@@ -23,7 +21,6 @@ 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=
--- a/.gitignore
+++ b/.gitignore
@@ -50,6 +50,3 @@ 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/web",
+      "cwd": "${workspaceFolder}/apps/nextjs",
      "skipFiles": ["<node_internals>/**"],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
@@ -14,4 +14,4 @@
      }
    }
  ]
-}
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,43 +5,7 @@ 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
+## [Unreleased](https://github.com/kanbn/kan/compare/v0.2.2...HEAD)

 ## [0.2.2](https://github.com/kanbn/kan/compare/v0.2.1...v0.2.2) - 2025-06-28

--- a/README.md
+++ b/README.md
@@ -138,40 +138,35 @@ pnpm dev

 ## Environment Variables 🔐

-| 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`                                                      |
+| Variable                         | Description                                              | Required           | Example                                       |
+| -------------------------------- | -------------------------------------------------------- | ------------------ | --------------------------------------------- |
+| `POSTGRES_URL`                   | PostgreSQL connection URL                                | Yes                | `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`                                         |
+| `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`                                         |
+| `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`                                       |

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

--- 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/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -81,4 +81,5 @@ ARG PORT=3000
 ENV PORT=${PORT}
 EXPOSE ${PORT}

-CMD ["sh", "-c", "if [ -n \"$POSTGRES_URL\" ]; then cd /app && pnpm db:migrate && cd /app/apps/web; fi && pnpm start"]
+CMD ["sh", "-c", "cd /app && pnpm db:migrate && cd /app/apps/web && pnpm start"]
+
--- a/apps/web/i18n.lock
+++ b/apps/web/i18n.lock
@@ -6,6 +6,7 @@ checksums:
    "%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
+    "%231%20Hacker%20News/singular": de271b412c6c022d5c427d29fc70e0ba
    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
@@ -13,25 +14,17 @@ checksums:
    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%20description...%20(type%20'%2F'%20to%20open%20commands)/singular: df99ea599521682e9ad0a90716955dc6
    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
+    added%20label%20%3C0%3E%7Blabel%7D%3C%2F0%3E/singular: 1caba6b6bca4c6fa1ab173d241059dc2
    Admin%20roles/singular: 32a5d78073b9bb9a246773afba8831df
    All%20seats%20are%20free%20during%20the%20beta%20until%20Sept%201st!/singular: 015cec3899cf99e37c3cf231d432e31d
    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
@@ -39,11 +32,9 @@ checksums:
    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
+    assigned%20%3C0%3E%7BmemberName%7D%3C%2F0%3E%20to%20the%20card/singular: 4fb1c419a78a0f010a3e5790801551fc
    Awaiting%20Customer/singular: 122c108794f321c10e05a08f09b11457
    Backlog/singular: 35919fd5b10ad212839a75e72829fe4e
    Basic%20Kanban/singular: e46ebc406749486f3907436970d4d6c7
@@ -68,10 +59,8 @@ checksums:
    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
@@ -81,10 +70,7 @@ checksums:
    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%20URL%20change/singular: e14b4ce081d1ef6194b37e1814e97b39
-    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
@@ -97,7 +83,6 @@ checksums:
    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
@@ -107,7 +92,6 @@ checksums:
    Create%20workspace/singular: 2e6718e79964ea5ce22d76c2189c77ca
    created%20the%20card/singular: 605475f5aaeb4dbccbf7c4eb9107b43d
    Critical/singular: eb327cd411b50aee954f8d1d215d003a
-    Current%20password%20is%20required/singular: 72536bca9598680027f2be8ce80ac280
    Custom%20domain/singular: b09e7a9c187b7163b4a6cfc78042fe42
    Custom%20URLs%20are%20a%20premium%20feature.%20You'll%20be%20directed%20to%20upgrade%20your%20account./singular: b52e4f6122cf739c9551d29beb89b25e
    Customer%20Support/singular: 50e3c77e22e41061ca85ea2f02625a2e
@@ -119,10 +103,6 @@ checksums:
    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
@@ -139,23 +119,16 @@ checksums:
    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
@@ -212,9 +185,7 @@ checksums:
    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
    Junior/singular: ed1bd2c59a824fdcdd56fc8a0660fe9f
    Kanban%20is%20better%20with%20a%20team.%20Perfect%20for%20small%20and%20growing%20teams%20looking%20to%20collaborate./singular: a77bee43046b260797c8936ad23e9223
@@ -235,25 +206,20 @@ checksums:
    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
-    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%20from%20%3C0%3E%7BfromList%7D%3C%2F0%3E%20to%3C1%3E%7BtoList%7D%3C%2F1%3E/singular: c2d0d72ad97510344b51154ef15060e0
    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
@@ -270,15 +236,11 @@ checksums:
    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
@@ -301,10 +263,7 @@ checksums:
    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
+    removed%20label%20%3C0%3E%7Blabel%7D%3C%2F0%3E/singular: 1e7ebc1866136352bdc3cd90afc083f0
    Research/singular: 3368e9638d1619babd6df9fad592274f
    Resolution/singular: 6d8bd9e1bd7dae5ae38c93061d32990e
    Resources/singular: ec7fb05ed963bb6781a35782b3475502
@@ -321,7 +280,7 @@ checksums:
    Self%20Host/singular: 43fbce2027548b712002e489a20a621a
    Self%20host%20with%20Github/singular: 972155419bcc9f8f9bad9f5ad3538774
    self-assigned%20the%20card/singular: 24a8d97bcd747643772ebe883be69698
-    Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
+    Send/singular: 76a8497d7b546628b03bb81d5c1ce995
    Senior/singular: 3fff865dc00435f82896fc302ea45630
    Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
@@ -336,21 +295,18 @@ checksums:
    Software%20Development/singular: 67659097ef6bcb194839858b2c4f3a3c
    Star%20on%20Github/singular: e5cb0428f1ac6485688f120d78742875
    Success/singular: c43827becada6750f7a25890905f38b9
-    Support/singular: 55aab5fd0f31a9cb055a2edeeedfaf63
    Support%20the%20development%20of%20the%20project/singular: c63bab228ab2b1be4370c668a99cd278
    System/singular: 803281c327a02a2feba182f4a2b38311
    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
@@ -361,28 +317,22 @@ checksums:
    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%20%3C0%3E%7BmemberName%7D%3C%2F0%3E%20from%20the%20card/singular: 105d4eeb32044126b8dde243bad11d56
    unassigned%20themselves%20from%20the%20card/singular: 27c6f293c562af6a44348d7f00036d30
    Unlimited%20activity%20log/singular: 8c993de94cda0deac19ba14ecafce6a5
    Unlimited%20boards/singular: cb4fd858137ce825c2f1904d142d8042
@@ -392,10 +342,9 @@ checksums:
    Unlimited%20lists/singular: 5c418701b27b9acbc5dd199719007362
    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
+    updated%20the%20title%20to%20%3C0%3E%7BtoTitle%7D%3C%2F0%3E/singular: 70cdf681ec2b6ef8e14397bc1f93f945
    Upgrade/singular: 63c3b52882e0d779859307d672c178c2
    Urgent/singular: e79afcd4398e52e10e7e8243a7eecabe
    URL%20can%20only%20contain%20letters%2C%20numbers%2C%20and%20hyphens/singular: 875d37d2d920f98ef60a314eda8a5d9a
@@ -403,14 +352,11 @@ checksums:
    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
@@ -435,7 +381,6 @@ checksums:
    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
@@ -444,7 +389,6 @@ checksums:
    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
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -33,10 +33,7 @@ const config = {
    remotePatterns: [
      {
        protocol: "https",
-        hostname:
-          env("S3_FORCE_PATH_STYLE") === "true"
-            ? `${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`
-            : `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
+        hostname: `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
      },
      {
        protocol: "http",
@@ -54,16 +51,4 @@ const config = {
  },
 };

-// 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
@@ -33,7 +33,6 @@
    "@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",
@@ -49,7 +48,6 @@
    "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",
--- 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
@@ -4,7 +4,7 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useQuery } from "@tanstack/react-query";
 import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import {
  FaApple,
@@ -16,7 +16,6 @@ import {
  FaGoogle,
  FaLinkedin,
  FaMicrosoft,
-  FaOpenid,
  FaReddit,
  FaSpotify,
  FaTiktok,
@@ -34,8 +33,6 @@ 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;
@@ -144,28 +141,16 @@ const availableSocialProviders = {
    name: "Zoom",
    icon: SiZoom,
  },
-  oidc: {
-    id: "oidc",
-    name: "OIDC",
-    icon: FaOpenid,
-  },
 };

 export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
  const [isLoginWithProviderPending, setIsLoginWithProviderPending] =
-    useState<null | AuthProvider>(null);
-  const [isCredentialsEnabled, setIsCredentialsEnabled] = useState(false);
+    useState<null | SocialProvider>(null);
+  const isCredentialsEnabled =
+    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
  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,
@@ -241,26 +226,13 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
    setIsLoginWithEmailPending(false);
  };

-  const handleLoginWithProvider = async (provider: AuthProvider) => {
+  const handleLoginWithProvider = async (provider: SocialProvider) => {
    setIsLoginWithProviderPending(provider);
    setLoginError(null);
-
-    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;
-    }
+    const { error } = await authClient.signIn.social({
+      provider,
+      callbackURL: "/boards",
+    });

    setIsLoginWithProviderPending(null);

@@ -287,17 +259,13 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
            }
            return (
              <Button
-                key={key}
-                onClick={() => handleLoginWithProvider(key as AuthProvider)}
+                onClick={() => handleLoginWithProvider(key as SocialProvider)}
                isLoading={isLoginWithProviderPending === key}
                iconLeft={<provider.icon />}
                fullWidth
                size="lg"
              >
-                <Trans>
-                  Continue with{" "}
-                  {key === "oidc" ? oidcProviderName : provider.name}
-                </Trans>
+                <Trans>Continue with {provider.name}</Trans>
              </Button>
            );
          })}
--- 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?: "xs" | "sm" | "md" | "lg";
+  size?: "sm" | "md" | "lg";
  isLoading?: boolean;
  iconLeft?: React.ReactNode;
  iconRight?: React.ReactNode;
@@ -28,7 +28,6 @@ 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,67 +55,53 @@ export default function CheckboxDropdown({

  const renderMenuItems = (items: Item[], groupKey: string | null) => (
    <>
-      {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 });
-              }}
+      {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"
            >
-              <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"
+              {item.value}
+            </label>
+            {handleEdit && (
+              <button
+                className="invisible ml-auto group-hover:visible"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  handleEdit(item.key);
+                }}
              >
-                {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
+                <HiEllipsisHorizontal size={20} className="text-dark-900" />
+              </button>
+            )}
          </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={(e) => {
-            e.preventDefault();
-            handleCreate();
-          }}
+          onClick={() => handleCreate()}
        >
          <HiMiniPlus size={20} className="pr-1.5" />
          {createNewItemLabel}
--- a/apps/web/src/components/CircularProgress.tsx
+++ b/apps/web/src/components/CircularProgress.tsx
@@ -1,58 +0,0 @@
-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,3 +1,4 @@
+import Link from "next/link";
 import { useRef, useState } from "react";
 import {
  TbLayoutSidebarLeftCollapse,
@@ -9,11 +10,7 @@ import {
 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 FeedbackButton from "./FeedbackButton";
 import SideNavigation from "./SideNavigation";

 interface DashboardProps {
@@ -22,30 +19,12 @@ interface DashboardProps {
  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);

@@ -61,10 +40,6 @@ export default function Dashboard({
    }
  };

-  const closeSideNav = () => {
-    setIsSideNavOpen(false);
-  };
-
  const toggleRightPanel = () => {
    setIsRightPanelOpen(!isRightPanelOpen);
    if (!isRightPanelOpen) {
@@ -90,93 +65,98 @@ export default function Dashboard({
    }
  });

-  const isDarkMode = theme === "dark";
-
  return (
    <>
      <style jsx global>{`
        html {
          height: 100vh;
          overflow: hidden;
-          min-width: 320px;
-          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#1c1c1c"};
        }
      `}</style>
-      <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 && (
+      <div className="h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:flex md:min-w-[800px]">
+        <div className="m-auto flex h-12 min-h-12 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400 md:h-16 md:min-h-16">
+          <div className="my-auto flex w-full items-center justify-between">
            <button
-              ref={rightPanelButtonRef}
-              onClick={toggleRightPanel}
-              className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+              ref={sideNavButtonRef}
+              onClick={toggleSideNav}
+              className="text-neutral-900 dark:text-dark-1000 md:hidden"
            >
-              {isRightPanelOpen ? (
-                <TbLayoutSidebarRightCollapse
+              {isSideNavOpen ? (
+                <TbLayoutSidebarLeftCollapse
                  size={20}
                  className="text-light-900 dark:text-dark-900"
                />
              ) : (
-                <TbLayoutSidebarRightExpand
+                <TbLayoutSidebarLeftExpand
                  size={20}
                  className="text-light-900 dark:text-dark-900"
                />
              )}
            </button>
-          )}
+
+            <Link href="/" className="hidden md:block">
+              <h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                kan.bn
+              </h1>
+            </Link>
+
+            <div className="flex items-center gap-2">
+              {hasRightPanel && (
+                <button
+                  ref={rightPanelButtonRef}
+                  onClick={toggleRightPanel}
+                  className="text-neutral-900 dark:text-dark-1000 md:hidden"
+                >
+                  {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 className="hidden md:block">
+                <FeedbackButton />
+              </div>
+            </div>
+          </div>
        </div>

-        <div className="flex h-[calc(100dvh-4.5rem)] min-h-0 w-full md:h-[calc(100dvh-1.5rem)]">
+        <div className="flex h-full w-full">
          <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"} `}
+            className={`fixed left-0 z-50 h-[calc(100vh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:h-[calc(100vh-4rem)] 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>
+          <div className="relative flex w-full overflow-hidden">
+            <div className="w-full overflow-hidden">{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>
-              )}
+            {/* Mobile Right Panel */}
+            {hasRightPanel && rightPanel && (
+              <div
+                ref={rightPanelRef}
+                className={`fixed right-0 top-12 z-50 h-[calc(100vh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
+                  isRightPanelOpen ? "translate-x-0" : "translate-x-full"
+                }`}
+              >
+                <div className="h-full overflow-y-auto">{rightPanel}</div>
+              </div>
+            )}

-              {/* Desktop Right Panel */}
-              {hasRightPanel && rightPanel && (
-                <div className="hidden md:block">{rightPanel}</div>
-              )}
-            </div>
+            {/* Desktop Right Panel */}
+            {hasRightPanel && rightPanel && (
+              <div className="hidden md:block">{rightPanel}</div>
+            )}
          </div>
        </div>
      </div>
--- a/apps/web/src/components/DeleteLabelConfirmation.tsx
+++ b/apps/web/src/components/DeleteLabelConfirmation.tsx
@@ -1,5 +1,3 @@
-import { t } from "@lingui/core/macro";
-
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -12,23 +10,21 @@ export function DeleteLabelConfirmation({
  labelPublicId: string;
  refetch: () => void;
 }) {
-  const { closeModal, closeModals } = useModal();
+  const { closeModal } = useModal();
  const { showPopup } = usePopup();

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

  const handleDeleteLabel = () => {
+    closeModal();
    deleteLabelMutation.mutate({
      labelPublicId,
    });
@@ -38,17 +34,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">
-          {t`Are you sure you want to delete this label?`}
+          Are you sure you want to delete this label?
        </h2>
        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {t`This action can't be undone.`}
+          {"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()}>
-          {t`Cancel`}
+          Cancel
        </Button>
-        <Button onClick={handleDeleteLabel}>{t`Delete`}</Button>
+        <Button onClick={handleDeleteLabel}>Delete</Button>
      </div>
    </div>
  );
--- a/apps/web/src/components/Editor.tsx
+++ b/apps/web/src/components/Editor.tsx
@@ -17,13 +17,7 @@ import {
 } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Suggestion from "@tiptap/suggestion";
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import {
  HiH1,
  HiH2,
@@ -39,9 +33,6 @@ import {
 } 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> {
@@ -77,16 +68,6 @@ export interface RenderSuggestionsProps {
  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 },
  {
@@ -200,125 +181,6 @@ const RenderSuggestions = () => {
  };
 };

-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() {
@@ -422,13 +284,11 @@ export default function Editor({
  onChange,
  onBlur,
  readOnly = false,
-  workspaceMembers,
 }: {
  content: string | null;
  onChange?: (value: string) => void;
  onBlur?: () => void;
  readOnly?: boolean;
-  workspaceMembers: WorkspaceMember[];
 }) {
  const containerRef = useRef<HTMLDivElement>(null);

@@ -439,7 +299,7 @@ export default function Editor({
        Placeholder.configure({
          placeholder: readOnly
            ? ""
-            : t`Add description... (type '/' to open commands or '@' to mention)`,
+            : t`Add description... (type '/' to open commands)`,
        }),
        Link.configure({
          openOnClick: true,
@@ -460,38 +320,6 @@ export default function Editor({
            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()),
@@ -515,23 +343,14 @@ export default function Editor({
      editable: !readOnly,
      injectCSS: false,
    },
-    [], // creating the editor only once
+    [content],
  );

-  // 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 {
+          color: #adb5bd;
          content: attr(data-placeholder);
          float: left;
          height: 0;
@@ -540,19 +359,11 @@ export default function Editor({
        .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"
+        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-dark-800 [&_p.is-empty::before]:dark:text-dark-800 [&_p]:!text-sm [&_p]:text-black [&_p]:dark:text-white [&_ul]:!text-xs"
      />
    </div>
  );
--- a/apps/web/src/components/FeedbackButton.tsx
+++ b/apps/web/src/components/FeedbackButton.tsx
@@ -0,0 +1,149 @@
+import Link from "next/link";
+import { Menu, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+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: 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 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">{t`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={t`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">
+                    {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 className="justify-end">
+                  <Button size="sm" isLoading={createFeedback.isPending}>
+                    {t`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
@@ -1,122 +0,0 @@
-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/LabelForm.tsx
+++ b/apps/web/src/components/LabelForm.tsx
@@ -32,7 +32,7 @@ export function LabelForm({
  refetch: () => void;
  isEdit?: boolean;
 }) {
-  const { closeModal, entityId, openModal, setModalState } = useModal();
+  const { closeModal, entityId, openModal } = useModal();

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

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

@@ -221,7 +220,6 @@ export function LabelForm({
        <div className="space-x-2">
          {isEdit && (
            <Button
-              type="button"
              variant="secondary"
              onClick={() => openModal("DELETE_LABEL", entityId)}
            >
@@ -231,9 +229,6 @@ export function LabelForm({
          <Button
            type="submit"
            isLoading={updateLabel.isPending || createLabel.isPending}
-            disabled={
-              !watch("name")
-            }
          >
            {isEdit ? t`Update label` : t`Create label`}
          </Button>
--- 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 });

-interface IconProps {
+type 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: 18, height: 18, fill: "white" }}
+      style={{ width: 20, height: 20, fill: "white" }}
      rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
    />
  );
--- a/apps/web/src/components/NewWorkspaceForm.tsx
+++ b/apps/web/src/components/NewWorkspaceForm.tsx
@@ -31,7 +31,6 @@ export function NewWorkspaceForm() {
          description: values.description,
          slug: values.slug,
          plan: values.plan,
-          role: "admin",
        });
        closeModal();
      }
--- a/apps/web/src/components/PageHead.tsx
+++ b/apps/web/src/components/PageHead.tsx
@@ -4,10 +4,6 @@ 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="10"
-        y="10"
+        x="0.034759358288862785"
+        y="3.335370511841166"
        width="14.423223834988539"
        height="14.423223834988539"
        patternUnits="userSpaceOnUse"
--- a/apps/web/src/components/ReactiveButton.tsx
+++ b/apps/web/src/components/ReactiveButton.tsx
@@ -1,51 +1,37 @@
 import Link from "next/link";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";

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

 const Button: React.FC<{
  href: string;
  current: boolean;
  name: string;
  json: object;
-  isCollapsed?: boolean;
-  onCloseSideNav?: () => void;
-}> = ({ href, current, name, json, isCollapsed = false, onCloseSideNav }) => {
+}> = ({ href, current, name, json }) => {
  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}
-      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",
+      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",
      )}
-      title={isCollapsed ? name : undefined}
    >
      <LottieIcon index={index} json={json} isPlaying={isHovered} />
-      <span className={twMerge(isCollapsed && "md:hidden")}>{name}</span>
+      {name}
    </Link>
  );
 };
--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -1,13 +1,5 @@
-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";
@@ -18,12 +10,11 @@ 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 "next-themes";
+import { useTheme } from "~/providers/theme";

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

 interface UserType {
@@ -34,34 +25,14 @@ 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 { theme, resolvedTheme } = useTheme();
+  const { activeTheme } = useTheme();

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

  const navigation = [
    {
@@ -81,50 +52,11 @@ export default function SideNavigation({
    },
  ];

-  const toggleCollapse = () => {
-    setIsCollapsed(!isCollapsed);
-  };
-
  return (
    <>
-      <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",
-        )}
-      >
+      <nav className="flex h-full w-64 flex-col justify-between border-r border-light-600 bg-light-50 px-3 pb-3 pt-5 dark:border-dark-400 dark:bg-dark-50">
        <div>
-          <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} />
+          <WorkspaceMenu />
          <ul role="list" className="space-y-1">
            {navigation.map((item) => (
              <li key={item.name}>
@@ -133,23 +65,16 @@ export default function SideNavigation({
                  current={pathname.includes(item.href)}
                  name={item.name}
                  json={item.icon}
-                  isCollapsed={isCollapsed}
-                  onCloseSideNav={onCloseSideNav}
                />
              </li>
            ))}
          </ul>
        </div>
-
-        <div className="space-y-3">
-          <UserMenu
-            email={user.email ?? ""}
-            imageUrl={user.image ?? undefined}
-            isLoading={isLoading}
-            isCollapsed={isCollapsed}
-            onCloseSideNav={onCloseSideNav}
-          />
-        </div>
+        <UserMenu
+          email={user.email ?? ""}
+          imageUrl={user.image ?? undefined}
+          isLoading={isLoading}
+        />
      </nav>
    </>
  );
--- a/apps/web/src/components/ThemeToggle.tsx
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -1,22 +1,23 @@
 import { CgDarkMode } from "react-icons/cg";
-import { useTheme } from "next-themes";
+
+import { useTheme } from "~/providers/theme";

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

  const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
+    switchTheme(themePreference === "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 ${theme === "light" ? "dark" : "light"} theme`}
+      aria-label={`Switch to ${themePreference === "light" ? "dark" : "light"} theme`}
    >
      <CgDarkMode
        className={`h-4 w-4 text-light-900 transition-transform duration-200 dark:text-dark-900 ${
-          theme === "dark" ? "rotate-180" : "rotate-0"
+          themePreference === "dark" ? "rotate-180" : "rotate-0"
        }`}
      />
    </button>
--- a/apps/web/src/components/UserMenu.tsx
+++ b/apps/web/src/components/UserMenu.tsx
@@ -1,79 +1,50 @@
 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 { useIsMobile } from "~/hooks/useMediaQuery";
-import { useModal } from "~/providers/modal";
-import { useTheme } from "next-themes";
+import { useTheme } from "~/providers/theme";
 import { getAvatarUrl } from "~/utils/helpers";

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

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

  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={twMerge(!isCollapsed && "flex")}>
+          <div className="flex">
            <div className="h-[30px] w-[30px] animate-pulse rounded-full 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 className="mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
          </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"
-            title={isCollapsed ? email : undefined}
-          >
+          <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">
            {avatarUrl ? (
              <Image
                src={avatarUrl}
@@ -93,14 +64,7 @@ export default function UserMenu({
                </svg>
              </span>
            )}
-            <span
-              className={twMerge(
-                "mx-2 truncate text-sm",
-                isCollapsed && "md:hidden",
-              )}
-            >
-              {email}
-            </span>
+            <span className="mx-2 truncate text-sm">{email}</span>
          </Menu.Button>
        )}
      </div>
@@ -114,12 +78,7 @@ export default function UserMenu({
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <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",
-          )}
-        >
+        <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">
          <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">
@@ -127,12 +86,12 @@ export default function UserMenu({
              </div>
              <Menu.Item>
                <button
-                  onClick={() => setTheme("system")}
+                  onClick={() => switchTheme("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={twMerge(
-                      theme === "system" ? "visible" : "invisible",
+                    className={classNames(
+                      themePreference === "system" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
                  />
@@ -141,12 +100,12 @@ export default function UserMenu({
              </Menu.Item>
              <Menu.Item>
                <button
-                  onClick={() => setTheme("dark")}
+                  onClick={() => switchTheme("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={twMerge(
-                      theme === "dark" ? "visible" : "invisible",
+                    className={classNames(
+                      themePreference === "dark" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
                  />
@@ -155,12 +114,12 @@ export default function UserMenu({
              </Menu.Item>
              <Menu.Item>
                <button
-                  onClick={() => setTheme("light")}
+                  onClick={() => switchTheme("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={twMerge(
-                      theme === "light" ? "visible" : "invisible",
+                    className={classNames(
+                      themePreference === "light" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
                  />
@@ -168,38 +127,6 @@ export default function UserMenu({
                </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>
            <div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
              <Menu.Item>
                <button
--- a/apps/web/src/components/WorkspaceMenu.tsx
+++ b/apps/web/src/components/WorkspaceMenu.tsx
@@ -2,16 +2,11 @@ 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({
-  isCollapsed = false,
-}: {
-  isCollapsed?: boolean;
-}) {
+export default function WorkspaceMenu() {
  const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
    useWorkspace();
  const { openModal } = useModal();
@@ -20,43 +15,22 @@ export default function WorkspaceMenu({
    <Menu as="div" className="relative inline-block w-full pb-3 text-left">
      <div>
        {isLoading ? (
-          <div className={twMerge("mb-1", isCollapsed && "md:flex md:p-1.5")}>
-            <div className="h-6 w-6 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
-            <div
-              className={twMerge(
-                "ml-2 h-6 w-[150px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
-                isCollapsed && "hidden md:block",
-              )}
-            />
+          <div 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>
        ) : (
-          <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">
+          <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">
              <span className="text-xs font-bold leading-none text-white">
                {workspace.name.charAt(0).toUpperCase()}
              </span>
            </span>
-            <span
-              className={twMerge(
-                "ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000",
-                isCollapsed && "md:hidden",
-              )}
-            >
+            <span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
              {workspace.name}
            </span>
            {workspace.plan === "pro" && (
-              <span
-                className={twMerge(
-                  "ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700",
-                  isCollapsed && "md:hidden",
-                )}
-              >
+              <span className="ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700">
                Pro
              </span>
            )}
@@ -73,12 +47,7 @@ export default function WorkspaceMenu({
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <Menu.Items
-          className={twMerge(
-            "absolute left-0 z-10 origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300",
-            isCollapsed ? "w-48" : "w-full",
-          )}
-        >
+        <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">
          <div className="p-1">
            {availableWorkspaces.map((availableWorkspace) => (
              <div key={availableWorkspace.publicId} className="flex">
--- a/apps/web/src/components/modal.tsx
+++ b/apps/web/src/components/modal.tsx
@@ -7,19 +7,15 @@ 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]",
@@ -33,7 +29,7 @@ const Modal: React.FC<Props> = ({
  };

  return (
-    <Transition.Root show={shouldShow} as={Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={closeModal}>
        <Transition.Child
          as={Fragment}
--- a/apps/web/src/env.ts
+++ b/apps/web/src/env.ts
@@ -24,7 +24,7 @@ export const env = createEnv({
          s.split(",").every((l) => z.string().url().safeParse(l).success),
      )
      .optional(),
-    POSTGRES_URL: z.string().url().optional().or(z.literal("")),
+    POSTGRES_URL: z.string().url(),
    TRELLO_APP_API_KEY: z.string().optional(),
    TRELLO_APP_SECRET: z.string().optional(),
    STRIPE_SECRET_KEY: z.string().optional(),
@@ -51,10 +51,6 @@ 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(),
@@ -73,7 +69,6 @@ export const env = createEnv({
    S3_SECRET_ACCESS_KEY: z.string().optional(),
    S3_REGION: z.string().optional(),
    S3_ENDPOINT: z.string().optional(),
-    S3_FORCE_PATH_STYLE: z.string().optional(),
    EMAIL_FROM: z.string().optional(),
  },

@@ -105,13 +100,6 @@ export const env = createEnv({
        (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.
@@ -130,8 +118,6 @@ export const env = createEnv({
    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/useMediaQuery.ts
+++ b/apps/web/src/hooks/useMediaQuery.ts
@@ -1,23 +0,0 @@
-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
@@ -1,48 +0,0 @@
-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/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
@@ -1,18 +0,0 @@
-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,9 +1,8 @@
 import "~/styles/globals.css";
 import "~/utils/i18n";

-import type { NextPage, Viewport } from "next";
-import type { AppProps, AppType } from "next/app";
-import type { ReactElement, ReactNode } from "react";
+import type { Viewport } from "next";
+import type { AppType } from "next/app";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Script from "next/script";
 import { env } from "next-runtime-env";
@@ -14,7 +13,7 @@ import { useEffect } from "react";
 import { LinguiProviderWrapper } from "~/providers/lingui";
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "~/providers/theme";
 import { api } from "~/utils/api";

 const jakarta = Plus_Jakarta_Sans({
@@ -35,15 +34,7 @@ export const viewport: Viewport = {
  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 MyApp: AppType = ({ Component, pageProps }) => {
  const posthogKey = env("NEXT_PUBLIC_POSTHOG_KEY");

  useEffect(() => {
@@ -59,8 +50,6 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
    }
  }, [posthogKey]);

-  const getLayout = Component.getLayout ?? ((page) => page);
-
  return (
    <>
      <style jsx global>{`
@@ -81,18 +70,18 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
      <script src="/__ENV.js" />
      <main className="font-sans">
        <LinguiProviderWrapper>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <ModalProvider>
-                <PopupProvider>
+          <ThemeProvider>
+            <ModalProvider>
+              <PopupProvider>
                {posthogKey ? (
                  <PostHogProvider client={posthog}>
-                    {getLayout(<Component {...pageProps} />)}
+                    <Component {...pageProps} />
                  </PostHogProvider>
                ) : (
-                  getLayout(<Component {...pageProps} />)
+                  <Component {...pageProps} />
                )}
-                </PopupProvider>
-              </ModalProvider>
+              </PopupProvider>
+            </ModalProvider>
          </ThemeProvider>
        </LinguiProviderWrapper>
      </main>
--- a/apps/web/src/pages/api/upload/image.ts
+++ b/apps/web/src/pages/api/upload/image.ts
@@ -46,7 +46,6 @@ 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 ?? "",
@@ -59,7 +58,6 @@ export default async function handler(
      new PutObjectCommand({
        Bucket: nextRuntimeEnv("NEXT_PUBLIC_AVATAR_BUCKET_NAME") ?? "",
        Key: filename,
-        ACL: "public-read",
      }),
    );

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

-const BoardPage: NextPageWithLayout = () => {
+export default function BoardPage() {
  return (
-    <>
-      <BoardView />
+    <WorkspaceProvider>
+      <Dashboard>
+        <BoardView />
+      </Dashboard>
      <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,17 +1,15 @@
-import type { NextPageWithLayout } from "../_app";
-import { getDashboardLayout } from "~/components/Dashboard";
+import { WorkspaceProvider } from "~/providers/workspace";
+import Dashboard from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import BoardsView from "~/views/boards";

-const BoardsPage: NextPageWithLayout = () => {
+export default function BoardsPage() {
  return (
-    <>
-      <BoardsView />
+    <WorkspaceProvider>
+      <Dashboard>
+        <BoardsView />
+      </Dashboard>
      <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,18 +1,15 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
+import Dashboard from "~/components/Dashboard";
 import Popup from "~/components/Popup";
+import { WorkspaceProvider } from "~/providers/workspace";
 import CardView, { CardRightPanel } from "~/views/card";

-const CardPage: NextPageWithLayout = () => {
+export default function CardPage() {
  return (
-    <>
-      <CardView />
+    <WorkspaceProvider>
+      <Dashboard hasRightPanel rightPanel={<CardRightPanel />}>
+        <CardView />
+      </Dashboard>
      <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,17 +1,15 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
+import { WorkspaceProvider } from "~/providers/workspace";
+import Dashboard from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import MembersView from "~/views/members";

-const MembersPage: NextPageWithLayout = () => {
+export default function MembersPage() {
  return (
-    <>
-      <MembersView />
+    <WorkspaceProvider>
+      <Dashboard>
+        <MembersView />
+      </Dashboard>
      <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,17 +1,15 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import Popup from "~/components/Popup";
+import { WorkspaceProvider } from "~/providers/workspace";
+import Dashboard from "~/components/Dashboard";
 import SettingsView from "~/views/settings";
+import Popup from "~/components/Popup";

-const SettingsPage: NextPageWithLayout = () => {
+export default function SettingsPage() {
  return (
-    <>
-      <SettingsView />
+    <WorkspaceProvider>
+      <Dashboard>
+        <SettingsView />
+      </Dashboard>
      <Popup />
-    </>
+    </WorkspaceProvider>
  );
-};
-
-SettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default SettingsPage;
+}
--- a/apps/web/src/providers/modal.tsx
+++ b/apps/web/src/providers/modal.tsx
@@ -1,16 +1,6 @@
 import { createContext, useContext, useState } from "react";

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

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

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

  const openModal = (
    contentType: string,
    entityId?: string,
    entityLabel?: string,
  ) => {
-    const newModal: ModalState = { contentType, entityId, entityLabel };
-    setModalStack((prev) => [...prev, newModal]);
+    setIsOpen(true);
+    setModalContentType(contentType);
+    if (entityId) setEntityId(entityId);
+    if (entityLabel) setEntityLabel(entityLabel);
  };

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

  return (
@@ -100,16 +46,9 @@ 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/utils/helpers.ts
+++ b/apps/web/src/utils/helpers.ts
@@ -45,12 +45,10 @@ export const formatMemberDisplayName = (
  return localPart.replace(/[_-]/g, ".");
 };

-export const getAvatarUrl = (imageOrKey: string | null) => {
-  if (!imageOrKey) return "";
-
+export const getAvatarUrl = (imageOrKey: string) => {
  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/views/board/components/Card.tsx
+++ b/apps/web/src/views/board/components/Card.tsx
@@ -1,6 +1,5 @@
 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";

@@ -8,7 +7,6 @@ const Card = ({
  title,
  labels,
  members,
-  checklists,
 }: {
  title: string;
  labels: { name: string; colourCode: string | null }[];
@@ -17,32 +15,11 @@ 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 || checklists.length > 0 ? (
+      {labels.length || members.length ? (
        <div className="mt-2 flex flex-col justify-end">
          <div className="space-x-0.5">
            {labels.map((label) => (
@@ -52,37 +29,21 @@ const Card = ({
              />
            ))}
          </div>
-          <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;
+          <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>
-            )}
+              return (
+                <Avatar
+                  name={user?.name ?? ""}
+                  email={user?.email ?? email}
+                  imageUrl={avatarUrl}
+                  size="sm"
+                />
+              );
+            })}
          </div>
        </div>
      ) : null}
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -14,11 +14,10 @@ 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 Editor 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";
@@ -46,28 +45,21 @@ export function NewCardForm({
  queryParams,
 }: NewCardFormProps) {
  const { showPopup } = usePopup();
-  const { closeModal, openModal, modalStates, clearModalState } = useModal();
+  const { closeModal, openModal } = 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>({
-      values: formState,
+      defaultValues: {
+        title: "",
+        description: "",
+        listPublicId,
+        labelPublicIds: [],
+        memberPublicIds: [],
+        isCreateAnotherEnabled: false,
+        position: "start",
+      },
    });

  const labelPublicIds = watch("labelPublicIds") || [];
@@ -75,49 +67,11 @@ 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();
@@ -177,24 +131,17 @@ export function NewCardForm({
    },
    onSuccess: async () => {
      const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
-      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);
-      }
+      if (!isCreateAnotherEnabled) closeModal();
      await utils.board.byId.invalidate(queryParams);
+      reset({
+        title: "",
+        description: "",
+        listPublicId: watch("listPublicId"),
+        labelPublicIds: [],
+        memberPublicIds: [],
+        isCreateAnotherEnabled,
+        position,
+      });
    },
  });

@@ -317,22 +264,8 @@ export function NewCardForm({
        <div className="mt-2">
          <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,
-                })) ?? []
-              }
+              content=""
+              onChange={(value) => setValue("description", value)}
            />
          </div>
        </div>
--- a/apps/web/src/views/board/components/NewListForm.tsx
+++ b/apps/web/src/views/board/components/NewListForm.tsx
@@ -145,12 +145,7 @@ export function NewListForm({
        />

        <div>
-          <Button
-            type="submit"
-            disabled={createList.isPending || !watch("name")}
-          >
-            {t`Create list`}
-          </Button>
+          <Button type="submit">{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
@@ -1,53 +0,0 @@
-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
@@ -135,7 +135,7 @@ export function UpdateBoardSlugForm({
              ? t`This board URL has already been taken`
              : undefined)
          }
-          prefix={`${env("NEXT_PUBLIC_KAN_ENV") === "cloud" ? "kan.bn" : env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
+          prefix={`${env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
              e.preventDefault();
@@ -152,14 +152,7 @@ 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 className="flex items-center gap-2">
-          <Button
-            variant="secondary"
-            href="/settings?edit=workspace_url"
-            onClick={closeModal}
-          >
-            {t`Edit workspace URL`}
-          </Button>
+        <div>
          <Button
            type="submit"
            isLoading={updateBoardSlug.isPending}
@@ -167,8 +160,7 @@ export function UpdateBoardSlugForm({
              !isDirty ||
              updateBoardSlug.isPending ||
              errors.slug?.message !== undefined ||
-              isBoardSlugAvailable?.isReserved ||
-              checkBoardSlugAvailability.isLoading
+              isBoardSlugAvailable?.isReserved
            }
          >
            {t`Update`}
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -32,7 +32,6 @@ 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";

@@ -44,7 +43,7 @@ export default function BoardPage() {
  const utils = api.useUtils();
  const { showPopup } = usePopup();
  const { workspace } = useWorkspace();
-  const { openModal, modalContentType, entityId, isOpen } = useModal();
+  const { openModal, modalContentType, entityId } = useModal();
  const [selectedPublicListId, setSelectedPublicListId] =
    useState<PublicListId>("");
  const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -234,97 +233,6 @@ 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
@@ -359,12 +267,6 @@ export default function BoardPage() {
          )}

          <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 ?? ""}
@@ -375,7 +277,7 @@ export default function BoardPage() {
            />
            <Filters
              labels={boardData?.labels ?? []}
-              members={boardData?.workspace.members?.filter(member => member.user !== null) ?? []}
+              members={boardData?.workspace.members ?? []}
              position="left"
              isLoading={!boardData}
            />
@@ -456,7 +358,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-225px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600"
+                                  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 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600"
                                >
                                  {list.cards.map((card, index) => (
                                    <Draggable
@@ -491,7 +393,6 @@ export default function BoardPage() {
                                            title={card.title}
                                            labels={card.labels}
                                            members={card.members}
-                                            checklists={card.checklists ?? []}
                                          />
                                        </Link>
                                      )}
@@ -513,7 +414,55 @@ export default function BoardPage() {
            </>
          ) : null}
        </div>
-        {renderModalContent()}
+        <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>
      </div>
    </>
  );
--- a/apps/web/src/views/boards/components/BoardsList.tsx
+++ b/apps/web/src/views/boards/components/BoardsList.tsx
@@ -19,7 +19,7 @@ export function BoardsList() {

  if (isLoading)
    return (
-      <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
+      <div className="xxl:grid-cols-7 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        <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" />
@@ -45,12 +45,12 @@ export function BoardsList() {
    );

  return (
-    <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
+    <div className="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">
      {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="px-4 text-[14px] font-bold text-neutral-700 dark:text-dark-1000">
+            <p className="text-md px-4 font-bold text-neutral-900 dark:text-dark-1000">
              {board.name}
            </p>
          </div>
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -2,7 +2,6 @@ import { t } from "@lingui/core/macro";
 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";
@@ -13,7 +12,7 @@ import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";

 export default function BoardsPage() {
-  const { openModal, modalContentType, isOpen } = useModal();
+  const { openModal, modalContentType } = useModal();
  const { workspace, hasLoaded } = useWorkspace();

  if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE");
@@ -21,8 +20,8 @@ export default function BoardsPage() {
  return (
    <>
      <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">
+      <div className="m-auto h-full max-w-[1600px] px-5 py-6 md:px-8 md:py-8">
+        <div className="mb-8 flex w-full items-center justify-between">
          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
            {t`Boards`}
          </h1>
@@ -50,35 +49,11 @@ export default function BoardsPage() {
          </div>
        </div>

-        <>
-          <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>
-        </>
+        <Modal>
+          {modalContentType === "NEW_BOARD" && <NewBoardForm />}
+          {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
+          {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
@@ -5,11 +5,9 @@ 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";
@@ -33,11 +31,6 @@ const dateLocaleMap = {
  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,
@@ -46,7 +39,6 @@ const getActivityText = ({
  memberName,
  isSelf,
  label,
-  fromTitle,
 }: {
  type: ActivityType;
  toTitle: string | null;
@@ -55,7 +47,6 @@ const getActivityText = ({
  memberName: string | null;
  isSelf: boolean;
  label: string | null;
-  fromTitle?: string | null;
 }) => {
  const ACTIVITY_TYPE_MAP = {
    "card.created": t`created the card`,
@@ -66,14 +57,6 @@ const getActivityText = ({
    "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;
@@ -88,7 +71,7 @@ const getActivityText = ({
  if (type === "card.updated.title" && toTitle) {
    return (
      <Trans>
-        updated the title to <TextHighlight>{truncate(toTitle)}</TextHighlight>
+        updated the title to <TextHighlight>{toTitle}</TextHighlight>
      </Trans>
    );
  }
@@ -96,9 +79,8 @@ const getActivityText = ({
  if (type === "card.updated.list" && fromList && toList) {
    return (
      <Trans>
-        moved the card from <TextHighlight>{truncate(fromList)}</TextHighlight>{" "}
-        to
-        <TextHighlight>{truncate(toList)}</TextHighlight>
+        moved the card from <TextHighlight>{fromList}</TextHighlight> to
+        <TextHighlight>{toList}</TextHighlight>
      </Trans>
    );
  }
@@ -108,8 +90,7 @@ const getActivityText = ({

    return (
      <Trans>
-        assigned <TextHighlight>{truncate(memberName)}</TextHighlight> to the
-        card
+        assigned <TextHighlight>{memberName}</TextHighlight> to the card
      </Trans>
    );
  }
@@ -119,8 +100,7 @@ const getActivityText = ({

    return (
      <Trans>
-        unassigned <TextHighlight>{truncate(memberName)}</TextHighlight> from
-        the card
+        unassigned <TextHighlight>{memberName}</TextHighlight> from the card
      </Trans>
    );
  }
@@ -128,7 +108,7 @@ const getActivityText = ({
  if (type === "card.updated.label.added" && label) {
    return (
      <Trans>
-        added label <TextHighlight>{truncate(label)}</TextHighlight>
+        added label <TextHighlight>{label}</TextHighlight>
      </Trans>
    );
  }
@@ -136,75 +116,7 @@ const getActivityText = ({
  if (type === "card.updated.label.removed" && label) {
    return (
      <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>
+        removed label <TextHighlight>{label}</TextHighlight>
      </Trans>
    );
  }
@@ -221,14 +133,6 @@ 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 = (
@@ -251,13 +155,11 @@ 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();
@@ -275,7 +177,6 @@ const ActivityList = ({
          memberName: activity.member?.user?.name ?? null,
          isSelf: activity.member?.user?.id === data?.user.id,
          label: activity.label?.name ?? null,
-          fromTitle: activity.fromTitle ?? null,
        });

        if (activity.type === "card.updated.comment.added")
@@ -292,7 +193,6 @@ const ActivityList = ({
              isEdited={!!activity.comment?.updatedAt}
              isAuthor={activity.comment?.createdBy === data?.user.id}
              isAdmin={isAdmin ?? false}
-              isViewOnly={!!isViewOnly}
            />
          );

--- a/apps/web/src/views/card/components/ChecklistItemRow.tsx
+++ b/apps/web/src/views/card/components/ChecklistItemRow.tsx
@@ -1,197 +0,0 @@
-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/apps/web/src/views/card/components/ChecklistNameInput.tsx
+++ b/apps/web/src/views/card/components/ChecklistNameInput.tsx
@@ -1,90 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { useEffect, useRef, useState } from "react";
-import { twMerge } from "tailwind-merge";
-
-import { usePopup } from "~/providers/popup";
-import { api } from "~/utils/api";
-
-export default function ChecklistNameInput({
-  checklistPublicId,
-  initialName,
-  cardPublicId,
-  viewOnly = false,
-}: {
-  checklistPublicId: string;
-  initialName: string;
-  cardPublicId: string;
-  viewOnly?: boolean;
-}) {
-  const utils = api.useUtils();
-  const { showPopup } = usePopup();
-  const [name, setName] = useState(initialName);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    setName(initialName);
-  }, [initialName, checklistPublicId]);
-
-  const update = api.checklist.update.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 updated = old.checklists.map((cl) =>
-          cl.publicId === checklistPublicId ? { ...cl, name: vars.name } : cl,
-        );
-        return { ...old, checklists: updated } 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`,
-        message: t`Please try again later, or contact customer support.`,
-        icon: "error",
-      });
-    },
-    onSettled: async () => {
-      await utils.card.byId.invalidate({ cardPublicId });
-    },
-  });
-
-  const commit = () => {
-    if (viewOnly) return;
-    const trimmed = name.trim();
-    if (!trimmed || trimmed === initialName) return;
-    update.mutate({ checklistPublicId, name: trimmed });
-  };
-
-  return (
-    <input
-      ref={inputRef}
-      type="text"
-      value={name}
-      readOnly={viewOnly}
-      onChange={(e) => setName(e.target.value)}
-      onBlur={commit}
-      onKeyDown={(e) => {
-        if (viewOnly) return;
-        if (e.key === "Enter") {
-          e.preventDefault();
-          commit();
-          inputRef.current?.blur();
-        }
-        if (e.key === "Escape") {
-          e.preventDefault();
-          setName(initialName);
-          inputRef.current?.blur();
-        }
-      }}
-      title={name}
-      className={twMerge(
-        "text-md block w-full truncate border-0 bg-transparent p-0 py-0 font-medium text-light-1000 outline-none focus:ring-0 dark:text-dark-1000",
-        viewOnly && "cursor-default",
-      )}
-    />
-  );
-}
--- a/apps/web/src/views/card/components/Checklists.tsx
+++ b/apps/web/src/views/card/components/Checklists.tsx
@@ -1,142 +0,0 @@
-import { HiPlus, HiXMark } from "react-icons/hi2";
-
-import CircularProgress from "~/components/CircularProgress";
-import { useModal } from "~/providers/modal";
-import ChecklistItemRow from "./ChecklistItemRow";
-import ChecklistNameInput from "./ChecklistNameInput";
-import NewChecklistItemForm from "./NewChecklistItemForm";
-
-interface ChecklistItem {
-  publicId: string;
-  title: string;
-  completed: boolean;
-}
-
-interface Checklist {
-  publicId: string;
-  name: string;
-  items: ChecklistItem[];
-}
-
-interface ChecklistsProps {
-  checklists: Checklist[];
-  cardPublicId: string;
-  activeChecklistForm?: string | null;
-  setActiveChecklistForm?: (id: string | null) => void;
-  viewOnly?: boolean;
-}
-
-export default function Checklists({
-  checklists,
-  cardPublicId,
-  activeChecklistForm,
-  setActiveChecklistForm,
-  viewOnly = false,
-}: ChecklistsProps) {
-  const { openModal } = useModal();
-
-  if (!checklists || checklists.length === 0) return null;
-
-  return (
-    <div className="border-light-300 pb-4 dark:border-dark-300">
-      <div>
-        {checklists.map((checklist) => {
-          const completedItems = checklist.items.filter(
-            (item) => item.completed,
-          );
-          const progress =
-            checklist.items.length > 0 && completedItems.length > 0
-              ? (completedItems.length / checklist.items.length) * 100
-              : 2;
-
-          return (
-            <div key={checklist.publicId} className="mb-4">
-              <div className="mb-2 flex items-center font-medium text-light-1000 dark:text-dark-1000">
-                <div className="min-w-0 flex-1">
-                  <ChecklistNameInput
-                    checklistPublicId={checklist.publicId}
-                    initialName={checklist.name}
-                    cardPublicId={cardPublicId}
-                    viewOnly={viewOnly}
-                  />
-                </div>
-                {!viewOnly && (
-                  <div className="ml-2 flex flex-shrink-0 items-center gap-2">
-                    <div className="flex items-center gap-1 rounded-full border-[1px] border-light-300 px-2 py-1 dark:border-dark-300">
-                      <CircularProgress
-                        progress={progress}
-                        size="sm"
-                        className="flex-shrink-0"
-                      />
-                      <span className="text-[11px] text-light-900 dark:text-dark-700">
-                        {completedItems.length}/{checklist.items.length}
-                      </span>
-                    </div>
-                    <div>
-                      <button
-                        className="rounded-md p-1 text-light-900 hover:bg-light-100 dark:text-dark-700 dark:hover:bg-dark-100"
-                        onClick={() =>
-                          openModal("DELETE_CHECKLIST", checklist.publicId)
-                        }
-                      >
-                        <HiXMark size={16} />
-                      </button>
-                      <button
-                        onClick={() =>
-                          setActiveChecklistForm?.(checklist.publicId)
-                        }
-                        className="rounded-md p-1 text-light-900 hover:bg-light-100 dark:text-dark-700 dark:hover:bg-dark-100"
-                      >
-                        <HiPlus size={16} />
-                      </button>
-                    </div>
-                  </div>
-                )}
-                {viewOnly && (
-                  <div className="ml-2 flex flex-shrink-0 items-center gap-2">
-                    <div className="flex items-center gap-1 rounded-full border-[1px] border-light-300 px-2 py-1 dark:border-dark-300">
-                      <CircularProgress
-                        progress={progress}
-                        size="sm"
-                        className="flex-shrink-0"
-                      />
-                      <span className="text-[11px] text-light-900 dark:text-dark-700">
-                        {completedItems.length}/{checklist.items.length}
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              <div className="ml-1">
-                {checklist.items.map((item) => (
-                  <ChecklistItemRow
-                    key={item.publicId}
-                    item={{
-                      publicId: item.publicId,
-                      title: item.title,
-                      completed: item.completed,
-                    }}
-                    cardPublicId={cardPublicId}
-                    viewOnly={viewOnly}
-                  />
-                ))}
-              </div>
-
-              {activeChecklistForm === checklist.publicId && !viewOnly && (
-                <div className="ml-1">
-                  <NewChecklistItemForm
-                    checklistPublicId={checklist.publicId}
-                    cardPublicId={cardPublicId}
-                    onCancel={() => setActiveChecklistForm?.(null)}
-                    readOnly={viewOnly}
-                  />
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
--- a/apps/web/src/views/card/components/Comment.tsx
+++ b/apps/web/src/views/card/components/Comment.tsx
@@ -27,7 +27,6 @@ const Comment = ({
  isAuthor,
  isAdmin,
  isEdited = false,
-  isViewOnly = false,
 }: {
  publicId: string | undefined;
  cardPublicId: string;
@@ -39,7 +38,6 @@ const Comment = ({
  isAuthor: boolean;
  isAdmin: boolean;
  isEdited: boolean;
-  isViewOnly: boolean;
 }) => {
  const [isEditing, setIsEditing] = useState(false);
  const utils = api.useUtils();
@@ -126,7 +124,7 @@ const Comment = ({
          </p>
        </div>

-        {dropdownItems.length > 0 && !isViewOnly && (
+        {dropdownItems.length > 0 && (
          <div className="absolute right-4 top-4">
            <Dropdown items={dropdownItems}>
              <HiEllipsisHorizontal className="h-5 w-5 text-light-900 dark:text-dark-800" />
--- a/apps/web/src/views/card/components/DeleteChecklistConfirmation.tsx
+++ b/apps/web/src/views/card/components/DeleteChecklistConfirmation.tsx
@@ -1,71 +0,0 @@
-import { t } from "@lingui/core/macro";
-
-import Button from "~/components/Button";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-import { api } from "~/utils/api";
-
-export function DeleteChecklistConfirmation({
-  cardPublicId,
-  checklistPublicId,
-}: {
-  cardPublicId: string;
-  checklistPublicId: string;
-}) {
-  const { closeModal } = useModal();
-  const { showPopup } = usePopup();
-  const utils = api.useUtils();
-
-  const deleteChecklist = api.checklist.delete.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.filter(
-          (cl) => cl.publicId !== checklistPublicId,
-        );
-        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`,
-        message: t`Please try again later, or contact customer support.`,
-        icon: "error",
-      });
-    },
-    onSettled: async () => {
-      closeModal();
-      await utils.card.byId.invalidate({ cardPublicId });
-    },
-  });
-
-  const handleDelete = () => {
-    deleteChecklist.mutate({ checklistPublicId });
-  };
-
-  return (
-    <div className="p-5">
-      <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {t`Are you sure you want to delete this checklist?`}
-        </h2>
-        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {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()}>
-          {t`Cancel`}
-        </Button>
-        <Button onClick={handleDelete} isLoading={deleteChecklist.isPending}>
-          {t`Delete`}
-        </Button>
-      </div>
-    </div>
-  );
-}
--- a/apps/web/src/views/card/components/Dropdown.tsx
+++ b/apps/web/src/views/card/components/Dropdown.tsx
@@ -1,9 +1,5 @@
 import { t } from "@lingui/core/macro";
-import {
-  HiEllipsisHorizontal,
-  HiOutlineCheckCircle,
-  HiOutlineTrash,
-} from "react-icons/hi2";
+import { HiEllipsisHorizontal, HiOutlineTrash } from "react-icons/hi2";

 import Dropdown from "~/components/Dropdown";
 import { useModal } from "~/providers/modal";
@@ -14,13 +10,6 @@ export default function BoardDropdown() {
  return (
    <Dropdown
      items={[
-        {
-          label: t`Add checklist`,
-          action: () => openModal("ADD_CHECKLIST"),
-          icon: (
-            <HiOutlineCheckCircle className="h-[16px] w-[16px] text-dark-900" />
-          ),
-        },
        {
          label: t`Delete card`,
          action: () => openModal("DELETE_CARD"),
--- a/apps/web/src/views/card/components/LabelSelector.tsx
+++ b/apps/web/src/views/card/components/LabelSelector.tsx
@@ -113,7 +113,7 @@ export default function LabelSelector({
              </Menu.Button>
            </div>
          ) : (
-            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
              <HiMiniPlus size={22} className="pr-2" />
              {t`Add label`}
            </Menu.Button>
--- a/apps/web/src/views/card/components/ListSelector.tsx
+++ b/apps/web/src/views/card/components/ListSelector.tsx
@@ -79,7 +79,7 @@ export default function ListSelector({
          }}
          asChild
        >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
            {selectedList?.value}
          </Menu.Button>
        </CheckboxDropdown>
--- a/apps/web/src/views/card/components/MemberSelector.tsx
+++ b/apps/web/src/views/card/components/MemberSelector.tsx
@@ -112,7 +112,7 @@ export default function MemberSelector({
          createNewItemLabel={t`Invite member`}
          asChild
        >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 py-1 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
            {selectedMembers.length ? (
              <div className="isolate flex justify-end -space-x-1 overflow-hidden">
                {selectedMembers.map(({ value, imageUrl }) => (
--- a/apps/web/src/views/card/components/NewChecklistForm.tsx
+++ b/apps/web/src/views/card/components/NewChecklistForm.tsx
@@ -1,140 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { HiXMark } from "react-icons/hi2";
-
-import { generateUID } from "@kan/shared/utils";
-
-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 NewChecklistFormInput {
-  name: string;
-  cardPublicId: string;
-}
-
-export function NewChecklistForm({ cardPublicId }: { cardPublicId: string }) {
-  const { closeModal, setModalState } = useModal();
-  const { showPopup } = usePopup();
-
-  const utils = api.useUtils();
-
-  const { register, handleSubmit, reset, watch } =
-    useForm<NewChecklistFormInput>({
-      defaultValues: {
-        name: "Checklist",
-        cardPublicId,
-      },
-    });
-
-  const createChecklist = api.checklist.create.useMutation({
-    onMutate: async (args) => {
-      await utils.card.byId.cancel({ cardPublicId: args.cardPublicId });
-      const previous = utils.card.byId.getData({
-        cardPublicId: args.cardPublicId,
-      });
-      utils.card.byId.setData({ cardPublicId: args.cardPublicId }, (old) => {
-        if (!old) return old as any;
-        const placeholderChecklist = {
-          publicId: `PLACEHOLDER_${generateUID()}`,
-          name: args.name,
-          index: old.checklists.length,
-          items: [] as {
-            publicId: string;
-            title: string;
-            completed: boolean;
-            index: number;
-          }[],
-        };
-        return {
-          ...old,
-          checklists: [...old.checklists, placeholderChecklist],
-        } as typeof old;
-      });
-      return { previous };
-    },
-    onSuccess: (data) => {
-      setModalState("ADD_CHECKLIST", { createdChecklistId: data.publicId });
-    },
-    onError: (_error, vars, ctx) => {
-      if (ctx?.previous)
-        utils.card.byId.setData(
-          { cardPublicId: vars.cardPublicId },
-          ctx.previous,
-        );
-      showPopup({
-        header: t`Unable to create checklist`,
-        message: t`Please try again later, or contact customer support.`,
-        icon: "error",
-      });
-    },
-    onSettled: async (_data, _error, vars) => {
-      await utils.card.byId.invalidate({ cardPublicId: vars.cardPublicId });
-    },
-  });
-
-  useEffect(() => {
-    const nameElement: HTMLElement | null =
-      document.querySelector<HTMLElement>("#checklist-name");
-    if (nameElement) nameElement.focus();
-  }, []);
-
-  const onSubmit = (data: NewChecklistFormInput) => {
-    closeModal();
-    reset({
-      name: "",
-    });
-
-    createChecklist.mutate({
-      name: data.name,
-      cardPublicId: data.cardPublicId,
-    });
-  };
-
-  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`New checklist`}
-          </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="checklist-name"
-          placeholder={t`Checklist name`}
-          {...register("name")}
-          onKeyDown={async (e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              await handleSubmit(onSubmit)();
-            }
-          }}
-        />
-      </div>
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        <div>
-          <Button
-            type="submit"
-            disabled={createChecklist.isPending || !watch("name")}
-          >
-            {t`Create checklist`}
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
-}
--- a/apps/web/src/views/card/components/NewChecklistItemForm.tsx
+++ b/apps/web/src/views/card/components/NewChecklistItemForm.tsx
@@ -1,167 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { useEffect, useRef } from "react";
-import ContentEditable from "react-contenteditable";
-import { useForm } from "react-hook-form";
-
-import { generateUID } from "@kan/shared/utils";
-
-import { usePopup } from "~/providers/popup";
-import { api } from "~/utils/api";
-
-interface FormValues {
-  title: string;
-}
-
-interface NewChecklistItemFormProps {
-  checklistPublicId: string;
-  cardPublicId: string;
-  onCancel: () => void;
-  readOnly?: boolean;
-}
-
-const NewChecklistItemForm = ({
-  checklistPublicId,
-  cardPublicId,
-  onCancel,
-  readOnly = false,
-}: NewChecklistItemFormProps) => {
-  const utils = api.useUtils();
-  const { showPopup } = usePopup();
-
-  const { setValue, watch, reset, getValues } = useForm<FormValues>({
-    defaultValues: {
-      title: "",
-    },
-  });
-
-  const title = watch("title");
-
-  const editableRef = useRef<HTMLElement | null>(null);
-  const keepOpenRef = useRef(false);
-
-  const refocusEditable = () => {
-    const el = editableRef.current;
-    if (!el) return;
-    if (readOnly) return;
-    el.focus();
-
-    // hack to ensure the input is focused after creating new checklist item
-    setTimeout(() => {
-      el.focus();
-    }, 100);
-  };
-
-  const addChecklistItemMutation = api.checklist.createItem.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 placeholder = {
-          publicId: `PLACEHOLDER_${generateUID()}`,
-          title: vars.title,
-          completed: false,
-        };
-        const updatedChecklists = old.checklists.map((cl) =>
-          cl.publicId === checklistPublicId
-            ? { ...cl, items: [...cl.items, placeholder] }
-            : cl,
-        );
-        return { ...old, checklists: updatedChecklists } as typeof old;
-      });
-
-      if (keepOpenRef.current) {
-        reset({ title: "" });
-        if (editableRef.current) editableRef.current.innerHTML = "";
-        refocusEditable();
-      } else {
-        onCancel();
-      }
-
-      return { previous };
-    },
-    onError: (_err, _vars, ctx) => {
-      if (ctx?.previous)
-        utils.card.byId.setData({ cardPublicId }, ctx.previous);
-      showPopup({
-        header: t`Unable to add checklist item`,
-        message: t`Please try again later, or contact customer support.`,
-        icon: "error",
-      });
-    },
-    onSettled: async () => {
-      await utils.card.byId.invalidate({ cardPublicId });
-    },
-  });
-
-  const sanitizeHtmlToPlainText = (html: string): string => {
-    return html
-      .replace(/<br\s*\/?>(\n)?/gi, "\n")
-      .replace(/<div><br\s*\/?><\/div>/gi, "")
-      .replace(/<[^>]*>/g, "")
-      .replace(/&nbsp;/g, " ")
-      .trim();
-  };
-
-  const submitIfNotEmpty = (keepOpen: boolean) => {
-    if (readOnly) return;
-    keepOpenRef.current = keepOpen;
-    const currentHtml = getValues("title") ?? "";
-    const plain = sanitizeHtmlToPlainText(currentHtml);
-    if (!plain) {
-      onCancel();
-      return;
-    }
-    addChecklistItemMutation.mutate({
-      checklistPublicId,
-      title: plain,
-    });
-  };
-
-  useEffect(() => {
-    refocusEditable();
-  }, []);
-
-  return (
-    <form onSubmit={(e) => e.preventDefault()}>
-      <div className="group relative flex h-9 items-center gap-3 rounded-md pl-4 hover:bg-light-100 dark:hover:bg-dark-100">
-        <label className="relative inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-default items-center justify-center">
-          <input
-            type="checkbox"
-            disabled
-            className="peer h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 hover:border-light-500 hover:bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500"
-          />
-        </label>
-        <div className="flex-1 pr-7">
-          <ContentEditable
-            id={`checklist-item-input-${checklistPublicId}`}
-            tabIndex={readOnly ? -1 : 0}
-            placeholder={t`Add an item...`}
-            html={title}
-            disabled={readOnly}
-            onChange={(e) => setValue("title", e.target.value)}
-            className="m-0 min-h-[20px] w-full p-0 text-sm leading-5 text-light-900 outline-none focus-visible:outline-none dark:text-dark-950"
-            onBlur={() => submitIfNotEmpty(false)}
-            onKeyDown={async (e) => {
-              if (readOnly) return;
-              if (e.key === "Enter") {
-                e.preventDefault();
-                submitIfNotEmpty(true);
-              }
-              if (e.key === "Escape") {
-                e.preventDefault();
-                onCancel();
-              }
-            }}
-            innerRef={(el) => {
-              editableRef.current = (el as unknown as HTMLElement) ?? null;
-            }}
-          />
-        </div>
-      </div>
-    </form>
-  );
-};
-
-export default NewChecklistItemForm;
--- a/apps/web/src/views/card/components/NewCommentForm.tsx
+++ b/apps/web/src/views/card/components/NewCommentForm.tsx
@@ -51,7 +51,7 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
-      className="flex w-full max-w-[800px] flex-col rounded-xl border border-light-600 bg-light-100 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
+      className="flex w-full max-w-[1000px] flex-col rounded-xl border border-light-600 bg-light-200 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
    >
      <ContentEditable
        placeholder={t`Add a comment...`}
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -1,13 +1,11 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
-import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { IoChevronForwardSharp } from "react-icons/io5";

 import Avatar from "~/components/Avatar";
 import Editor from "~/components/Editor";
-import FeedbackModal from "~/components/FeedbackModal";
 import { LabelForm } from "~/components/LabelForm";
 import LabelIcon from "~/components/LabelIcon";
 import Modal from "~/components/modal";
@@ -20,15 +18,12 @@ import { api } from "~/utils/api";
 import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
 import { DeleteLabelConfirmation } from "../../components/DeleteLabelConfirmation";
 import ActivityList from "./components/ActivityList";
-import Checklists from "./components/Checklists";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
-import { DeleteChecklistConfirmation } from "./components/DeleteChecklistConfirmation";
 import { DeleteCommentConfirmation } from "./components/DeleteCommentConfirmation";
 import Dropdown from "./components/Dropdown";
 import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import MemberSelector from "./components/MemberSelector";
-import { NewChecklistForm } from "./components/NewChecklistForm";
 import NewCommentForm from "./components/NewCommentForm";

 interface FormValues {
@@ -104,7 +99,7 @@ export function CardRightPanel() {
    }) ?? [];

  return (
-    <div className="h-full w-[360px] border-l-[1px] border-light-300 bg-light-50 p-8 text-light-900 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900">
+    <div className="h-full w-[360px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
      <div className="mb-4 flex w-full flex-row">
        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`List`}</p>
        <ListSelector
@@ -136,19 +131,9 @@ export function CardRightPanel() {
 export default function CardPage() {
  const router = useRouter();
  const utils = api.useUtils();
-  const {
-    modalContentType,
-    entityId,
-    openModal,
-    getModalState,
-    clearModalState,
-    isOpen,
-  } = useModal();
+  const { modalContentType, entityId } = useModal();
  const { showPopup } = usePopup();
  const { workspace } = useWorkspace();
-  const [activeChecklistForm, setActiveChecklistForm] = useState<string | null>(
-    null,
-  );

  const cardId = Array.isArray(router.query.cardId)
    ? router.query.cardId[0]
@@ -195,17 +180,6 @@ export default function CardPage() {
    });
  };

-  // Open the new item form after creating a new checklist
-  useEffect(() => {
-    if (!card) return;
-    const state = getModalState("ADD_CHECKLIST");
-    const createdId: string | undefined = state?.createdChecklistId;
-    if (createdId) {
-      setActiveChecklistForm(createdId);
-      clearModalState("ADD_CHECKLIST");
-    }
-  }, [card, getModalState, clearModalState]);
-
  if (!cardId) return <></>;

  return (
@@ -213,179 +187,121 @@ export default function CardPage() {
      <PageHead
        title={t`${card?.title ?? "Card"} | ${board?.name ?? "Board"}`}
      />
-      <div className="flex h-full flex-1 flex-row overflow-hidden">
-        <div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] w-full flex-1 overflow-y-auto scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 hover:scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 dark:hover:scrollbar-thumb-dark-300">
-          <div className="p-auto mx-auto flex h-full w-full max-w-[800px] flex-col">
-            <div className="p-6 md:p-8">
-              <div className="mb-8 flex w-full items-center justify-between md:mt-6">
-                {!card && isLoading && (
-                  <div className="flex space-x-2">
-                    <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
-                    <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
-                  </div>
-                )}
-                {card && (
-                  <>
-                    <Link
-                      className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
-                      href={`/boards/${board?.publicId}`}
-                    >
-                      {board?.name}
-                    </Link>
-                    <IoChevronForwardSharp
-                      size={18}
-                      className="mx-2 text-light-900 dark:text-dark-900"
-                    />
-                    <form
-                      onSubmit={handleSubmit(onSubmit)}
-                      className="w-full space-y-6"
-                    >
-                      <div>
-                        <input
-                          type="text"
-                          id="title"
-                          {...register("title")}
-                          onBlur={handleSubmit(onSubmit)}
-                          className="block w-full border-0 bg-transparent p-0 py-0 font-bold tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
-                        />
-                      </div>
-                    </form>
-                    <div className="flex">
-                      <Dropdown />
-                    </div>
-                  </>
-                )}
-                {!card && !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]">
-                    {t`Card not found`}
-                  </p>
-                )}
-              </div>
+      <div className="flex h-full flex-1 flex-row">
+        <div className="flex h-full w-full flex-col overflow-hidden">
+          <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-6 md:p-8">
+            <div className="mb-8 flex w-full items-center justify-between">
+              {!card && isLoading && (
+                <div className="flex space-x-2">
+                  <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+                  <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+                </div>
+              )}
              {card && (
                <>
-                  <div className="mb-10 flex w-full max-w-2xl flex-col justify-between">
-                    <form
-                      onSubmit={handleSubmit(onSubmit)}
-                      className="w-full space-y-6"
-                    >
-                      <div className="mt-2">
-                        <Editor
-                          content={card.description}
-                          onChange={(e) => setValue("description", e)}
-                          onBlur={() => handleSubmit(onSubmit)()}
-                          workspaceMembers={board?.workspace.members ?? []}
-                        />
-                      </div>
-                    </form>
-                  </div>
-                  <Checklists
-                    checklists={card.checklists}
-                    cardPublicId={cardId}
-                    activeChecklistForm={activeChecklistForm}
-                    setActiveChecklistForm={setActiveChecklistForm}
+                  <Link
+                    className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
+                    href={`/boards/${board?.publicId}`}
+                  >
+                    {board?.name}
+                  </Link>
+                  <IoChevronForwardSharp
+                    size={18}
+                    className="mx-2 text-light-900 dark:text-dark-900"
                  />
-                  <div className="border-t-[1px] border-light-300 pt-12 dark:border-dark-300">
-                    <h2 className="text-md pb-4 font-medium text-light-1000 dark:text-dark-1000">
-                      {t`Activity`}
-                    </h2>
+                  <form
+                    onSubmit={handleSubmit(onSubmit)}
+                    className="w-full space-y-6"
+                  >
                    <div>
-                      <ActivityList
-                        cardPublicId={cardId}
-                        activities={activities ?? []}
-                        isLoading={!card}
-                        isAdmin={workspace.role === "admin"}
+                      <input
+                        type="text"
+                        id="title"
+                        {...register("title")}
+                        onBlur={handleSubmit(onSubmit)}
+                        className="block w-full border-0 bg-transparent p-0 py-0 font-bold tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
                      />
                    </div>
-                    <div className="mt-6">
-                      <NewCommentForm cardPublicId={cardId} />
-                    </div>
+                  </form>
+                  <div className="flex">
+                    <Dropdown />
                  </div>
                </>
              )}
+              {!card && !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]">
+                  {t`Card not found`}
+                </p>
+              )}
            </div>
+            {card && (
+              <>
+                <div className="mb-10 flex w-full max-w-2xl flex-col justify-between">
+                  <form
+                    onSubmit={handleSubmit(onSubmit)}
+                    className="w-full space-y-6"
+                  >
+                    <div className="mt-2">
+                      <Editor
+                        content={card.description}
+                        onChange={(e) => setValue("description", e)}
+                        onBlur={() => handleSubmit(onSubmit)()}
+                      />
+                    </div>
+                  </form>
+                </div>
+                <div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-400">
+                  <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
+                    {t`Activity`}
+                  </h2>
+                  <div>
+                    <ActivityList
+                      cardPublicId={cardId}
+                      activities={activities ?? []}
+                      isLoading={!card}
+                      isAdmin={workspace.role === "admin"}
+                    />
+                  </div>
+                  <div className="mt-6">
+                    <NewCommentForm cardPublicId={cardId} />
+                  </div>
+                </div>
+              </>
+            )}
          </div>
        </div>

-        <>
-          <Modal
-            modalSize="md"
-            isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-          >
-            <FeedbackModal />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "NEW_LABEL"}
-          >
+        <Modal>
+          {modalContentType === "NEW_LABEL" && (
            <LabelForm boardPublicId={boardId ?? ""} refetch={refetchCard} />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "EDIT_LABEL"}
-          >
+          )}
+          {modalContentType === "EDIT_LABEL" && (
            <LabelForm
              boardPublicId={boardId ?? ""}
              refetch={refetchCard}
              isEdit
            />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "DELETE_LABEL"}
-          >
+          )}
+          {modalContentType === "DELETE_LABEL" && (
            <DeleteLabelConfirmation
              refetch={refetchCard}
              labelPublicId={entityId}
            />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "DELETE_CARD"}
-          >
+          )}
+          {modalContentType === "DELETE_CARD" && (
            <DeleteCardConfirmation
              boardPublicId={boardId ?? ""}
              cardPublicId={cardId}
            />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "DELETE_COMMENT"}
-          >
+          )}
+          {modalContentType === "DELETE_COMMENT" && (
            <DeleteCommentConfirmation
              cardPublicId={cardId}
              commentPublicId={entityId}
            />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-          >
-            <NewWorkspaceForm />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "ADD_CHECKLIST"}
-          >
-            <NewChecklistForm cardPublicId={cardId} />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "DELETE_CHECKLIST"}
-          >
-            <DeleteChecklistConfirmation
-              cardPublicId={cardId}
-              checklistPublicId={entityId}
-            />
-          </Modal>
-        </>
+          )}
+          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
+        </Modal>
      </div>
    </>
  );
--- a/apps/web/src/views/home/components/Layout.tsx
+++ b/apps/web/src/views/home/components/Layout.tsx
@@ -1,17 +1,17 @@
 import PatternedBackground from "~/components/PatternedBackground";
-import { useTheme } from "next-themes";
+import { useTheme } from "~/providers/theme";
 import Footer from "./Footer";
 import Header from "./Header";
 import { authClient } from "@kan/auth/client";

 export default function Layout({ children }: { children: React.ReactNode }) {
-  const { theme } = useTheme();
+  const theme = useTheme();

  const { data: session } = authClient.useSession();

  const isLoggedIn = !!session?.user;

-  const isDarkMode = theme === "dark";
+  const isDarkMode = theme.activeTheme === "dark";

  return (
    <>
--- a/apps/web/src/views/home/index.tsx
+++ b/apps/web/src/views/home/index.tsx
@@ -6,7 +6,7 @@ import { IoLogoGithub, IoLogoHackernews } from "react-icons/io";

 import Button from "~/components/Button";
 import { PageHead } from "~/components/PageHead";
-import { useTheme } from "next-themes";
+import { useTheme } from "~/providers/theme";
 import Cta from "./components/Cta";
 import FAQs from "./components/Faqs";
 import Features from "./components/Features";
@@ -14,10 +14,9 @@ import Layout from "./components/Layout";
 import Pricing from "./components/Pricing";

 export default function HomeView() {
-  const { resolvedTheme } = useTheme();
-
-  const isDarkMode = resolvedTheme === "dark";
+  const theme = useTheme();

+  const isDarkMode = theme.activeTheme === "dark";
  return (
    <Layout>
      <PageHead title="Kan.bn | The open source alternative to Trello" />
@@ -41,7 +40,7 @@ export default function HomeView() {
                </div>
              </div>

-              {/* <div className="relative overflow-hidden rounded-full bg-gradient-to-b from-light-300 to-light-400 p-[2px] dark:from-dark-300 dark:to-dark-400">
+              <div className="relative overflow-hidden rounded-full bg-gradient-to-b from-light-300 to-light-400 p-[2px] dark:from-dark-300 dark:to-dark-400">
                <div className="relative z-10 rounded-full bg-light-50 dark:bg-dark-50">
                  <Link
                    href="https://news.ycombinator.com/item?id=44157177"
@@ -59,7 +58,7 @@ export default function HomeView() {
                    </div>
                  </Link>
                </div>
-              </div> */}
+              </div>
            </div>

            <p className="mt-2 text-center text-4xl font-bold text-light-1000 dark:text-dark-1000 lg:text-5xl">
@@ -89,27 +88,19 @@ export default function HomeView() {
        </div>
        <div className="px-4">
          <div className="mb-24 rounded-[16px] border border-light-300 bg-light-50 p-1 shadow-md dark:border-dark-300 dark:bg-dark-100 lg:rounded-[24px] lg:p-2">
-            <div className="relative overflow-hidden rounded-[12px] border border-light-300 shadow-sm dark:border-dark-300 lg:rounded-[16px]">
+            <div className="overflow-hidden rounded-[12px] border border-light-300 shadow-sm dark:border-dark-300 lg:rounded-[16px]">
              <Image
-                src={`/hero-light.png`}
+                src={`/hero-${isDarkMode ? "dark" : "light"}.png`}
                alt="kanban"
                width={1100}
                height={1000}
-                className="block dark:hidden"
-              />
-              <Image
-                src={`/hero-dark.png`}
-                alt="kanban"
-                width={1100}
-                height={1000}
-                className="hidden dark:block"
              />
            </div>
          </div>
        </div>
        <div className="relative pt-10">
          <div id="features" className="absolute -top-20" />
-          <Features theme={resolvedTheme === "dark" ? "dark" : "light"} />
+          <Features theme={theme.activeTheme} />
        </div>
        <div className="relative pt-10">
          <div id="pricing" className="absolute -top-20" />
@@ -120,7 +111,7 @@ export default function HomeView() {
          <FAQs />
        </div>
        <div className="relative">
-          <Cta theme={resolvedTheme ?? "light"} />
+          <Cta theme={theme.activeTheme} />
        </div>
      </div>
    </Layout>
--- a/apps/web/src/views/members/components/InviteMemberForm.tsx
+++ b/apps/web/src/views/members/components/InviteMemberForm.tsx
@@ -1,43 +1,26 @@
-import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
-import { z } from "zod";

 import type { InviteMemberInput } from "@kan/api/types";

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

 export function InviteMemberForm() {
  const utils = api.useUtils();
-  const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
  const { closeModal } = useModal();
  const { workspace } = useWorkspace();
-  const { showPopup } = usePopup();

-  const InviteMemberSchema = z.object({
-    email: z.string().email({ message: t`Invalid email address` }),
-    workspacePublicId: z.string(),
-  });
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<InviteMemberInput>({
+  const { register, handleSubmit } = useForm<InviteMemberInput>({
    defaultValues: {
      email: "",
      workspacePublicId: workspace.publicId || "",
    },
-    resolver: zodResolver(InviteMemberSchema),
  });

  const refetchBoards = () => utils.board.all.refetch();
@@ -48,24 +31,6 @@ export function InviteMemberForm() {
      await utils.workspace.byId.refetch();
      await refetchBoards();
    },
-    onError: (error) => {
-      reset();
-      if (!isCreateAnotherEnabled) closeModal();
-
-      if (error.data?.code === "CONFLICT") {
-        showPopup({
-          header: t`Error inviting member`,
-          message: t`User is already a member of this workspace`,
-          icon: "error",
-        });
-      } else {
-        showPopup({
-          header: t`Error inviting member`,
-          message: t`Please try again later, or contact customer support.`,
-          icon: "error",
-        });
-      }
-    },
  });

  const onSubmit = (data: InviteMemberInput) => {
@@ -104,16 +69,10 @@ export function InviteMemberForm() {
              await handleSubmit(onSubmit)();
            }
          }}
-          errorMessage={errors.email?.message}
        />
      </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={t`Invite another`}
-          isChecked={isCreateAnotherEnabled}
-          onChange={() => setIsCreateAnotherEnabled(!isCreateAnotherEnabled)}
-        />
        <div>
          <Button
            type="submit"
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -7,7 +7,6 @@ import { authClient } from "@kan/auth/client";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import Dropdown from "~/components/Dropdown";
-import FeedbackModal from "~/components/FeedbackModal";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -19,7 +18,7 @@ import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation"
 import { InviteMemberForm } from "./components/InviteMemberForm";

 export default function MembersPage() {
-  const { modalContentType, openModal, isOpen } = useModal();
+  const { modalContentType, openModal } = useModal();
  const { workspace } = useWorkspace();

  const { data, isLoading } = api.workspace.byId.useQuery(
@@ -97,7 +96,7 @@ export default function MembersPage() {
        </td>
        <td
          className={twMerge(
-            "w-auto min-w-[120px] overflow-visible sm:w-[35%] sm:min-w-[150px]",
+            "w-auto min-w-[120px] sm:w-[35%] sm:min-w-[150px]",
            isLastRow && "rounded-br-lg",
          )}
        >
@@ -121,7 +120,7 @@ export default function MembersPage() {
            </div>
            <div
              className={twMerge(
-                "relative z-50",
+                "relative",
                (workspace.role !== "admin" || showSkeleton) && "hidden",
              )}
            >
@@ -155,7 +154,7 @@ export default function MembersPage() {
  return (
    <>
      <PageHead title={t`Members | ${workspace.name ?? "Workspace"}`} />
-      <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
+      <div className="m-auto h-full max-w-[1600px] p-6 px-5 md:px-28 md:py-12">
        <div className="mb-8 flex w-full justify-between">
          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
            {t`Members`}
@@ -172,10 +171,10 @@ export default function MembersPage() {
        </div>

        <div className="mt-8 flow-root">
-          <div className="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
-            <div className="inline-block min-w-full overflow-x-auto px-4 py-2 pb-16 align-middle sm:px-6 lg:px-8">
+          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full px-4 py-2 align-middle sm:px-6 lg:px-8">
              <div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
-                <table className="min-w-full divide-y divide-light-600 overflow-visible dark:divide-dark-600">
+                <table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
                  <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
                    <tr>
                      <th
@@ -192,7 +191,7 @@ export default function MembersPage() {
                      </th>
                    </tr>
                  </thead>
-                  <tbody className="divide-y divide-light-600 overflow-visible bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
+                  <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
                    {!isLoading &&
                      data?.members.map((member, index) => (
                        <TableRow
@@ -222,35 +221,11 @@ export default function MembersPage() {
          </div>
        </div>

-        <>
-          <Modal
-            modalSize="md"
-            isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-          >
-            <FeedbackModal />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-          >
-            <NewWorkspaceForm />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "INVITE_MEMBER"}
-          >
-            <InviteMemberForm />
-          </Modal>
-
-          <Modal
-            modalSize="sm"
-            isVisible={isOpen && modalContentType === "REMOVE_MEMBER"}
-          >
-            <DeleteMemberConfirmation />
-          </Modal>
-        </>
+        <Modal>
+          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
+          {modalContentType === "INVITE_MEMBER" && <InviteMemberForm />}
+          {modalContentType === "REMOVE_MEMBER" && <DeleteMemberConfirmation />}
+        </Modal>
      </div>
    </>
  );
--- a/apps/web/src/views/public/board/CardModal.tsx
+++ b/apps/web/src/views/public/board/CardModal.tsx
@@ -1,15 +1,13 @@
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
-import { useEffect, useRef, useState } from "react";
 import { HiXMark } from "react-icons/hi2";

-import Badge from "~/components/Badge";
+import { authClient } from "@kan/auth/client";
+
 import Editor from "~/components/Editor";
-import LabelIcon from "~/components/LabelIcon";
 import { useModal } from "~/providers/modal";
 import { api } from "~/utils/api";
 import ActivityList from "~/views/card/components/ActivityList";
-import Checklists from "~/views/card/components/Checklists";

 export function CardModal({
  cardPublicId,
@@ -22,9 +20,7 @@ export function CardModal({
 }) {
  const router = useRouter();
  const { closeModal, isOpen } = useModal();
-  const [showFade, setShowFade] = useState(false);
-  const [showTopFade, setShowTopFade] = useState(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const { data: session } = authClient.useSession();

  const { data, isLoading } = api.card.byId.useQuery(
    {
@@ -37,129 +33,85 @@ export function CardModal({

  const labels = data?.labels ?? [];

-  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);
-  }, [data]);
-
  return (
    <div className="flex h-full flex-1 flex-row">
      <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="h-full p-8">
-          <div className="mb-6">
-            <div className="flex w-full items-center justify-between">
-              <button
-                className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-                onClick={async (e) => {
-                  e.preventDefault();
-                  closeModal();
-
-                  setTimeout(async () => {
-                    try {
-                      await router.replace(
-                        `/${workspaceSlug}/${boardSlug}`,
-                        undefined,
-                        {
-                          shallow: true,
-                        },
-                      );
-                    } catch (error) {
-                      console.error(error);
-                    }
-                  }, 400);
-                }}
-              >
-                <HiXMark
-                  size={18}
-                  className="dark:text-dark-9000 text-light-900"
-                />
-              </button>
-              {isLoading ? (
-                <div className="flex space-x-2">
-                  <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
-                </div>
-              ) : (
-                <>
-                  <h1 className="pr-8 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-                    {data?.title}
-                  </h1>
-                </>
-              )}
-            </div>
-            {labels.length > 0 && (
-              <div className="mt-2">
-                {labels.map((label) => (
-                  <Badge
-                    key={label.publicId}
-                    value={label.name}
-                    iconLeft={<LabelIcon colourCode={label.colourCode} />}
-                  />
-                ))}
+        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
+          <div className="flex w-full items-center justify-between">
+            <button
+              className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+              onClick={async (e) => {
+                e.preventDefault();
+                closeModal();
+                try {
+                  await router.replace(
+                    `/${workspaceSlug}/${boardSlug}`,
+                    undefined,
+                    {
+                      shallow: true,
+                    },
+                  );
+                } catch (error) {
+                  console.error(error);
+                }
+              }}
+            >
+              <HiXMark
+                size={18}
+                className="dark:text-dark-9000 text-light-900"
+              />
+            </button>
+            {isLoading ? (
+              <div className="flex space-x-2">
+                <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
              </div>
+            ) : (
+              <>
+                <h1 className="font-medium leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                  {data?.title}
+                </h1>
+              </>
            )}
          </div>
+          <div className="mb-6">
+            {labels.map((label) => (
+              <div
+                key={label.publicId}
+                className="my-1 mr-1 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
+              >
+                <svg
+                  fill={label.colourCode ?? "#3730a3"}
+                  className="h-2 w-2"
+                  viewBox="0 0 6 6"
+                  aria-hidden="true"
+                >
+                  <circle cx={3} cy={3} r={3} />
+                </svg>
+                <div>{label.name}</div>
+              </div>
+            ))}
+          </div>

-          <div className="relative">
-            <div
-              ref={scrollRef}
-              className="h-full max-h-[425px] overflow-y-auto"
-            >
-              {data?.description && (
-                <div className="mb-10 flex w-full max-w-2xl justify-between">
-                  <div className="mt-2">
-                    <Editor
-                      content={data.description}
-                      readOnly
-                      workspaceMembers={data?.list.board.workspace.members ?? []}
-                    />
-                  </div>
-                </div>
-              )}
-              {data?.checklists && data.checklists.length > 0 && (
-                <Checklists
-                  checklists={data.checklists}
-                  cardPublicId={cardPublicId ?? ""}
-                  viewOnly
-                />
-              )}
-              <div className="border-t-[1px] border-light-600 pb-4 pt-12 dark:border-dark-400">
-                <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
-                  {t`Activity`}
-                </h2>
-                <div>
-                  {cardPublicId && (
-                    <ActivityList
-                      cardPublicId={cardPublicId}
-                      activities={data?.activities ?? []}
-                      isLoading={isLoading}
-                      isViewOnly={true}
-                    />
-                  )}
-                </div>
+          {data?.description && (
+            <div className="mb-10 flex w-full max-w-2xl justify-between">
+              <div className="mt-2">
+                <Editor content={data.description} readOnly />
              </div>
            </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 className="border-t-[1px] border-light-600 pb-4 pt-12 dark:border-dark-400">
+            <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
+              {t`Activity`}
+            </h2>
+            <div>
+              {cardPublicId && (
+                <ActivityList
+                  cardPublicId={cardPublicId}
+                  activities={data?.activities ?? []}
+                  isLoading={isLoading}
+                />
+              )}
+            </div>
          </div>
        </div>
      </div>
--- a/apps/web/src/views/public/board/index.tsx
+++ b/apps/web/src/views/public/board/index.tsx
@@ -2,11 +2,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { keepPreviousData } from "@tanstack/react-query";
-import { env } from "next-runtime-env";
 import { useEffect, useState } from "react";
-import { HiLink, HiOutlineLockClosed } from "react-icons/hi2";
+import { HiLink } from "react-icons/hi2";

-import Button from "~/components/Button";
 import Modal from "~/components/modal";
 import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";
@@ -20,10 +18,6 @@ import Card from "~/views/board/components/Card";
 import Filters from "~/views/board/components/Filters";
 import { CardModal } from "./CardModal";

-const IS_CLOUD = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
-const HIDE_POWERED_BY =
-  env("NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY") === "true";
-
 export default function PublicBoardView() {
  const router = useRouter();
  const { showPopup } = usePopup();
@@ -34,18 +28,13 @@ export default function PublicBoardView() {
    ? router.query.boardSlug[0]
    : router.query.boardSlug;

-  const workspaceSlug = Array.isArray(router.query.workspaceSlug)
-    ? router.query.workspaceSlug[0]
-    : router.query.workspaceSlug;
-
  const { data, isLoading } = api.board.bySlug.useQuery(
    {
      boardSlug: boardSlug ?? "",
-      workspaceSlug: workspaceSlug ?? "",
      members: formatToArray(router.query.members),
      labels: formatToArray(router.query.labels),
    },
-    { enabled: router.isReady && !!boardSlug, placeholderData: keepPreviousData },
+    { enabled: !!boardSlug, placeholderData: keepPreviousData },
  );

  const CopyBoardLink = () => {
@@ -107,7 +96,7 @@ export default function PublicBoardView() {
        <div className="relative h-full overflow-hidden rounded-md border pb-8 dark:border-dark-200">
          <PatternedBackground />
          <div className="z-10 flex w-full justify-between p-8">
-            {isLoading || !router.isReady ? (
+            {isLoading ? (
              <div className="flex space-x-2">
                <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
              </div>
@@ -116,47 +105,26 @@ export default function PublicBoardView() {
                {data?.name}
              </h1>
            )}
-            {data && (
-              <div className="z-10 flex items-center space-x-2">
-                <div className="inline-flex cursor-default items-center justify-center whitespace-nowrap rounded-md border-[1px] border-light-300 bg-light-50 px-3 py-2 text-sm font-semibold text-light-950 shadow-sm dark:border-dark-300 dark:bg-dark-50 dark:text-dark-950">
-                  <span className="mr-2">
-                    <HiOutlineLockClosed />
-                  </span>
-                  {t`View only`}
-                </div>
-                <Filters
-                  labels={data.labels ?? []}
-                  members={[]}
-                  isLoading={isLoading}
-                />
-              </div>
-            )}
+            <div className="flex items-center space-x-2">
+              <Filters
+                labels={data?.labels ?? []}
+                members={[]}
+                isLoading={isLoading}
+              />
+            </div>
          </div>

-          <div className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300">
-            {isLoading || !router.isReady ? (
+          <div className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300">
+            {isLoading ? (
              <div className="ml-[2rem] flex">
                <div className="0 mr-5 h-[500px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
                <div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
                <div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
              </div>
-            ) : !data && !isLoading && router.isReady && !!boardSlug ? (
-              <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">
-                  <HiOutlineLockClosed className="h-10 w-10 text-light-800 dark:text-dark-800" />
-                  <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
-                    {t`Board not found`}
-                  </p>
-                  <p className="text-[14px] text-light-900 dark:text-dark-900">
-                    {t`This board is private or does not exist`}
-                  </p>
-                </div>
-                <Button href={`/${workspaceSlug}`}>{t`View workspace`}</Button>
-              </div>
            ) : (
              <div className="flex">
                <div className="min-w-[2rem]" />
-                {data.lists.map((list) => (
+                {data?.lists.map((list) => (
                  <div
                    key={list.publicId}
                    className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
@@ -180,7 +148,6 @@ export default function PublicBoardView() {
                          <Card
                            title={card.title}
                            labels={card.labels}
-                            checklists={card.checklists ?? []}
                            members={[]}
                          />
                        </Link>
@@ -199,26 +166,12 @@ export default function PublicBoardView() {
            <CopyBoardLink />
          </div>

-          {IS_CLOUD && (
-            <Link
-              className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000"
-              href="/"
-            >
-              kan.bn
-            </Link>
-          )}
-
-          {!IS_CLOUD && !HIDE_POWERED_BY && (
-            <a
-              href="https://kan.bn"
-              target="_blank"
-              rel="noreferrer noopener"
-              className="absolute right-[1rem] inline-flex items-center gap-[0.175rem] rounded-full border border-light-300 bg-light-50 px-3 py-1 text-[11px] font-medium text-light-950 shadow-sm transition-colors hover:bg-light-100 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 dark:hover:bg-dark-100"
-            >
-              <span>{`Powered by`}</span>
-              <span className="font-semibold">kan.bn</span>
-            </a>
-          )}
+          <Link
+            className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000"
+            href="/"
+          >
+            kan.bn
+          </Link>
        </div>
      </div>
      <Popup />
--- a/apps/web/src/views/settings/components/Avatar.tsx
+++ b/apps/web/src/views/settings/components/Avatar.tsx
@@ -3,8 +3,6 @@ import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useState } from "react";

-import { generateUID } from "@kan/shared/utils";
-
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { getAvatarUrl } from "~/utils/helpers";
@@ -60,7 +58,7 @@ export default function Avatar({
      }

      const fileExt = file.name.split(".").pop();
-      const fileName = `${userId}/avatar-${generateUID()}.${fileExt}`;
+      const fileName = `${userId}/avatar.${fileExt}`;

      setUploading(true);

--- a/apps/web/src/views/settings/components/ChangePasswordConfirmation.tsx
+++ b/apps/web/src/views/settings/components/ChangePasswordConfirmation.tsx
@@ -1,184 +0,0 @@
-import { useRouter } from "next/navigation";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { t } from "@lingui/core/macro";
-import { useMutation } from "@tanstack/react-query";
-import { env } from "next-runtime-env";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-import { api } from "~/utils/api";
-
-const FormSchema = z
-  .object({
-    currentPassword: z.string().min(1, t`Current password is required`),
-    newPassword: z
-      .string()
-      .min(8, t`Password must be at least 8 characters`)
-      .min(1, t`New password is required`),
-    confirmPassword: z.string().min(1, t`Please confirm your new password`),
-  })
-  .refine((data) => data.newPassword === data.confirmPassword, {
-    message: t`Passwords do not match`,
-    path: ["confirmPassword"],
-  })
-  .refine((data) => data.currentPassword !== data.newPassword, {
-    message: t`New password must be different from current password`,
-    path: ["newPassword"],
-  });
-
-type FormValues = z.infer<typeof FormSchema>;
-
-export function ChangePasswordFormConfirmation() {
-  const { closeModal } = useModal();
-  const { showPopup } = usePopup();
-  const router = useRouter();
-  const utils = api.useUtils();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isValid },
-    reset,
-    setError,
-  } = useForm<FormValues>({
-    resolver: zodResolver(FormSchema),
-    mode: "onChange",
-  });
-
-  const changePasswordMutation = useMutation({
-    mutationFn: async (data: FormValues) => {
-      const response = await authClient.changePassword({
-        newPassword: data.newPassword,
-        currentPassword: data.currentPassword,
-        revokeOtherSessions: true,
-      });
-
-      if (response?.error) {
-        throw new Error(response?.error.message || "Invalid Password");
-      }
-    },
-    onSuccess: async () => {
-      closeModal();
-      showPopup({
-        header: t`Password Changed`,
-        message: t`Your password has been changed.`,
-        icon: "success",
-      });
-
-      utils.invalidate();
-      reset();
-      router.push("/");
-    },
-    onError: async (error: any) => {
-      const errorMessage = error.message.toLowerCase();
-
-      if (errorMessage.includes("invalid password")) {
-        setError("currentPassword", {
-          type: "manual",
-          message: t`The current password you entered is incorrect.`,
-        });
-      } else {
-        closeModal();
-        showPopup({
-          header: t`Error Changing Password`,
-          message: t`An unexpected error occurred. Please try again later.`,
-          icon: "error",
-        });
-      }
-    },
-  });
-
-  const onSubmit = (data: FormValues) => {
-    changePasswordMutation.mutate(data);
-  };
-
-  const handleCancel = () => {
-    reset();
-    closeModal();
-  };
-
-  return (
-    <div className="p-5">
-      <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium dark:text-white">{t`Change Password`}</h2>
-        <p className="mb-4 text-sm text-light-900">
-          {t`Enter your current password and choose a new secure password.`}
-        </p>
-      </div>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-2">
-          <div>
-            <Input
-              id="currentPassword"
-              type="password"
-              {...register("currentPassword")}
-              placeholder={t`Enter your current password`}
-            />
-            {errors.currentPassword && (
-              <p className="mt-2 text-xs text-red-400">
-                {errors.currentPassword.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <Input
-              id="newPassword"
-              type="password"
-              {...register("newPassword")}
-              placeholder={t`Enter your new password`}
-            />
-            {errors.newPassword && (
-              <p className="mt-2 text-xs text-red-400">
-                {errors.newPassword.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <Input
-              id="confirmPassword"
-              type="password"
-              {...register("confirmPassword")}
-              placeholder={t`Confirm your new password`}
-            />
-            {errors.confirmPassword && (
-              <p className="mt-2 text-xs text-red-400">
-                {errors.confirmPassword.message}
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="mt-[1.5rem] flex items-center gap-4">
-          <Button
-            variant="secondary"
-            onClick={handleCancel}
-            type="button"
-            fullWidth
-            size="lg"
-          >
-            {t`Cancel`}
-          </Button>
-          <Button
-            variant="primary"
-            type="submit"
-            disabled={!isValid || changePasswordMutation.isPending}
-            isLoading={changePasswordMutation.isPending}
-            fullWidth
-            size="lg"
-          >
-            {t`Change Password`}
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -1,11 +1,9 @@
-import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";

 import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
 import { LanguageSelector } from "~/components/LanguageSelector";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -15,7 +13,6 @@ import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import Avatar from "./components/Avatar";
-import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
 import CreateAPIKeyForm from "./components/CreateAPIKeyForm";
 import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
 import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
@@ -26,15 +23,11 @@ import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";

 export default function SettingsPage() {
-  const { modalContentType, openModal, isOpen } = useModal();
+  const { modalContentType, openModal } = useModal();
  const { workspace } = useWorkspace();
  const utils = api.useUtils();
  const { showPopup } = usePopup();
-  const router = useRouter();
-  const workspaceUrlSectionRef = useRef<HTMLDivElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const isCredentialsEnabled =
-    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+
  const { data } = api.user.getUser.useQuery();

  const {
@@ -66,24 +59,6 @@ export default function SettingsPage() {
    };
  }, [refetchIntegrations]);

-  useEffect(() => {
-    if (
-      router.query.edit === "workspace_url" &&
-      workspaceUrlSectionRef.current &&
-      scrollContainerRef.current
-    ) {
-      const element = workspaceUrlSectionRef.current;
-      const container = scrollContainerRef.current;
-
-      container.scrollTop = element.offsetTop - 40;
-
-      const input = element.querySelector('input[type="text"]');
-      if (input instanceof HTMLInputElement) {
-        input.focus();
-      }
-    }
-  }, [router.query.edit]);
-
  const { mutateAsync: disconnectTrello } =
    api.integration.disconnect.useMutation({
      onSuccess: () => {
@@ -129,12 +104,9 @@ export default function SettingsPage() {
  return (
    <>
      <div className="flex h-full w-full flex-col overflow-hidden">
-        <div
-          ref={scrollContainerRef}
-          className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]"
-        >
+        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
-          <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
+          <div className="m-auto max-w-[1600px] px-5 py-6 md:px-28 md:py-12">
            <div className="mb-8 flex w-full justify-between">
              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
                {t`Settings`}
@@ -162,16 +134,14 @@ export default function SettingsPage() {
                workspaceName={workspace.name}
              />

-              <div ref={workspaceUrlSectionRef}>
-                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                  {t`Workspace URL`}
-                </h2>
-                <UpdateWorkspaceUrlForm
-                  workspacePublicId={workspace.publicId}
-                  workspaceUrl={workspace.slug ?? ""}
-                  workspacePlan={workspace.plan ?? "free"}
-                />
-              </div>
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Workspace URL`}
+              </h2>
+              <UpdateWorkspaceUrlForm
+                workspacePublicId={workspace.publicId}
+                workspaceUrl={workspace.slug ?? ""}
+                workspacePlan={workspace.plan ?? "free"}
+              />

              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                {t`Workspace description`}
@@ -285,25 +255,6 @@ export default function SettingsPage() {
              </div>
            </div>

-            {isCredentialsEnabled && (
-              <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                  {t`Change Password`}
-                </h2>
-                <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                  {t`You are about to change your password.`}
-                </p>
-                <div className="mt-4">
-                  <Button
-                    variant="secondary"
-                    onClick={() => openModal("CHANGE_PASSWORD")}
-                  >
-                    {t`Change Password`}
-                  </Button>
-                </div>
-              </div>
-            )}
-
            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                {t`Delete account`}
@@ -322,49 +273,18 @@ export default function SettingsPage() {
            </div>
          </div>

-          <>
-            <Modal
-              modalSize="md"
-              isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-            >
-              <FeedbackModal />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-            >
-              <NewWorkspaceForm />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
-            >
+          <Modal>
+            {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
+            {modalContentType === "DELETE_WORKSPACE" && (
              <DeleteWorkspaceConfirmation />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "UPDATE_WORKSPACE_URL"}
-            >
+            )}
+            {modalContentType === "UPDATE_WORKSPACE_URL" && (
              <CustomURLConfirmation workspacePublicId={workspace.publicId} />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
-            >
+            )}
+            {modalContentType === "DELETE_ACCOUNT" && (
              <DeleteAccountConfirmation />
-            </Modal>
-
-            <Modal
-              modalSize="sm"
-              isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
-            >
-              <ChangePasswordFormConfirmation />
-            </Modal>
-          </>
+            )}
+          </Modal>
        </div>
      </div>
    </>
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -4,7 +4,6 @@ import { fontFamily } from "tailwindcss/defaultTheme";
 import baseConfig from "@kan/tailwind-config/web";

 export default {
-  darkMode: "class",
  content: [...baseConfig.content],
  plugins: [require("@tailwindcss/typography")],
  presets: [baseConfig],
--- a/cloud/docker-compose.yml
+++ b/cloud/docker-compose.yml
@@ -23,22 +23,19 @@ services:
      - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
      - STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET}

-      # Email
+      # SMTP
      - SMTP_HOST=${SMTP_HOST}
      - SMTP_PORT=${SMTP_PORT}
      - SMTP_USER=${SMTP_USER}
      - SMTP_PASSWORD=${SMTP_PASSWORD}
      - SMTP_SECURE=${SMTP_SECURE}
      - EMAIL_FROM=${EMAIL_FROM}
-      - PLUNK_API_KEY=${PLUNK_API_KEY}
-      - PLUNK_API_URL=${PLUNK_API_URL}

      # S3 storage
      - S3_ACCESS_KEY_ID=${S3_ACCESS_KEY_ID}
      - S3_SECRET_ACCESS_KEY=${S3_SECRET_ACCESS_KEY}
      - S3_REGION=${S3_REGION}
      - S3_ENDPOINT=${S3_ENDPOINT}
-      - S3_FORCE_PATH_STYLE=${S3_FORCE_PATH_STYLE}
      - NEXT_PUBLIC_STORAGE_URL=${NEXT_PUBLIC_STORAGE_URL}
      - NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
      - NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -30,14 +30,10 @@ services:
      - S3_SECRET_ACCESS_KEY=${S3_SECRET_ACCESS_KEY}
      - S3_REGION=${S3_REGION}
      - S3_ENDPOINT=${S3_ENDPOINT}
-      - S3_FORCE_PATH_STYLE=${S3_FORCE_PATH_STYLE}
      - NEXT_PUBLIC_STORAGE_URL=${NEXT_PUBLIC_STORAGE_URL}
      - NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
      - NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}

-      # White label
-      - NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY=${NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY}
-
      # Auth config (optional)
      - NEXT_PUBLIC_ALLOW_CREDENTIALS=${NEXT_PUBLIC_ALLOW_CREDENTIALS}
      - NEXT_PUBLIC_DISABLE_SIGN_UP=${NEXT_PUBLIC_DISABLE_SIGN_UP}
@@ -46,11 +42,6 @@ services:
      - TRELLO_APP_API_KEY=${TRELLO_APP_API_KEY}
      - TRELLO_APP_SECRET=${TRELLO_APP_SECRET}

-      # Generic OIDC provider (optional)
-      - OIDC_CLIENT_ID=${OIDC_CLIENT_ID}
-      - OIDC_CLIENT_SECRET=${OIDC_CLIENT_SECRET}
-      - OIDC_DISCOVERY_URL=${OIDC_DISCOVERY_URL}
-
      # OAuth providers (optional)
      - BETTER_AUTH_TRUSTED_ORIGINS=${BETTER_AUTH_TRUSTED_ORIGINS}
      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
--- a/packages/api/src/root.ts
+++ b/packages/api/src/root.ts
@@ -1,6 +1,5 @@
 import { boardRouter } from "./routers/board";
 import { cardRouter } from "./routers/card";
-import { checklistRouter } from "./routers/checklist";
 import { feedbackRouter } from "./routers/feedback";
 import { importRouter } from "./routers/import";
 import { integrationRouter } from "./routers/integration";
@@ -14,7 +13,6 @@ import { createTRPCRouter } from "./trpc";
 export const appRouter = createTRPCRouter({
  board: boardRouter,
  card: cardRouter,
-  checklist: checklistRouter,
  feedback: feedbackRouter,
  label: labelRouter,
  list: listRouter,
--- a/packages/api/src/routers/board.ts
+++ b/packages/api/src/routers/board.ts
@@ -111,21 +111,15 @@ export const boardRouter = createTRPCRouter({
    .meta({
      openapi: {
        method: "GET",
-        path: "/workspaces/{workspaceSlug}/boards/{boardSlug}",
+        path: "/board/{boardSlug}",
        summary: "Get board by slug",
-        description:
-          "Retrieves a board by its slug within a specific workspace",
+        description: "Retrieves a board by its slug",
        tags: ["Boards"],
        protect: false,
      },
    })
    .input(
      z.object({
-        workspaceSlug: z
-          .string()
-          .min(3)
-          .max(24)
-          .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/),
        boardSlug: z
          .string()
          .min(3)
@@ -137,26 +131,10 @@ export const boardRouter = createTRPCRouter({
    )
    .output(z.custom<Awaited<ReturnType<typeof boardRepo.getBySlug>>>())
    .query(async ({ ctx, input }) => {
-      const workspace = await workspaceRepo.getBySlugWithBoards(
-        ctx.db,
-        input.workspaceSlug,
-      );
-
-      if (!workspace)
-        throw new TRPCError({
-          message: `Workspace with slug ${input.workspaceSlug} not found`,
-          code: "NOT_FOUND",
-        });
-
-      const result = await boardRepo.getBySlug(
-        ctx.db,
-        input.boardSlug,
-        workspace.id,
-        {
-          members: input.members ?? [],
-          labels: input.labels ?? [],
-        },
-      );
+      const result = await boardRepo.getBySlug(ctx.db, input.boardSlug, {
+        members: input.members ?? [],
+        labels: input.labels ?? [],
+      });

      return result;
    }),
@@ -298,21 +276,6 @@ export const boardRouter = createTRPCRouter({

      await assertUserInWorkspace(ctx.db, userId, board.workspaceId);

-      if (input.slug) {
-        const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
-          ctx.db,
-          input.slug,
-          board.workspaceId,
-        );
-
-        if (!isBoardSlugAvailable) {
-          throw new TRPCError({
-            message: `Board slug ${input.slug} is not available`,
-            code: "BAD_REQUEST",
-          });
-        }
-      }
-
      const result = await boardRepo.update(ctx.db, {
        name: input.name,
        slug: input.slug,
@@ -444,23 +407,11 @@ export const boardRouter = createTRPCRouter({
      }),
    )
    .query(async ({ ctx, input }) => {
-      const board = await boardRepo.getWorkspaceAndBoardIdByBoardPublicId(
-        ctx.db,
-        input.boardPublicId,
-      );
-
-      if (!board)
-        throw new TRPCError({
-          message: `Board with public ID ${input.boardPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
      const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
        ctx.db,
        input.boardSlug,
-        board.workspaceId,
+        input.boardPublicId,
      );
-
      return {
        isReserved: !isBoardSlugAvailable,
      };
--- a/packages/api/src/routers/checklist.ts
+++ b/packages/api/src/routers/checklist.ts
@@ -1,410 +0,0 @@
-import { TRPCError } from "@trpc/server";
-import { z } from "zod";
-
-import * as cardRepo from "@kan/db/repository/card.repo";
-import * as cardActivityRepo from "@kan/db/repository/cardActivity.repo";
-import * as checklistRepo from "@kan/db/repository/checklist.repo";
-
-import { createTRPCRouter, protectedProcedure } from "../trpc";
-import { assertUserInWorkspace } from "../utils/auth";
-
-const checklistSchema = z.object({
-  publicId: z.string().length(12),
-  name: z.string().min(1).max(255),
-});
-
-const checklistItemSchema = z.object({
-  publicId: z.string().length(12),
-  title: z.string().min(1).max(500),
-  completed: z.boolean(),
-});
-
-export const checklistRouter = createTRPCRouter({
-  create: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Add a checklist to a card",
-        method: "POST",
-        path: "/cards/{cardPublicId}/checklists",
-        description: "Adds a checklist to a card",
-        tags: ["Cards"],
-        protect: true,
-      },
-    })
-    .input(
-      z.object({
-        cardPublicId: z.string().length(12),
-        name: z.string().min(1).max(255),
-      }),
-    )
-    .output(checklistSchema)
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const card = await cardRepo.getWorkspaceAndCardIdByCardPublicId(
-        ctx.db,
-        input.cardPublicId,
-      );
-
-      if (!card)
-        throw new TRPCError({
-          message: `Card with public ID ${input.cardPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
-      await assertUserInWorkspace(ctx.db, userId, card.workspaceId);
-
-      const newChecklist = await checklistRepo.create(ctx.db, {
-        name: input.name,
-        createdBy: userId,
-        cardId: card.id,
-      });
-
-      if (!newChecklist?.id)
-        throw new TRPCError({
-          message: `Failed to create checklist`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      await cardActivityRepo.create(ctx.db, {
-        type: "card.updated.checklist.added",
-        cardId: card.id,
-        toTitle: newChecklist.name,
-        createdBy: userId,
-      });
-
-      return newChecklist;
-    }),
-  update: protectedProcedure
-    .input(
-      z.object({
-        checklistPublicId: z.string().length(12),
-        name: z.string().min(1).max(255),
-      }),
-    )
-    .output(z.object({ publicId: z.string().length(12), name: z.string() }))
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const checklist = await checklistRepo.getChecklistByPublicId(
-        ctx.db,
-        input.checklistPublicId,
-      );
-      if (!checklist)
-        throw new TRPCError({
-          message: `Checklist with public ID ${input.checklistPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
-      await assertUserInWorkspace(
-        ctx.db,
-        userId,
-        checklist.card.list.board.workspace.id,
-      );
-
-      const previousName = checklist.name;
-
-      const updated = await checklistRepo.updateChecklistById(ctx.db, {
-        id: checklist.id,
-        name: input.name,
-      });
-
-      if (!updated)
-        throw new TRPCError({
-          message: `Failed to update checklist`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      await cardActivityRepo.create(ctx.db, {
-        type: "card.updated.checklist.renamed",
-        cardId: checklist.cardId,
-        fromTitle: previousName,
-        toTitle: updated.name,
-        createdBy: userId,
-      });
-
-      return updated;
-    }),
-  delete: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Delete a checklist",
-        method: "DELETE",
-        path: "/checklists/{checklistPublicId}",
-        description: "Deletes a checklist by its public ID",
-        tags: ["Cards"],
-        protect: true,
-      },
-    })
-    .input(z.object({ checklistPublicId: z.string().length(12) }))
-    .output(z.object({ success: z.boolean() }))
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const checklist = await checklistRepo.getChecklistByPublicId(
-        ctx.db,
-        input.checklistPublicId,
-      );
-      if (!checklist)
-        throw new TRPCError({
-          message: `Checklist with public ID ${input.checklistPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
-      await assertUserInWorkspace(
-        ctx.db,
-        userId,
-        checklist.card.list.board.workspace.id,
-      );
-
-      await checklistRepo.softDeleteAllItemsByChecklistId(ctx.db, {
-        checklistId: checklist.id,
-        deletedAt: new Date(),
-        deletedBy: userId,
-      });
-
-      const deleted = await checklistRepo.softDeleteById(ctx.db, {
-        id: checklist.id,
-        deletedAt: new Date(),
-        deletedBy: userId,
-      });
-
-      if (!deleted)
-        throw new TRPCError({
-          message: `Failed to delete checklist`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      await cardActivityRepo.create(ctx.db, {
-        type: "card.updated.checklist.deleted",
-        cardId: checklist.cardId,
-        fromTitle: checklist.name,
-        createdBy: userId,
-      });
-
-      return { success: true };
-    }),
-  createItem: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Add an item to a checklist",
-        method: "POST",
-        path: "/checklists/{checklistPublicId}/items",
-        description: "Adds an item to a checklist",
-        tags: ["Cards"],
-        protect: true,
-      },
-    })
-    .input(
-      z.object({
-        checklistPublicId: z.string().length(12),
-        title: z.string().min(1).max(500),
-      }),
-    )
-    .output(checklistItemSchema)
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const checklist = await checklistRepo.getChecklistByPublicId(
-        ctx.db,
-        input.checklistPublicId,
-      );
-
-      if (!checklist)
-        throw new TRPCError({
-          message: `Checklist with public ID ${input.checklistPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
-      await assertUserInWorkspace(
-        ctx.db,
-        userId,
-        checklist.card.list.board.workspace.id,
-      );
-
-      const newChecklistItem = await checklistRepo.createItem(ctx.db, {
-        title: input.title,
-        createdBy: userId,
-        checklistId: checklist.id,
-      });
-
-      if (!newChecklistItem?.id)
-        throw new TRPCError({
-          message: `Failed to create checklist item`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      await cardActivityRepo.create(ctx.db, {
-        type: "card.updated.checklist.item.added",
-        cardId: checklist.cardId,
-        toTitle: newChecklistItem.title,
-        createdBy: userId,
-      });
-
-      return newChecklistItem;
-    }),
-  updateItem: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Update a checklist item",
-        method: "PUT",
-        path: "/checklists/items/{checklistItemPublicId}",
-        description: "Updates a checklist item (title/completed)",
-        tags: ["Cards"],
-        protect: true,
-      },
-    })
-    .input(
-      z.object({
-        checklistItemPublicId: z.string().length(12),
-        title: z.string().min(1).max(500).optional(),
-        completed: z.boolean().optional(),
-      }),
-    )
-    .output(checklistItemSchema)
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const item = await checklistRepo.getChecklistItemByPublicIdWithChecklist(
-        ctx.db,
-        input.checklistItemPublicId,
-      );
-
-      if (!item)
-        throw new TRPCError({
-          message: `Checklist item with public ID ${input.checklistItemPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
-      await assertUserInWorkspace(
-        ctx.db,
-        userId,
-        item.checklist.card.list.board.workspace.id,
-      );
-
-      const previousTitle = item.title;
-
-      const updated = await checklistRepo.updateItemById(ctx.db, {
-        id: item.id,
-        title: input.title,
-        completed: input.completed,
-      });
-
-      if (!updated)
-        throw new TRPCError({
-          message: `Failed to update checklist item`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      // Log completion toggle
-      if (input.completed !== undefined) {
-        await cardActivityRepo.create(ctx.db, {
-          type: input.completed
-            ? "card.updated.checklist.item.completed"
-            : "card.updated.checklist.item.uncompleted",
-          cardId: item.checklist.cardId,
-          toTitle: updated.title,
-          createdBy: userId,
-        });
-      }
-
-      // Log title change
-      if (input.title !== undefined && input.title !== previousTitle) {
-        await cardActivityRepo.create(ctx.db, {
-          type: "card.updated.checklist.item.updated",
-          cardId: item.checklist.cardId,
-          fromTitle: previousTitle,
-          toTitle: updated.title,
-          createdBy: userId,
-        });
-      }
-
-      return updated;
-    }),
-  deleteItem: protectedProcedure
-    .meta({
-      openapi: {
-        summary: "Delete a checklist item",
-        method: "DELETE",
-        path: "/checklists/items/{checklistItemPublicId}",
-        description: "Deletes a checklist item",
-        tags: ["Cards"],
-        protect: true,
-      },
-    })
-    .input(z.object({ checklistItemPublicId: z.string().length(12) }))
-    .output(z.object({ success: z.boolean() }))
-    .mutation(async ({ ctx, input }) => {
-      const userId = ctx.user?.id;
-      if (!userId)
-        throw new TRPCError({
-          message: `User not authenticated`,
-          code: "UNAUTHORIZED",
-        });
-
-      const item = await checklistRepo.getChecklistItemByPublicIdWithChecklist(
-        ctx.db,
-        input.checklistItemPublicId,
-      );
-      if (!item)
-        throw new TRPCError({
-          message: `Checklist item with public ID ${input.checklistItemPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
-      await assertUserInWorkspace(
-        ctx.db,
-        userId,
-        item.checklist.card.list.board.workspace.id,
-      );
-
-      const deleted = await checklistRepo.softDeleteItemById(ctx.db, {
-        id: item.id,
-        deletedAt: new Date(),
-        deletedBy: userId,
-      });
-
-      if (!deleted)
-        throw new TRPCError({
-          message: `Failed to delete item`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      await cardActivityRepo.create(ctx.db, {
-        type: "card.updated.checklist.item.deleted",
-        cardId: item.checklist.cardId,
-        fromTitle: item.title,
-        createdBy: userId,
-      });
-
-      return { success: true };
-    }),
-});
--- a/packages/api/src/routers/label.ts
+++ b/packages/api/src/routers/label.ts
@@ -8,12 +8,6 @@ import * as labelRepo from "@kan/db/repository/label.repo";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 import { assertUserInWorkspace } from "../utils/auth";

-const labelSchema = z.object({
-  publicId: z.string(),
-  name: z.string(),
-  colourCode: z.string().nullable(),
-});
-
 export const labelRouter = createTRPCRouter({
  byPublicId: protectedProcedure
    .meta({
@@ -27,7 +21,7 @@ export const labelRouter = createTRPCRouter({
      },
    })
    .input(z.object({ labelPublicId: z.string().min(12) }))
-    .output(labelSchema)
+    .output(z.custom<Awaited<ReturnType<typeof labelRepo.getByPublicId>>>())
    .query(async ({ ctx, input }) => {
      const userId = ctx.user?.id;

@@ -58,11 +52,7 @@ export const labelRouter = createTRPCRouter({
          code: "NOT_FOUND",
        });

-      return {
-        publicId: result.publicId,
-        name: result.name,
-        colourCode: result.colourCode,
-      };
+      return result;
    }),
  create: protectedProcedure
    .meta({
@@ -82,7 +72,7 @@ export const labelRouter = createTRPCRouter({
        colourCode: z.string().length(7),
      }),
    )
-    .output(labelSchema)
+    .output(z.custom<Awaited<ReturnType<typeof labelRepo.create>>>())
    .mutation(async ({ ctx, input }) => {
      const userId = ctx.user?.id;

@@ -118,11 +108,7 @@ export const labelRouter = createTRPCRouter({
          code: "INTERNAL_SERVER_ERROR",
        });

-      return {
-        publicId: result.publicId,
-        name: result.name,
-        colourCode: result.colourCode,
-      };
+      return result;
    }),
  update: protectedProcedure
    .meta({
@@ -142,7 +128,7 @@ export const labelRouter = createTRPCRouter({
        colourCode: z.string().length(7),
      }),
    )
-    .output(labelSchema)
+    .output(z.custom<Awaited<ReturnType<typeof labelRepo.update>>>())
    .mutation(async ({ ctx, input }) => {
      const userId = ctx.user?.id;

@@ -167,17 +153,7 @@ export const labelRouter = createTRPCRouter({

      const result = await labelRepo.update(ctx.db, input);

-      if (!result)
-        throw new TRPCError({
-          message: `Failed to update label`,
-          code: "INTERNAL_SERVER_ERROR",
-        });
-
-      return {
-        publicId: result.publicId,
-        name: result.name,
-        colourCode: result.colourCode,
-      };
+      return result;
    }),
  delete: protectedProcedure
    .meta({
--- a/packages/api/src/routers/member.ts
+++ b/packages/api/src/routers/member.ts
@@ -1,6 +1,7 @@
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";

+import { authClient } from "@kan/auth/client";
 import * as memberRepo from "@kan/db/repository/member.repo";
 import * as userRepo from "@kan/db/repository/user.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
@@ -56,7 +57,7 @@ export const memberRouter = createTRPCRouter({
      if (isInvitedEmailAlreadyMember) {
        throw new TRPCError({
          message: `User with email ${input.email} is already a member of this workspace`,
-          code: "CONFLICT",
+          code: "BAD_REQUEST",
        });
      }

@@ -77,28 +78,16 @@ export const memberRouter = createTRPCRouter({
          code: "INTERNAL_SERVER_ERROR",
        });

-      const { status } = await ctx.auth.api.signInMagicLink({
+      const { error } = await authClient.signIn.magicLink({
        email: input.email,
        callbackURL: `/boards?type=invite&memberPublicId=${invite.publicId}`,
      });

-      if (!status) {
-        console.error("Failed to send magic link invitation:", {
-          email: input.email,
-          callbackURL: `/boards?type=invite&memberPublicId=${invite.publicId}`,
-        });
-
-        await memberRepo.softDelete(ctx.db, {
-          memberId: invite.id,
-          deletedAt: new Date(),
-          deletedBy: userId,
-        });
-
+      if (error)
        throw new TRPCError({
-          message: `Failed to send magic link invitation to user with email ${input.email}.`,
+          message: `Failed to send magic link to user with email ${input.email}`,
          code: "INTERNAL_SERVER_ERROR",
        });
-      }

      return invite;
    }),
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -20,73 +20,58 @@ export interface User {
  stripeCustomerId?: string | null | undefined;
 }

-const createAuthWithHeaders = (
-  auth: ReturnType<typeof initAuth>,
-  headers: Headers,
-) => {
-  return {
-    api: {
-      getSession: () => auth.api.getSession({ headers }),
-      signInMagicLink: (input: { email: string; callbackURL: string }) =>
-        auth.api.signInMagicLink({
-          headers,
-          body: { email: input.email, callbackURL: input.callbackURL },
-        }),
-    },
-  };
-};
-
 interface CreateContextOptions {
  user: User | null | undefined;
  db: dbClient;
-  auth: ReturnType<typeof createAuthWithHeaders>;
 }

 export const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    user: opts.user,
    db: opts.db,
-    auth: opts.auth,
  };
 };

 export const createTRPCContext = async ({ req }: CreateNextContextOptions) => {
  const db = createDrizzleClient();
-  const baseAuth = initAuth(db);
-  const headers = new Headers(req.headers as Record<string, string>);
-  const auth = createAuthWithHeaders(baseAuth, headers);
+  const auth = initAuth(db);

-  const session = await auth.api.getSession();
+  const session = await auth.api.getSession({
+    // @ts-expect-error
+    headers: new Headers(req.headers),
+  });

-  return createInnerTRPCContext({ db, user: session?.user, auth });
+  return createInnerTRPCContext({ db, user: session?.user });
 };

 export const createNextApiContext = async (req: NextApiRequest) => {
  const db = createDrizzleClient();
-  const baseAuth = initAuth(db);
-  const headers = new Headers(req.headers as Record<string, string>);
-  const auth = createAuthWithHeaders(baseAuth, headers);
+  const auth = initAuth(db);

-  const session = await auth.api.getSession();
+  const session = await auth.api.getSession({
+    // @ts-expect-error
+    headers: new Headers(req.headers),
+  });

-  return createInnerTRPCContext({ db, user: session?.user, auth });
+  return createInnerTRPCContext({ db, user: session?.user });
 };

 export const createRESTContext = async ({ req }: CreateNextContextOptions) => {
  const db = createDrizzleClient();
-  const baseAuth = initAuth(db);
-  const headers = new Headers(req.headers as Record<string, string>);
-  const auth = createAuthWithHeaders(baseAuth, headers);
+  const auth = initAuth(db);

  let session;
  try {
-    session = await auth.api.getSession();
+    session = await auth.api.getSession({
+      // @ts-expect-error
+      headers: new Headers(req.headers),
+    });
  } catch (error) {
    console.error("Error getting session, ", error);
    throw error;
  }

-  return createInnerTRPCContext({ db, user: session?.user, auth });
+  return createInnerTRPCContext({ db, user: session?.user });
 };

 const t = initTRPC
--- a/packages/auth/src/auth.ts
+++ b/packages/auth/src/auth.ts
@@ -2,7 +2,7 @@ import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { createAuthEndpoint, createAuthMiddleware } from "better-auth/api";
-import { apiKey, genericOAuth } from "better-auth/plugins";
+import { apiKey } from "better-auth/plugins";
 import { magicLink } from "better-auth/plugins/magic-link";
 import { socialProviderList } from "better-auth/social-providers";
 import { env } from "next-runtime-env";
@@ -11,7 +11,7 @@ import type { dbClient } from "@kan/db/client";
 import * as memberRepo from "@kan/db/repository/member.repo";
 import * as userRepo from "@kan/db/repository/user.repo";
 import * as schema from "@kan/db/schema";
-import { cloudMailerClient, sendEmail } from "@kan/email";
+import { sendEmail } from "@kan/email";
 import { createStripeClient } from "@kan/stripe";

 export const configuredProviders = socialProviderList.reduce<
@@ -83,20 +83,8 @@ export const socialProvidersPlugin = () => ({
      {
        method: "GET",
      },
-      async (ctx) => {
-        const providers = ctx.context.socialProviders.map((p) =>
-          p.id.toLowerCase(),
-        );
-        // Add OIDC provider if configured
-        if (
-          process.env.OIDC_CLIENT_ID &&
-          process.env.OIDC_CLIENT_SECRET &&
-          process.env.OIDC_DISCOVERY_URL
-        ) {
-          providers.push("oidc");
-        }
-        return ctx.json(providers);
-      },
+      async (ctx) =>
+        ctx.json(ctx.context.socialProviders.map((p) => p.name.toLowerCase())),
    ),
  },
 });
@@ -174,57 +162,17 @@ export const initAuth = (db: dbClient) => {
          }
        },
      }),
-      // Generic OIDC provider
-      ...(process.env.OIDC_CLIENT_ID &&
-      process.env.OIDC_CLIENT_SECRET &&
-      process.env.OIDC_DISCOVERY_URL
-        ? [
-            genericOAuth({
-              config: [
-                {
-                  providerId: "oidc",
-                  clientId: process.env.OIDC_CLIENT_ID,
-                  clientSecret: process.env.OIDC_CLIENT_SECRET,
-                  discoveryUrl: process.env.OIDC_DISCOVERY_URL,
-                  scopes: ["openid", "email", "profile"],
-                  pkce: true,
-                },
-              ],
-            }),
-          ]
-        : []),
    ],
    databaseHooks: {
      user: {
        create: {
-          async before(user) {
+          before() {
            if (env("NEXT_PUBLIC_DISABLE_SIGN_UP")?.toLowerCase() === "true") {
-              const pendingInvitation = await memberRepo.getByEmailAndStatus(
-                db,
-                user.email,
-                "invited",
-              );
-
-              if (!pendingInvitation) {
-                return Promise.resolve(false);
-              }
-
-              return Promise.resolve(true);
+              return Promise.resolve(false);
            }
            return Promise.resolve(true);
          },
          async after(user) {
-            if (cloudMailerClient) {
-              await cloudMailerClient.events.track({
-                event: "user-signup",
-                email: user.email,
-                data: {
-                  name: user.name,
-                  userId: user.id,
-                },
-              });
-            }
-
            if (
              user.image &&
              !user.image.includes(process.env.NEXT_PUBLIC_STORAGE_DOMAIN!)
@@ -233,7 +181,6 @@ export const initAuth = (db: dbClient) => {
                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") ?? "",
--- a/packages/auth/src/client.ts
+++ b/packages/auth/src/client.ts
@@ -1,13 +1,8 @@
-import type { BetterAuthClientPlugin } from "better-auth";
-import type { BetterFetchOption } from "better-auth/react";
-import {
-  apiKeyClient,
-  genericOAuthClient,
-  magicLinkClient,
-} from "better-auth/client/plugins";
-import { createAuthClient } from "better-auth/react";
+import { BetterAuthClientPlugin } from "better-auth";
+import { apiKeyClient, magicLinkClient } from "better-auth/client/plugins";
+import { BetterFetchOption, createAuthClient } from "better-auth/react";

-import type { socialProvidersPlugin } from "./auth";
+import { socialProvidersPlugin } from "./auth";

 const socialProvidersPluginClient = {
  id: "social-providers-plugin",
@@ -26,10 +21,5 @@ const socialProvidersPluginClient = {
 } satisfies BetterAuthClientPlugin;

 export const authClient = createAuthClient({
-  plugins: [
-    magicLinkClient(),
-    apiKeyClient(),
-    genericOAuthClient(),
-    socialProvidersPluginClient,
-  ],
+  plugins: [magicLinkClient(), apiKeyClient(), socialProvidersPluginClient],
 });
--- a/Show More
+++ b/Show More